Commit db965de899db0136765ad631f994b5842e75ccdd
1 parent
25766f5a4f
Exists in
master
and in
2 other branches
added dialog persistence
Showing
61 changed files
with
609 additions
and
136 deletions
Show diff stats
src/Services/AllApiCalls.js
| 1 | import GetApis from "@/Services/GetApis.js"; | 1 | import GetApis from "@/Services/GetApis.js"; |
| 2 | import PutApis from "@/Services/PutApis.js"; | 2 | import PutApis from "@/Services/PutApis.js"; |
| 3 | 3 | ||
| 4 | export default { | 4 | export default { |
| 5 | mixins: [GetApis, PutApis], | 5 | mixins: [GetApis, PutApis], |
| 6 | data() { | 6 | data() { |
| 7 | return { | 7 | return { |
| 8 | // UploadPdf.vue | 8 | // UploadPdf.vue |
| 9 | emptyPdf: '', | 9 | emptyPdf: '', |
| 10 | // UploadFiles.vue | 10 | // UploadFiles.vue |
| 11 | trigger: '', | 11 | trigger: '', |
| 12 | pptFile: "", | 12 | pptFile: "", |
| 13 | pptFileName: "", | 13 | pptFileName: "", |
| 14 | pdfFile: "", | 14 | pdfFile: "", |
| 15 | pdfFileName: "" | 15 | pdfFileName: "", |
| 16 | courseData: [], | ||
| 17 | teachersList: [], | ||
| 16 | 18 | ||
| 17 | } | 19 | } |
| 18 | }, | 20 | }, |
| 19 | methods: { | 21 | methods: { |
| 20 | /************************** METHODS USED FOR COMMON FILES *********************/ | 22 | /************************** METHODS USED FOR COMMON FILES *********************/ |
| 21 | /* METHODS USED FOR UploadPdf.vue */ | 23 | /* METHODS USED FOR UploadPdf.vue */ |
| 22 | pdfFileSelected(e, message) { | 24 | pdfFileSelected(e, message) { |
| 23 | 25 | ||
| 24 | this.pdfFile = e.fileInBase64; | 26 | this.pdfFile = e.fileInBase64; |
| 25 | this.pdfFileName = e.selectedFileName; | 27 | this.pdfFileName = e.selectedFileName; |
| 26 | this.emptyPdf = e.emptyPdf; | 28 | this.emptyPdf = e.emptyPdf; |
| 27 | 29 | ||
| 28 | }, | 30 | }, |
| 29 | 31 | ||
| 30 | /* METHODS USED FOR UploadFiles.vue */ | 32 | /* METHODS USED FOR UploadFiles.vue */ |
| 31 | fileSelected(e, message) { | 33 | fileSelected(e, message) { |
| 32 | if (message == "uploadPPT") { | 34 | if (message == "uploadPPT") { |
| 33 | this.pptFile = e.fileInBase64; | 35 | this.pptFile = e.fileInBase64; |
| 34 | this.pptFileName = e.selectedFileName; | 36 | this.pptFileName = e.selectedFileName; |
| 35 | this.trigger = e.trigger; | 37 | this.trigger = e.trigger; |
| 36 | } | 38 | } |
| 37 | if (message == "uploadPDF") { | 39 | if (message == "uploadPDF") { |
| 38 | this.pdfFile = e.fileInBase64; | 40 | this.pdfFile = e.fileInBase64; |
| 39 | this.pdfFileName = e.selectedFileName; | 41 | this.pdfFileName = e.selectedFileName; |
| 40 | this.emptyPdf = e.trigger; | 42 | this.emptyPdf = e.trigger; |
| 41 | } | 43 | } |
| 42 | }, | 44 | }, |
| 43 | 45 | ||
| 44 | 46 | ||
| 45 | }, | 47 | }, |
| 46 | } | 48 | } |
src/Services/GetApis.js
| 1 | import ApiCalls from "@/Services/ApiCalls.js"; | 1 | import ApiCalls from "@/Services/ApiCalls.js"; |
| 2 | export default { | 2 | export default { |
| 3 | mixins: [ApiCalls], | 3 | mixins: [ApiCalls], |
| 4 | data() { | 4 | data() { |
| 5 | return { | 5 | return { |
| 6 | courseData: [], | 6 | courseData: [], |
| 7 | 7 | ||
| 8 | // dashboard.vue data properties | 8 | // dashboard.vue data properties |
| 9 | particularEvent: {}, | 9 | particularEvent: {}, |
| 10 | 10 | ||
| 11 | 11 | ||
| 12 | } | 12 | } |
| 13 | }, | 13 | }, |
| 14 | methods: { | 14 | methods: { |
| 15 | /* getParticularCourseDetail */ | 15 | /* getParticularCourseDetail */ |
| 16 | async getParticularCourseDetail(courseId) { | 16 | async getParticularCourseDetail(courseId) { |
| 17 | 17 | ||
| 18 | try { | 18 | try { |
| 19 | let response = await this.getMethod("/getParticularCourseDetail", { | 19 | let response = await this.getMethod("/getParticularCourseDetail", { |
| 20 | courseId: courseId | 20 | courseId: courseId |
| 21 | }) | 21 | }) |
| 22 | return response | 22 | return response |
| 23 | } catch (error) { | 23 | } catch (error) { |
| 24 | console.log("error in getParticularCourseDetail - ", error.message) | 24 | console.log("error in getParticularCourseDetail - ", error.message) |
| 25 | } | 25 | } |
| 26 | }, | 26 | }, |
| 27 | 27 | ||
| 28 | /* getStudentCourses - to get courseData */ | 28 | /* getStudentCourses - to get courseData */ |
| 29 | async getStudentCourses(params) { | 29 | async getStudentCourses(params) { |
| 30 | try { | 30 | try { |
| 31 | let response = await this.getMethod("/getStudentCourses", { | 31 | let response = await this.getMethod("/getStudentCourses", { |
| 32 | classId: params.classId, | 32 | classId: params.classId, |
| 33 | studentId: params.studentId | 33 | studentId: params.studentId |
| 34 | }) | 34 | }) |
| 35 | this.courseData = response.data.data; | 35 | this.courseData = response.data.data; |
| 36 | } catch (error) { | 36 | } catch (error) { |
| 37 | console.log("error in getStudentCourses - ", error.message) | 37 | console.log("error in getStudentCourses - ", error.message) |
| 38 | } | 38 | } |
| 39 | }, | 39 | }, |
| 40 | 40 | ||
| 41 | /* getCourseDiscussionesList - used in courseDiscussionForum.vue */ | 41 | /* getCourseDiscussionesList - used in courseDiscussionForum.vue */ |
| 42 | async getCourseDiscussionesList(params) { | 42 | async getCourseDiscussionesList(params) { |
| 43 | try { | 43 | try { |
| 44 | let response = await this.getMethod("/getCourseDiscussionesList", { | 44 | let response = await this.getMethod("/getCourseDiscussionesList", { |
| 45 | courseId: params.courseId, | 45 | courseId: params.courseId, |
| 46 | classId: params.classId, | 46 | classId: params.classId, |
| 47 | }) | 47 | }) |
| 48 | this.courseDiscussionItems = response.data.data | 48 | this.courseDiscussionItems = response.data.data |
| 49 | // return response | 49 | // return response |
| 50 | console.log("response of getCourseDiscussionesList - ", response) | 50 | console.log("response of getCourseDiscussionesList - ", response) |
| 51 | } catch (error) { | 51 | } catch (error) { |
| 52 | console.log("error in getCourseDiscussionesList - ", error.message) | 52 | console.log("error in getCourseDiscussionesList - ", error.message) |
| 53 | } | 53 | } |
| 54 | }, | 54 | }, |
| 55 | 55 | ||
| 56 | 56 | ||
| 57 | 57 | ||
| 58 | 58 | ||
| 59 | 59 | ||
| 60 | 60 | ||
| 61 | 61 | ||
| 62 | /***************************************************************************************************************************** */ | 62 | /***************************************************************************************************************************** */ |
| 63 | 63 | ||
| 64 | // APIS USED IN dashboard.vue | 64 | // APIS USED IN dashboard.vue |
| 65 | /* studentMeetingEvents required in dashboard to display list of latest events */ | 65 | /* studentMeetingEvents required in dashboard to display list of latest events */ |
| 66 | async studentMeetingEvents(params) { | 66 | async studentMeetingEvents(params) { |
| 67 | try { | 67 | try { |
| 68 | let response = await this.getMethod("/studentMeetingEvents", { | 68 | let response = await this.getMethod("/studentMeetingEvents", { |
| 69 | studentId: params.studentId | 69 | studentId: params.studentId |
| 70 | }) | 70 | }) |
| 71 | console.log("response of studentMeetingEvents - ", response); | 71 | console.log("response of studentMeetingEvents - ", response); |
| 72 | return response | 72 | return response |
| 73 | } catch (error) { | 73 | } catch (error) { |
| 74 | console.log("error in studentMeetingEvents - ", error.message) | 74 | console.log("error in studentMeetingEvents - ", error.message) |
| 75 | } | 75 | } |
| 76 | 76 | ||
| 77 | }, | 77 | }, |
| 78 | 78 | ||
| 79 | async getParticularMeetingEvent(params) { | 79 | async getParticularMeetingEvent(params) { |
| 80 | try { | 80 | try { |
| 81 | let response = await this.getMethod("/getParticularMeetingEvent", { | 81 | let response = await this.getMethod("/getParticularMeetingEvent", { |
| 82 | meetingEventId: params.meetingEventId | 82 | meetingEventId: params.meetingEventId |
| 83 | }) | 83 | }) |
| 84 | this.particularEvent = response.data.data | 84 | this.particularEvent = response.data.data |
| 85 | } catch (error) { | 85 | } catch (error) { |
| 86 | console.log("Error in getParticularMeetingEvent - ", error.message) | 86 | console.log("Error in getParticularMeetingEvent - ", error.message) |
| 87 | } | 87 | } |
| 88 | }, | 88 | }, |
| 89 | 89 | ||
| 90 | /************************************************************************************************************************ */ | 90 | /************************************************************************************************************************ */ |
| 91 | 91 | ||
| 92 | /* APIS USED IN LiveOnlineClass.vue */ | 92 | /* APIS USED IN LiveOnlineClass.vue */ |
| 93 | async getLiveClassesesList(params) { | 93 | async getLiveClassesesList(params) { |
| 94 | try { | 94 | try { |
| 95 | let response = await this.getMethod("/getLiveClassesesList", { | 95 | let response = await this.getMethod("/getLiveClassesesList", { |
| 96 | classId: params.classId, | 96 | classId: params.classId, |
| 97 | courseId: params.courseId, | 97 | courseId: params.courseId, |
| 98 | chapterId: params.chapterId, | 98 | chapterId: params.chapterId, |
| 99 | }) | 99 | }) |
| 100 | return response | 100 | return response |
| 101 | } catch (error) { | 101 | } catch (error) { |
| 102 | console.log(" error in getLiveClassesesList - ", error.message) | 102 | console.log(" error in getLiveClassesesList - ", error.message) |
| 103 | } | 103 | } |
| 104 | }, | 104 | }, |
| 105 | 105 | ||
| 106 | 106 | ||
| 107 | 107 | ||
| 108 | /*************************************************************************************************************************** */ | 108 | /*************************************************************************************************************************** */ |
| 109 | 109 | ||
| 110 | 110 | ||
| 111 | /* APIS USED IN announcement.vue */ | 111 | /* APIS USED IN announcement.vue */ |
| 112 | async getAnnoucementesList(params) { | 112 | async getAnnoucementesList(params) { |
| 113 | try { | 113 | try { |
| 114 | let response = await this.getMethod("/getAnnoucementesList", { | 114 | let response = await this.getMethod("/getAnnoucementesList", { |
| 115 | courseId: params.courseId | 115 | courseId: params.courseId |
| 116 | }) | 116 | }) |
| 117 | return response; | 117 | return response; |
| 118 | } catch (error) { | 118 | } catch (error) { |
| 119 | console.log("Error in getAnnoucementesList - ", error.message) | 119 | console.log("Error in getAnnoucementesList - ", error.message) |
| 120 | } | 120 | } |
| 121 | }, | ||
| 122 | |||
| 123 | /***********************************************************************************************/ | ||
| 124 | |||
| 125 | /* APIS USED IN AssignTeachers.vue */ | ||
| 126 | async getCourseesList(params) { | ||
| 127 | try { | ||
| 128 | let response = await this.getMethod("/getCourseesList", { | ||
| 129 | classId: params.classId | ||
| 130 | }) | ||
| 131 | this.courseData = response.data.data; | ||
| 132 | return response; | ||
| 133 | } catch (error) { | ||
| 134 | console.log("Error in getAnnoucementesList - ", error.message) | ||
| 135 | } | ||
| 136 | }, | ||
| 137 | async getTeachersList(params) { | ||
| 138 | try { | ||
| 139 | let response = await this.getMethod("/getTeachersList") | ||
| 140 | this.teachersList = response.data.data; | ||
| 141 | console.log("teachers list - ", this.teachersList) | ||
| 142 | return response; | ||
| 143 | } catch (error) { | ||
| 144 | console.log("Error in getAnnoucementesList - ", error.message) | ||
| 145 | } | ||
| 121 | } | 146 | } |
| 122 | 147 | ||
| 148 | |||
| 123 | }, | 149 | }, |
| 124 | } | 150 | } |
src/api/menu.js
| 1 | const adminMenu = [ | 1 | const adminMenu = [ |
| 2 | // { header: 'Apps' }, | 2 | // { header: 'Apps' }, |
| 3 | { | 3 | { |
| 4 | title: 'Dashboard', | 4 | title: 'Dashboard', |
| 5 | // group: 'apps', | 5 | // group: 'apps', |
| 6 | name: 'Dashboard', | 6 | name: 'Dashboard', |
| 7 | icon: '/static/icon/dashboard.png', | 7 | icon: '/static/icon/dashboard.png', |
| 8 | }, | 8 | }, |
| 9 | { | 9 | { |
| 10 | title: 'Class', | 10 | title: 'Class', |
| 11 | // group: 'apps', | 11 | // group: 'apps', |
| 12 | name: 'Class', | 12 | name: 'Class', |
| 13 | icon: '/static/icon/class.png', | 13 | icon: '/static/icon/class.png', |
| 14 | }, | 14 | }, |
| 15 | { | 15 | { |
| 16 | title: 'Course', | ||
| 17 | group: 'AdminCourse', | ||
| 18 | component: 'AdminCourse', | ||
| 19 | icon: '/static/icon/attendence.png', | ||
| 20 | items: [ | ||
| 21 | { name: 'AssignTeachers', title: 'Assign Teachers', component: 'AssignTeachers', action: '', }, | ||
| 22 | |||
| 23 | ] | ||
| 24 | }, | ||
| 25 | { | ||
| 16 | title: 'Section', | 26 | title: 'Section', |
| 17 | // group: 'apps', | 27 | // group: 'apps', |
| 18 | name: 'Section', | 28 | name: 'Section', |
| 19 | icon: '/static/icon/section.png', | 29 | icon: '/static/icon/section.png', |
| 20 | }, | 30 | }, |
| 21 | // { | 31 | // { |
| 22 | // title: 'Subjects', | 32 | // title: 'Subjects', |
| 23 | // name: 'Subject', | 33 | // name: 'Subject', |
| 24 | // icon: '/static/icon/subject.png', | 34 | // icon: '/static/icon/subject.png', |
| 25 | // }, | 35 | // }, |
| 26 | { | 36 | { |
| 27 | title: 'Parents', | 37 | title: 'Parents', |
| 28 | // group: 'apps', | 38 | // group: 'apps', |
| 29 | name: 'Parents', | 39 | name: 'Parents', |
| 30 | icon: '/static/icon/parents.png', | 40 | icon: '/static/icon/parents.png', |
| 31 | }, | 41 | }, |
| 32 | { | 42 | { |
| 33 | title: 'Teachers', | 43 | title: 'Teachers', |
| 34 | // group: '', | 44 | // group: '', |
| 35 | name: 'Teachers', | 45 | name: 'Teachers', |
| 36 | icon: '/static/icon/teacher.png', | 46 | icon: '/static/icon/teacher.png', |
| 37 | }, | 47 | }, |
| 38 | { | 48 | { |
| 39 | title: 'Students', | 49 | title: 'Students', |
| 40 | // group: 'apps', | 50 | // group: 'apps', |
| 41 | name: 'Students', | 51 | name: 'Students', |
| 42 | icon: '/static/icon/student.png', | 52 | icon: '/static/icon/student.png', |
| 43 | }, | 53 | }, |
| 44 | { | 54 | { |
| 45 | title: 'User', | 55 | title: 'User', |
| 46 | name: 'User', | 56 | name: 'User', |
| 47 | icon: '/static/icon/users.png', | 57 | icon: '/static/icon/users.png', |
| 48 | }, | 58 | }, |
| 49 | { | 59 | { |
| 50 | title: 'Attendance', | 60 | title: 'Attendance', |
| 51 | group: 'Attendance', | 61 | group: 'Attendance', |
| 52 | component: 'Attendance', | 62 | component: 'Attendance', |
| 53 | icon: '/static/icon/attendence.png', | 63 | icon: '/static/icon/attendence.png', |
| 54 | items: [ | 64 | items: [ |
| 55 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, | 65 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, |
| 56 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, | 66 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, |
| 57 | // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, | 67 | // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, |
| 58 | ] | 68 | ] |
| 59 | }, | 69 | }, |
| 60 | { | 70 | { |
| 61 | title: 'Exam', | 71 | title: 'Exam', |
| 62 | group: 'Exam', | 72 | group: 'Exam', |
| 63 | component: 'Exam', | 73 | component: 'Exam', |
| 64 | icon: '/static/icon/exam.png', | 74 | icon: '/static/icon/exam.png', |
| 65 | items: [ | 75 | items: [ |
| 66 | { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, | 76 | { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, |
| 67 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, | 77 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, |
| 68 | { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, | 78 | { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, |
| 69 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, | 79 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, |
| 70 | ] | 80 | ] |
| 71 | }, | 81 | }, |
| 72 | { | 82 | { |
| 73 | title: 'Marks', | 83 | title: 'Marks', |
| 74 | group: 'Mark', | 84 | group: 'Mark', |
| 75 | component: 'Mark', | 85 | component: 'Mark', |
| 76 | icon: '/static/icon/marks.png', | 86 | icon: '/static/icon/marks.png', |
| 77 | items: [ | 87 | items: [ |
| 78 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, | 88 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, |
| 79 | { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, | 89 | { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, |
| 80 | // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, | 90 | // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, |
| 81 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, | 91 | // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, |
| 82 | ] | 92 | ] |
| 83 | }, | 93 | }, |
| 84 | { | 94 | { |
| 85 | title: 'Academic', | 95 | title: 'Academic', |
| 86 | group: 'Academic', | 96 | group: 'Academic', |
| 87 | component: 'Academic', | 97 | component: 'Academic', |
| 88 | icon: '/static/icon/school.png', | 98 | icon: '/static/icon/school.png', |
| 89 | items: [ | 99 | items: [ |
| 90 | { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, | 100 | { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, |
| 91 | { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, | 101 | { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, |
| 92 | { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, | 102 | { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, |
| 93 | { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, | 103 | { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, |
| 94 | ] | 104 | ] |
| 95 | }, | 105 | }, |
| 96 | { | 106 | { |
| 97 | title: 'Administrator', | 107 | title: 'Administrator', |
| 98 | group: 'Administrator', | 108 | group: 'Administrator', |
| 99 | component: 'Administrator', | 109 | component: 'Administrator', |
| 100 | icon: '/static/icon/adminstrator.png', | 110 | icon: '/static/icon/adminstrator.png', |
| 101 | items: [ | 111 | items: [ |
| 102 | { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, | 112 | { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, |
| 103 | // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, | 113 | // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, |
| 104 | { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', }, | 114 | { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', }, |
| 105 | { name: 'Role', title: 'Role', component: 'Role', action: '', }, | 115 | { name: 'Role', title: 'Role', component: 'Role', action: '', }, |
| 106 | { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, | 116 | { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, |
| 107 | 117 | ||
| 108 | ] | 118 | ] |
| 109 | }, | 119 | }, |
| 110 | { | 120 | { |
| 111 | title: 'Payroll', | 121 | title: 'Payroll', |
| 112 | group: 'Payroll', | 122 | group: 'Payroll', |
| 113 | component: 'Payroll', | 123 | component: 'Payroll', |
| 114 | icon: '/static/icon/dollar.png', | 124 | icon: '/static/icon/dollar.png', |
| 115 | items: [ | 125 | items: [ |
| 116 | { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', }, | 126 | { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', }, |
| 117 | { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', }, | 127 | { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', }, |
| 118 | { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', }, | 128 | { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', }, |
| 119 | // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', }, | 129 | // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', }, |
| 120 | ] | 130 | ] |
| 121 | }, | 131 | }, |
| 122 | { | 132 | { |
| 123 | title: 'Notice Board', | 133 | title: 'Notice Board', |
| 124 | name: 'Notice Board', | 134 | name: 'Notice Board', |
| 125 | icon: '/static/icon/notice board.png', | 135 | icon: '/static/icon/notice board.png', |
| 126 | }, | 136 | }, |
| 127 | { | 137 | { |
| 128 | title: 'News', | 138 | title: 'News', |
| 129 | name: 'News', | 139 | name: 'News', |
| 130 | icon: '/static/icon/news.png', | 140 | icon: '/static/icon/news.png', |
| 131 | }, | 141 | }, |
| 132 | // { | 142 | // { |
| 133 | // title: 'Reminder', | 143 | // title: 'Reminder', |
| 134 | // name: 'reminder', | 144 | // name: 'reminder', |
| 135 | // icon: 'alarm_add', | 145 | // icon: 'alarm_add', |
| 136 | // }, | 146 | // }, |
| 137 | { | 147 | { |
| 138 | title: 'Time Table', | 148 | title: 'Time Table', |
| 139 | name: 'Time Table', | 149 | name: 'Time Table', |
| 140 | icon: '/static/icon/time table.png', | 150 | icon: '/static/icon/time table.png', |
| 141 | }, | 151 | }, |
| 142 | { | 152 | { |
| 143 | title: 'Library', | 153 | title: 'Library', |
| 144 | group: 'Library', | 154 | group: 'Library', |
| 145 | component: 'Library', | 155 | component: 'Library', |
| 146 | icon: '/static/icon/library.png', | 156 | icon: '/static/icon/library.png', |
| 147 | items: [ | 157 | items: [ |
| 148 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, | 158 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, |
| 149 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, | 159 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, |
| 150 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, | 160 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, |
| 151 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } | 161 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } |
| 152 | 162 | ||
| 153 | ] | 163 | ] |
| 154 | }, | 164 | }, |
| 155 | { | 165 | { |
| 156 | title: 'Report', | 166 | title: 'Report', |
| 157 | group: 'Report', | 167 | group: 'Report', |
| 158 | component: 'Report', | 168 | component: 'Report', |
| 159 | icon: '/static/icon/reports.png', | 169 | icon: '/static/icon/reports.png', |
| 160 | items: [ | 170 | items: [ |
| 161 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, | 171 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, |
| 162 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, | 172 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, |
| 163 | { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, | 173 | { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, |
| 164 | { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } | 174 | { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } |
| 165 | ] | 175 | ] |
| 166 | }, | 176 | }, |
| 167 | { | 177 | { |
| 168 | title: 'Notification', | 178 | title: 'Notification', |
| 169 | name: 'Notification', | 179 | name: 'Notification', |
| 170 | icon: '/static/icon/notification.png', | 180 | icon: '/static/icon/notification.png', |
| 171 | }, | 181 | }, |
| 172 | { | 182 | { |
| 173 | title: 'Social Media', | 183 | title: 'Social Media', |
| 174 | name: 'Social Media', | 184 | name: 'Social Media', |
| 175 | icon: '/static/icon/events.png', | 185 | icon: '/static/icon/events.png', |
| 176 | }, | 186 | }, |
| 177 | { | 187 | { |
| 178 | title: 'Gallery', | 188 | title: 'Gallery', |
| 179 | name: 'Gallery', | 189 | name: 'Gallery', |
| 180 | icon: '/static/icon/gallery.png', | 190 | icon: '/static/icon/gallery.png', |
| 181 | }, | 191 | }, |
| 182 | { | 192 | { |
| 183 | title: 'Event', | 193 | title: 'Event', |
| 184 | name: 'Event', | 194 | name: 'Event', |
| 185 | icon: '/static/icon/events.png', | 195 | icon: '/static/icon/events.png', |
| 186 | }, | 196 | }, |
| 187 | { | 197 | { |
| 188 | title: 'Account', | 198 | title: 'Account', |
| 189 | group: 'Account', | 199 | group: 'Account', |
| 190 | component: 'Account', | 200 | component: 'Account', |
| 191 | icon: '/static/icon/accounts.png', | 201 | icon: '/static/icon/accounts.png', |
| 192 | items: [ | 202 | items: [ |
| 193 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, | 203 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, |
| 194 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, | 204 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, |
| 195 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, | 205 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, |
| 196 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, | 206 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, |
| 197 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, | 207 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, |
| 198 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } | 208 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } |
| 199 | ] | 209 | ] |
| 200 | }, | 210 | }, |
| 201 | { | 211 | { |
| 202 | title: 'Holiday', | 212 | title: 'Holiday', |
| 203 | name: 'Holiday', | 213 | name: 'Holiday', |
| 204 | icon: '/static/icon/holiday.png', | 214 | icon: '/static/icon/holiday.png', |
| 205 | }, | 215 | }, |
| 206 | { | 216 | { |
| 207 | title: 'General Setting', | 217 | title: 'General Setting', |
| 208 | name: 'General Setting', | 218 | name: 'General Setting', |
| 209 | icon: '/static/icon/settings.png', | 219 | icon: '/static/icon/settings.png', |
| 210 | } | 220 | } |
| 211 | ]; | 221 | ]; |
| 212 | 222 | ||
| 213 | const libraryMenu = [{ | 223 | const libraryMenu = [{ |
| 214 | title: 'Dashboard', | 224 | title: 'Dashboard', |
| 215 | name: 'Dashboard', | 225 | name: 'Dashboard', |
| 216 | icon: '/static/icon/dashboard.png', | 226 | icon: '/static/icon/dashboard.png', |
| 217 | }, | 227 | }, |
| 218 | { | 228 | { |
| 219 | title: 'Library', | 229 | title: 'Library', |
| 220 | group: 'Library', | 230 | group: 'Library', |
| 221 | component: 'Library', | 231 | component: 'Library', |
| 222 | icon: '/static/icon/library.png', | 232 | icon: '/static/icon/library.png', |
| 223 | items: [ | 233 | items: [ |
| 224 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, | 234 | { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, |
| 225 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, | 235 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, |
| 226 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, | 236 | { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, |
| 227 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } | 237 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } |
| 228 | 238 | ||
| 229 | ] | 239 | ] |
| 230 | }, | 240 | }, |
| 231 | ]; | 241 | ]; |
| 232 | 242 | ||
| 233 | const accountMenu = [{ | 243 | const accountMenu = [{ |
| 234 | title: 'Dashboard', | 244 | title: 'Dashboard', |
| 235 | name: 'Dashboard', | 245 | name: 'Dashboard', |
| 236 | icon: '/static/icon/dashboard.png', | 246 | icon: '/static/icon/dashboard.png', |
| 237 | }, | 247 | }, |
| 238 | 248 | ||
| 239 | { | 249 | { |
| 240 | title: 'Account', | 250 | title: 'Account', |
| 241 | group: 'Account', | 251 | group: 'Account', |
| 242 | component: 'Account', | 252 | component: 'Account', |
| 243 | icon: '/static/icon/accounts.png', | 253 | icon: '/static/icon/accounts.png', |
| 244 | items: [ | 254 | items: [ |
| 245 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, | 255 | { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, |
| 246 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, | 256 | { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, |
| 247 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, | 257 | { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, |
| 248 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, | 258 | { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, |
| 249 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, | 259 | { name: 'Income', title: 'Income', component: 'Income', action: '', }, |
| 250 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } | 260 | { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } |
| 251 | ] | 261 | ] |
| 252 | }, | 262 | }, |
| 253 | ]; | 263 | ]; |
| 254 | 264 | ||
| 255 | const schoolMenu = [ | 265 | const schoolMenu = [ |
| 256 | // { header: 'Apps' }, | 266 | // { header: 'Apps' }, |
| 257 | { | 267 | { |
| 258 | title: 'Dashboard', | 268 | title: 'Dashboard', |
| 259 | // group: 'apps', | 269 | // group: 'apps', |
| 260 | name: 'View School Dashboard', | 270 | name: 'View School Dashboard', |
| 261 | icon: '/static/icon/dashboard.png', | 271 | icon: '/static/icon/dashboard.png', |
| 262 | }, | 272 | }, |
| 263 | { | 273 | { |
| 264 | title: 'School', | 274 | title: 'School', |
| 265 | // group: 'apps', | 275 | // group: 'apps', |
| 266 | name: 'School', | 276 | name: 'School', |
| 267 | icon: '/static/icon/school.png', | 277 | icon: '/static/icon/school.png', |
| 268 | }, | 278 | }, |
| 269 | { | 279 | { |
| 270 | title: 'App Version', | 280 | title: 'App Version', |
| 271 | name: 'App Version', | 281 | name: 'App Version', |
| 272 | icon: '/static/icon/phone.png', | 282 | icon: '/static/icon/phone.png', |
| 273 | } | 283 | } |
| 274 | ]; | 284 | ]; |
| 275 | 285 | ||
| 276 | const teacherMenu = [{ | 286 | const teacherMenu = [{ |
| 277 | title: 'Dashboard', | 287 | title: 'Dashboard', |
| 278 | name: 'Dashboard', | 288 | name: 'Dashboard', |
| 279 | icon: '/static/icon/dashboard.png', | 289 | icon: '/static/icon/dashboard.png', |
| 280 | }, | 290 | }, |
| 281 | { | 291 | { |
| 282 | title: 'Parents', | 292 | title: 'Parents', |
| 283 | // group: 'apps', | 293 | // group: 'apps', |
| 284 | name: 'Parents', | 294 | name: 'Parents', |
| 285 | icon: '/static/icon/parents.png', | 295 | icon: '/static/icon/parents.png', |
| 286 | }, | 296 | }, |
| 287 | { | 297 | { |
| 288 | title: 'Teachers', | 298 | title: 'Teachers', |
| 289 | // group: '', | 299 | // group: '', |
| 290 | name: 'Teachers', | 300 | name: 'Teachers', |
| 291 | icon: '/static/icon/teacher.png', | 301 | icon: '/static/icon/teacher.png', |
| 292 | }, | 302 | }, |
| 293 | { | 303 | { |
| 294 | title: 'Students', | 304 | title: 'Students', |
| 295 | // group: 'apps', | 305 | // group: 'apps', |
| 296 | name: 'Students', | 306 | name: 'Students', |
| 297 | icon: '/static/icon/student.png', | 307 | icon: '/static/icon/student.png', |
| 298 | }, | 308 | }, |
| 299 | { | 309 | { |
| 300 | title: 'Academic', | 310 | title: 'Academic', |
| 301 | group: 'Academic', | 311 | group: 'Academic', |
| 302 | component: 'Academic', | 312 | component: 'Academic', |
| 303 | icon: '/static/icon/school.png', | 313 | icon: '/static/icon/school.png', |
| 304 | items: [ | 314 | items: [ |
| 305 | { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, | 315 | { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, |
| 306 | { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, | 316 | { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, |
| 307 | { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, | 317 | { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, |
| 308 | { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, | 318 | { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, |
| 309 | ] | 319 | ] |
| 310 | }, | 320 | }, |
| 311 | { | 321 | { |
| 312 | title: 'Course', | 322 | title: 'Course', |
| 313 | group: 'Course', | 323 | group: 'Course', |
| 314 | component: 'Course', | 324 | component: 'Course', |
| 315 | icon: '/static/icon/school.png', | 325 | icon: '/static/icon/school.png', |
| 316 | items: [ | 326 | items: [ |
| 317 | { name: 'Course', title: 'Course', component: 'Course', action: '', }, | 327 | { name: 'Course', title: 'Course', component: 'Course', action: '', }, |
| 318 | { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', }, | 328 | { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', }, |
| 319 | { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', }, | 329 | { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', }, |
| 320 | { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', }, | 330 | { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', }, |
| 321 | ] | 331 | ] |
| 322 | }, | 332 | }, |
| 323 | { | 333 | { |
| 324 | title: 'Annoucement', | 334 | title: 'Annoucement', |
| 325 | // group: 'apps', | 335 | // group: 'apps', |
| 326 | name: 'Annoucement', | 336 | name: 'Annoucement', |
| 327 | icon: '/static/icon/student.png', | 337 | icon: '/static/icon/student.png', |
| 328 | }, | 338 | }, |
| 329 | { | 339 | { |
| 330 | title: 'Meeting Event', | 340 | title: 'Meeting Event', |
| 331 | // group: 'apps', | 341 | // group: 'apps', |
| 332 | name: 'Meeting Event', | 342 | name: 'Meeting Event', |
| 333 | icon: '/static/icon/student.png', | 343 | icon: '/static/icon/student.png', |
| 334 | }, | 344 | }, |
| 335 | { | 345 | { |
| 336 | title: 'Attendance', | 346 | title: 'Attendance', |
| 337 | group: 'Attendance', | 347 | group: 'Attendance', |
| 338 | component: 'Attendance', | 348 | component: 'Attendance', |
| 339 | icon: '/static/icon/attendence.png', | 349 | icon: '/static/icon/attendence.png', |
| 340 | items: [ | 350 | items: [ |
| 341 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, | 351 | { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, |
| 342 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, | 352 | { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, |
| 343 | // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, | 353 | // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, |
| 344 | ] | 354 | ] |
| 345 | }, | 355 | }, |
| 346 | { | 356 | { |
| 347 | title: 'Exam', | 357 | title: 'Exam', |
| 348 | group: 'Exam', | 358 | group: 'Exam', |
| 349 | component: 'Exam', | 359 | component: 'Exam', |
| 350 | icon: '/static/icon/exam.png', | 360 | icon: '/static/icon/exam.png', |
| 351 | items: [ | 361 | items: [ |
| 352 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, | 362 | { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, |
| 353 | { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', } | 363 | { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', } |
| 354 | ] | 364 | ] |
| 355 | }, | 365 | }, |
| 356 | { | 366 | { |
| 357 | title: 'Marks', | 367 | title: 'Marks', |
| 358 | group: 'Mark', | 368 | group: 'Mark', |
| 359 | component: 'Mark', | 369 | component: 'Mark', |
| 360 | icon: '/static/icon/marks.png', | 370 | icon: '/static/icon/marks.png', |
| 361 | items: [ | 371 | items: [ |
| 362 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', } | 372 | { name: 'Mark', title: 'Mark', component: 'Mark', action: '', } |
| 363 | ] | 373 | ] |
| 364 | }, | 374 | }, |
| 365 | { | 375 | { |
| 366 | title: 'Report', | 376 | title: 'Report', |
| 367 | group: 'Report', | 377 | group: 'Report', |
| 368 | component: 'Report', | 378 | component: 'Report', |
| 369 | icon: '/static/icon/reports.png', | 379 | icon: '/static/icon/reports.png', |
| 370 | items: [ | 380 | items: [ |
| 371 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, | 381 | { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, |
| 372 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, | 382 | { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, |
| 373 | { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, | 383 | { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, |
| 374 | { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } | 384 | { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } |
| 375 | ] | 385 | ] |
| 376 | }, | 386 | }, |
| 377 | { | 387 | { |
| 378 | title: 'Library', | 388 | title: 'Library', |
| 379 | group: 'Library', | 389 | group: 'Library', |
| 380 | component: 'Library', | 390 | component: 'Library', |
| 381 | icon: '/static/icon/library.png', | 391 | icon: '/static/icon/library.png', |
| 382 | items: [ | 392 | items: [ |
| 383 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, | 393 | { name: 'Books', title: 'Books', component: 'Books', action: '', }, |
| 384 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } | 394 | { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } |
| 385 | 395 | ||
| 386 | ] | 396 | ] |
| 387 | }, | 397 | }, |
| 388 | { | 398 | { |
| 389 | title: 'Meet', | 399 | title: 'Meet', |
| 390 | name: 'Meet', | 400 | name: 'Meet', |
| 391 | icon: '/static/icon/meet_icon_navigation.png', | 401 | icon: '/static/icon/meet_icon_navigation.png', |
| 392 | } | 402 | } |
| 393 | ]; | 403 | ]; |
| 394 | 404 | ||
| 395 | const parentMenu = [{ | 405 | const parentMenu = [{ |
| 396 | title: 'Dashboard', | 406 | title: 'Dashboard', |
| 397 | name: 'Dashboard', | 407 | name: 'Dashboard', |
| 398 | icon: '/static/icon/dashboard.png', | 408 | icon: '/static/icon/dashboard.png', |
| 399 | }, | 409 | }, |
| 400 | { | 410 | { |
| 401 | title: "Change Student", | 411 | title: "Change Student", |
| 402 | name: 'Change Students', | 412 | name: 'Change Students', |
| 403 | Vicon: "face", | 413 | Vicon: "face", |
| 404 | click: e => { | 414 | click: e => { |
| 405 | console.log(e); | 415 | console.log(e); |
| 406 | } | 416 | } |
| 407 | }]; | 417 | }]; |
| 408 | // reorder menu | 418 | // reorder menu |
| 409 | // Menu.forEach((item) => { | 419 | // Menu.forEach((item) => { |
| 410 | // if (item.items) { | 420 | // if (item.items) { |
| 411 | // item.items.sort((x, y) => { | 421 | // item.items.sort((x, y) => { |
| 412 | // let textA = x.title.toUpperCase(); | 422 | // let textA = x.title.toUpperCase(); |
| 413 | // let textB = y.title.toUpperCase(); | 423 | // let textB = y.title.toUpperCase(); |
| 414 | // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; | 424 | // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; |
| 415 | // }); | 425 | // }); |
| 416 | // } | 426 | // } |
| 417 | // }); | 427 | // }); |
| 418 | 428 | ||
| 419 | export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu }; | 429 | export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu }; |
src/components/pageHeader/AppDrawer.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-navigation-drawer | 2 | <v-navigation-drawer |
| 3 | id="appDrawer" | 3 | id="appDrawer" |
| 4 | app | 4 | app |
| 5 | fixed | 5 | fixed |
| 6 | :mini-variant.sync="mini" | 6 | :mini-variant.sync="mini" |
| 7 | :dark="$vuetify.dark" | 7 | :dark="$vuetify.dark" |
| 8 | v-model="drawer" | 8 | v-model="drawer" |
| 9 | hide-overlay | 9 | hide-overlay |
| 10 | width="260" | 10 | width="260" |
| 11 | class="white--text side-bar-color" | 11 | class="white--text side-bar-color" |
| 12 | style="height: 100%; overflow: scroll;" | 12 | style="height: 100%; overflow: scroll;" |
| 13 | > | 13 | > |
| 14 | <!-- <vue-perfect-scrollbar | 14 | <!-- <vue-perfect-scrollbar |
| 15 | class="drawer-menu--scroll side-bar-color mt-3" | 15 | class="drawer-menu--scroll side-bar-color mt-3" |
| 16 | :settings="scrollSettings" | 16 | :settings="scrollSettings" |
| 17 | >--> | 17 | >--> |
| 18 | <v-toolbar class="white" flat> | 18 | <v-toolbar class="white" flat> |
| 19 | <img | 19 | <img |
| 20 | v-bind:src="computeLogo" | 20 | v-bind:src="computeLogo" |
| 21 | height="40" | 21 | height="40" |
| 22 | width="130" | 22 | width="130" |
| 23 | class="imgLogo mb-3 mt-3" | 23 | class="imgLogo mb-3 mt-3" |
| 24 | alt="logo" | 24 | alt="logo" |
| 25 | style="margin: auto; | 25 | style="margin: auto; |
| 26 | display: block;" | 26 | display: block;" |
| 27 | /> | 27 | /> |
| 28 | </v-toolbar> | 28 | </v-toolbar> |
| 29 | <v-list dense dark> | 29 | <v-list dense dark> |
| 30 | <!-- NAVIGATION DRAWER IF ROLE IS ADMIN --> | ||
| 30 | <template v-for="(item, i) in menus" v-if="role === 'ADMIN'"> | 31 | <template v-for="(item, i) in menus" v-if="role === 'ADMIN'"> |
| 31 | <!-- {{menus}} --> | 32 | <!-- {{menus}} --> |
| 32 | <!--group with subitems--> | 33 | <!--group with subitems--> |
| 33 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action> | 34 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action> |
| 34 | <v-list-tile slot="activator" ripple="ripple"> | 35 | <v-list-tile slot="activator" ripple="ripple"> |
| 35 | <v-list-tile-action v-if="item.icon"> | 36 | <v-list-tile-action v-if="item.icon"> |
| 36 | <img :src="item.icon" width="22" alt="icons" /> | 37 | <img :src="item.icon" width="22" alt="icons" /> |
| 37 | </v-list-tile-action> | 38 | </v-list-tile-action> |
| 38 | <v-list-tile-content> | 39 | <v-list-tile-content> |
| 39 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 40 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 40 | </v-list-tile-content> | 41 | </v-list-tile-content> |
| 41 | </v-list-tile> | 42 | </v-list-tile> |
| 42 | <template v-for="(subItem, i) in item.items"> | 43 | <template v-for="(subItem, i) in item.items"> |
| 43 | <!--sub group--> | 44 | <!--sub group--> |
| 44 | <v-list-group | 45 | <v-list-group |
| 45 | v-if="subItem.items" | 46 | v-if="subItem.items" |
| 46 | :key="subItem.name" | 47 | :key="subItem.name" |
| 47 | :group="subItem.group" | 48 | :group="subItem.group" |
| 48 | sub-group="sub-group" | 49 | sub-group="sub-group" |
| 49 | > | 50 | > |
| 50 | <v-list-tile slot="activator" ripple="ripple"> | 51 | <v-list-tile slot="activator" ripple="ripple"> |
| 51 | <v-list-tile-content> | 52 | <v-list-tile-content> |
| 52 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 53 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 53 | </v-list-tile-content> | 54 | </v-list-tile-content> |
| 54 | </v-list-tile> | 55 | </v-list-tile> |
| 55 | <v-list-tile | 56 | <v-list-tile |
| 56 | v-for="(grand, i) in subItem.children" | 57 | v-for="(grand, i) in subItem.children" |
| 57 | :key="i" | 58 | :key="i" |
| 58 | :to="genChildTarget(item, grand)" | 59 | :to="genChildTarget(item, grand)" |
| 59 | :href="grand.href" | 60 | :href="grand.href" |
| 60 | ripple="ripple" | 61 | ripple="ripple" |
| 61 | > | 62 | > |
| 62 | <v-list-tile-content> | 63 | <v-list-tile-content> |
| 63 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 64 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 64 | </v-list-tile-content> | 65 | </v-list-tile-content> |
| 65 | </v-list-tile> | 66 | </v-list-tile> |
| 66 | </v-list-group> | 67 | </v-list-group> |
| 67 | <!--child item--> | 68 | <!--child item--> |
| 68 | <v-list-tile | 69 | <v-list-tile |
| 69 | v-else | 70 | v-else |
| 70 | :key="i" | 71 | :key="i" |
| 71 | :to="genChildTarget(item, subItem)" | 72 | :to="genChildTarget(item, subItem)" |
| 72 | :href="subItem.href" | 73 | :href="subItem.href" |
| 73 | :disabled="subItem.disabled" | 74 | :disabled="subItem.disabled" |
| 74 | :target="subItem.target" | 75 | :target="subItem.target" |
| 75 | ripple="ripple" | 76 | ripple="ripple" |
| 76 | > | 77 | > |
| 77 | <v-list-tile-action v-if="subItem.action"> | 78 | <v-list-tile-action v-if="subItem.action"> |
| 78 | <img | 79 | <img |
| 79 | width="30" | 80 | width="30" |
| 80 | :src="subItem.action" | 81 | :src="subItem.action" |
| 81 | :class="[subItem.actionClass || 'success--text']" | 82 | :class="[subItem.actionClass || 'success--text']" |
| 82 | /> | 83 | /> |
| 83 | </v-list-tile-action> | 84 | </v-list-tile-action> |
| 84 | <v-list-tile-content> | 85 | <v-list-tile-content> |
| 85 | <v-list-tile-title class="body-2"> | 86 | <v-list-tile-title class="body-2"> |
| 86 | <span>{{ subItem.title }}</span> | 87 | <span>{{ subItem.title }}</span> |
| 87 | </v-list-tile-title> | 88 | </v-list-tile-title> |
| 88 | </v-list-tile-content> | 89 | </v-list-tile-content> |
| 89 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 90 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 90 | </v-list-tile> | 91 | </v-list-tile> |
| 91 | </template> | 92 | </template> |
| 92 | </v-list-group> | 93 | </v-list-group> |
| 93 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 94 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 94 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 95 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 95 | <!--top-level link--> | 96 | <!--top-level link--> |
| 96 | <v-list-tile | 97 | <v-list-tile |
| 97 | v-else | 98 | v-else |
| 98 | ripple="ripple" | 99 | ripple="ripple" |
| 99 | :disabled="item.disabled" | 100 | :disabled="item.disabled" |
| 100 | :target="item.target" | 101 | :target="item.target" |
| 101 | rel="noopener" | 102 | rel="noopener" |
| 102 | :key="item.name" | 103 | :key="item.name" |
| 103 | :to="!item.href ? { name: item.name } : null" | 104 | :to="!item.href ? { name: item.name } : null" |
| 104 | :href="item.href" | 105 | :href="item.href" |
| 105 | > | 106 | > |
| 106 | <!-- <a :href="item.path"> --> | 107 | <!-- <a :href="item.path"> --> |
| 107 | <v-list-tile-action v-if="item.icon"> | 108 | <v-list-tile-action v-if="item.icon"> |
| 108 | <img :src="item.icon" width="22" alt="icons" /> | 109 | <img :src="item.icon" width="22" alt="icons" /> |
| 109 | </v-list-tile-action> | 110 | </v-list-tile-action> |
| 110 | <v-list-tile-content class="pt-2"> | 111 | <v-list-tile-content class="pt-2"> |
| 111 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 112 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 112 | </v-list-tile-content> | 113 | </v-list-tile-content> |
| 113 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 114 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 114 | <v-list-tile-action v-if="item.subAction"> | 115 | <v-list-tile-action v-if="item.subAction"> |
| 115 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 116 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 116 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 117 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 117 | </v-list-tile-action> | 118 | </v-list-tile-action> |
| 118 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 119 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 119 | <!-- </a> --> | 120 | <!-- </a> --> |
| 120 | </v-list-tile> | 121 | </v-list-tile> |
| 121 | </template> | 122 | </template> |
| 122 | <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'"> | 123 | <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'"> |
| 123 | <!-- {{menus}} --> | 124 | <!-- {{menus}} --> |
| 124 | <!--group with subitems--> | 125 | <!--group with subitems--> |
| 125 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> | 126 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> |
| 126 | <v-list-tile slot="activator" ripple="ripple"> | 127 | <v-list-tile slot="activator" ripple="ripple"> |
| 127 | <v-list-tile-action v-if="item.icon"> | 128 | <v-list-tile-action v-if="item.icon"> |
| 128 | <img :src="item.icon" width="22" alt="icons" /> | 129 | <img :src="item.icon" width="22" alt="icons" /> |
| 129 | </v-list-tile-action> | 130 | </v-list-tile-action> |
| 130 | <v-list-tile-content> | 131 | <v-list-tile-content> |
| 131 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 132 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 132 | </v-list-tile-content> | 133 | </v-list-tile-content> |
| 133 | </v-list-tile> | 134 | </v-list-tile> |
| 134 | <template v-for="(subItem, i) in item.items"> | 135 | <template v-for="(subItem, i) in item.items"> |
| 135 | <!--sub group--> | 136 | <!--sub group--> |
| 136 | <v-list-group | 137 | <v-list-group |
| 137 | v-if="subItem.items" | 138 | v-if="subItem.items" |
| 138 | :key="subItem.name" | 139 | :key="subItem.name" |
| 139 | :group="subItem.group" | 140 | :group="subItem.group" |
| 140 | sub-group="sub-group" | 141 | sub-group="sub-group" |
| 141 | > | 142 | > |
| 142 | <v-list-tile slot="activator" ripple="ripple"> | 143 | <v-list-tile slot="activator" ripple="ripple"> |
| 143 | <v-list-tile-content> | 144 | <v-list-tile-content> |
| 144 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 145 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 145 | </v-list-tile-content> | 146 | </v-list-tile-content> |
| 146 | </v-list-tile> | 147 | </v-list-tile> |
| 147 | <v-list-tile | 148 | <v-list-tile |
| 148 | v-for="(grand, i) in subItem.children" | 149 | v-for="(grand, i) in subItem.children" |
| 149 | :key="i" | 150 | :key="i" |
| 150 | :to="genChildTarget(item, grand)" | 151 | :to="genChildTarget(item, grand)" |
| 151 | :href="grand.href" | 152 | :href="grand.href" |
| 152 | ripple="ripple" | 153 | ripple="ripple" |
| 153 | > | 154 | > |
| 154 | <v-list-tile-content> | 155 | <v-list-tile-content> |
| 155 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 156 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 156 | </v-list-tile-content> | 157 | </v-list-tile-content> |
| 157 | </v-list-tile> | 158 | </v-list-tile> |
| 158 | </v-list-group> | 159 | </v-list-group> |
| 159 | <!--child item--> | 160 | <!--child item--> |
| 160 | <v-list-tile | 161 | <v-list-tile |
| 161 | v-else | 162 | v-else |
| 162 | :key="i" | 163 | :key="i" |
| 163 | :to="genChildTarget(item, subItem)" | 164 | :to="genChildTarget(item, subItem)" |
| 164 | :href="subItem.href" | 165 | :href="subItem.href" |
| 165 | :disabled="subItem.disabled" | 166 | :disabled="subItem.disabled" |
| 166 | :target="subItem.target" | 167 | :target="subItem.target" |
| 167 | ripple="ripple" | 168 | ripple="ripple" |
| 168 | > | 169 | > |
| 169 | <v-list-tile-action v-if="subItem.action"> | 170 | <v-list-tile-action v-if="subItem.action"> |
| 170 | <img | 171 | <img |
| 171 | width="30" | 172 | width="30" |
| 172 | :src="subItem.action" | 173 | :src="subItem.action" |
| 173 | :class="[subItem.actionClass || 'success--text']" | 174 | :class="[subItem.actionClass || 'success--text']" |
| 174 | /> | 175 | /> |
| 175 | </v-list-tile-action> | 176 | </v-list-tile-action> |
| 176 | <v-list-tile-content> | 177 | <v-list-tile-content> |
| 177 | <v-list-tile-title class="body-2"> | 178 | <v-list-tile-title class="body-2"> |
| 178 | <span>{{ subItem.title }}</span> | 179 | <span>{{ subItem.title }}</span> |
| 179 | </v-list-tile-title> | 180 | </v-list-tile-title> |
| 180 | </v-list-tile-content> | 181 | </v-list-tile-content> |
| 181 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 182 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 182 | </v-list-tile> | 183 | </v-list-tile> |
| 183 | </template> | 184 | </template> |
| 184 | </v-list-group> | 185 | </v-list-group> |
| 185 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 186 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 186 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 187 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 187 | <!--top-level link--> | 188 | <!--top-level link--> |
| 188 | <v-list-tile | 189 | <v-list-tile |
| 189 | v-else | 190 | v-else |
| 190 | ripple="ripple" | 191 | ripple="ripple" |
| 191 | :disabled="item.disabled" | 192 | :disabled="item.disabled" |
| 192 | :target="item.target" | 193 | :target="item.target" |
| 193 | rel="noopener" | 194 | rel="noopener" |
| 194 | :key="item.name" | 195 | :key="item.name" |
| 195 | :to="!item.href ? { name: item.name } : null" | 196 | :to="!item.href ? { name: item.name } : null" |
| 196 | :href="item.href" | 197 | :href="item.href" |
| 197 | > | 198 | > |
| 198 | <!-- <a :href="item.path"> --> | 199 | <!-- <a :href="item.path"> --> |
| 199 | <v-list-tile-action v-if="item.icon"> | 200 | <v-list-tile-action v-if="item.icon"> |
| 200 | <img :src="item.icon" width="22" alt="icons" /> | 201 | <img :src="item.icon" width="22" alt="icons" /> |
| 201 | </v-list-tile-action> | 202 | </v-list-tile-action> |
| 202 | <v-list-tile-content class="pt-2"> | 203 | <v-list-tile-content class="pt-2"> |
| 203 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 204 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 204 | </v-list-tile-content> | 205 | </v-list-tile-content> |
| 205 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 206 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 206 | <v-list-tile-action v-if="item.subAction"> | 207 | <v-list-tile-action v-if="item.subAction"> |
| 207 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 208 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 208 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 209 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 209 | </v-list-tile-action> | 210 | </v-list-tile-action> |
| 210 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 211 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 211 | <!-- </a> --> | 212 | <!-- </a> --> |
| 212 | </v-list-tile> | 213 | </v-list-tile> |
| 213 | </template> | 214 | </template> |
| 215 | <!-- NAVIGATION DRAWER IF ROLE IS LIBRARIAN --> | ||
| 214 | <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'"> | 216 | <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'"> |
| 215 | <!-- {{menus}} --> | 217 | <!-- {{menus}} --> |
| 216 | <!--group with subitems--> | 218 | <!--group with subitems--> |
| 217 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> | 219 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> |
| 218 | <v-list-tile slot="activator" ripple="ripple"> | 220 | <v-list-tile slot="activator" ripple="ripple"> |
| 219 | <v-list-tile-action v-if="item.icon"> | 221 | <v-list-tile-action v-if="item.icon"> |
| 220 | <img :src="item.icon" width="22" alt="icons" /> | 222 | <img :src="item.icon" width="22" alt="icons" /> |
| 221 | </v-list-tile-action> | 223 | </v-list-tile-action> |
| 222 | <v-list-tile-content> | 224 | <v-list-tile-content> |
| 223 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 225 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 224 | </v-list-tile-content> | 226 | </v-list-tile-content> |
| 225 | </v-list-tile> | 227 | </v-list-tile> |
| 226 | <template v-for="(subItem, i) in item.items"> | 228 | <template v-for="(subItem, i) in item.items"> |
| 227 | <!--sub group--> | 229 | <!--sub group--> |
| 228 | <v-list-group | 230 | <v-list-group |
| 229 | v-if="subItem.items" | 231 | v-if="subItem.items" |
| 230 | :key="subItem.name" | 232 | :key="subItem.name" |
| 231 | :group="subItem.group" | 233 | :group="subItem.group" |
| 232 | sub-group="sub-group" | 234 | sub-group="sub-group" |
| 233 | > | 235 | > |
| 234 | <v-list-tile slot="activator" ripple="ripple"> | 236 | <v-list-tile slot="activator" ripple="ripple"> |
| 235 | <v-list-tile-content> | 237 | <v-list-tile-content> |
| 236 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 238 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 237 | </v-list-tile-content> | 239 | </v-list-tile-content> |
| 238 | </v-list-tile> | 240 | </v-list-tile> |
| 239 | <v-list-tile | 241 | <v-list-tile |
| 240 | v-for="(grand, i) in subItem.children" | 242 | v-for="(grand, i) in subItem.children" |
| 241 | :key="i" | 243 | :key="i" |
| 242 | :to="genChildTarget(item, grand)" | 244 | :to="genChildTarget(item, grand)" |
| 243 | :href="grand.href" | 245 | :href="grand.href" |
| 244 | ripple="ripple" | 246 | ripple="ripple" |
| 245 | > | 247 | > |
| 246 | <v-list-tile-content> | 248 | <v-list-tile-content> |
| 247 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 249 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 248 | </v-list-tile-content> | 250 | </v-list-tile-content> |
| 249 | </v-list-tile> | 251 | </v-list-tile> |
| 250 | </v-list-group> | 252 | </v-list-group> |
| 251 | <!--child item--> | 253 | <!--child item--> |
| 252 | <v-list-tile | 254 | <v-list-tile |
| 253 | v-else | 255 | v-else |
| 254 | :key="i" | 256 | :key="i" |
| 255 | :to="genChildTarget(item, subItem)" | 257 | :to="genChildTarget(item, subItem)" |
| 256 | :href="subItem.href" | 258 | :href="subItem.href" |
| 257 | :disabled="subItem.disabled" | 259 | :disabled="subItem.disabled" |
| 258 | :target="subItem.target" | 260 | :target="subItem.target" |
| 259 | ripple="ripple" | 261 | ripple="ripple" |
| 260 | > | 262 | > |
| 261 | <v-list-tile-action v-if="subItem.action"> | 263 | <v-list-tile-action v-if="subItem.action"> |
| 262 | <img | 264 | <img |
| 263 | width="30" | 265 | width="30" |
| 264 | :src="subItem.action" | 266 | :src="subItem.action" |
| 265 | :class="[subItem.actionClass || 'success--text']" | 267 | :class="[subItem.actionClass || 'success--text']" |
| 266 | /> | 268 | /> |
| 267 | </v-list-tile-action> | 269 | </v-list-tile-action> |
| 268 | <v-list-tile-content> | 270 | <v-list-tile-content> |
| 269 | <v-list-tile-title class="body-2"> | 271 | <v-list-tile-title class="body-2"> |
| 270 | <span>{{ subItem.title }}</span> | 272 | <span>{{ subItem.title }}</span> |
| 271 | </v-list-tile-title> | 273 | </v-list-tile-title> |
| 272 | </v-list-tile-content> | 274 | </v-list-tile-content> |
| 273 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 275 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 274 | </v-list-tile> | 276 | </v-list-tile> |
| 275 | </template> | 277 | </template> |
| 276 | </v-list-group> | 278 | </v-list-group> |
| 277 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 279 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 278 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 280 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 279 | <!--top-level link--> | 281 | <!--top-level link--> |
| 280 | <v-list-tile | 282 | <v-list-tile |
| 281 | v-else | 283 | v-else |
| 282 | ripple="ripple" | 284 | ripple="ripple" |
| 283 | :disabled="item.disabled" | 285 | :disabled="item.disabled" |
| 284 | :target="item.target" | 286 | :target="item.target" |
| 285 | rel="noopener" | 287 | rel="noopener" |
| 286 | :key="item.name" | 288 | :key="item.name" |
| 287 | :to="!item.href ? { name: item.name } : null" | 289 | :to="!item.href ? { name: item.name } : null" |
| 288 | :href="item.href" | 290 | :href="item.href" |
| 289 | > | 291 | > |
| 290 | <!-- <a :href="item.path"> --> | 292 | <!-- <a :href="item.path"> --> |
| 291 | <v-list-tile-action v-if="item.icon"> | 293 | <v-list-tile-action v-if="item.icon"> |
| 292 | <img :src="item.icon" width="22" alt="icons" /> | 294 | <img :src="item.icon" width="22" alt="icons" /> |
| 293 | </v-list-tile-action> | 295 | </v-list-tile-action> |
| 294 | <v-list-tile-content class="pt-2"> | 296 | <v-list-tile-content class="pt-2"> |
| 295 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 297 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 296 | </v-list-tile-content> | 298 | </v-list-tile-content> |
| 297 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 299 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 298 | <v-list-tile-action v-if="item.subAction"> | 300 | <v-list-tile-action v-if="item.subAction"> |
| 299 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 301 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 300 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 302 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 301 | </v-list-tile-action> | 303 | </v-list-tile-action> |
| 302 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 304 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 303 | <!-- </a> --> | 305 | <!-- </a> --> |
| 304 | </v-list-tile> | 306 | </v-list-tile> |
| 305 | </template> | 307 | </template> |
| 306 | <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'"> | 308 | <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'"> |
| 307 | <!-- {{menus}} --> | 309 | <!-- {{menus}} --> |
| 308 | <!--group with subitems--> | 310 | <!--group with subitems--> |
| 309 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> | 311 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> |
| 310 | <v-list-tile slot="activator" ripple="ripple"> | 312 | <v-list-tile slot="activator" ripple="ripple"> |
| 311 | <v-list-tile-action v-if="item.icon"> | 313 | <v-list-tile-action v-if="item.icon"> |
| 312 | <img :src="item.icon" width="22" alt="icons" /> | 314 | <img :src="item.icon" width="22" alt="icons" /> |
| 313 | </v-list-tile-action> | 315 | </v-list-tile-action> |
| 314 | <v-list-tile-content> | 316 | <v-list-tile-content> |
| 315 | <!-- <v-list-tile-title>{{ item.title }}</v-list-tile-title> --> | 317 | <!-- <v-list-tile-title>{{ item.title }}</v-list-tile-title> --> |
| 316 | </v-list-tile-content> | 318 | </v-list-tile-content> |
| 317 | </v-list-tile> | 319 | </v-list-tile> |
| 318 | <template v-for="(subItem, i) in item.items"> | 320 | <template v-for="(subItem, i) in item.items"> |
| 319 | <!--sub group--> | 321 | <!--sub group--> |
| 320 | <v-list-group | 322 | <v-list-group |
| 321 | v-if="subItem.items" | 323 | v-if="subItem.items" |
| 322 | :key="subItem.name" | 324 | :key="subItem.name" |
| 323 | :group="subItem.group" | 325 | :group="subItem.group" |
| 324 | sub-group="sub-group" | 326 | sub-group="sub-group" |
| 325 | > | 327 | > |
| 326 | <v-list-tile slot="activator" ripple="ripple"> | 328 | <v-list-tile slot="activator" ripple="ripple"> |
| 327 | <v-list-tile-content> | 329 | <v-list-tile-content> |
| 328 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 330 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 329 | </v-list-tile-content> | 331 | </v-list-tile-content> |
| 330 | </v-list-tile> | 332 | </v-list-tile> |
| 331 | <v-list-tile | 333 | <v-list-tile |
| 332 | v-for="(grand, i) in subItem.children" | 334 | v-for="(grand, i) in subItem.children" |
| 333 | :key="i" | 335 | :key="i" |
| 334 | :to="genChildTarget(item, grand)" | 336 | :to="genChildTarget(item, grand)" |
| 335 | :href="grand.href" | 337 | :href="grand.href" |
| 336 | ripple="ripple" | 338 | ripple="ripple" |
| 337 | > | 339 | > |
| 338 | <v-list-tile-content> | 340 | <v-list-tile-content> |
| 339 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 341 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 340 | </v-list-tile-content> | 342 | </v-list-tile-content> |
| 341 | </v-list-tile> | 343 | </v-list-tile> |
| 342 | </v-list-group> | 344 | </v-list-group> |
| 343 | <!--child item--> | 345 | <!--child item--> |
| 344 | <v-list-tile | 346 | <v-list-tile |
| 345 | v-else | 347 | v-else |
| 346 | :key="i" | 348 | :key="i" |
| 347 | :to="genChildTarget(item, subItem)" | 349 | :to="genChildTarget(item, subItem)" |
| 348 | :href="subItem.href" | 350 | :href="subItem.href" |
| 349 | :disabled="subItem.disabled" | 351 | :disabled="subItem.disabled" |
| 350 | :target="subItem.target" | 352 | :target="subItem.target" |
| 351 | ripple="ripple" | 353 | ripple="ripple" |
| 352 | > | 354 | > |
| 353 | <v-list-tile-action v-if="subItem.action"> | 355 | <v-list-tile-action v-if="subItem.action"> |
| 354 | <img | 356 | <img |
| 355 | width="30" | 357 | width="30" |
| 356 | :src="subItem.action" | 358 | :src="subItem.action" |
| 357 | :class="[subItem.actionClass || 'success--text']" | 359 | :class="[subItem.actionClass || 'success--text']" |
| 358 | /> | 360 | /> |
| 359 | </v-list-tile-action> | 361 | </v-list-tile-action> |
| 360 | <v-list-tile-content> | 362 | <v-list-tile-content> |
| 361 | <v-list-tile-title class="body-2"> | 363 | <v-list-tile-title class="body-2"> |
| 362 | <span>{{ subItem.title }}</span> | 364 | <span>{{ subItem.title }}</span> |
| 363 | </v-list-tile-title> | 365 | </v-list-tile-title> |
| 364 | </v-list-tile-content> | 366 | </v-list-tile-content> |
| 365 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 367 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 366 | </v-list-tile> | 368 | </v-list-tile> |
| 367 | </template> | 369 | </template> |
| 368 | </v-list-group> | 370 | </v-list-group> |
| 369 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 371 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 370 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 372 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 371 | <!--top-level link--> | 373 | <!--top-level link--> |
| 372 | <v-list-tile | 374 | <v-list-tile |
| 373 | v-else | 375 | v-else |
| 374 | ripple="ripple" | 376 | ripple="ripple" |
| 375 | :disabled="item.disabled" | 377 | :disabled="item.disabled" |
| 376 | :target="item.target" | 378 | :target="item.target" |
| 377 | rel="noopener" | 379 | rel="noopener" |
| 378 | :key="item.name" | 380 | :key="item.name" |
| 379 | :to="!item.href ? { name: item.name } : null" | 381 | :to="!item.href ? { name: item.name } : null" |
| 380 | :href="item.href" | 382 | :href="item.href" |
| 381 | > | 383 | > |
| 382 | <!-- <a :href="item.path"> --> | 384 | <!-- <a :href="item.path"> --> |
| 383 | <v-list-tile-action v-if="item.icon"> | 385 | <v-list-tile-action v-if="item.icon"> |
| 384 | <img :src="item.icon" width="22" alt="icons" /> | 386 | <img :src="item.icon" width="22" alt="icons" /> |
| 385 | </v-list-tile-action> | 387 | </v-list-tile-action> |
| 386 | <v-list-tile-content class="pt-2"> | 388 | <v-list-tile-content class="pt-2"> |
| 387 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 389 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 388 | </v-list-tile-content> | 390 | </v-list-tile-content> |
| 389 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 391 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 390 | <v-list-tile-action v-if="item.subAction"> | 392 | <v-list-tile-action v-if="item.subAction"> |
| 391 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 393 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 392 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 394 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 393 | </v-list-tile-action> | 395 | </v-list-tile-action> |
| 394 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 396 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 395 | <!-- </a> --> | 397 | <!-- </a> --> |
| 396 | </v-list-tile> | 398 | </v-list-tile> |
| 397 | </template> | 399 | </template> |
| 398 | 400 | ||
| 399 | <!-- NAVIGATION DRAWER IF ROLE IS TEACHER --> | 401 | <!-- NAVIGATION DRAWER IF ROLE IS TEACHER --> |
| 400 | <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'"> | 402 | <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'"> |
| 401 | <!-- {{menus}} --> | 403 | <!-- {{menus}} --> |
| 402 | <!--group with subitems--> | 404 | <!--group with subitems--> |
| 403 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> | 405 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> |
| 404 | <v-list-tile slot="activator" ripple="ripple"> | 406 | <v-list-tile slot="activator" ripple="ripple"> |
| 405 | <v-list-tile-action v-if="item.icon"> | 407 | <v-list-tile-action v-if="item.icon"> |
| 406 | <img :src="item.icon" width="22" alt="icons" /> | 408 | <img :src="item.icon" width="22" alt="icons" /> |
| 407 | </v-list-tile-action> | 409 | </v-list-tile-action> |
| 408 | <v-list-tile-content> | 410 | <v-list-tile-content> |
| 409 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 411 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 410 | </v-list-tile-content> | 412 | </v-list-tile-content> |
| 411 | </v-list-tile> | 413 | </v-list-tile> |
| 412 | <template v-for="(subItem, i) in item.items"> | 414 | <template v-for="(subItem, i) in item.items"> |
| 413 | <!--sub group--> | 415 | <!--sub group--> |
| 414 | <v-list-group | 416 | <v-list-group |
| 415 | v-if="subItem.items" | 417 | v-if="subItem.items" |
| 416 | :key="subItem.name" | 418 | :key="subItem.name" |
| 417 | :group="subItem.group" | 419 | :group="subItem.group" |
| 418 | sub-group="sub-group" | 420 | sub-group="sub-group" |
| 419 | > | 421 | > |
| 420 | <v-list-tile slot="activator" ripple="ripple"> | 422 | <v-list-tile slot="activator" ripple="ripple"> |
| 421 | <v-list-tile-content> | 423 | <v-list-tile-content> |
| 422 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 424 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 423 | </v-list-tile-content> | 425 | </v-list-tile-content> |
| 424 | </v-list-tile> | 426 | </v-list-tile> |
| 425 | <v-list-tile | 427 | <v-list-tile |
| 426 | v-for="(grand, i) in subItem.children" | 428 | v-for="(grand, i) in subItem.children" |
| 427 | :key="i" | 429 | :key="i" |
| 428 | :to="genChildTarget(item, grand)" | 430 | :to="genChildTarget(item, grand)" |
| 429 | :href="grand.href" | 431 | :href="grand.href" |
| 430 | ripple="ripple" | 432 | ripple="ripple" |
| 431 | > | 433 | > |
| 432 | <v-list-tile-content> | 434 | <v-list-tile-content> |
| 433 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 435 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 434 | </v-list-tile-content> | 436 | </v-list-tile-content> |
| 435 | </v-list-tile> | 437 | </v-list-tile> |
| 436 | </v-list-group> | 438 | </v-list-group> |
| 437 | <!--child item--> | 439 | <!--child item--> |
| 438 | <v-list-tile | 440 | <v-list-tile |
| 439 | v-else | 441 | v-else |
| 440 | :key="i" | 442 | :key="i" |
| 441 | :to="genChildTarget(item, subItem)" | 443 | :to="genChildTarget(item, subItem)" |
| 442 | :href="subItem.href" | 444 | :href="subItem.href" |
| 443 | :disabled="subItem.disabled" | 445 | :disabled="subItem.disabled" |
| 444 | :target="subItem.target" | 446 | :target="subItem.target" |
| 445 | ripple="ripple" | 447 | ripple="ripple" |
| 446 | > | 448 | > |
| 447 | <v-list-tile-action v-if="subItem.action"> | 449 | <v-list-tile-action v-if="subItem.action"> |
| 448 | <img | 450 | <img |
| 449 | width="30" | 451 | width="30" |
| 450 | :src="subItem.action" | 452 | :src="subItem.action" |
| 451 | :class="[subItem.actionClass || 'success--text']" | 453 | :class="[subItem.actionClass || 'success--text']" |
| 452 | /> | 454 | /> |
| 453 | </v-list-tile-action> | 455 | </v-list-tile-action> |
| 454 | <v-list-tile-content> | 456 | <v-list-tile-content> |
| 455 | <v-list-tile-title class="body-2"> | 457 | <v-list-tile-title class="body-2"> |
| 456 | <span>{{ subItem.title }}</span> | 458 | <span>{{ subItem.title }}</span> |
| 457 | </v-list-tile-title> | 459 | </v-list-tile-title> |
| 458 | </v-list-tile-content> | 460 | </v-list-tile-content> |
| 459 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 461 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 460 | </v-list-tile> | 462 | </v-list-tile> |
| 461 | </template> | 463 | </template> |
| 462 | </v-list-group> | 464 | </v-list-group> |
| 463 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 465 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 464 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 466 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 465 | <!--top-level link--> | 467 | <!--top-level link--> |
| 466 | <v-list-tile | 468 | <v-list-tile |
| 467 | v-else | 469 | v-else |
| 468 | ripple="ripple" | 470 | ripple="ripple" |
| 469 | :disabled="item.disabled" | 471 | :disabled="item.disabled" |
| 470 | :target="item.target" | 472 | :target="item.target" |
| 471 | rel="noopener" | 473 | rel="noopener" |
| 472 | :key="item.name" | 474 | :key="item.name" |
| 473 | :to="!item.href ? { name: item.name } : null" | 475 | :to="!item.href ? { name: item.name } : null" |
| 474 | :href="item.href" | 476 | :href="item.href" |
| 475 | > | 477 | > |
| 476 | <!-- <a :href="item.path"> --> | 478 | <!-- <a :href="item.path"> --> |
| 477 | <v-list-tile-action v-if="item.icon"> | 479 | <v-list-tile-action v-if="item.icon"> |
| 478 | <img :src="item.icon" width="22" alt="icons" /> | 480 | <img :src="item.icon" width="22" alt="icons" /> |
| 479 | </v-list-tile-action> | 481 | </v-list-tile-action> |
| 480 | <v-list-tile-content class="pt-2"> | 482 | <v-list-tile-content class="pt-2"> |
| 481 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 483 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 482 | </v-list-tile-content> | 484 | </v-list-tile-content> |
| 483 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 485 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 484 | <v-list-tile-action v-if="item.subAction"> | 486 | <v-list-tile-action v-if="item.subAction"> |
| 485 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 487 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 486 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 488 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 487 | </v-list-tile-action> | 489 | </v-list-tile-action> |
| 488 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 490 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 489 | <!-- </a> --> | 491 | <!-- </a> --> |
| 490 | </v-list-tile> | 492 | </v-list-tile> |
| 491 | </template> | 493 | </template> |
| 492 | 494 | ||
| 493 | <!-- NAVIGATION DRAWER IF ROLE IS PARENT --> | 495 | <!-- NAVIGATION DRAWER IF ROLE IS PARENT --> |
| 494 | <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'"> | 496 | <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'"> |
| 495 | <!-- {{menus}} --> | 497 | <!-- {{menus}} --> |
| 496 | <!--group with subitems--> | 498 | <!--group with subitems--> |
| 497 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> | 499 | <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> |
| 498 | <v-list-tile slot="activator" ripple="ripple"> | 500 | <v-list-tile slot="activator" ripple="ripple"> |
| 499 | <v-list-tile-action v-if="item.icon"> | 501 | <v-list-tile-action v-if="item.icon"> |
| 500 | <img :src="item.icon" width="22" alt="icons" /> | 502 | <img :src="item.icon" width="22" alt="icons" /> |
| 501 | </v-list-tile-action> | 503 | </v-list-tile-action> |
| 502 | <v-list-tile-content> | 504 | <v-list-tile-content> |
| 503 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 505 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 504 | </v-list-tile-content> | 506 | </v-list-tile-content> |
| 505 | </v-list-tile> | 507 | </v-list-tile> |
| 506 | <template v-for="(subItem, i) in item.items"> | 508 | <template v-for="(subItem, i) in item.items"> |
| 507 | <!--sub group--> | 509 | <!--sub group--> |
| 508 | <v-list-group | 510 | <v-list-group |
| 509 | v-if="subItem.items" | 511 | v-if="subItem.items" |
| 510 | :key="subItem.name" | 512 | :key="subItem.name" |
| 511 | :group="subItem.group" | 513 | :group="subItem.group" |
| 512 | sub-group="sub-group" | 514 | sub-group="sub-group" |
| 513 | > | 515 | > |
| 514 | <v-list-tile slot="activator" ripple="ripple"> | 516 | <v-list-tile slot="activator" ripple="ripple"> |
| 515 | <v-list-tile-content> | 517 | <v-list-tile-content> |
| 516 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | 518 | <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> |
| 517 | </v-list-tile-content> | 519 | </v-list-tile-content> |
| 518 | </v-list-tile> | 520 | </v-list-tile> |
| 519 | <v-list-tile | 521 | <v-list-tile |
| 520 | v-for="(grand, i) in subItem.children" | 522 | v-for="(grand, i) in subItem.children" |
| 521 | :key="i" | 523 | :key="i" |
| 522 | :to="genChildTarget(item, grand)" | 524 | :to="genChildTarget(item, grand)" |
| 523 | :href="grand.href" | 525 | :href="grand.href" |
| 524 | ripple="ripple" | 526 | ripple="ripple" |
| 525 | > | 527 | > |
| 526 | <v-list-tile-content> | 528 | <v-list-tile-content> |
| 527 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> | 529 | <v-list-tile-title>{{ grand.title }}</v-list-tile-title> |
| 528 | </v-list-tile-content> | 530 | </v-list-tile-content> |
| 529 | </v-list-tile> | 531 | </v-list-tile> |
| 530 | </v-list-group> | 532 | </v-list-group> |
| 531 | <!--child item--> | 533 | <!--child item--> |
| 532 | <v-list-tile | 534 | <v-list-tile |
| 533 | v-else | 535 | v-else |
| 534 | :key="i" | 536 | :key="i" |
| 535 | :to="genChildTarget(item, subItem)" | 537 | :to="genChildTarget(item, subItem)" |
| 536 | :href="subItem.href" | 538 | :href="subItem.href" |
| 537 | :disabled="subItem.disabled" | 539 | :disabled="subItem.disabled" |
| 538 | :target="subItem.target" | 540 | :target="subItem.target" |
| 539 | ripple="ripple" | 541 | ripple="ripple" |
| 540 | > | 542 | > |
| 541 | <v-list-tile-action v-if="subItem.action"> | 543 | <v-list-tile-action v-if="subItem.action"> |
| 542 | <img | 544 | <img |
| 543 | width="30" | 545 | width="30" |
| 544 | :src="subItem.action" | 546 | :src="subItem.action" |
| 545 | :class="[subItem.actionClass || 'success--text']" | 547 | :class="[subItem.actionClass || 'success--text']" |
| 546 | /> | 548 | /> |
| 547 | </v-list-tile-action> | 549 | </v-list-tile-action> |
| 548 | <v-list-tile-content> | 550 | <v-list-tile-content> |
| 549 | <v-list-tile-title class="body-2"> | 551 | <v-list-tile-title class="body-2"> |
| 550 | <span>{{ subItem.title }}</span> | 552 | <span>{{ subItem.title }}</span> |
| 551 | </v-list-tile-title> | 553 | </v-list-tile-title> |
| 552 | </v-list-tile-content> | 554 | </v-list-tile-content> |
| 553 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> | 555 | <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> |
| 554 | </v-list-tile> | 556 | </v-list-tile> |
| 555 | </template> | 557 | </template> |
| 556 | </v-list-group> | 558 | </v-list-group> |
| 557 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> | 559 | <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> |
| 558 | <v-divider v-else-if="item.divider" :key="i"></v-divider> | 560 | <v-divider v-else-if="item.divider" :key="i"></v-divider> |
| 559 | <!--top-level link--> | 561 | <!--top-level link--> |
| 560 | <v-list-tile | 562 | <v-list-tile |
| 561 | v-else | 563 | v-else |
| 562 | ripple="ripple" | 564 | ripple="ripple" |
| 563 | :disabled="item.disabled" | 565 | :disabled="item.disabled" |
| 564 | :target="item.target" | 566 | :target="item.target" |
| 565 | rel="noopener" | 567 | rel="noopener" |
| 566 | :key="item.name" | 568 | :key="item.name" |
| 567 | :to="!item.href ? { name: item.name } : null" | 569 | :to="!item.href ? { name: item.name } : null" |
| 568 | :href="item.href" | 570 | :href="item.href" |
| 569 | > | 571 | > |
| 570 | <!-- <a :href="item.path"> --> | 572 | <!-- <a :href="item.path"> --> |
| 571 | <v-list-tile-action v-if="item.icon"> | 573 | <v-list-tile-action v-if="item.icon"> |
| 572 | <img :src="item.icon" width="22" alt="icons" /> | 574 | <img :src="item.icon" width="22" alt="icons" /> |
| 573 | </v-list-tile-action> | 575 | </v-list-tile-action> |
| 574 | <v-list-tile-action v-if="item.Vicon"> | 576 | <v-list-tile-action v-if="item.Vicon"> |
| 575 | <div style="position: relative; top: 3px;"> | 577 | <div style="position: relative; top: 3px;"> |
| 576 | <v-icon color="white" size="25">{{item.Vicon}}</v-icon> | 578 | <v-icon color="white" size="25">{{item.Vicon}}</v-icon> |
| 577 | </div> | 579 | </div> |
| 578 | </v-list-tile-action> | 580 | </v-list-tile-action> |
| 579 | <v-list-tile-content class="pt-2"> | 581 | <v-list-tile-content class="pt-2"> |
| 580 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 582 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 581 | </v-list-tile-content> | 583 | </v-list-tile-content> |
| 582 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> | 584 | <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> |
| 583 | <v-list-tile-action v-if="item.subAction"> | 585 | <v-list-tile-action v-if="item.subAction"> |
| 584 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> | 586 | <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> |
| 585 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> | 587 | <!-- <img :src="item.icon" width="40" alt="icons" /> --> |
| 586 | </v-list-tile-action> | 588 | </v-list-tile-action> |
| 587 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> | 589 | <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> |
| 588 | <!-- </a> --> | 590 | <!-- </a> --> |
| 589 | </v-list-tile> | 591 | </v-list-tile> |
| 590 | </template> | 592 | </template> |
| 591 | </v-list> | 593 | </v-list> |
| 592 | <!-- </vue-perfect-scrollbar> --> | 594 | <!-- </vue-perfect-scrollbar> --> |
| 593 | </v-navigation-drawer> | 595 | </v-navigation-drawer> |
| 594 | </template> | 596 | </template> |
| 595 | <script> | 597 | <script> |
| 596 | import menu from "@/api/menu"; | 598 | import menu from "@/api/menu"; |
| 597 | import VuePerfectScrollbar from "vue-perfect-scrollbar"; | 599 | import VuePerfectScrollbar from "vue-perfect-scrollbar"; |
| 598 | export default { | 600 | export default { |
| 599 | name: "app-drawer", | 601 | name: "app-drawer", |
| 600 | components: { | 602 | components: { |
| 601 | VuePerfectScrollbar, | 603 | VuePerfectScrollbar, |
| 602 | }, | 604 | }, |
| 603 | props: { | 605 | props: { |
| 604 | expanded: { | 606 | expanded: { |
| 605 | type: Boolean, | 607 | type: Boolean, |
| 606 | default: true, | 608 | default: true, |
| 607 | }, | 609 | }, |
| 608 | }, | 610 | }, |
| 609 | data: () => ({ | 611 | data: () => ({ |
| 610 | mini: false, | 612 | mini: false, |
| 611 | drawer: true, | 613 | drawer: true, |
| 612 | menus: [], | 614 | menus: [], |
| 613 | menuSchool: [], | 615 | menuSchool: [], |
| 614 | menuTeacher: [], | 616 | menuTeacher: [], |
| 615 | menuAccount: [], | 617 | menuAccount: [], |
| 616 | menuLibrarian: [], | 618 | menuLibrarian: [], |
| 617 | menuParent: [], | 619 | menuParent: [], |
| 618 | schoolRole: "", | 620 | schoolRole: "", |
| 619 | role: "", | 621 | role: "", |
| 620 | scrollSettings: { | 622 | scrollSettings: { |
| 621 | maxScrollbarLength: 160, | 623 | maxScrollbarLength: 160, |
| 622 | }, | 624 | }, |
| 623 | }), | 625 | }), |
| 624 | computed: { | 626 | computed: { |
| 625 | computeGroupActive() { | 627 | computeGroupActive() { |
| 626 | return true; | 628 | return true; |
| 627 | }, | 629 | }, |
| 628 | computeLogo() { | 630 | computeLogo() { |
| 629 | return "/static/icon.png"; | 631 | return "/static/icon.png"; |
| 630 | }, | 632 | }, |
| 631 | 633 | ||
| 632 | sideToolbarColor() { | 634 | sideToolbarColor() { |
| 633 | return this.$vuetify.options.extra.sideNav; | 635 | return this.$vuetify.options.extra.sideNav; |
| 634 | }, | 636 | }, |
| 635 | }, | 637 | }, |
| 636 | created() { | 638 | created() { |
| 637 | this.schoolRole = this.$store.state.schoolRole; | 639 | this.schoolRole = this.$store.state.schoolRole; |
| 638 | this.role = this.$store.state.role; | 640 | this.role = this.$store.state.role; |
| 639 | this.menus = menu.adminMenu; | 641 | this.menus = menu.adminMenu; |
| 640 | this.menuSchool = menu.schoolMenu; | 642 | this.menuSchool = menu.schoolMenu; |
| 641 | this.menuTeacher = menu.teacherMenu; | 643 | this.menuTeacher = menu.teacherMenu; |
| 642 | this.menuAccount = menu.accountMenu; | 644 | this.menuAccount = menu.accountMenu; |
| 643 | this.menuLibrarian = menu.libraryMenu; | 645 | this.menuLibrarian = menu.libraryMenu; |
| 644 | this.menuParent = menu.parentMenu; | 646 | this.menuParent = menu.parentMenu; |
| 645 | // console.log("this.$route.name", this.$route.name); | 647 | // console.log("this.$route.name", this.$route.name); |
| 646 | // if (this.$route.name === "School") { | 648 | // if (this.$route.name === "School") { |
| 647 | // localStorage.setItem("SchoolName", this.$route.name); | 649 | // localStorage.setItem("SchoolName", this.$route.name); |
| 648 | // } | 650 | // } |
| 649 | // if (this.$route.name === "Dashboard") { | 651 | // if (this.$route.name === "Dashboard") { |
| 650 | // localStorage.setItem("AdminName", this.$route.name); | 652 | // localStorage.setItem("AdminName", this.$route.name); |
| 651 | // } | 653 | // } |
| 652 | // console.log("SN", localStorage.getItem("SchoolName")); | 654 | // console.log("SN", localStorage.getItem("SchoolName")); |
| 653 | // if (localStorage.getItem("SchoolName") === "School") { | 655 | // if (localStorage.getItem("SchoolName") === "School") { |
| 654 | // if (this.$store.state.schoolRole === "SUPERADMIN") { | 656 | // if (this.$store.state.schoolRole === "SUPERADMIN") { |
| 655 | // console.log("rolA", this.$store.state.schoolRole); | 657 | // console.log("rolA", this.$store.state.schoolRole); |
| 656 | // if (this.$store.state.schoolRole === "SUPERADMIN") { | 658 | // if (this.$store.state.schoolRole === "SUPERADMIN") { |
| 657 | // } | 659 | // } |
| 658 | // console.log("this.menus", this.menus); | 660 | // console.log("this.menus", this.menus); |
| 659 | // } | 661 | // } |
| 660 | // // } | 662 | // // } |
| 661 | // // console.log("AN", localStorage.getItem("AdminName")); | 663 | // // console.log("AN", localStorage.getItem("AdminName")); |
| 662 | // // if (localStorage.getItem("AdminName") === "Dashboard") { | 664 | // // if (localStorage.getItem("AdminName") === "Dashboard") { |
| 663 | // if (this.$store.state.role === "ADMIN") { | 665 | // if (this.$store.state.role === "ADMIN") { |
| 664 | // console.log("role", this.$store.state.role); | 666 | // console.log("role", this.$store.state.role); |
| 665 | // else if (this.$store.state.role === "ADMIN") { | 667 | // else if (this.$store.state.role === "ADMIN") { |
| 666 | // } | 668 | // } |
| 667 | // // } | 669 | // // } |
| 668 | // } | 670 | // } |
| 669 | 671 | ||
| 670 | // else if (this.$store.state.role === "LIBRARIAN") { | 672 | // else if (this.$store.state.role === "LIBRARIAN") { |
| 671 | // this.menus = menu.libraryMenu; | 673 | // this.menus = menu.libraryMenu; |
| 672 | // } else if (this.$store.state.role === "ACCOUNTANT") { | 674 | // } else if (this.$store.state.role === "ACCOUNTANT") { |
| 673 | // this.menus = menu.accountMenu; | 675 | // this.menus = menu.accountMenu; |
| 674 | // } | 676 | // } |
| 675 | window.getApp.$on("APP_DRAWER_TOGGLED", () => { | 677 | window.getApp.$on("APP_DRAWER_TOGGLED", () => { |
| 676 | this.drawer = !this.drawer; | 678 | this.drawer = !this.drawer; |
| 677 | }); | 679 | }); |
| 678 | }, | 680 | }, |
| 679 | methods: { | 681 | methods: { |
| 680 | genChildTarget(item, subItem) { | 682 | genChildTarget(item, subItem) { |
| 681 | if (subItem.href) return; | 683 | if (subItem.href) return; |
| 682 | if (subItem.component) { | 684 | if (subItem.component) { |
| 683 | return { | 685 | return { |
| 684 | name: subItem.component, | 686 | name: subItem.component, |
| 685 | }; | 687 | }; |
| 686 | } | 688 | } |
| 687 | return { name: `${item.group}/${subItem.name}` }; | 689 | return { name: `${item.group}/${subItem.name}` }; |
| 688 | }, | 690 | }, |
| 689 | }, | 691 | }, |
| 690 | mounted() { | 692 | mounted() { |
| 691 | if (this.$store.state.role === "ADMIN") { | 693 | if (this.$store.state.role === "ADMIN") { |
| 692 | this.token = this.$store.state.token; | 694 | this.token = this.$store.state.token; |
| 693 | } | 695 | } |
| 694 | if (this.$store.state.schoolRole === "SUPERADMIN") { | 696 | if (this.$store.state.schoolRole === "SUPERADMIN") { |
| 695 | this.token = this.$store.schoolToken; | 697 | this.token = this.$store.schoolToken; |
| 696 | } | 698 | } |
| 697 | if (this.$store.state.role === "TEACHER") { | 699 | if (this.$store.state.role === "TEACHER") { |
| 698 | this.token = this.$store.state.token; | 700 | this.token = this.$store.state.token; |
| 699 | } | 701 | } |
| 700 | if (this.$store.state.role === "ACCOUNTANT") { | 702 | if (this.$store.state.role === "ACCOUNTANT") { |
| 701 | this.token = this.$store.state.token; | 703 | this.token = this.$store.state.token; |
| 702 | } | 704 | } |
| 703 | if (this.$store.state.role === "LIBRARIAN") { | 705 | if (this.$store.state.role === "LIBRARIAN") { |
| 704 | this.token = this.$store.state.token; | 706 | this.token = this.$store.state.token; |
| 705 | } | 707 | } |
| 706 | if (this.$store.state.role === "PARENT") { | 708 | if (this.$store.state.role === "PARENT") { |
| 707 | this.token = this.$store.state.token; | 709 | this.token = this.$store.state.token; |
| 708 | } | 710 | } |
| 709 | }, | 711 | }, |
| 710 | }; | 712 | }; |
| 711 | </script> | 713 | </script> |
| 712 | 714 | ||
| 713 | 715 | ||
| 714 | <style lang="stylus"> | 716 | <style lang="stylus"> |
| 715 | // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; | 717 | // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; |
| 716 | #appDrawer { | 718 | #appDrawer { |
| 717 | overflow: hidden; | 719 | overflow: hidden; |
| 718 | 720 | ||
| 719 | .drawer-menu--scroll { | 721 | .drawer-menu--scroll { |
| 720 | height: calc(100vh - 48px); | 722 | height: calc(100vh - 48px); |
| 721 | overflow: auto; | 723 | overflow: auto; |
| 722 | } | 724 | } |
| 723 | } | 725 | } |
| 724 | 726 | ||
| 725 | .v-list__group__items--no-action .v-list__tile { | 727 | .v-list__group__items--no-action .v-list__tile { |
| 726 | padding-left: 72px !important; | 728 | padding-left: 72px !important; |
| 727 | } | 729 | } |
| 728 | 730 | ||
| 729 | .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { | 731 | .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { |
| 730 | height: 54px; | 732 | height: 54px; |
| 731 | font-size: 17px; | 733 | font-size: 17px; |
| 732 | } | 734 | } |
| 733 | 735 | ||
| 734 | .v-list__tile__action { | 736 | .v-list__tile__action { |
| 735 | min-width: 36px; | 737 | min-width: 36px; |
| 736 | } | 738 | } |
| 737 | 739 | ||
| 738 | // .theme--light .v-icon, .application .theme--light.v-icon { | 740 | // .theme--light .v-icon, .application .theme--light.v-icon { |
| 739 | // color: #f1f1f1; | 741 | // color: #f1f1f1; |
| 740 | // } | 742 | // } |
| 741 | .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y { | 743 | .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y { |
| 742 | background-color: #f5f5f5; | 744 | background-color: #f5f5f5; |
| 743 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); | 745 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); |
| 744 | width: 8px !important; | 746 | width: 8px !important; |
| 745 | } | 747 | } |
| 746 | 748 | ||
| 747 | .ps>.ps__scrollbar-y-rail { | 749 | .ps>.ps__scrollbar-y-rail { |
| 748 | width: 0px !important; | 750 | width: 0px !important; |
| 749 | } | 751 | } |
| 750 | 752 | ||
| 751 | .ps:hover > .ps__scrollbar-y-rail:hover { | 753 | .ps:hover > .ps__scrollbar-y-rail:hover { |
| 752 | background-color: #5f2171 !important; | 754 | background-color: #5f2171 !important; |
| 753 | opacity: 0.9; | 755 | opacity: 0.9; |
| 754 | } | 756 | } |
| 755 | 757 | ||
| 756 | .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { | 758 | .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { |
| 757 | width: 8px !important; | 759 | width: 8px !important; |
| 758 | background-color: #f5f5f5; | 760 | background-color: #f5f5f5; |
| 759 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); | 761 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); |
| 760 | } | 762 | } |
| 761 | 763 | ||
| 762 | .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { | 764 | .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { |
| 763 | // background-color: #5f2171 !important; | 765 | // background-color: #5f2171 !important; |
| 764 | width: 8px !important; | 766 | width: 8px !important; |
| 765 | background-color: #f5f5f5; | 767 | background-color: #f5f5f5; |
| 766 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); | 768 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); |
| 767 | } | 769 | } |
| 768 | 770 | ||
| 769 | .v-list__tile--active { | 771 | .v-list__tile--active { |
| 770 | color: #71d9ea !important; | 772 | color: #71d9ea !important; |
| 771 | } | 773 | } |
| 772 | 774 | ||
| 773 | .my-1 { | 775 | .my-1 { |
| 774 | text-align: left !important; | 776 | text-align: left !important; |
| 775 | } | 777 | } |
| 776 | 778 | ||
| 777 | .title { | 779 | .title { |
| 778 | line-height: 2 !important; | 780 | line-height: 2 !important; |
| 779 | } | 781 | } |
| 780 | 782 | ||
| 781 | // .v-list__tile--hover { | 783 | // .v-list__tile--hover { |
| 782 | // color: white !important; | 784 | // color: white !important; |
| 783 | // background: red !important; | 785 | // background: red !important; |
| 784 | // } | 786 | // } |
| 785 | .v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after { | 787 | .v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after { |
| 786 | background: #7f62f8 !important; | 788 | background: #7f62f8 !important; |
| 787 | color: #71d9ea !important; | 789 | color: #71d9ea !important; |
| 788 | box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important; | 790 | box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important; |
| 789 | // border-radius: 12px !important; | 791 | // border-radius: 12px !important; |
| 790 | } | 792 | } |
| 791 | 793 | ||
| 792 | @media screen and (max-width: 420px) { | 794 | @media screen and (max-width: 420px) { |
| 793 | .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { | 795 | .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { |
| 794 | font-size: 14px; | 796 | font-size: 14px; |
| 795 | } | 797 | } |
| 796 | 798 | ||
| 797 | .imgLogo { | 799 | .imgLogo { |
| 798 | height: 32px; | 800 | height: 32px; |
| 799 | width: 120px; | 801 | width: 120px; |
| 800 | } | 802 | } |
| 801 | } | 803 | } |
| 802 | </style> | 804 | </style> |
| 803 | 805 | ||
| 804 | 806 | ||
| 805 | <style scoped> | 807 | <style scoped> |
| 806 | .theme--light .v-icon, | 808 | .theme--light .v-icon, |
| 807 | .application .theme--light.v-icon { | 809 | .application .theme--light.v-icon { |
| 808 | color: #39b982; | 810 | color: #39b982; |
| 809 | } | 811 | } |
| 810 | .side-bar-color { | 812 | .side-bar-color { |
| 811 | background: #827bfa !important; | 813 | background: #827bfa !important; |
| 812 | /* border-top-right-radius: 74px !important; */ | 814 | /* border-top-right-radius: 74px !important; */ |
| 813 | } | 815 | } |
| 814 | .v-navigation-drawer--fixed { | 816 | .v-navigation-drawer--fixed { |
| 815 | /* position: absolute !important; */ | 817 | /* position: absolute !important; */ |
| 816 | 818 | ||
| 817 | /* min-height: calc(2000px - 64px - 50px - 81px) !important; */ | 819 | /* min-height: calc(2000px - 64px - 50px - 81px) !important; */ |
| 818 | /* max-height: inherit !important; */ | 820 | /* max-height: inherit !important; */ |
| 819 | } | 821 | } |
| 820 | .hover:hover { | 822 | .hover:hover { |
| 821 | color: red !important; | 823 | color: red !important; |
| 822 | background: red !important; | 824 | background: red !important; |
| 823 | } | 825 | } |
| 824 | </style> | 826 | </style> |
| 825 | 827 | ||
| 826 | 828 | ||
| 827 | 829 |
src/pages/Academic/assignment.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Assignment ****** --> | 3 | <!-- ****** EDIT Assignment ****** --> |
| 4 | <v-dialog v-model="editAssignmentDialog" max-width="400px"> | 4 | <v-dialog v-model="editAssignmentDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Assignment</label> | 8 | <label class="title text-xs-center">Edit Assignment</label> |
| 9 | <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editAssignmentDialog = 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="formEditAssignment" v-model="validEditAssignment" lazy-validation> | 13 | <v-form ref="formEditAssignment" v-model="validEditAssignment" 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">Title:</label> | 16 | <label class="right">Title:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 class="ml-3"> | 18 | <v-flex xs8 class="ml-3"> |
| 19 | <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> | 19 | <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | </v-layout> | 21 | </v-layout> |
| 22 | <v-layout> | 22 | <v-layout> |
| 23 | <v-flex xs4 class="pt-4 subheading"> | 23 | <v-flex xs4 class="pt-4 subheading"> |
| 24 | <label class="right">Description:</label> | 24 | <label class="right">Description:</label> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | <v-flex xs8 class="ml-3"> | 26 | <v-flex xs8 class="ml-3"> |
| 27 | <v-text-field | 27 | <v-text-field |
| 28 | v-model="editedItem.description" | 28 | v-model="editedItem.description" |
| 29 | type="text" | 29 | type="text" |
| 30 | :rules="deadlineRules" | 30 | :rules="deadlineRules" |
| 31 | required | 31 | required |
| 32 | ></v-text-field> | 32 | ></v-text-field> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | </v-layout> | 34 | </v-layout> |
| 35 | <v-layout> | 35 | <v-layout> |
| 36 | <v-flex xs4 class="pt-4 subheading"> | 36 | <v-flex xs4 class="pt-4 subheading"> |
| 37 | <label class="right">Deadline:</label> | 37 | <label class="right">Deadline:</label> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | <v-flex xs8 class="ml-3"> | 39 | <v-flex xs8 class="ml-3"> |
| 40 | <v-menu | 40 | <v-menu |
| 41 | ref="menu1" | 41 | ref="menu1" |
| 42 | :close-on-content-click="false" | 42 | :close-on-content-click="false" |
| 43 | v-model="menu1" | 43 | v-model="menu1" |
| 44 | :nudge-right="40" | 44 | :nudge-right="40" |
| 45 | :return-value.sync="menu1" | 45 | :return-value.sync="menu1" |
| 46 | lazy | 46 | lazy |
| 47 | transition="scale-transition" | 47 | transition="scale-transition" |
| 48 | offset-y | 48 | offset-y |
| 49 | full-width | 49 | full-width |
| 50 | min-width="290px" | 50 | min-width="290px" |
| 51 | > | 51 | > |
| 52 | <v-text-field | 52 | <v-text-field |
| 53 | slot="activator" | 53 | slot="activator" |
| 54 | v-model="editedItem.deadline" | 54 | v-model="editedItem.deadline" |
| 55 | placeholder="Select Date" | 55 | placeholder="Select Date" |
| 56 | :rules="deadlineRules" | 56 | :rules="deadlineRules" |
| 57 | append-icon="event" | 57 | append-icon="event" |
| 58 | required | 58 | required |
| 59 | ></v-text-field> | 59 | ></v-text-field> |
| 60 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> | 60 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> |
| 61 | </v-menu> | 61 | </v-menu> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">Class:</label> | 66 | <label class="right">Class:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs8 class="ml-3"> | 68 | <v-flex xs8 class="ml-3"> |
| 69 | <v-select | 69 | <v-select |
| 70 | :items="classList" | 70 | :items="classList" |
| 71 | item-text="classNum" | 71 | item-text="classNum" |
| 72 | item-value="_id" | 72 | item-value="_id" |
| 73 | :rules="classRules" | 73 | :rules="classRules" |
| 74 | v-model="editedItem.classId" | 74 | v-model="editedItem.classId" |
| 75 | @change="getSections(editedItem.classId)" | 75 | @change="getSections(editedItem.classId)" |
| 76 | required | 76 | required |
| 77 | ></v-select> | 77 | ></v-select> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs4 class="pt-4 subheading"> | 81 | <v-flex xs4 class="pt-4 subheading"> |
| 82 | <label class="right">Section:</label> | 82 | <label class="right">Section:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs8 class="ml-3"> | 84 | <v-flex xs8 class="ml-3"> |
| 85 | <v-select | 85 | <v-select |
| 86 | :items="addSection" | 86 | :items="addSection" |
| 87 | item-text="name" | 87 | item-text="name" |
| 88 | item-value="_id" | 88 | item-value="_id" |
| 89 | v-model="editedItem.sectionId" | 89 | v-model="editedItem.sectionId" |
| 90 | :rules="sectionRules" | 90 | :rules="sectionRules" |
| 91 | @change="getClassSubject(editedItem.classId)" | 91 | @change="getClassSubject(editedItem.classId)" |
| 92 | required | 92 | required |
| 93 | ></v-select> | 93 | ></v-select> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | <v-layout> | 96 | <v-layout> |
| 97 | <v-flex xs4 class="pt-4 subheading"> | 97 | <v-flex xs4 class="pt-4 subheading"> |
| 98 | <label class="right">Subject</label> | 98 | <label class="right">Subject</label> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex xs8 class="ml-3"> | 100 | <v-flex xs8 class="ml-3"> |
| 101 | <v-select | 101 | <v-select |
| 102 | :items="subjectList.subjects" | 102 | :items="subjectList.subjects" |
| 103 | v-model="editedItem.subjectName" | 103 | v-model="editedItem.subjectName" |
| 104 | item-text="subjectName" | 104 | item-text="subjectName" |
| 105 | item-value="_id" | 105 | item-value="_id" |
| 106 | :rules="subjectRules" | 106 | :rules="subjectRules" |
| 107 | required | 107 | required |
| 108 | ></v-select> | 108 | ></v-select> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs4 class="pt-4 subheading"> | 112 | <v-flex xs4 class="pt-4 subheading"> |
| 113 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> | 113 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> |
| 114 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> | 114 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs8 sm8 class="ml-3"> | 116 | <v-flex xs8 sm8 class="ml-3"> |
| 117 | <v-text-field | 117 | <v-text-field |
| 118 | label="Select File" | 118 | label="Select File" |
| 119 | @click="pickFile" | 119 | @click="pickFile" |
| 120 | v-model="imageName" | 120 | v-model="imageName" |
| 121 | append-icon="attach_file" | 121 | append-icon="attach_file" |
| 122 | ></v-text-field> | 122 | ></v-text-field> |
| 123 | <input | 123 | <input |
| 124 | type="file" | 124 | type="file" |
| 125 | style="display:none" | 125 | style="display:none" |
| 126 | ref="image" | 126 | ref="image" |
| 127 | accept="image/*" | 127 | accept="image/*" |
| 128 | @change="onFilePicked" | 128 | @change="onFilePicked" |
| 129 | /> | 129 | /> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-flex xs12 sm12> | 132 | <v-flex xs12 sm12> |
| 133 | <v-card-actions> | 133 | <v-card-actions> |
| 134 | <v-spacer></v-spacer> | 134 | <v-spacer></v-spacer> |
| 135 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 135 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 136 | </v-card-actions> | 136 | </v-card-actions> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-form> | 138 | </v-form> |
| 139 | </v-container> | 139 | </v-container> |
| 140 | </v-card> | 140 | </v-card> |
| 141 | </v-dialog> | 141 | </v-dialog> |
| 142 | 142 | ||
| 143 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 143 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 144 | <v-dialog v-model="viewAssignmentDialog" max-width="500px"> | 144 | <v-dialog v-model="viewAssignmentDialog" max-width="500px" persistent> |
| 145 | <v-card flat class="card-style pa-3" dark> | 145 | <v-card flat class="card-style pa-3" dark> |
| 146 | <v-layout> | 146 | <v-layout> |
| 147 | <v-flex xs12> | 147 | <v-flex xs12> |
| 148 | <label class="title text-xs-center">View Attendence</label> | 148 | <label class="title text-xs-center">View Attendence</label> |
| 149 | <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> | 149 | <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-card-text> | 152 | <v-card-text> |
| 153 | <v-container grid-list-md> | 153 | <v-container grid-list-md> |
| 154 | <v-layout wrap> | 154 | <v-layout wrap> |
| 155 | <v-flex> | 155 | <v-flex> |
| 156 | <v-layout> | 156 | <v-layout> |
| 157 | <v-flex xs6 sm4> | 157 | <v-flex xs6 sm4> |
| 158 | <h5 class="right my-1"> | 158 | <h5 class="right my-1"> |
| 159 | <b>Title:</b> | 159 | <b>Title:</b> |
| 160 | </h5> | 160 | </h5> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | <v-flex sm8 xs6> | 162 | <v-flex sm8 xs6> |
| 163 | <h5 class="my-1">{{ editedItem.title }}</h5> | 163 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | </v-layout> | 165 | </v-layout> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs6 sm4> | 167 | <v-flex xs6 sm4> |
| 168 | <h5 class="right my-1"> | 168 | <h5 class="right my-1"> |
| 169 | <b>Description:</b> | 169 | <b>Description:</b> |
| 170 | </h5> | 170 | </h5> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm8 xs6> | 172 | <v-flex sm8 xs6> |
| 173 | <h5 class="my-1">{{ editedItem.description }}</h5> | 173 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs6 sm4> | 177 | <v-flex xs6 sm4> |
| 178 | <h5 class="right my-1"> | 178 | <h5 class="right my-1"> |
| 179 | <b>Deadline:</b> | 179 | <b>Deadline:</b> |
| 180 | </h5> | 180 | </h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | <v-flex sm8 xs6> | 182 | <v-flex sm8 xs6> |
| 183 | <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> | 183 | <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-layout> | 185 | </v-layout> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-container> | 188 | </v-container> |
| 189 | </v-card-text> | 189 | </v-card-text> |
| 190 | </v-card> | 190 | </v-card> |
| 191 | </v-dialog> | 191 | </v-dialog> |
| 192 | 192 | ||
| 193 | <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> | 193 | <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> |
| 194 | <v-toolbar color="transparent" flat> | 194 | <v-toolbar color="transparent" flat> |
| 195 | <v-btn | 195 | <v-btn |
| 196 | fab | 196 | fab |
| 197 | dark | 197 | dark |
| 198 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 198 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 199 | small | 199 | small |
| 200 | @click="addAssignmentDialog = true" | 200 | @click="addAssignmentDialog = true" |
| 201 | > | 201 | > |
| 202 | <v-icon dark>add</v-icon> | 202 | <v-icon dark>add</v-icon> |
| 203 | </v-btn> | 203 | </v-btn> |
| 204 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 204 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 205 | <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> | 205 | <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> |
| 206 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment | 206 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment |
| 207 | </v-btn> | 207 | </v-btn> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-spacer></v-spacer> | 209 | <v-spacer></v-spacer> |
| 210 | <v-flex lg2 md2 xs12 v-show="show"> | 210 | <v-flex lg2 md2 xs12 v-show="show"> |
| 211 | <v-select | 211 | <v-select |
| 212 | :items="classList" | 212 | :items="classList" |
| 213 | placeholder="Select Your Class" | 213 | placeholder="Select Your Class" |
| 214 | v-model="showAssignment.classId" | 214 | v-model="showAssignment.classId" |
| 215 | item-text="classNum" | 215 | item-text="classNum" |
| 216 | item-value="_id" | 216 | item-value="_id" |
| 217 | name="Select Class" | 217 | name="Select Class" |
| 218 | :rules="classRules" | 218 | :rules="classRules" |
| 219 | @change="getAssignmentList()" | 219 | @change="getAssignmentList()" |
| 220 | class="pl-2" | 220 | class="pl-2" |
| 221 | required | 221 | required |
| 222 | ></v-select> | 222 | ></v-select> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-card-title class="body-1" v-show="show"> | 224 | <v-card-title class="body-1" v-show="show"> |
| 225 | <v-btn icon flat @click="displaySearch"> | 225 | <v-btn icon flat @click="displaySearch"> |
| 226 | <v-avatar size="27"> | 226 | <v-avatar size="27"> |
| 227 | <img src="/static/icon/search.png" alt="icon" /> | 227 | <img src="/static/icon/search.png" alt="icon" /> |
| 228 | </v-avatar> | 228 | </v-avatar> |
| 229 | </v-btn> | 229 | </v-btn> |
| 230 | </v-card-title> | 230 | </v-card-title> |
| 231 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 231 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 232 | <v-layout> | 232 | <v-layout> |
| 233 | <v-text-field | 233 | <v-text-field |
| 234 | v-model="search" | 234 | v-model="search" |
| 235 | placeholder="Search" | 235 | placeholder="Search" |
| 236 | prepend-inner-icon="search" | 236 | prepend-inner-icon="search" |
| 237 | color="primary" | 237 | color="primary" |
| 238 | autofocus | 238 | autofocus |
| 239 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 239 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 240 | ></v-text-field> | 240 | ></v-text-field> |
| 241 | <v-icon @click="closeSearch" color="error">close</v-icon> | 241 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-toolbar> | 244 | </v-toolbar> |
| 245 | <v-data-table | 245 | <v-data-table |
| 246 | :headers="headers" | 246 | :headers="headers" |
| 247 | :items="assignmentData" | 247 | :items="assignmentData" |
| 248 | :pagination.sync="pagination" | 248 | :pagination.sync="pagination" |
| 249 | :search="search" | 249 | :search="search" |
| 250 | > | 250 | > |
| 251 | <template slot="items" slot-scope="props"> | 251 | <template slot="items" slot-scope="props"> |
| 252 | <tr class="tr"> | 252 | <tr class="tr"> |
| 253 | <td class="td-row td">{{ props.index + 1 }}</td> | 253 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 254 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> | 254 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> |
| 255 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 255 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 256 | <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> | 256 | <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> |
| 257 | <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> | 257 | <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> |
| 258 | <td | 258 | <td |
| 259 | class="text-xs-center td td-row" | 259 | class="text-xs-center td td-row" |
| 260 | v-if="props.item.teacherId" | 260 | v-if="props.item.teacherId" |
| 261 | >{{ props.item.teacherId.name }}</td> | 261 | >{{ props.item.teacherId.name }}</td> |
| 262 | <td | 262 | <td |
| 263 | class="text-xs-center td td-row" | 263 | class="text-xs-center td td-row" |
| 264 | v-if="!props.item.teacherId" | 264 | v-if="!props.item.teacherId" |
| 265 | >{{ props.item.schoolId.name }}</td> | 265 | >{{ props.item.schoolId.name }}</td> |
| 266 | <td class="text-xs-center td td-row"> | 266 | <td class="text-xs-center td td-row"> |
| 267 | <a | 267 | <a |
| 268 | class="hover" | 268 | class="hover" |
| 269 | :href="props.item.file" | 269 | :href="props.item.file" |
| 270 | target="_blank" | 270 | target="_blank" |
| 271 | style="text-decoration: none!important; color: grey" | 271 | style="text-decoration: none!important; color: grey" |
| 272 | @click="generatePDF2Canvas(props.item)" | 272 | @click="generatePDF2Canvas(props.item)" |
| 273 | :loading="loadingPdf" | 273 | :loading="loadingPdf" |
| 274 | > | 274 | > |
| 275 | <!-- <span> --> | 275 | <!-- <span> --> |
| 276 | <h5>{{props.item.fileName}}</h5> | 276 | <h5>{{props.item.fileName}}</h5> |
| 277 | <!-- </span> --> | 277 | <!-- </span> --> |
| 278 | </a> | 278 | </a> |
| 279 | </td> | 279 | </td> |
| 280 | <td class="text-xs-center td td-row"> | 280 | <td class="text-xs-center td td-row"> |
| 281 | <span> | 281 | <span> |
| 282 | <v-tooltip top> | 282 | <v-tooltip top> |
| 283 | <img | 283 | <img |
| 284 | slot="activator" | 284 | slot="activator" |
| 285 | style="cursor:pointer; width:25px; height:25px; " | 285 | style="cursor:pointer; width:25px; height:25px; " |
| 286 | class="mr-3" | 286 | class="mr-3" |
| 287 | @click="profile(props.item)" | 287 | @click="profile(props.item)" |
| 288 | src="/static/icon/view.png" | 288 | src="/static/icon/view.png" |
| 289 | /> | 289 | /> |
| 290 | <span>View</span> | 290 | <span>View</span> |
| 291 | </v-tooltip> | 291 | </v-tooltip> |
| 292 | <v-tooltip top> | 292 | <v-tooltip top> |
| 293 | <img | 293 | <img |
| 294 | slot="activator" | 294 | slot="activator" |
| 295 | style="cursor:pointer; width:20px; height:18px; " | 295 | style="cursor:pointer; width:20px; height:18px; " |
| 296 | class="mr-3" | 296 | class="mr-3" |
| 297 | @click="editItem(props.item)" | 297 | @click="editItem(props.item)" |
| 298 | src="/static/icon/edit.png" | 298 | src="/static/icon/edit.png" |
| 299 | /> | 299 | /> |
| 300 | <span>Edit</span> | 300 | <span>Edit</span> |
| 301 | </v-tooltip> | 301 | </v-tooltip> |
| 302 | <v-tooltip top> | 302 | <v-tooltip top> |
| 303 | <img | 303 | <img |
| 304 | slot="activator" | 304 | slot="activator" |
| 305 | style="cursor:pointer; width:20px; height:20px; " | 305 | style="cursor:pointer; width:20px; height:20px; " |
| 306 | class="mr-3" | 306 | class="mr-3" |
| 307 | @click="deleteItem(props.item)" | 307 | @click="deleteItem(props.item)" |
| 308 | src="/static/icon/delete.png" | 308 | src="/static/icon/delete.png" |
| 309 | /> | 309 | /> |
| 310 | <span>Delete</span> | 310 | <span>Delete</span> |
| 311 | </v-tooltip> | 311 | </v-tooltip> |
| 312 | </span> | 312 | </span> |
| 313 | </td> | 313 | </td> |
| 314 | </tr> | 314 | </tr> |
| 315 | </template> | 315 | </template> |
| 316 | <v-alert | 316 | <v-alert |
| 317 | slot="no-results" | 317 | slot="no-results" |
| 318 | :value="true" | 318 | :value="true" |
| 319 | color="error" | 319 | color="error" |
| 320 | icon="warning" | 320 | icon="warning" |
| 321 | >Your search for "{{ search }}" found no results.</v-alert> | 321 | >Your search for "{{ search }}" found no results.</v-alert> |
| 322 | </v-data-table> | 322 | </v-data-table> |
| 323 | <!-- ****** ADD MULTIPLE Subject ****** --> | 323 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 324 | <v-snackbar | 324 | <v-snackbar |
| 325 | :timeout="timeout" | 325 | :timeout="timeout" |
| 326 | :top="y === 'top'" | 326 | :top="y === 'top'" |
| 327 | :right="x === 'right'" | 327 | :right="x === 'right'" |
| 328 | :vertical="mode === 'vertical'" | 328 | :vertical="mode === 'vertical'" |
| 329 | v-model="snackbar" | 329 | v-model="snackbar" |
| 330 | :color="color" | 330 | :color="color" |
| 331 | >{{ text }}</v-snackbar> | 331 | >{{ text }}</v-snackbar> |
| 332 | <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog"> | 332 | <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog" persistent> |
| 333 | <v-card flat class="card-style pa-2" dark> | 333 | <v-card flat class="card-style pa-2" dark> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12> | 335 | <v-flex xs12> |
| 336 | <label class="title text-xs-center">Add Assignment</label> | 336 | <label class="title text-xs-center">Add Assignment</label> |
| 337 | <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon> | 337 | <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon> |
| 338 | </v-flex> | 338 | </v-flex> |
| 339 | </v-layout> | 339 | </v-layout> |
| 340 | <v-container fluid fill-height> | 340 | <v-container fluid fill-height> |
| 341 | <v-layout align-center> | 341 | <v-layout align-center> |
| 342 | <v-flex xs12> | 342 | <v-flex xs12> |
| 343 | <v-form ref="form" v-model="valid" lazy-validation> | 343 | <v-form ref="form" v-model="valid" lazy-validation> |
| 344 | <v-layout> | 344 | <v-layout> |
| 345 | <v-flex xs4 sm4 class="pt-4 subheading"> | 345 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 346 | <label class="right">Title :</label> | 346 | <label class="right">Title :</label> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | <v-flex xs8 sm8 class="ml-3"> | 348 | <v-flex xs8 sm8 class="ml-3"> |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | name="name" | 350 | name="name" |
| 351 | type="text" | 351 | type="text" |
| 352 | placeholder="Select Title" | 352 | placeholder="Select Title" |
| 353 | :rules="titleRules" | 353 | :rules="titleRules" |
| 354 | v-model="addAssignment.title" | 354 | v-model="addAssignment.title" |
| 355 | required | 355 | required |
| 356 | ></v-text-field> | 356 | ></v-text-field> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | </v-layout> | 358 | </v-layout> |
| 359 | <v-layout> | 359 | <v-layout> |
| 360 | <v-flex xs4 sm4 class="pt-4 subheading"> | 360 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 361 | <label class="right">Description :</label> | 361 | <label class="right">Description :</label> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | <v-flex xs8 sm8 class="ml-3"> | 363 | <v-flex xs8 sm8 class="ml-3"> |
| 364 | <v-text-field | 364 | <v-text-field |
| 365 | name="name" | 365 | name="name" |
| 366 | type="text" | 366 | type="text" |
| 367 | placeholder="Select Description" | 367 | placeholder="Select Description" |
| 368 | :rules="descriptionRules" | 368 | :rules="descriptionRules" |
| 369 | v-model="addAssignment.description" | 369 | v-model="addAssignment.description" |
| 370 | required | 370 | required |
| 371 | ></v-text-field> | 371 | ></v-text-field> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | <v-layout> | 374 | <v-layout> |
| 375 | <v-flex xs4 sm4 class="pt-4 subheading"> | 375 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 376 | <label class="right">Deadline :</label> | 376 | <label class="right">Deadline :</label> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex xs8 sm7 class="ml-3"> | 378 | <v-flex xs8 sm7 class="ml-3"> |
| 379 | <v-menu | 379 | <v-menu |
| 380 | ref="menu2" | 380 | ref="menu2" |
| 381 | :close-on-content-click="false" | 381 | :close-on-content-click="false" |
| 382 | v-model="menu2" | 382 | v-model="menu2" |
| 383 | :nudge-right="40" | 383 | :nudge-right="40" |
| 384 | :return-value.sync="addAssignment.date" | 384 | :return-value.sync="addAssignment.date" |
| 385 | lazy | 385 | lazy |
| 386 | transition="scale-transition" | 386 | transition="scale-transition" |
| 387 | offset-y | 387 | offset-y |
| 388 | full-width | 388 | full-width |
| 389 | min-width="290px" | 389 | min-width="290px" |
| 390 | > | 390 | > |
| 391 | <v-text-field | 391 | <v-text-field |
| 392 | slot="activator" | 392 | slot="activator" |
| 393 | v-model="addAssignment.deadline" | 393 | v-model="addAssignment.deadline" |
| 394 | :rules="deadlineRules" | 394 | :rules="deadlineRules" |
| 395 | placeholder="Select Date" | 395 | placeholder="Select Date" |
| 396 | append-icon="event" | 396 | append-icon="event" |
| 397 | readonly | 397 | readonly |
| 398 | ></v-text-field> | 398 | ></v-text-field> |
| 399 | <v-date-picker | 399 | <v-date-picker |
| 400 | v-model="addAssignment.deadline" | 400 | v-model="addAssignment.deadline" |
| 401 | @input="$refs.menu2.save(addAssignment.date)" | 401 | @input="$refs.menu2.save(addAssignment.date)" |
| 402 | ></v-date-picker> | 402 | ></v-date-picker> |
| 403 | </v-menu> | 403 | </v-menu> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-layout> | 405 | </v-layout> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs4 sm4 class="pt-4 subheading"> | 407 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 408 | <label class="right">Class :</label> | 408 | <label class="right">Class :</label> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs8 sm8 class="ml-3"> | 410 | <v-flex xs8 sm8 class="ml-3"> |
| 411 | <v-select | 411 | <v-select |
| 412 | :items="classList" | 412 | :items="classList" |
| 413 | placeholder="Select Class" | 413 | placeholder="Select Class" |
| 414 | item-text="classNum" | 414 | item-text="classNum" |
| 415 | item-value="_id" | 415 | item-value="_id" |
| 416 | v-model="addAssignment.classId" | 416 | v-model="addAssignment.classId" |
| 417 | name="Select Class" | 417 | name="Select Class" |
| 418 | :rules="classRules" | 418 | :rules="classRules" |
| 419 | @change="getSections(addAssignment.classId)" | 419 | @change="getSections(addAssignment.classId)" |
| 420 | class="pl-2" | 420 | class="pl-2" |
| 421 | required | 421 | required |
| 422 | ></v-select> | 422 | ></v-select> |
| 423 | </v-flex> | 423 | </v-flex> |
| 424 | </v-layout> | 424 | </v-layout> |
| 425 | <v-layout> | 425 | <v-layout> |
| 426 | <v-flex xs4 sm4 class="pt-4 subheading"> | 426 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 427 | <label class="right">Section :</label> | 427 | <label class="right">Section :</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="addSection" | 431 | :items="addSection" |
| 432 | placeholder="Select Section" | 432 | placeholder="Select Section" |
| 433 | item-text="name" | 433 | item-text="name" |
| 434 | item-value="_id" | 434 | item-value="_id" |
| 435 | v-model="addAssignment.sectionId" | 435 | v-model="addAssignment.sectionId" |
| 436 | name="Select Section" | 436 | name="Select Section" |
| 437 | :rules="sectionRules" | 437 | :rules="sectionRules" |
| 438 | @change="getClassSubject(addAssignment.classId)" | 438 | @change="getClassSubject(addAssignment.classId)" |
| 439 | class="px-2" | 439 | class="px-2" |
| 440 | required | 440 | required |
| 441 | ></v-select> | 441 | ></v-select> |
| 442 | </v-flex> | 442 | </v-flex> |
| 443 | </v-layout> | 443 | </v-layout> |
| 444 | <v-layout> | 444 | <v-layout> |
| 445 | <v-flex xs3 sm4 class="pt-4 subheading"> | 445 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 446 | <label class="right">Subject :</label> | 446 | <label class="right">Subject :</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm8 class="ml-2"> | 448 | <v-flex xs8 sm8 class="ml-2"> |
| 449 | <v-select | 449 | <v-select |
| 450 | :items="subjectList.subjects" | 450 | :items="subjectList.subjects" |
| 451 | placeholder="Select your subject" | 451 | placeholder="Select your subject" |
| 452 | v-model="addAssignment.subjectName" | 452 | v-model="addAssignment.subjectName" |
| 453 | item-text="subjectName" | 453 | item-text="subjectName" |
| 454 | item-value="_id" | 454 | item-value="_id" |
| 455 | :rules="subjectRules" | 455 | :rules="subjectRules" |
| 456 | required | 456 | required |
| 457 | ></v-select> | 457 | ></v-select> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | </v-layout> | 459 | </v-layout> |
| 460 | <v-layout> | 460 | <v-layout> |
| 461 | <v-flex xs4 class="pt-4 subheading"> | 461 | <v-flex xs4 class="pt-4 subheading"> |
| 462 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> | 462 | <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> |
| 463 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> | 463 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | <v-flex xs8 class="ml-3"> | 465 | <v-flex xs8 class="ml-3"> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | placeholder="Select File" | 467 | placeholder="Select File" |
| 468 | @click="pickFile" | 468 | @click="pickFile" |
| 469 | v-model="imageName" | 469 | v-model="imageName" |
| 470 | append-icon="attach_file" | 470 | append-icon="attach_file" |
| 471 | ></v-text-field> | 471 | ></v-text-field> |
| 472 | <input | 472 | <input |
| 473 | type="file" | 473 | type="file" |
| 474 | style="display:none" | 474 | style="display:none" |
| 475 | ref="image" | 475 | ref="image" |
| 476 | accept="image/*" | 476 | accept="image/*" |
| 477 | @change="onFilePicked" | 477 | @change="onFilePicked" |
| 478 | /> | 478 | /> |
| 479 | </v-flex> | 479 | </v-flex> |
| 480 | </v-layout> | 480 | </v-layout> |
| 481 | <v-layout> | 481 | <v-layout> |
| 482 | <v-flex xs12 sm12> | 482 | <v-flex xs12 sm12> |
| 483 | <v-card-actions> | 483 | <v-card-actions> |
| 484 | <v-spacer></v-spacer> | 484 | <v-spacer></v-spacer> |
| 485 | <v-btn | 485 | <v-btn |
| 486 | @click="submit" | 486 | @click="submit" |
| 487 | round | 487 | round |
| 488 | dark | 488 | dark |
| 489 | :loading="loading" | 489 | :loading="loading" |
| 490 | class="add-button" | 490 | class="add-button" |
| 491 | >Add Assignment</v-btn> | 491 | >Add Assignment</v-btn> |
| 492 | </v-card-actions> | 492 | </v-card-actions> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | </v-layout> | 494 | </v-layout> |
| 495 | </v-form> | 495 | </v-form> |
| 496 | </v-flex> | 496 | </v-flex> |
| 497 | </v-layout> | 497 | </v-layout> |
| 498 | </v-container> | 498 | </v-container> |
| 499 | </v-card> | 499 | </v-card> |
| 500 | </v-dialog> | 500 | </v-dialog> |
| 501 | <div class="loader" v-if="showLoader"> | 501 | <div class="loader" v-if="showLoader"> |
| 502 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 502 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 503 | </div> | 503 | </div> |
| 504 | </v-container> | 504 | </v-container> |
| 505 | </template> | 505 | </template> |
| 506 | 506 | ||
| 507 | <script> | 507 | <script> |
| 508 | import http from "@/Services/http.js"; | 508 | import http from "@/Services/http.js"; |
| 509 | import Util from "@/util"; | 509 | import Util from "@/util"; |
| 510 | import moment from "moment"; | 510 | import moment from "moment"; |
| 511 | import jsPDF from "jspdf"; | 511 | import jsPDF from "jspdf"; |
| 512 | import { saveAs } from "file-saver"; | 512 | import { saveAs } from "file-saver"; |
| 513 | 513 | ||
| 514 | export default { | 514 | export default { |
| 515 | data: () => ({ | 515 | data: () => ({ |
| 516 | snackbar: false, | 516 | snackbar: false, |
| 517 | role: "", | 517 | role: "", |
| 518 | menu1: false, | 518 | menu1: false, |
| 519 | menu2: false, | 519 | menu2: false, |
| 520 | y: "top", | 520 | y: "top", |
| 521 | x: "right", | 521 | x: "right", |
| 522 | mode: "", | 522 | mode: "", |
| 523 | timeout: 3000, | 523 | timeout: 3000, |
| 524 | text: "", | 524 | text: "", |
| 525 | color: "", | 525 | color: "", |
| 526 | show: true, | 526 | show: true, |
| 527 | showSearch: false, | 527 | showSearch: false, |
| 528 | showLoader: false, | 528 | showLoader: false, |
| 529 | loading: false, | 529 | loading: false, |
| 530 | editLoading: false, | 530 | editLoading: false, |
| 531 | date: null, | 531 | date: null, |
| 532 | search: "", | 532 | search: "", |
| 533 | viewAssignmentDialog: false, | 533 | viewAssignmentDialog: false, |
| 534 | editAssignmentDialog: false, | 534 | editAssignmentDialog: false, |
| 535 | valid: true, | 535 | valid: true, |
| 536 | validEditAssignment: true, | 536 | validEditAssignment: true, |
| 537 | addAssignmentDialog: false, | 537 | addAssignmentDialog: false, |
| 538 | 538 | ||
| 539 | pagination: { | 539 | pagination: { |
| 540 | rowsPerPage: 10, | 540 | rowsPerPage: 10, |
| 541 | }, | 541 | }, |
| 542 | token: "", | 542 | token: "", |
| 543 | headers: [ | 543 | headers: [ |
| 544 | { | 544 | { |
| 545 | text: "No", | 545 | text: "No", |
| 546 | align: "", | 546 | align: "", |
| 547 | sortable: false, | 547 | sortable: false, |
| 548 | value: "No", | 548 | value: "No", |
| 549 | }, | 549 | }, |
| 550 | { | 550 | { |
| 551 | text: "Title", | 551 | text: "Title", |
| 552 | value: "title", | 552 | value: "title", |
| 553 | sortable: false, | 553 | sortable: false, |
| 554 | align: "center", | 554 | align: "center", |
| 555 | }, | 555 | }, |
| 556 | { | 556 | { |
| 557 | text: "Description", | 557 | text: "Description", |
| 558 | value: "description", | 558 | value: "description", |
| 559 | sortable: false, | 559 | sortable: false, |
| 560 | align: "center", | 560 | align: "center", |
| 561 | }, | 561 | }, |
| 562 | { | 562 | { |
| 563 | text: "Deadline", | 563 | text: "Deadline", |
| 564 | value: "deadline", | 564 | value: "deadline", |
| 565 | sortable: false, | 565 | sortable: false, |
| 566 | align: "center", | 566 | align: "center", |
| 567 | }, | 567 | }, |
| 568 | { | 568 | { |
| 569 | text: "Section", | 569 | text: "Section", |
| 570 | value: "name", | 570 | value: "name", |
| 571 | sortable: false, | 571 | sortable: false, |
| 572 | align: "center", | 572 | align: "center", |
| 573 | }, | 573 | }, |
| 574 | { | 574 | { |
| 575 | text: "Uploader", | 575 | text: "Uploader", |
| 576 | value: "name", | 576 | value: "name", |
| 577 | sortable: false, | 577 | sortable: false, |
| 578 | align: "center", | 578 | align: "center", |
| 579 | }, | 579 | }, |
| 580 | { | 580 | { |
| 581 | text: "File", | 581 | text: "File", |
| 582 | value: "file", | 582 | value: "file", |
| 583 | sortable: false, | 583 | sortable: false, |
| 584 | align: "center", | 584 | align: "center", |
| 585 | }, | 585 | }, |
| 586 | { text: "Action", value: "", sortable: false, align: "center" }, | 586 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 587 | ], | 587 | ], |
| 588 | 588 | ||
| 589 | showPdfData: false, | 589 | showPdfData: false, |
| 590 | loadingPdf: false, | 590 | loadingPdf: false, |
| 591 | hideData: true, | 591 | hideData: true, |
| 592 | 592 | ||
| 593 | assignmentData: [], | 593 | assignmentData: [], |
| 594 | subjectList: [], | 594 | subjectList: [], |
| 595 | classList: [], | 595 | classList: [], |
| 596 | addSection: [], | 596 | addSection: [], |
| 597 | editedIndex: -1, | 597 | editedIndex: -1, |
| 598 | addSubject: {}, | 598 | addSubject: {}, |
| 599 | 599 | ||
| 600 | editedItem: { | 600 | editedItem: { |
| 601 | title: "", | 601 | title: "", |
| 602 | description: "", | 602 | description: "", |
| 603 | deadline: "", | 603 | deadline: "", |
| 604 | classId: "", | 604 | classId: "", |
| 605 | sectionId: "", | 605 | sectionId: "", |
| 606 | subjectName: "", | 606 | subjectName: "", |
| 607 | fileType: "", | 607 | fileType: "", |
| 608 | }, | 608 | }, |
| 609 | addAssignment: {}, | 609 | addAssignment: {}, |
| 610 | showAssignment: {}, | 610 | showAssignment: {}, |
| 611 | 611 | ||
| 612 | imageData: {}, | 612 | imageData: {}, |
| 613 | imageName: "", | 613 | imageName: "", |
| 614 | imageUrl: "", | 614 | imageUrl: "", |
| 615 | imageFile: "", | 615 | imageFile: "", |
| 616 | 616 | ||
| 617 | titleRules: [(v) => !!v || " Title is required"], | 617 | titleRules: [(v) => !!v || " Title is required"], |
| 618 | descriptionRules: [(v) => !!v || " Description is required"], | 618 | descriptionRules: [(v) => !!v || " Description is required"], |
| 619 | deadlineRules: [(v) => !!v || " Deadline is required"], | 619 | deadlineRules: [(v) => !!v || " Deadline is required"], |
| 620 | classRules: [(v) => !!v || "Class is required"], | 620 | classRules: [(v) => !!v || "Class is required"], |
| 621 | sectionRules: [(v) => !!v || "Section is required"], | 621 | sectionRules: [(v) => !!v || "Section is required"], |
| 622 | subjectRules: [(v) => !!v || "Student is required"], | 622 | subjectRules: [(v) => !!v || "Student is required"], |
| 623 | fileRules: [(v) => !!v || "File is required"], | 623 | fileRules: [(v) => !!v || "File is required"], |
| 624 | }), | 624 | }), |
| 625 | watch: { | 625 | watch: { |
| 626 | addAssignmentDialog: function (val) { | 626 | addAssignmentDialog: function (val) { |
| 627 | if (!val) { | 627 | if (!val) { |
| 628 | this.addAssignment = []; | 628 | this.addAssignment = []; |
| 629 | this.imageName = ""; | 629 | this.imageName = ""; |
| 630 | } | 630 | } |
| 631 | }, | 631 | }, |
| 632 | }, | 632 | }, |
| 633 | methods: { | 633 | methods: { |
| 634 | dates: function (date) { | 634 | dates: function (date) { |
| 635 | return moment(date).format("MMMM DD, YYYY"); | 635 | return moment(date).format("MMMM DD, YYYY"); |
| 636 | }, | 636 | }, |
| 637 | pickFile() { | 637 | pickFile() { |
| 638 | this.$refs.image.click(); | 638 | this.$refs.image.click(); |
| 639 | }, | 639 | }, |
| 640 | editItem(item) { | 640 | editItem(item) { |
| 641 | this.editedIndex = this.assignmentData; | 641 | this.editedIndex = this.assignmentData; |
| 642 | this.editedItem = Object.assign({}, item); | 642 | this.editedItem = Object.assign({}, item); |
| 643 | this.dialog = true; | 643 | this.dialog = true; |
| 644 | this.editAssignmentDialog = true; | 644 | this.editAssignmentDialog = true; |
| 645 | }, | 645 | }, |
| 646 | profile(item) { | 646 | profile(item) { |
| 647 | this.editedIndex = this.assignmentData; | 647 | this.editedIndex = this.assignmentData; |
| 648 | this.editedItem = Object.assign({}, item); | 648 | this.editedItem = Object.assign({}, item); |
| 649 | this.dialog1 = true; | 649 | this.dialog1 = true; |
| 650 | this.viewAssignmentDialog = true; | 650 | this.viewAssignmentDialog = true; |
| 651 | }, | 651 | }, |
| 652 | deleteItem(item) { | 652 | deleteItem(item) { |
| 653 | let deleteAssignment = { | 653 | let deleteAssignment = { |
| 654 | assignmentId: item._id, | 654 | assignmentId: item._id, |
| 655 | }; | 655 | }; |
| 656 | http() | 656 | http() |
| 657 | .delete( | 657 | .delete( |
| 658 | "/deleteAssignment", | 658 | "/deleteAssignment", |
| 659 | confirm("Are you sure you want to delete this?") && { | 659 | confirm("Are you sure you want to delete this?") && { |
| 660 | params: deleteAssignment, | 660 | params: deleteAssignment, |
| 661 | }, | 661 | }, |
| 662 | { | 662 | { |
| 663 | headers: { Authorization: "Bearer " + this.token }, | 663 | headers: { Authorization: "Bearer " + this.token }, |
| 664 | } | 664 | } |
| 665 | ) | 665 | ) |
| 666 | .then((response) => { | 666 | .then((response) => { |
| 667 | this.getAssignmentList(); | 667 | this.getAssignmentList(); |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.text = "Successfully delete Existing Assignment"; | 669 | this.text = "Successfully delete Existing Assignment"; |
| 670 | this.color = "green"; | 670 | this.color = "green"; |
| 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 | }); | 676 | }); |
| 677 | }, | 677 | }, |
| 678 | close() { | 678 | close() { |
| 679 | this.editAssignmentDialog = false; | 679 | this.editAssignmentDialog = false; |
| 680 | }, | 680 | }, |
| 681 | close1() { | 681 | close1() { |
| 682 | this.viewAssignmentDialog = false; | 682 | this.viewAssignmentDialog = false; |
| 683 | }, | 683 | }, |
| 684 | closeAddAssignmentModel() { | 684 | closeAddAssignmentModel() { |
| 685 | this.addAssignmentDialog = false; | 685 | this.addAssignmentDialog = false; |
| 686 | // this.assignmentData = []; | 686 | // this.assignmentData = []; |
| 687 | this.addAssignment = []; | 687 | this.addAssignment = []; |
| 688 | this.imageName = ""; | 688 | this.imageName = ""; |
| 689 | }, | 689 | }, |
| 690 | submit() { | 690 | submit() { |
| 691 | var addAssignment = { | 691 | var addAssignment = { |
| 692 | title: this.addAssignment.title, | 692 | title: this.addAssignment.title, |
| 693 | description: this.addAssignment.description, | 693 | description: this.addAssignment.description, |
| 694 | deadline: this.addAssignment.deadline, | 694 | deadline: this.addAssignment.deadline, |
| 695 | classId: this.addAssignment.classId, | 695 | classId: this.addAssignment.classId, |
| 696 | sectionId: this.addAssignment.sectionId, | 696 | sectionId: this.addAssignment.sectionId, |
| 697 | subjectName: this.addAssignment.subjectName, | 697 | subjectName: this.addAssignment.subjectName, |
| 698 | file: this.addAssignment.imageName, | 698 | file: this.addAssignment.imageName, |
| 699 | fileName: this.imageName, | 699 | fileName: this.imageName, |
| 700 | }; | 700 | }; |
| 701 | var signatures = { | 701 | var signatures = { |
| 702 | JVBERi0: "other", | 702 | JVBERi0: "other", |
| 703 | iVBORw0KGgo: "image", | 703 | iVBORw0KGgo: "image", |
| 704 | UEsDBBQ: "other", | 704 | UEsDBBQ: "other", |
| 705 | "/": "image", | 705 | "/": "image", |
| 706 | AAABAA: "image", | 706 | AAABAA: "image", |
| 707 | IywiV2hhdC: "other", | 707 | IywiV2hhdC: "other", |
| 708 | bmFtZSxl: "other", | 708 | bmFtZSxl: "other", |
| 709 | }; | 709 | }; |
| 710 | function detectMimeType(b64) { | 710 | function detectMimeType(b64) { |
| 711 | for (var s in signatures) { | 711 | for (var s in signatures) { |
| 712 | if (b64.indexOf(s) === 0) { | 712 | if (b64.indexOf(s) === 0) { |
| 713 | return signatures[s]; | 713 | return signatures[s]; |
| 714 | } | 714 | } |
| 715 | } | 715 | } |
| 716 | } | 716 | } |
| 717 | if (this.$refs.form.validate()) { | 717 | if (this.$refs.form.validate()) { |
| 718 | if (this.imageUrl) { | 718 | if (this.imageUrl) { |
| 719 | var str = this.imageUrl; | 719 | var str = this.imageUrl; |
| 720 | const [baseUrl, imageUrl] = str.split(/,/); | 720 | const [baseUrl, imageUrl] = str.split(/,/); |
| 721 | addAssignment.upload = imageUrl; | 721 | addAssignment.upload = imageUrl; |
| 722 | addAssignment.fileType = detectMimeType(imageUrl); | 722 | addAssignment.fileType = detectMimeType(imageUrl); |
| 723 | } | 723 | } |
| 724 | // console.log("data===>", addAssignment); | 724 | // console.log("data===>", addAssignment); |
| 725 | http() | 725 | http() |
| 726 | .post("/createAssignment", addAssignment) | 726 | .post("/createAssignment", addAssignment) |
| 727 | .then((response) => { | 727 | .then((response) => { |
| 728 | this.getAssignmentList(); | 728 | this.getAssignmentList(); |
| 729 | this.snackbar = true; | 729 | this.snackbar = true; |
| 730 | this.text = "Assignment added successfully"; | 730 | this.text = "Assignment added successfully"; |
| 731 | this.color = "green"; | 731 | this.color = "green"; |
| 732 | this.addAssignmentDialog = false; | 732 | this.addAssignmentDialog = false; |
| 733 | this.clear(); | 733 | this.clear(); |
| 734 | }) | 734 | }) |
| 735 | .catch((error) => { | 735 | .catch((error) => { |
| 736 | // console.log(error); | 736 | // console.log(error); |
| 737 | this.snackbar = true; | 737 | this.snackbar = true; |
| 738 | this.text = error.response.data.message; | 738 | this.text = error.response.data.message; |
| 739 | this.color = "red"; | 739 | this.color = "red"; |
| 740 | }); | 740 | }); |
| 741 | } | 741 | } |
| 742 | }, | 742 | }, |
| 743 | getAssignmentList() { | 743 | getAssignmentList() { |
| 744 | if (this.addAssignment.classId) { | 744 | if (this.addAssignment.classId) { |
| 745 | this.addAssignment.classId = this.addAssignment.classId; | 745 | this.addAssignment.classId = this.addAssignment.classId; |
| 746 | } | 746 | } |
| 747 | this.showLoader = true; | 747 | this.showLoader = true; |
| 748 | http() | 748 | http() |
| 749 | .get( | 749 | .get( |
| 750 | "/getAssignmentList", | 750 | "/getAssignmentList", |
| 751 | { | 751 | { |
| 752 | params: { classId: this.showAssignment.classId }, | 752 | params: { classId: this.showAssignment.classId }, |
| 753 | }, | 753 | }, |
| 754 | { | 754 | { |
| 755 | headers: { Authorization: "Bearer " + this.token }, | 755 | headers: { Authorization: "Bearer " + this.token }, |
| 756 | } | 756 | } |
| 757 | ) | 757 | ) |
| 758 | .then((response) => { | 758 | .then((response) => { |
| 759 | this.assignmentData = response.data.data; | 759 | this.assignmentData = response.data.data; |
| 760 | this.showLoader = false; | 760 | this.showLoader = false; |
| 761 | this.loadingSearch = false; | 761 | this.loadingSearch = false; |
| 762 | }) | 762 | }) |
| 763 | .catch((error) => { | 763 | .catch((error) => { |
| 764 | // console.log("err====>", err); | 764 | // console.log("err====>", err); |
| 765 | this.showLoader = false; | 765 | this.showLoader = false; |
| 766 | this.loadingSearch = false; | 766 | this.loadingSearch = false; |
| 767 | this.snackbar = true; | 767 | this.snackbar = true; |
| 768 | this.text = error.response.data.message; | 768 | this.text = error.response.data.message; |
| 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 | clear() { | 776 | clear() { |
| 777 | this.$refs.form.reset(); | 777 | this.$refs.form.reset(); |
| 778 | }, | 778 | }, |
| 779 | save() { | 779 | save() { |
| 780 | if (this.$refs.formEditAssignment.validate()) { | 780 | if (this.$refs.formEditAssignment.validate()) { |
| 781 | let editAssignment = { | 781 | let editAssignment = { |
| 782 | assignmentId: this.editedItem._id, | 782 | assignmentId: this.editedItem._id, |
| 783 | title: this.addAssignment.title, | 783 | title: this.addAssignment.title, |
| 784 | description: this.addAssignment.description, | 784 | description: this.addAssignment.description, |
| 785 | deadline: this.addAssignment.deadline, | 785 | deadline: this.addAssignment.deadline, |
| 786 | classId: this.addAssignment.classId, | 786 | classId: this.addAssignment.classId, |
| 787 | sectionId: this.addAssignment.sectionId, | 787 | sectionId: this.addAssignment.sectionId, |
| 788 | subjectName: this.addAssignment.subjectName, | 788 | subjectName: this.addAssignment.subjectName, |
| 789 | file: this.addAssignment.imageName, | 789 | file: this.addAssignment.imageName, |
| 790 | fileName: this.imageName, | 790 | fileName: this.imageName, |
| 791 | }; | 791 | }; |
| 792 | this.editLoading = true; | 792 | this.editLoading = true; |
| 793 | var signatures = { | 793 | var signatures = { |
| 794 | JVBERi0: "other", | 794 | JVBERi0: "other", |
| 795 | iVBORw0KGgo: "image", | 795 | iVBORw0KGgo: "image", |
| 796 | UEsDBBQ: "other", | 796 | UEsDBBQ: "other", |
| 797 | "/": "image", | 797 | "/": "image", |
| 798 | AAABAA: "image", | 798 | AAABAA: "image", |
| 799 | IywiV2hhdC: "other", | 799 | IywiV2hhdC: "other", |
| 800 | bmFtZSxl: "other", | 800 | bmFtZSxl: "other", |
| 801 | }; | 801 | }; |
| 802 | function detectMimeType(b64) { | 802 | function detectMimeType(b64) { |
| 803 | for (var s in signatures) { | 803 | for (var s in signatures) { |
| 804 | if (b64.indexOf(s) === 0) { | 804 | if (b64.indexOf(s) === 0) { |
| 805 | return signatures[s]; | 805 | return signatures[s]; |
| 806 | } | 806 | } |
| 807 | } | 807 | } |
| 808 | } | 808 | } |
| 809 | if (this.imageUrl) { | 809 | if (this.imageUrl) { |
| 810 | var str = this.imageUrl; | 810 | var str = this.imageUrl; |
| 811 | const [baseUrl, imageUrl] = str.split(/,/); | 811 | const [baseUrl, imageUrl] = str.split(/,/); |
| 812 | editAssignment.upload = imageUrl; | 812 | editAssignment.upload = imageUrl; |
| 813 | editAssignment.fileType = detectMimeType(imageUrl); | 813 | editAssignment.fileType = detectMimeType(imageUrl); |
| 814 | } | 814 | } |
| 815 | http() | 815 | http() |
| 816 | .put("/updateAssignment", editAssignment) | 816 | .put("/updateAssignment", editAssignment) |
| 817 | .then((response) => { | 817 | .then((response) => { |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = "Successfully Edit Existing Assignment"; | 819 | this.text = "Successfully Edit Existing Assignment"; |
| 820 | this.color = "green"; | 820 | this.color = "green"; |
| 821 | this.getAssignmentList(); | 821 | this.getAssignmentList(); |
| 822 | this.editLoading = false; | 822 | this.editLoading = false; |
| 823 | this.editAssignmentDialog = false; | 823 | this.editAssignmentDialog = false; |
| 824 | }) | 824 | }) |
| 825 | .catch((error) => { | 825 | .catch((error) => { |
| 826 | this.editLoading = false; | 826 | this.editLoading = false; |
| 827 | // console.log(error); | 827 | // console.log(error); |
| 828 | }); | 828 | }); |
| 829 | } | 829 | } |
| 830 | }, | 830 | }, |
| 831 | getClass() { | 831 | getClass() { |
| 832 | http() | 832 | http() |
| 833 | .get("/getClassesList", { | 833 | .get("/getClassesList", { |
| 834 | headers: { Authorization: "Bearer " + this.token }, | 834 | headers: { Authorization: "Bearer " + this.token }, |
| 835 | }) | 835 | }) |
| 836 | .then((response) => { | 836 | .then((response) => { |
| 837 | this.classList = response.data.data; | 837 | this.classList = response.data.data; |
| 838 | }) | 838 | }) |
| 839 | .catch((error) => { | 839 | .catch((error) => { |
| 840 | if (error.response.status === 401) { | 840 | if (error.response.status === 401) { |
| 841 | this.$router.replace({ path: "/" }); | 841 | this.$router.replace({ path: "/" }); |
| 842 | this.$store.dispatch("setToken", null); | 842 | this.$store.dispatch("setToken", null); |
| 843 | this.$store.dispatch("Id", null); | 843 | this.$store.dispatch("Id", null); |
| 844 | } | 844 | } |
| 845 | }); | 845 | }); |
| 846 | }, | 846 | }, |
| 847 | getSections(_id) { | 847 | getSections(_id) { |
| 848 | var token = this.$store.state.token; | 848 | var token = this.$store.state.token; |
| 849 | this.showLoader = true; | 849 | this.showLoader = true; |
| 850 | http() | 850 | http() |
| 851 | .get( | 851 | .get( |
| 852 | "/getSectionsList", | 852 | "/getSectionsList", |
| 853 | { params: { classId: _id } }, | 853 | { params: { classId: _id } }, |
| 854 | { | 854 | { |
| 855 | headers: { Authorization: "Bearer " + token }, | 855 | headers: { Authorization: "Bearer " + token }, |
| 856 | } | 856 | } |
| 857 | ) | 857 | ) |
| 858 | .then((response) => { | 858 | .then((response) => { |
| 859 | this.addSection = response.data.data; | 859 | this.addSection = response.data.data; |
| 860 | this.showLoader = false; | 860 | this.showLoader = false; |
| 861 | }) | 861 | }) |
| 862 | .catch((err) => { | 862 | .catch((err) => { |
| 863 | this.showLoader = false; | 863 | this.showLoader = false; |
| 864 | }); | 864 | }); |
| 865 | }, | 865 | }, |
| 866 | getClassSubject(_id) { | 866 | getClassSubject(_id) { |
| 867 | this.showLoader = true; | 867 | this.showLoader = true; |
| 868 | // this.classId = this.classId; | 868 | // this.classId = this.classId; |
| 869 | http() | 869 | http() |
| 870 | .get( | 870 | .get( |
| 871 | "/getParticularClass", | 871 | "/getParticularClass", |
| 872 | { params: { classId: _id } }, | 872 | { params: { classId: _id } }, |
| 873 | { | 873 | { |
| 874 | headers: { Authorization: "Bearer " + this.token }, | 874 | headers: { Authorization: "Bearer " + this.token }, |
| 875 | } | 875 | } |
| 876 | ) | 876 | ) |
| 877 | .then((response) => { | 877 | .then((response) => { |
| 878 | this.subjectList = response.data.data; | 878 | this.subjectList = response.data.data; |
| 879 | this.showLoader = false; | 879 | this.showLoader = false; |
| 880 | }) | 880 | }) |
| 881 | .catch((err) => { | 881 | .catch((err) => { |
| 882 | this.showLoader = false; | 882 | this.showLoader = false; |
| 883 | }); | 883 | }); |
| 884 | }, | 884 | }, |
| 885 | onFilePicked(e) { | 885 | onFilePicked(e) { |
| 886 | const files = e.target.files; | 886 | const files = e.target.files; |
| 887 | this.upload = e.target.files[0]; | 887 | this.upload = e.target.files[0]; |
| 888 | if (files[0] !== undefined) { | 888 | if (files[0] !== undefined) { |
| 889 | this.imageName = files[0].name; | 889 | this.imageName = files[0].name; |
| 890 | if (this.imageName.lastIndexOf(".") <= 0) { | 890 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 891 | return; | 891 | return; |
| 892 | } | 892 | } |
| 893 | const fr = new FileReader(); | 893 | const fr = new FileReader(); |
| 894 | fr.readAsDataURL(files[0]); | 894 | fr.readAsDataURL(files[0]); |
| 895 | fr.addEventListener("load", () => { | 895 | fr.addEventListener("load", () => { |
| 896 | this.imageUrl = fr.result; | 896 | this.imageUrl = fr.result; |
| 897 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 897 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 898 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 898 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 899 | }); | 899 | }); |
| 900 | // console.log("this.imageName", this.imageName); | 900 | // console.log("this.imageName", this.imageName); |
| 901 | } else { | 901 | } else { |
| 902 | this.imageName = ""; | 902 | this.imageName = ""; |
| 903 | this.imageFile = ""; | 903 | this.imageFile = ""; |
| 904 | this.imageUrl = ""; | 904 | this.imageUrl = ""; |
| 905 | } | 905 | } |
| 906 | }, | 906 | }, |
| 907 | displaySearch() { | 907 | displaySearch() { |
| 908 | (this.show = false), (this.showSearch = true); | 908 | (this.show = false), (this.showSearch = true); |
| 909 | }, | 909 | }, |
| 910 | closeSearch() { | 910 | closeSearch() { |
| 911 | this.showSearch = false; | 911 | this.showSearch = false; |
| 912 | this.show = true; | 912 | this.show = true; |
| 913 | this.search = ""; | 913 | this.search = ""; |
| 914 | }, | 914 | }, |
| 915 | 915 | ||
| 916 | async generatePDF2Canvas(item) { | 916 | async generatePDF2Canvas(item) { |
| 917 | var dataType = ""; | 917 | var dataType = ""; |
| 918 | var type = ""; | 918 | var type = ""; |
| 919 | if (item.fileType == "image") { | 919 | if (item.fileType == "image") { |
| 920 | dataType = "file.jpg"; | 920 | dataType = "file.jpg"; |
| 921 | } else if (item.fileType == "other") { | 921 | } else if (item.fileType == "other") { |
| 922 | dataType = "file.pdf"; | 922 | dataType = "file.pdf"; |
| 923 | type = "application/pdf"; | 923 | type = "application/pdf"; |
| 924 | } | 924 | } |
| 925 | var FileSaver = require("file-saver"); | 925 | var FileSaver = require("file-saver"); |
| 926 | FileSaver.saveAs(item.file, "image.jpg"); | 926 | FileSaver.saveAs(item.file, "image.jpg"); |
| 927 | }, | 927 | }, |
| 928 | }, | 928 | }, |
| 929 | mounted() { | 929 | mounted() { |
| 930 | this.token = this.$store.state.token; | 930 | this.token = this.$store.state.token; |
| 931 | this.role = this.$store.state.role; | 931 | this.role = this.$store.state.role; |
| 932 | this.getClass(); | 932 | this.getClass(); |
| 933 | }, | 933 | }, |
| 934 | }; | 934 | }; |
| 935 | </script> | 935 | </script> |
| 936 | 936 | ||
| 937 | <style scoped> | 937 | <style scoped> |
| 938 | a:hover :hover { | 938 | a:hover :hover { |
| 939 | text-decoration: underline !important; | 939 | text-decoration: underline !important; |
| 940 | color: blue; | 940 | color: blue; |
| 941 | } | 941 | } |
| 942 | </style> | 942 | </style> |
src/pages/Academic/routine.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Subject ****** --> | 3 | <!-- ****** EDIT Subject ****** --> |
| 4 | <v-dialog v-model="editRoutineDialog" max-width="600px" persistent> | 4 | <v-dialog v-model="editRoutineDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Routine</label> | 8 | <label class="title text-xs-center">Edit Routine</label> |
| 9 | <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-container fluid> | 12 | <v-container fluid> |
| 13 | <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation> | 13 | <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs3 sm4 class="pt-4 subheading"> | 15 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 16 | <label class="right">Class :</label> | 16 | <label class="right">Class :</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-2"> | 18 | <v-flex xs8 sm8 class="ml-2"> |
| 19 | <v-select | 19 | <v-select |
| 20 | :items="classList" | 20 | :items="classList" |
| 21 | label="Select your Class" | 21 | label="Select your Class" |
| 22 | v-model="editedItem.classId" | 22 | v-model="editedItem.classId" |
| 23 | item-text="classNum" | 23 | item-text="classNum" |
| 24 | item-value="_id" | 24 | item-value="_id" |
| 25 | :rules="classRules" | 25 | :rules="classRules" |
| 26 | @change="getClassSubject(editedItem.classId)" | 26 | @change="getClassSubject(editedItem.classId)" |
| 27 | required | 27 | required |
| 28 | ></v-select> | 28 | ></v-select> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs3 sm4 class="pt-4 subheading"> | 32 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 33 | <label class="right">Subject :</label> | 33 | <label class="right">Subject :</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs8 sm8 class="ml-2"> | 35 | <v-flex xs8 sm8 class="ml-2"> |
| 36 | <v-select | 36 | <v-select |
| 37 | :items="subjectList.subjects" | 37 | :items="subjectList.subjects" |
| 38 | label="Select your subject" | 38 | label="Select your subject" |
| 39 | v-model="editedItem.subjectName" | 39 | v-model="editedItem.subjectName" |
| 40 | item-text="subjectName" | 40 | item-text="subjectName" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | :rules="subjectRules" | 42 | :rules="subjectRules" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | <v-layout> | 47 | <v-layout> |
| 48 | <v-flex xs4 sm4 class="pt-4 subheading"> | 48 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 49 | <label class="right">Teacher Name :</label> | 49 | <label class="right">Teacher Name :</label> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex xs8 sm8 class="ml-3"> | 51 | <v-flex xs8 sm8 class="ml-3"> |
| 52 | <v-select | 52 | <v-select |
| 53 | :items="teacherList" | 53 | :items="teacherList" |
| 54 | label="Select your teacher" | 54 | label="Select your teacher" |
| 55 | v-model="editedItem.teacherId" | 55 | v-model="editedItem.teacherId" |
| 56 | item-text="name" | 56 | item-text="name" |
| 57 | item-value="_id" | 57 | item-value="_id" |
| 58 | :rules="teacherRules" | 58 | :rules="teacherRules" |
| 59 | required | 59 | required |
| 60 | ></v-select> | 60 | ></v-select> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | </v-layout> | 62 | </v-layout> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | <v-flex xs5 sm4 class="pt-4 subheading"> | 64 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 65 | <label class="right">Starting time:</label> | 65 | <label class="right">Starting time:</label> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | <v-flex xs7 sm6 class="ml-3"> | 67 | <v-flex xs7 sm6 class="ml-3"> |
| 68 | <v-menu | 68 | <v-menu |
| 69 | ref="menuC" | 69 | ref="menuC" |
| 70 | :close-on-content-click="false" | 70 | :close-on-content-click="false" |
| 71 | v-model="menu4" | 71 | v-model="menu4" |
| 72 | :nudge-right="40" | 72 | :nudge-right="40" |
| 73 | lazy | 73 | lazy |
| 74 | transition="scale-transition" | 74 | transition="scale-transition" |
| 75 | offset-y | 75 | offset-y |
| 76 | full-width | 76 | full-width |
| 77 | max-width="290px" | 77 | max-width="290px" |
| 78 | min-width="290px" | 78 | min-width="290px" |
| 79 | > | 79 | > |
| 80 | <v-text-field | 80 | <v-text-field |
| 81 | slot="activator" | 81 | slot="activator" |
| 82 | v-model="editedItem.startingTime" | 82 | v-model="editedItem.startingTime" |
| 83 | placeholder="Select your starting time" | 83 | placeholder="Select your starting time" |
| 84 | append-icon="access_time" | 84 | append-icon="access_time" |
| 85 | readonly | 85 | readonly |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> | 87 | <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> |
| 88 | </v-menu> | 88 | </v-menu> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | <v-layout> | 91 | <v-layout> |
| 92 | <v-flex xs5 sm4 class="pt-4 subheading"> | 92 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 93 | <label class="right">Ending Time:</label> | 93 | <label class="right">Ending Time:</label> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | <v-flex xs7 sm6 class="ml-3"> | 95 | <v-flex xs7 sm6 class="ml-3"> |
| 96 | <v-menu | 96 | <v-menu |
| 97 | ref="menuB" | 97 | ref="menuB" |
| 98 | :close-on-content-click="false" | 98 | :close-on-content-click="false" |
| 99 | v-model="menu3" | 99 | v-model="menu3" |
| 100 | :nudge-right="40" | 100 | :nudge-right="40" |
| 101 | lazy | 101 | lazy |
| 102 | transition="scale-transition" | 102 | transition="scale-transition" |
| 103 | offset-y | 103 | offset-y |
| 104 | full-width | 104 | full-width |
| 105 | max-width="290px" | 105 | max-width="290px" |
| 106 | min-width="290px" | 106 | min-width="290px" |
| 107 | > | 107 | > |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | slot="activator" | 109 | slot="activator" |
| 110 | v-model="editedItem.endingTime" | 110 | v-model="editedItem.endingTime" |
| 111 | placeholder="Select your end time" | 111 | placeholder="Select your end time" |
| 112 | append-icon="access_time" | 112 | append-icon="access_time" |
| 113 | readonly | 113 | readonly |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> | 115 | <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> |
| 116 | </v-menu> | 116 | </v-menu> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-layout> | 118 | </v-layout> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 sm4 class="pt-4 subheading"> | 120 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 121 | <label class="right">Room:</label> | 121 | <label class="right">Room:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs8 sm8 class="ml-3"> | 123 | <v-flex xs8 sm8 class="ml-3"> |
| 124 | <v-text-field | 124 | <v-text-field |
| 125 | label="fill your room" | 125 | label="fill your room" |
| 126 | :rules="roomRules" | 126 | :rules="roomRules" |
| 127 | v-model="editedItem.room" | 127 | v-model="editedItem.room" |
| 128 | @keyup.enter="submit" | 128 | @keyup.enter="submit" |
| 129 | ></v-text-field> | 129 | ></v-text-field> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs4 sm4 class="pt-4 subheading"> | 133 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 134 | <label class="right">Period:</label> | 134 | <label class="right">Period:</label> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex xs8 sm8 class="ml-3"> | 136 | <v-flex xs8 sm8 class="ml-3"> |
| 137 | <v-text-field | 137 | <v-text-field |
| 138 | label="fill your period" | 138 | label="fill your period" |
| 139 | :rules="periodRules" | 139 | :rules="periodRules" |
| 140 | v-model="editedItem.period" | 140 | v-model="editedItem.period" |
| 141 | @keyup.enter="submit" | 141 | @keyup.enter="submit" |
| 142 | ></v-text-field> | 142 | ></v-text-field> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | <v-layout> | 145 | <v-layout> |
| 146 | <v-flex xs12 sm12> | 146 | <v-flex xs12 sm12> |
| 147 | <v-card-actions> | 147 | <v-card-actions> |
| 148 | <v-spacer></v-spacer> | 148 | <v-spacer></v-spacer> |
| 149 | <v-btn | 149 | <v-btn |
| 150 | @click="update" | 150 | @click="update" |
| 151 | round | 151 | round |
| 152 | dark | 152 | dark |
| 153 | :loading="loading" | 153 | :loading="loading" |
| 154 | class="add-button" | 154 | class="add-button" |
| 155 | >Update Routine</v-btn> | 155 | >Update Routine</v-btn> |
| 156 | </v-card-actions> | 156 | </v-card-actions> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | </v-form> | 159 | </v-form> |
| 160 | </v-container> | 160 | </v-container> |
| 161 | </v-card> | 161 | </v-card> |
| 162 | </v-dialog> | 162 | </v-dialog> |
| 163 | 163 | ||
| 164 | <!-- ****** EXISTING ROUTINE TABLE ****** --> | 164 | <!-- ****** EXISTING ROUTINE TABLE ****** --> |
| 165 | <v-toolbar color="transparent" flat> | 165 | <v-toolbar color="transparent" flat> |
| 166 | <v-btn | 166 | <v-btn |
| 167 | fab | 167 | fab |
| 168 | dark | 168 | dark |
| 169 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 169 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 170 | small | 170 | small |
| 171 | @click="addRoutineDialog = true" | 171 | @click="addRoutineDialog = true" |
| 172 | > | 172 | > |
| 173 | <v-icon dark>add</v-icon> | 173 | <v-icon dark>add</v-icon> |
| 174 | </v-btn> | 174 | </v-btn> |
| 175 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 175 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 176 | <v-btn | 176 | <v-btn |
| 177 | round | 177 | round |
| 178 | class="open-dialog-button" | 178 | class="open-dialog-button" |
| 179 | dark | 179 | dark |
| 180 | @click="addRoutineDialog = true" | 180 | @click="addRoutineDialog = true" |
| 181 | v-if="role != 'TEACHER' " | 181 | v-if="role != 'TEACHER' " |
| 182 | > | 182 | > |
| 183 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine | 183 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | <v-spacer></v-spacer> | 186 | <v-spacer></v-spacer> |
| 187 | <v-flex lg2 md2 xs12 v-show="show"> | 187 | <v-flex lg2 md2 xs12 v-show="show"> |
| 188 | <v-select | 188 | <v-select |
| 189 | :items="classList" | 189 | :items="classList" |
| 190 | label="Select Your Class" | 190 | label="Select Your Class" |
| 191 | v-model="addRoutineList.classId" | 191 | v-model="addRoutineList.classId" |
| 192 | item-text="classNum" | 192 | item-text="classNum" |
| 193 | item-value="_id" | 193 | item-value="_id" |
| 194 | name="Select Class" | 194 | name="Select Class" |
| 195 | :rules="classRules" | 195 | :rules="classRules" |
| 196 | @change="getSections(addRoutineList.classId)" | 196 | @change="getSections(addRoutineList.classId)" |
| 197 | class="pl-2" | 197 | class="pl-2" |
| 198 | required | 198 | required |
| 199 | ></v-select> | 199 | ></v-select> |
| 200 | </v-flex> | 200 | </v-flex> |
| 201 | <v-flex xs8 sm3 md2 class="mr-3"> | 201 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 202 | <v-select | 202 | <v-select |
| 203 | v-model="addRoutineList.sectionId" | 203 | v-model="addRoutineList.sectionId" |
| 204 | label="Select your section" | 204 | label="Select your section" |
| 205 | :items="addSection" | 205 | :items="addSection" |
| 206 | item-text="name" | 206 | item-text="name" |
| 207 | item-value="_id" | 207 | item-value="_id" |
| 208 | name="Select Section" | 208 | name="Select Section" |
| 209 | :rules="sectionRules" | 209 | :rules="sectionRules" |
| 210 | @change="getRoutineList()" | 210 | @change="getRoutineList()" |
| 211 | class="pl-2" | 211 | class="pl-2" |
| 212 | required | 212 | required |
| 213 | ></v-select> | 213 | ></v-select> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | <v-card-title class="body-1" v-show="show"> | 215 | <v-card-title class="body-1" v-show="show"> |
| 216 | <v-btn icon flat @click="displaySearch"> | 216 | <v-btn icon flat @click="displaySearch"> |
| 217 | <v-avatar size="27"> | 217 | <v-avatar size="27"> |
| 218 | <img src="/static/icon/search.png" alt="icon" /> | 218 | <img src="/static/icon/search.png" alt="icon" /> |
| 219 | </v-avatar> | 219 | </v-avatar> |
| 220 | </v-btn> | 220 | </v-btn> |
| 221 | </v-card-title> | 221 | </v-card-title> |
| 222 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 222 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 223 | <v-layout> | 223 | <v-layout> |
| 224 | <v-text-field | 224 | <v-text-field |
| 225 | autofocus | 225 | autofocus |
| 226 | v-model="search" | 226 | v-model="search" |
| 227 | label="Search" | 227 | label="Search" |
| 228 | prepend-inner-icon="search" | 228 | prepend-inner-icon="search" |
| 229 | color="primary" | 229 | color="primary" |
| 230 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 230 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 231 | ></v-text-field> | 231 | ></v-text-field> |
| 232 | <v-icon @click="closeSearch" color="error">close</v-icon> | 232 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-toolbar> | 235 | </v-toolbar> |
| 236 | 236 | ||
| 237 | <div class="col-sm-12"> | 237 | <div class="col-sm-12"> |
| 238 | <div class="box-body"> | 238 | <div class="box-body"> |
| 239 | <div class="row"> | 239 | <div class="row"> |
| 240 | <div class="col-sm-12"> | 240 | <div class="col-sm-12"> |
| 241 | <div class="nav-tabs-custom"> | 241 | <div class="nav-tabs-custom"> |
| 242 | <ul class="nav nav-tabs"> | 242 | <ul class="nav nav-tabs"> |
| 243 | <li class="active"> | 243 | <li class="active"> |
| 244 | <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> | 244 | <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> |
| 245 | </li> | 245 | </li> |
| 246 | </ul> | 246 | </ul> |
| 247 | 247 | ||
| 248 | <div class="tab-content" v-show="hideTable"> | 248 | <div class="tab-content" v-show="hideTable"> |
| 249 | <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> | 249 | <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> |
| 250 | <div | 250 | <div |
| 251 | id="mCSB_1" | 251 | id="mCSB_1" |
| 252 | class="mCustomScrollBox mCS-light" | 252 | class="mCustomScrollBox mCS-light" |
| 253 | style="max-height: none;" | 253 | style="max-height: none;" |
| 254 | tabindex="0" | 254 | tabindex="0" |
| 255 | > | 255 | > |
| 256 | <div | 256 | <div |
| 257 | id="mCSB_1_container" | 257 | id="mCSB_1_container" |
| 258 | class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" | 258 | class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" |
| 259 | style="position: relative; top: 0px; left: 0px; width: 100%;" | 259 | style="position: relative; top: 0px; left: 0px; width: 100%;" |
| 260 | dir="ltr" | 260 | dir="ltr" |
| 261 | > | 261 | > |
| 262 | <div id="hide-table-2"> | 262 | <div id="hide-table-2"> |
| 263 | <table id="table" class="table table-striped"> | 263 | <table id="table" class="table table-striped"> |
| 264 | <tbody> | 264 | <tbody> |
| 265 | <tr> | 265 | <tr> |
| 266 | <td>MONDAY</td> | 266 | <td>MONDAY</td> |
| 267 | </tr> | 267 | </tr> |
| 268 | <tr> | 268 | <tr> |
| 269 | <td>TUESDAY</td> | 269 | <td>TUESDAY</td> |
| 270 | </tr> | 270 | </tr> |
| 271 | <tr> | 271 | <tr> |
| 272 | <td>WEDNESDAY</td> | 272 | <td>WEDNESDAY</td> |
| 273 | </tr> | 273 | </tr> |
| 274 | <tr> | 274 | <tr> |
| 275 | <td>THURSDAY</td> | 275 | <td>THURSDAY</td> |
| 276 | </tr> | 276 | </tr> |
| 277 | <tr> | 277 | <tr> |
| 278 | <td>FRIDAY</td> | 278 | <td>FRIDAY</td> |
| 279 | </tr> | 279 | </tr> |
| 280 | <tr> | 280 | <tr> |
| 281 | <td>SATURDAY</td> | 281 | <td>SATURDAY</td> |
| 282 | </tr> | 282 | </tr> |
| 283 | </tbody> | 283 | </tbody> |
| 284 | </table> | 284 | </table> |
| 285 | </div> | 285 | </div> |
| 286 | </div> | 286 | </div> |
| 287 | <div | 287 | <div |
| 288 | id="mCSB_1_scrollbar_horizontal" | 288 | id="mCSB_1_scrollbar_horizontal" |
| 289 | class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" | 289 | class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" |
| 290 | style="display: none;" | 290 | style="display: none;" |
| 291 | > | 291 | > |
| 292 | <div class="mCSB_draggerContainer"> | 292 | <div class="mCSB_draggerContainer"> |
| 293 | <div | 293 | <div |
| 294 | id="mCSB_1_dragger_horizontal" | 294 | id="mCSB_1_dragger_horizontal" |
| 295 | class="mCSB_dragger" | 295 | class="mCSB_dragger" |
| 296 | style="position: absolute; min-width: 30px; width: 0px; left: 0px;" | 296 | style="position: absolute; min-width: 30px; width: 0px; left: 0px;" |
| 297 | > | 297 | > |
| 298 | <div class="mCSB_dragger_bar"></div> | 298 | <div class="mCSB_dragger_bar"></div> |
| 299 | </div> | 299 | </div> |
| 300 | <div class="mCSB_draggerRail"></div> | 300 | <div class="mCSB_draggerRail"></div> |
| 301 | </div> | 301 | </div> |
| 302 | </div> | 302 | </div> |
| 303 | </div> | 303 | </div> |
| 304 | </div> | 304 | </div> |
| 305 | </div> | 305 | </div> |
| 306 | <div> | 306 | <div> |
| 307 | <table id="table" class="table table-bordered" v-show="showTable"> | 307 | <table id="table" class="table table-bordered" v-show="showTable"> |
| 308 | <tbody> | 308 | <tbody> |
| 309 | <div class="nav-tabs-custom"> | 309 | <div class="nav-tabs-custom"> |
| 310 | <div class="tab-content" id="scrolling"> | 310 | <div class="tab-content" id="scrolling"> |
| 311 | <div id="hide-table-2"> | 311 | <div id="hide-table-2"> |
| 312 | <v-data-table :items="routineList"> | 312 | <v-data-table :items="routineList"> |
| 313 | <template slot="items" slot-scope="props"> | 313 | <template slot="items" slot-scope="props"> |
| 314 | <tr class="tr"> | 314 | <tr class="tr"> |
| 315 | <td>{{ props.item.day }}</td> | 315 | <td>{{ props.item.day }}</td> |
| 316 | <td class="text-center" v-for="list in props.item.lectureRoutine"> | 316 | <td class="text-center" v-for="list in props.item.lectureRoutine"> |
| 317 | {{ props.item.classId.classNum }} | 317 | {{ props.item.classId.classNum }} |
| 318 | <br /> | 318 | <br /> |
| 319 | {{ props.item.sectionId.name }} | 319 | {{ props.item.sectionId.name }} |
| 320 | <br /> | 320 | <br /> |
| 321 | {{ list.startingTime }} - {{ list.endingTime }} | 321 | {{ list.startingTime }} - {{ list.endingTime }} |
| 322 | <br /> | 322 | <br /> |
| 323 | {{ list.room }} | 323 | {{ list.room }} |
| 324 | <br /> | 324 | <br /> |
| 325 | {{ list.subjectName }} | 325 | {{ list.subjectName }} |
| 326 | <br /> | 326 | <br /> |
| 327 | {{ list.teacherId.name}} | 327 | {{ list.teacherId.name}} |
| 328 | <br /> | 328 | <br /> |
| 329 | <span> | 329 | <span> |
| 330 | <v-tooltip top> | 330 | <v-tooltip top> |
| 331 | <img | 331 | <img |
| 332 | slot="activator" | 332 | slot="activator" |
| 333 | style="cursor:pointer; width:20px; height:18px; " | 333 | style="cursor:pointer; width:20px; height:18px; " |
| 334 | class="mr-3" | 334 | class="mr-3" |
| 335 | @click="editItem(list, props.item)" | 335 | @click="editItem(list, props.item)" |
| 336 | src="/static/icon/edit.png" | 336 | src="/static/icon/edit.png" |
| 337 | /> | 337 | /> |
| 338 | <span>Edit</span> | 338 | <span>Edit</span> |
| 339 | </v-tooltip> | 339 | </v-tooltip> |
| 340 | <v-tooltip top> | 340 | <v-tooltip top> |
| 341 | <img | 341 | <img |
| 342 | slot="activator" | 342 | slot="activator" |
| 343 | style="cursor:pointer; width:20px; height:18px; " | 343 | style="cursor:pointer; width:20px; height:18px; " |
| 344 | class="mr-3" | 344 | class="mr-3" |
| 345 | @click="deleteItem(props.item)" | 345 | @click="deleteItem(props.item)" |
| 346 | src="/static/icon/delete.png" | 346 | src="/static/icon/delete.png" |
| 347 | /> | 347 | /> |
| 348 | <span>Delete</span> | 348 | <span>Delete</span> |
| 349 | </v-tooltip> | 349 | </v-tooltip> |
| 350 | </span> | 350 | </span> |
| 351 | </td> | 351 | </td> |
| 352 | </tr> | 352 | </tr> |
| 353 | </template> | 353 | </template> |
| 354 | </v-data-table> | 354 | </v-data-table> |
| 355 | </div> | 355 | </div> |
| 356 | </div> | 356 | </div> |
| 357 | </div> | 357 | </div> |
| 358 | </tbody> | 358 | </tbody> |
| 359 | </table> | 359 | </table> |
| 360 | </div> | 360 | </div> |
| 361 | </div> | 361 | </div> |
| 362 | </div> | 362 | </div> |
| 363 | </div> | 363 | </div> |
| 364 | </div> | 364 | </div> |
| 365 | </div> | 365 | </div> |
| 366 | <!-- ****** ADD MULTIPLE Subject ****** --> | 366 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 367 | <v-snackbar | 367 | <v-snackbar |
| 368 | :timeout="timeout" | 368 | :timeout="timeout" |
| 369 | :top="y === 'top'" | 369 | :top="y === 'top'" |
| 370 | :right="x === 'right'" | 370 | :right="x === 'right'" |
| 371 | :vertical="mode === 'vertical'" | 371 | :vertical="mode === 'vertical'" |
| 372 | v-model="snackbar" | 372 | v-model="snackbar" |
| 373 | :color="color" | 373 | :color="color" |
| 374 | >{{ text }}</v-snackbar> | 374 | >{{ text }}</v-snackbar> |
| 375 | <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog"> | 375 | <v-dialog v-model="addRoutineDialog" max-width="600px" v-if="addRoutineDialog" persistent> |
| 376 | v-if="addRoutineDialog" | 376 | v-if="addRoutineDialog" |
| 377 | <v-card flat class="card-style pa-2" dark> | 377 | <v-card flat class="card-style pa-2" dark> |
| 378 | <v-layout> | 378 | <v-layout> |
| 379 | <v-flex xs12> | 379 | <v-flex xs12> |
| 380 | <label class="title text-xs-center">Add Routine</label> | 380 | <label class="title text-xs-center">Add Routine</label> |
| 381 | <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon> | 381 | <v-icon size="24" class="right" @click="closeAddRoutineModel">cancel</v-icon> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | <v-container fluid fill-height> | 384 | <v-container fluid fill-height> |
| 385 | <v-layout align-center> | 385 | <v-layout align-center> |
| 386 | <v-flex xs12> | 386 | <v-flex xs12> |
| 387 | <v-form ref="form" v-model="valid" lazy-validation> | 387 | <v-form ref="form" v-model="valid" lazy-validation> |
| 388 | <v-layout> | 388 | <v-layout> |
| 389 | <v-flex xs4 sm4 class="pt-4 subheading"> | 389 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 390 | <label class="right">School Year :</label> | 390 | <label class="right">School Year :</label> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | <v-flex xs8 sm8 class="ml-3"> | 392 | <v-flex xs8 sm8 class="ml-3"> |
| 393 | <v-text-field | 393 | <v-text-field |
| 394 | label="fill your year" | 394 | label="fill your year" |
| 395 | :rules="schoolRules" | 395 | :rules="schoolRules" |
| 396 | v-model="addRoutine.schoolYear" | 396 | v-model="addRoutine.schoolYear" |
| 397 | ></v-text-field> | 397 | ></v-text-field> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | <v-layout> | 400 | <v-layout> |
| 401 | <v-flex xs4 sm4 class="pt-4 subheading"> | 401 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 402 | <label class="right">Class :</label> | 402 | <label class="right">Class :</label> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | <v-flex xs8 sm8 class="ml-3"> | 404 | <v-flex xs8 sm8 class="ml-3"> |
| 405 | <v-select | 405 | <v-select |
| 406 | :items="classList" | 406 | :items="classList" |
| 407 | item-text="classNum" | 407 | item-text="classNum" |
| 408 | item-value="_id" | 408 | item-value="_id" |
| 409 | v-model="addRoutine.classId" | 409 | v-model="addRoutine.classId" |
| 410 | label="Select Class" | 410 | label="Select Class" |
| 411 | :rules="classRules" | 411 | :rules="classRules" |
| 412 | @change="getSections(addRoutine.classId)" | 412 | @change="getSections(addRoutine.classId)" |
| 413 | class="pl-2" | 413 | class="pl-2" |
| 414 | required | 414 | required |
| 415 | ></v-select> | 415 | ></v-select> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex xs4 sm4 class="pt-4 subheading"> | 419 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 420 | <label class="right">Section :</label> | 420 | <label class="right">Section :</label> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | <v-flex xs8 sm8 class="ml-3"> | 422 | <v-flex xs8 sm8 class="ml-3"> |
| 423 | <v-select | 423 | <v-select |
| 424 | :items="addSection" | 424 | :items="addSection" |
| 425 | item-text="name" | 425 | item-text="name" |
| 426 | item-value="_id" | 426 | item-value="_id" |
| 427 | v-model="addRoutine.sectionId" | 427 | v-model="addRoutine.sectionId" |
| 428 | label="Select Section" | 428 | label="Select Section" |
| 429 | :rules="sectionRules" | 429 | :rules="sectionRules" |
| 430 | @change="getClassSubject(addRoutine.classId)" | 430 | @change="getClassSubject(addRoutine.classId)" |
| 431 | class="px-2" | 431 | class="px-2" |
| 432 | required | 432 | required |
| 433 | ></v-select> | 433 | ></v-select> |
| 434 | </v-flex> | 434 | </v-flex> |
| 435 | </v-layout> | 435 | </v-layout> |
| 436 | <v-layout> | 436 | <v-layout> |
| 437 | <v-flex xs3 sm4 class="pt-4 subheading"> | 437 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 438 | <label class="right">Subject :</label> | 438 | <label class="right">Subject :</label> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | <v-flex xs8 sm8 class="ml-2"> | 440 | <v-flex xs8 sm8 class="ml-2"> |
| 441 | <v-select | 441 | <v-select |
| 442 | :items="subjectList.subjects" | 442 | :items="subjectList.subjects" |
| 443 | label="Select your subject" | 443 | label="Select your subject" |
| 444 | v-model="addRoutine.subjectName" | 444 | v-model="addRoutine.subjectName" |
| 445 | item-text="subjectName" | 445 | item-text="subjectName" |
| 446 | item-value="subjectName" | 446 | item-value="subjectName" |
| 447 | :rules="subjectRules" | 447 | :rules="subjectRules" |
| 448 | required | 448 | required |
| 449 | ></v-select> | 449 | ></v-select> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | </v-layout> | 451 | </v-layout> |
| 452 | <v-layout> | 452 | <v-layout> |
| 453 | <v-flex xs3 sm4 class="pt-4 subheading"> | 453 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 454 | <label class="right">Day :</label> | 454 | <label class="right">Day :</label> |
| 455 | </v-flex> | 455 | </v-flex> |
| 456 | <v-flex xs8 sm8 class="ml-2"> | 456 | <v-flex xs8 sm8 class="ml-2"> |
| 457 | <v-select | 457 | <v-select |
| 458 | :items="day" | 458 | :items="day" |
| 459 | label="Select your day" | 459 | label="Select your day" |
| 460 | v-model="addRoutine.day" | 460 | v-model="addRoutine.day" |
| 461 | item-text="text" | 461 | item-text="text" |
| 462 | :rules="dayRules" | 462 | :rules="dayRules" |
| 463 | required | 463 | required |
| 464 | ></v-select> | 464 | ></v-select> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | </v-layout> | 466 | </v-layout> |
| 467 | <v-layout> | 467 | <v-layout> |
| 468 | <v-flex xs4 sm4 class="pt-4 subheading"> | 468 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 469 | <label class="right">Teacher Name :</label> | 469 | <label class="right">Teacher Name :</label> |
| 470 | </v-flex> | 470 | </v-flex> |
| 471 | <v-flex xs8 sm8 class="ml-3"> | 471 | <v-flex xs8 sm8 class="ml-3"> |
| 472 | <v-select | 472 | <v-select |
| 473 | v-model="addRoutine.teacherId" | 473 | v-model="addRoutine.teacherId" |
| 474 | label="Select your teacher" | 474 | label="Select your teacher" |
| 475 | type="text" | 475 | type="text" |
| 476 | :items="teacherList" | 476 | :items="teacherList" |
| 477 | item-text="name" | 477 | item-text="name" |
| 478 | item-value="_id" | 478 | item-value="_id" |
| 479 | :rules="teacherRules" | 479 | :rules="teacherRules" |
| 480 | required | 480 | required |
| 481 | ></v-select> | 481 | ></v-select> |
| 482 | </v-flex> | 482 | </v-flex> |
| 483 | </v-layout> | 483 | </v-layout> |
| 484 | <v-layout> | 484 | <v-layout> |
| 485 | <v-flex xs4 class="pt-4 subheading"> | 485 | <v-flex xs4 class="pt-4 subheading"> |
| 486 | <label class="right">Starting time:</label> | 486 | <label class="right">Starting time:</label> |
| 487 | </v-flex> | 487 | </v-flex> |
| 488 | <v-flex xs8 sm6 class="ml-3"> | 488 | <v-flex xs8 sm6 class="ml-3"> |
| 489 | <v-menu | 489 | <v-menu |
| 490 | ref="menuA" | 490 | ref="menuA" |
| 491 | :close-on-content-click="false" | 491 | :close-on-content-click="false" |
| 492 | v-model="menu2" | 492 | v-model="menu2" |
| 493 | :nudge-right="40" | 493 | :nudge-right="40" |
| 494 | :return-value.sync="addRoutine.startingTime" | 494 | :return-value.sync="addRoutine.startingTime" |
| 495 | lazy | 495 | lazy |
| 496 | transition="scale-transition" | 496 | transition="scale-transition" |
| 497 | offset-y | 497 | offset-y |
| 498 | full-width | 498 | full-width |
| 499 | max-width="290px" | 499 | max-width="290px" |
| 500 | min-width="290px" | 500 | min-width="290px" |
| 501 | > | 501 | > |
| 502 | <v-text-field | 502 | <v-text-field |
| 503 | slot="activator" | 503 | slot="activator" |
| 504 | v-model="addRoutine.startingTime" | 504 | v-model="addRoutine.startingTime" |
| 505 | label="Select your starting time" | 505 | label="Select your starting time" |
| 506 | append-icon="access_time" | 506 | append-icon="access_time" |
| 507 | :rules="timeInRules" | 507 | :rules="timeInRules" |
| 508 | readonly | 508 | readonly |
| 509 | ></v-text-field> | 509 | ></v-text-field> |
| 510 | <v-time-picker | 510 | <v-time-picker |
| 511 | v-model="addRoutine.startingTime" | 511 | v-model="addRoutine.startingTime" |
| 512 | @change="$refs.menuA.save(addRoutine.startingTime)" | 512 | @change="$refs.menuA.save(addRoutine.startingTime)" |
| 513 | ></v-time-picker> | 513 | ></v-time-picker> |
| 514 | </v-menu> | 514 | </v-menu> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | <v-layout> | 517 | <v-layout> |
| 518 | <v-flex xs4 class="pt-4 subheading"> | 518 | <v-flex xs4 class="pt-4 subheading"> |
| 519 | <label class="right">Ending Time:</label> | 519 | <label class="right">Ending Time:</label> |
| 520 | </v-flex> | 520 | </v-flex> |
| 521 | <v-flex xs8 sm6 class="ml-3"> | 521 | <v-flex xs8 sm6 class="ml-3"> |
| 522 | <v-menu | 522 | <v-menu |
| 523 | ref="menu" | 523 | ref="menu" |
| 524 | :close-on-content-click="false" | 524 | :close-on-content-click="false" |
| 525 | v-model="menu1" | 525 | v-model="menu1" |
| 526 | :nudge-right="40" | 526 | :nudge-right="40" |
| 527 | :return-value.sync="addRoutine.endingTime" | 527 | :return-value.sync="addRoutine.endingTime" |
| 528 | lazy | 528 | lazy |
| 529 | transition="scale-transition" | 529 | transition="scale-transition" |
| 530 | offset-y | 530 | offset-y |
| 531 | full-width | 531 | full-width |
| 532 | max-width="290px" | 532 | max-width="290px" |
| 533 | min-width="290px" | 533 | min-width="290px" |
| 534 | > | 534 | > |
| 535 | <v-text-field | 535 | <v-text-field |
| 536 | slot="activator" | 536 | slot="activator" |
| 537 | v-model="addRoutine.endingTime" | 537 | v-model="addRoutine.endingTime" |
| 538 | label="Select your end time" | 538 | label="Select your end time" |
| 539 | append-icon="access_time" | 539 | append-icon="access_time" |
| 540 | :rules="timeOutRules" | 540 | :rules="timeOutRules" |
| 541 | readonly | 541 | readonly |
| 542 | ></v-text-field> | 542 | ></v-text-field> |
| 543 | <v-time-picker | 543 | <v-time-picker |
| 544 | v-model="addRoutine.endingTime" | 544 | v-model="addRoutine.endingTime" |
| 545 | @change="$refs.menu.save(addRoutine.endingTime)" | 545 | @change="$refs.menu.save(addRoutine.endingTime)" |
| 546 | ></v-time-picker> | 546 | ></v-time-picker> |
| 547 | </v-menu> | 547 | </v-menu> |
| 548 | </v-flex> | 548 | </v-flex> |
| 549 | </v-layout> | 549 | </v-layout> |
| 550 | <v-layout> | 550 | <v-layout> |
| 551 | <v-flex xs4 sm4 class="pt-4 subheading"> | 551 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 552 | <label class="right">Room:</label> | 552 | <label class="right">Room:</label> |
| 553 | </v-flex> | 553 | </v-flex> |
| 554 | <v-flex xs8 sm8 class="ml-3"> | 554 | <v-flex xs8 sm8 class="ml-3"> |
| 555 | <v-text-field | 555 | <v-text-field |
| 556 | label="fill your room" | 556 | label="fill your room" |
| 557 | :rules="roomRules" | 557 | :rules="roomRules" |
| 558 | v-model="addRoutine.room" | 558 | v-model="addRoutine.room" |
| 559 | @keyup.enter="submit" | 559 | @keyup.enter="submit" |
| 560 | ></v-text-field> | 560 | ></v-text-field> |
| 561 | </v-flex> | 561 | </v-flex> |
| 562 | </v-layout> | 562 | </v-layout> |
| 563 | <v-layout> | 563 | <v-layout> |
| 564 | <v-flex xs4 sm4 class="pt-4 subheading"> | 564 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 565 | <label class="right">Period:</label> | 565 | <label class="right">Period:</label> |
| 566 | </v-flex> | 566 | </v-flex> |
| 567 | <v-flex xs8 sm8 class="ml-3"> | 567 | <v-flex xs8 sm8 class="ml-3"> |
| 568 | <v-text-field | 568 | <v-text-field |
| 569 | label="fill your period" | 569 | label="fill your period" |
| 570 | :rules="periodRules" | 570 | :rules="periodRules" |
| 571 | v-model="addRoutine.period" | 571 | v-model="addRoutine.period" |
| 572 | @keyup.enter="submit" | 572 | @keyup.enter="submit" |
| 573 | ></v-text-field> | 573 | ></v-text-field> |
| 574 | </v-flex> | 574 | </v-flex> |
| 575 | </v-layout> | 575 | </v-layout> |
| 576 | <v-layout> | 576 | <v-layout> |
| 577 | <v-flex xs12 sm12> | 577 | <v-flex xs12 sm12> |
| 578 | <v-card-actions> | 578 | <v-card-actions> |
| 579 | <v-spacer></v-spacer> | 579 | <v-spacer></v-spacer> |
| 580 | <v-btn | 580 | <v-btn |
| 581 | @click="create" | 581 | @click="create" |
| 582 | round | 582 | round |
| 583 | dark | 583 | dark |
| 584 | :loading="loading" | 584 | :loading="loading" |
| 585 | class="add-button" | 585 | class="add-button" |
| 586 | >Add Routine</v-btn> | 586 | >Add Routine</v-btn> |
| 587 | </v-card-actions> | 587 | </v-card-actions> |
| 588 | </v-flex> | 588 | </v-flex> |
| 589 | </v-layout> | 589 | </v-layout> |
| 590 | </v-form> | 590 | </v-form> |
| 591 | </v-flex> | 591 | </v-flex> |
| 592 | </v-layout> | 592 | </v-layout> |
| 593 | </v-container> | 593 | </v-container> |
| 594 | </v-card> | 594 | </v-card> |
| 595 | </v-dialog> | 595 | </v-dialog> |
| 596 | <div class="loader" v-if="showLoader"> | 596 | <div class="loader" v-if="showLoader"> |
| 597 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 597 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 598 | </div> | 598 | </div> |
| 599 | </v-container> | 599 | </v-container> |
| 600 | </template> | 600 | </template> |
| 601 | 601 | ||
| 602 | <script> | 602 | <script> |
| 603 | import http from "@/Services/http.js"; | 603 | import http from "@/Services/http.js"; |
| 604 | import Util from "@/util"; | 604 | import Util from "@/util"; |
| 605 | 605 | ||
| 606 | export default { | 606 | export default { |
| 607 | data: () => ({ | 607 | data: () => ({ |
| 608 | snackbar: false, | 608 | snackbar: false, |
| 609 | y: "top", | 609 | y: "top", |
| 610 | x: "right", | 610 | x: "right", |
| 611 | role: "", | 611 | role: "", |
| 612 | mode: "", | 612 | mode: "", |
| 613 | timeout: 3000, | 613 | timeout: 3000, |
| 614 | text: "", | 614 | text: "", |
| 615 | color: "", | 615 | color: "", |
| 616 | show: true, | 616 | show: true, |
| 617 | showSearch: false, | 617 | showSearch: false, |
| 618 | showLoader: false, | 618 | showLoader: false, |
| 619 | loading: false, | 619 | loading: false, |
| 620 | editLoading: false, | 620 | editLoading: false, |
| 621 | date: null, | 621 | date: null, |
| 622 | search: "", | 622 | search: "", |
| 623 | editRoutineDialog: false, | 623 | editRoutineDialog: false, |
| 624 | valid: true, | 624 | valid: true, |
| 625 | validEditRoutine: true, | 625 | validEditRoutine: true, |
| 626 | addRoutineDialog: false, | 626 | addRoutineDialog: false, |
| 627 | showTable: false, | 627 | showTable: false, |
| 628 | hideTable: true, | 628 | hideTable: true, |
| 629 | name: "", | 629 | name: "", |
| 630 | 630 | ||
| 631 | day: [ | 631 | day: [ |
| 632 | "Monday", | 632 | "Monday", |
| 633 | "Tuesday", | 633 | "Tuesday", |
| 634 | "Wednesday", | 634 | "Wednesday", |
| 635 | "Thursday", | 635 | "Thursday", |
| 636 | "Friday", | 636 | "Friday", |
| 637 | "Saturday", | 637 | "Saturday", |
| 638 | "Sunday", | 638 | "Sunday", |
| 639 | ], | 639 | ], |
| 640 | 640 | ||
| 641 | token: "", | 641 | token: "", |
| 642 | 642 | ||
| 643 | menu1: false, | 643 | menu1: false, |
| 644 | menu2: false, | 644 | menu2: false, |
| 645 | menu4: false, | 645 | menu4: false, |
| 646 | menu3: false, | 646 | menu3: false, |
| 647 | 647 | ||
| 648 | schoolRules: [(v) => !!v || "School Year is required"], | 648 | schoolRules: [(v) => !!v || "School Year is required"], |
| 649 | classRules: [(v) => !!v || " Class Name is required"], | 649 | classRules: [(v) => !!v || " Class Name is required"], |
| 650 | teacherRules: [(v) => !!v || " Teacher Name is required"], | 650 | teacherRules: [(v) => !!v || " Teacher Name is required"], |
| 651 | sectionRules: [(v) => !!v || "Section is required"], | 651 | sectionRules: [(v) => !!v || "Section is required"], |
| 652 | studentRules: [(v) => !!v || " Student is required"], | 652 | studentRules: [(v) => !!v || " Student is required"], |
| 653 | finalRules: [(v) => !!v || "Final MArk is required"], | 653 | finalRules: [(v) => !!v || "Final MArk is required"], |
| 654 | subjectRules: [(v) => !!v || " Subject Name is required"], | 654 | subjectRules: [(v) => !!v || " Subject Name is required"], |
| 655 | dayRules: [(v) => !!v || "Day is required"], | 655 | dayRules: [(v) => !!v || "Day is required"], |
| 656 | timeInRules: [(v) => !!v || "Start Time is required"], | 656 | timeInRules: [(v) => !!v || "Start Time is required"], |
| 657 | timeOutRules: [(v) => !!v || "End Time is required"], | 657 | timeOutRules: [(v) => !!v || "End Time is required"], |
| 658 | roomRules: [(v) => !!v || "Room is required"], | 658 | roomRules: [(v) => !!v || "Room is required"], |
| 659 | periodRules: [(v) => !!v || "Period is required"], | 659 | periodRules: [(v) => !!v || "Period is required"], |
| 660 | 660 | ||
| 661 | classList: [], | 661 | classList: [], |
| 662 | addSection: [], | 662 | addSection: [], |
| 663 | subjectList: [], | 663 | subjectList: [], |
| 664 | teacherList: [], | 664 | teacherList: [], |
| 665 | titleRules: [], | 665 | titleRules: [], |
| 666 | markRules: [], | 666 | markRules: [], |
| 667 | typeRules: [], | 667 | typeRules: [], |
| 668 | routineList: [], | 668 | routineList: [], |
| 669 | editedIndex: -1, | 669 | editedIndex: -1, |
| 670 | addRoutine: {}, | 670 | addRoutine: {}, |
| 671 | addRoutineList: {}, | 671 | addRoutineList: {}, |
| 672 | startingTime: "", | 672 | startingTime: "", |
| 673 | editedItem: {}, | 673 | editedItem: {}, |
| 674 | }), | 674 | }), |
| 675 | watch: { | 675 | watch: { |
| 676 | addRoutineDialog: function (val) { | 676 | addRoutineDialog: function (val) { |
| 677 | if (!val) { | 677 | if (!val) { |
| 678 | this.addRoutine = []; | 678 | this.addRoutine = []; |
| 679 | } | 679 | } |
| 680 | }, | 680 | }, |
| 681 | }, | 681 | }, |
| 682 | methods: { | 682 | methods: { |
| 683 | editItem(item, routineData) { | 683 | editItem(item, routineData) { |
| 684 | console.log("routineData", routineData); | 684 | console.log("routineData", routineData); |
| 685 | console.log("item", item); | 685 | console.log("item", item); |
| 686 | this.editedIndex = this.routineList; | 686 | this.editedIndex = this.routineList; |
| 687 | this.editedItem = Object.assign({}, item); | 687 | this.editedItem = Object.assign({}, item); |
| 688 | this.editedItem.lectureRoutineId = item._id; | 688 | this.editedItem.lectureRoutineId = item._id; |
| 689 | this.editedItem.routineId = routineData._id; | 689 | this.editedItem.routineId = routineData._id; |
| 690 | this.dialog = true; | 690 | this.dialog = true; |
| 691 | this.editRoutineDialog = true; | 691 | this.editRoutineDialog = true; |
| 692 | }, | 692 | }, |
| 693 | deleteItem(item) { | 693 | deleteItem(item) { |
| 694 | let deleteLecture = { | 694 | let deleteLecture = { |
| 695 | routineId: item._id, | 695 | routineId: item._id, |
| 696 | lectureId: item.lectureRoutine[0]._id, | 696 | lectureId: item.lectureRoutine[0]._id, |
| 697 | }; | 697 | }; |
| 698 | http() | 698 | http() |
| 699 | .delete( | 699 | .delete( |
| 700 | "/deleteRoutineLecture", | 700 | "/deleteRoutineLecture", |
| 701 | confirm("Are you sure you want to delete this?") && { | 701 | confirm("Are you sure you want to delete this?") && { |
| 702 | params: deleteLecture, | 702 | params: deleteLecture, |
| 703 | } | 703 | } |
| 704 | ) | 704 | ) |
| 705 | .then((response) => { | 705 | .then((response) => { |
| 706 | this.snackbar = true; | 706 | this.snackbar = true; |
| 707 | this.text = "Successfully delete Existing Routine"; | 707 | this.text = "Successfully delete Existing Routine"; |
| 708 | this.color = "green"; | 708 | this.color = "green"; |
| 709 | this.getRoutineList(); | 709 | this.getRoutineList(); |
| 710 | }) | 710 | }) |
| 711 | .catch((error) => { | 711 | .catch((error) => { |
| 712 | this.snackbar = true; | 712 | this.snackbar = true; |
| 713 | this.text = error.response.data.message; | 713 | this.text = error.response.data.message; |
| 714 | this.color = "error"; | 714 | this.color = "error"; |
| 715 | }); | 715 | }); |
| 716 | }, | 716 | }, |
| 717 | close() { | 717 | close() { |
| 718 | this.editRoutineDialog = false; | 718 | this.editRoutineDialog = false; |
| 719 | }, | 719 | }, |
| 720 | closeAddRoutineModel() { | 720 | closeAddRoutineModel() { |
| 721 | this.addRoutineDialog = false; | 721 | this.addRoutineDialog = false; |
| 722 | this.classList = []; | 722 | this.classList = []; |
| 723 | this.addRoutine = []; | 723 | this.addRoutine = []; |
| 724 | }, | 724 | }, |
| 725 | create() { | 725 | create() { |
| 726 | var routineData = { | 726 | var routineData = { |
| 727 | schoolYear: this.addRoutine.schoolYear, | 727 | schoolYear: this.addRoutine.schoolYear, |
| 728 | classId: this.addRoutine.classId, | 728 | classId: this.addRoutine.classId, |
| 729 | sectionId: this.addRoutine.sectionId, | 729 | sectionId: this.addRoutine.sectionId, |
| 730 | day: this.addRoutine.day, | 730 | day: this.addRoutine.day, |
| 731 | lectureRoutine: [], | 731 | lectureRoutine: [], |
| 732 | }; | 732 | }; |
| 733 | if (this.$refs.form.validate()) { | 733 | if (this.$refs.form.validate()) { |
| 734 | routineData.lectureRoutine.push({ | 734 | routineData.lectureRoutine.push({ |
| 735 | teacherId: this.addRoutine.teacherId, | 735 | teacherId: this.addRoutine.teacherId, |
| 736 | startingTime: this.addRoutine.startingTime, | 736 | startingTime: this.addRoutine.startingTime, |
| 737 | endingTime: this.addRoutine.endingTime, | 737 | endingTime: this.addRoutine.endingTime, |
| 738 | room: this.addRoutine.room, | 738 | room: this.addRoutine.room, |
| 739 | period: this.addRoutine.period, | 739 | period: this.addRoutine.period, |
| 740 | subjectName: this.addRoutine.subjectName, | 740 | subjectName: this.addRoutine.subjectName, |
| 741 | }); | 741 | }); |
| 742 | http() | 742 | http() |
| 743 | .post("/createRoutine", routineData) | 743 | .post("/createRoutine", routineData) |
| 744 | .then((response) => { | 744 | .then((response) => { |
| 745 | this.text = "Routine added successfully"; | 745 | this.text = "Routine added successfully"; |
| 746 | // this.clear(); | 746 | // this.clear(); |
| 747 | this.snackbar = true; | 747 | this.snackbar = true; |
| 748 | this.color = "green"; | 748 | this.color = "green"; |
| 749 | console.log("===this.addRoutine===", this.addRoutine); | 749 | console.log("===this.addRoutine===", this.addRoutine); |
| 750 | http() | 750 | http() |
| 751 | .get( | 751 | .get( |
| 752 | "/getRoutineList", | 752 | "/getRoutineList", |
| 753 | { | 753 | { |
| 754 | params: { | 754 | params: { |
| 755 | classId: this.addRoutine.classId, | 755 | classId: this.addRoutine.classId, |
| 756 | sectionId: this.addRoutine.sectionId, | 756 | sectionId: this.addRoutine.sectionId, |
| 757 | }, | 757 | }, |
| 758 | }, | 758 | }, |
| 759 | { | 759 | { |
| 760 | headers: { Authorization: "Bearer " + this.token }, | 760 | headers: { Authorization: "Bearer " + this.token }, |
| 761 | } | 761 | } |
| 762 | ) | 762 | ) |
| 763 | .then((response) => { | 763 | .then((response) => { |
| 764 | this.routineList = response.data.data; | 764 | this.routineList = response.data.data; |
| 765 | this.showLoader = false; | 765 | this.showLoader = false; |
| 766 | this.showTable = true; | 766 | this.showTable = true; |
| 767 | this.hideTable = false; | 767 | this.hideTable = false; |
| 768 | }) | 768 | }) |
| 769 | .catch((err) => { | 769 | .catch((err) => { |
| 770 | console.log("err====>", err); | 770 | console.log("err====>", err); |
| 771 | }); | 771 | }); |
| 772 | this.addRoutineDialog = false; | 772 | this.addRoutineDialog = false; |
| 773 | }) | 773 | }) |
| 774 | .catch((error) => { | 774 | .catch((error) => { |
| 775 | // console.log(error); | 775 | // console.log(error); |
| 776 | this.snackbar = true; | 776 | this.snackbar = true; |
| 777 | this.text = error.response.data.message; | 777 | this.text = error.response.data.message; |
| 778 | this.color = "error"; | 778 | this.color = "error"; |
| 779 | }); | 779 | }); |
| 780 | } | 780 | } |
| 781 | }, | 781 | }, |
| 782 | clear() { | 782 | clear() { |
| 783 | this.$refs.form.reset(); | 783 | this.$refs.form.reset(); |
| 784 | }, | 784 | }, |
| 785 | 785 | ||
| 786 | update() { | 786 | update() { |
| 787 | if (this.$refs.formEditRoutine.validate()) { | 787 | if (this.$refs.formEditRoutine.validate()) { |
| 788 | let editRoutine = { | 788 | let editRoutine = { |
| 789 | routineId: this.editedItem.routineId, | 789 | routineId: this.editedItem.routineId, |
| 790 | lectureRoutineId: this.editedItem.lectureRoutineId, | 790 | lectureRoutineId: this.editedItem.lectureRoutineId, |
| 791 | subjectName: this.editedItem.subjectName, | 791 | subjectName: this.editedItem.subjectName, |
| 792 | teacherId: this.editedItem.teacherId._id, | 792 | teacherId: this.editedItem.teacherId._id, |
| 793 | startingTime: this.editedItem.startingTime, | 793 | startingTime: this.editedItem.startingTime, |
| 794 | endingTime: this.editedItem.endingTime, | 794 | endingTime: this.editedItem.endingTime, |
| 795 | room: this.editedItem.room, | 795 | room: this.editedItem.room, |
| 796 | period: this.editedItem.period, | 796 | period: this.editedItem.period, |
| 797 | }; | 797 | }; |
| 798 | this.editLoading = true; | 798 | this.editLoading = true; |
| 799 | http() | 799 | http() |
| 800 | .put("/updateRoutine", editRoutine) | 800 | .put("/updateRoutine", editRoutine) |
| 801 | .then((response) => { | 801 | .then((response) => { |
| 802 | this.snackbar = true; | 802 | this.snackbar = true; |
| 803 | this.text = "Successfully Edit Existing Routine"; | 803 | this.text = "Successfully Edit Existing Routine"; |
| 804 | this.color = "green"; | 804 | this.color = "green"; |
| 805 | this.editLoading = false; | 805 | this.editLoading = false; |
| 806 | this.editRoutineDialog = false; | 806 | this.editRoutineDialog = false; |
| 807 | this.getRoutineList(); | 807 | this.getRoutineList(); |
| 808 | // http() | 808 | // http() |
| 809 | // .get( | 809 | // .get( |
| 810 | // "/getRoutineList", | 810 | // "/getRoutineList", |
| 811 | // { | 811 | // { |
| 812 | // params: { | 812 | // params: { |
| 813 | // classId: this.addRoutine.classId, | 813 | // classId: this.addRoutine.classId, |
| 814 | // sectionId: this.addRoutine.sectionId | 814 | // sectionId: this.addRoutine.sectionId |
| 815 | // } | 815 | // } |
| 816 | // }, | 816 | // }, |
| 817 | // { | 817 | // { |
| 818 | // headers: { Authorization: "Bearer " + this.token } | 818 | // headers: { Authorization: "Bearer " + this.token } |
| 819 | // } | 819 | // } |
| 820 | // ) | 820 | // ) |
| 821 | // .then(response => { | 821 | // .then(response => { |
| 822 | // this.routineList = response.data.data; | 822 | // this.routineList = response.data.data; |
| 823 | // this.showLoader = false; | 823 | // this.showLoader = false; |
| 824 | // this.showTable = true; | 824 | // this.showTable = true; |
| 825 | // this.hideTable = false; | 825 | // this.hideTable = false; |
| 826 | // }) | 826 | // }) |
| 827 | // .catch(err => { | 827 | // .catch(err => { |
| 828 | // console.log("err====>", err); | 828 | // console.log("err====>", err); |
| 829 | // }); | 829 | // }); |
| 830 | }) | 830 | }) |
| 831 | .catch((error) => { | 831 | .catch((error) => { |
| 832 | this.editLoading = false; | 832 | this.editLoading = false; |
| 833 | }); | 833 | }); |
| 834 | } | 834 | } |
| 835 | }, | 835 | }, |
| 836 | getClass() { | 836 | getClass() { |
| 837 | http() | 837 | http() |
| 838 | .get("/getClassesList", { | 838 | .get("/getClassesList", { |
| 839 | headers: { Authorization: "Bearer " + this.token }, | 839 | headers: { Authorization: "Bearer " + this.token }, |
| 840 | }) | 840 | }) |
| 841 | .then((response) => { | 841 | .then((response) => { |
| 842 | this.classList = response.data.data; | 842 | this.classList = response.data.data; |
| 843 | }) | 843 | }) |
| 844 | .catch((error) => { | 844 | .catch((error) => { |
| 845 | if (error.response.status === 401) { | 845 | if (error.response.status === 401) { |
| 846 | this.$router.replace({ path: "/" }); | 846 | this.$router.replace({ path: "/" }); |
| 847 | this.$store.dispatch("setToken", null); | 847 | this.$store.dispatch("setToken", null); |
| 848 | this.$store.dispatch("Id", null); | 848 | this.$store.dispatch("Id", null); |
| 849 | } | 849 | } |
| 850 | }); | 850 | }); |
| 851 | }, | 851 | }, |
| 852 | getSections(_id) { | 852 | getSections(_id) { |
| 853 | var token = this.$store.state.token; | 853 | var token = this.$store.state.token; |
| 854 | this.showLoader = true; | 854 | this.showLoader = true; |
| 855 | http() | 855 | http() |
| 856 | .get( | 856 | .get( |
| 857 | "/getSectionsList", | 857 | "/getSectionsList", |
| 858 | { params: { classId: _id } }, | 858 | { params: { classId: _id } }, |
| 859 | { | 859 | { |
| 860 | headers: { Authorization: "Bearer " + token }, | 860 | headers: { Authorization: "Bearer " + token }, |
| 861 | } | 861 | } |
| 862 | ) | 862 | ) |
| 863 | .then((response) => { | 863 | .then((response) => { |
| 864 | this.addSection = response.data.data; | 864 | this.addSection = response.data.data; |
| 865 | this.showLoader = false; | 865 | this.showLoader = false; |
| 866 | }) | 866 | }) |
| 867 | .catch((err) => { | 867 | .catch((err) => { |
| 868 | this.showLoader = false; | 868 | this.showLoader = false; |
| 869 | }); | 869 | }); |
| 870 | }, | 870 | }, |
| 871 | getClassSubject(_id) { | 871 | getClassSubject(_id) { |
| 872 | this.showLoader = true; | 872 | this.showLoader = true; |
| 873 | // this.classId = this.classId; | 873 | // this.classId = this.classId; |
| 874 | http() | 874 | http() |
| 875 | .get( | 875 | .get( |
| 876 | "/getParticularClass", | 876 | "/getParticularClass", |
| 877 | { params: { classId: _id } }, | 877 | { params: { classId: _id } }, |
| 878 | { | 878 | { |
| 879 | headers: { Authorization: "Bearer " + this.token }, | 879 | headers: { Authorization: "Bearer " + this.token }, |
| 880 | } | 880 | } |
| 881 | ) | 881 | ) |
| 882 | .then((response) => { | 882 | .then((response) => { |
| 883 | this.subjectList = response.data.data; | 883 | this.subjectList = response.data.data; |
| 884 | this.showLoader = false; | 884 | this.showLoader = false; |
| 885 | }) | 885 | }) |
| 886 | .catch((err) => { | 886 | .catch((err) => { |
| 887 | this.showLoader = false; | 887 | this.showLoader = false; |
| 888 | }); | 888 | }); |
| 889 | }, | 889 | }, |
| 890 | getTeacherList() { | 890 | getTeacherList() { |
| 891 | this.showLoader = true; | 891 | this.showLoader = true; |
| 892 | var token = this.$store.state.token; | 892 | var token = this.$store.state.token; |
| 893 | http() | 893 | http() |
| 894 | .get("/getTeachersList", { | 894 | .get("/getTeachersList", { |
| 895 | headers: { Authorization: "Bearer " + token }, | 895 | headers: { Authorization: "Bearer " + token }, |
| 896 | }) | 896 | }) |
| 897 | .then((response) => { | 897 | .then((response) => { |
| 898 | this.teacherList = response.data.data; | 898 | this.teacherList = response.data.data; |
| 899 | this.showLoader = false; | 899 | this.showLoader = false; |
| 900 | // console.log("getTeacherList=====>",this.desserts) | 900 | // console.log("getTeacherList=====>",this.desserts) |
| 901 | }) | 901 | }) |
| 902 | .catch((error) => { | 902 | .catch((error) => { |
| 903 | this.showLoader = false; | 903 | this.showLoader = false; |
| 904 | if (error.response.status === 401) { | 904 | if (error.response.status === 401) { |
| 905 | this.$router.replace({ path: "/" }); | 905 | this.$router.replace({ path: "/" }); |
| 906 | this.$store.dispatch("setToken", null); | 906 | this.$store.dispatch("setToken", null); |
| 907 | this.$store.dispatch("Id", null); | 907 | this.$store.dispatch("Id", null); |
| 908 | } | 908 | } |
| 909 | }); | 909 | }); |
| 910 | }, | 910 | }, |
| 911 | getRoutineList() { | 911 | getRoutineList() { |
| 912 | this.showLoader = true; | 912 | this.showLoader = true; |
| 913 | http() | 913 | http() |
| 914 | .get( | 914 | .get( |
| 915 | "/getRoutineList", | 915 | "/getRoutineList", |
| 916 | { | 916 | { |
| 917 | params: { | 917 | params: { |
| 918 | classId: this.addRoutineList.classId, | 918 | classId: this.addRoutineList.classId, |
| 919 | sectionId: this.addRoutineList.sectionId, | 919 | sectionId: this.addRoutineList.sectionId, |
| 920 | }, | 920 | }, |
| 921 | }, | 921 | }, |
| 922 | { | 922 | { |
| 923 | headers: { Authorization: "Bearer " + this.token }, | 923 | headers: { Authorization: "Bearer " + this.token }, |
| 924 | } | 924 | } |
| 925 | ) | 925 | ) |
| 926 | .then((response) => { | 926 | .then((response) => { |
| 927 | this.routineList = response.data.data; | 927 | this.routineList = response.data.data; |
| 928 | this.showLoader = false; | 928 | this.showLoader = false; |
| 929 | this.showTable = true; | 929 | this.showTable = true; |
| 930 | this.hideTable = false; | 930 | this.hideTable = false; |
| 931 | }) | 931 | }) |
| 932 | .catch((err) => { | 932 | .catch((err) => { |
| 933 | this.showLoader = false; | 933 | this.showLoader = false; |
| 934 | }); | 934 | }); |
| 935 | }, | 935 | }, |
| 936 | displaySearch() { | 936 | displaySearch() { |
| 937 | (this.show = false), (this.showSearch = true); | 937 | (this.show = false), (this.showSearch = true); |
| 938 | }, | 938 | }, |
| 939 | closeSearch() { | 939 | closeSearch() { |
| 940 | this.showSearch = false; | 940 | this.showSearch = false; |
| 941 | this.show = true; | 941 | this.show = true; |
| 942 | this.search = ""; | 942 | this.search = ""; |
| 943 | }, | 943 | }, |
| 944 | }, | 944 | }, |
| 945 | mounted() { | 945 | mounted() { |
| 946 | this.token = this.$store.state.token; | 946 | this.token = this.$store.state.token; |
| 947 | this.getClass(); | 947 | this.getClass(); |
| 948 | this.getTeacherList(); | 948 | this.getTeacherList(); |
| 949 | this.role = this.$store.state.role; | 949 | this.role = this.$store.state.role; |
| 950 | }, | 950 | }, |
| 951 | }; | 951 | }; |
| 952 | </script> | 952 | </script> |
| 953 | 953 | ||
| 954 | <style scoped> | 954 | <style scoped> |
| 955 | html, | 955 | html, |
| 956 | body { | 956 | body { |
| 957 | font-family: "OpenSans Regular"; | 957 | font-family: "OpenSans Regular"; |
| 958 | } | 958 | } |
| 959 | .box .box-body { | 959 | .box .box-body { |
| 960 | padding: 15px; | 960 | padding: 15px; |
| 961 | border-top-left-radius: 0; | 961 | border-top-left-radius: 0; |
| 962 | border-top-right-radius: 0; | 962 | border-top-right-radius: 0; |
| 963 | border-bottom-right-radius: 3px; | 963 | border-bottom-right-radius: 3px; |
| 964 | border-bottom-left-radius: 3px; | 964 | border-bottom-left-radius: 3px; |
| 965 | } | 965 | } |
| 966 | .nav-tabs-custom { | 966 | .nav-tabs-custom { |
| 967 | margin-bottom: 20px; | 967 | margin-bottom: 20px; |
| 968 | background: #fff; | 968 | background: #fff; |
| 969 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); | 969 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); |
| 970 | } | 970 | } |
| 971 | .nav-tabs { | 971 | .nav-tabs { |
| 972 | border-bottom: 1px solid #ddd; | 972 | border-bottom: 1px solid #ddd; |
| 973 | } | 973 | } |
| 974 | .nav { | 974 | .nav { |
| 975 | padding-left: 0; | 975 | padding-left: 0; |
| 976 | list-style: none; | 976 | list-style: none; |
| 977 | } | 977 | } |
| 978 | .tab-content > .active { | 978 | .tab-content > .active { |
| 979 | display: block; | 979 | display: block; |
| 980 | } | 980 | } |
| 981 | .nav-tabs-custom > .nav-tabs > li.active > a { | 981 | .nav-tabs-custom > .nav-tabs > li.active > a { |
| 982 | border-top: 0; | 982 | border-top: 0; |
| 983 | border-left-color: #09a3a3; | 983 | border-left-color: #09a3a3; |
| 984 | border-right-color: #09a3a3; | 984 | border-right-color: #09a3a3; |
| 985 | } | 985 | } |
| 986 | .nav-tabs-custom > .nav-tabs { | 986 | .nav-tabs-custom > .nav-tabs { |
| 987 | background-color: #e5e5e5; | 987 | background-color: #e5e5e5; |
| 988 | margin: 0; | 988 | margin: 0; |
| 989 | border-bottom-color: #e5e5e5; | 989 | border-bottom-color: #e5e5e5; |
| 990 | } | 990 | } |
| 991 | .nav-tabs-custom > .nav-tabs > li:first-of-type { | 991 | .nav-tabs-custom > .nav-tabs > li:first-of-type { |
| 992 | margin-left: 0px; | 992 | margin-left: 0px; |
| 993 | } | 993 | } |
| 994 | .nav-tabs-custom > .nav-tabs > li.active { | 994 | .nav-tabs-custom > .nav-tabs > li.active { |
| 995 | border-bottom-color: #09a3a3; | 995 | border-bottom-color: #09a3a3; |
| 996 | } | 996 | } |
| 997 | .nav-tabs-custom > .nav-tabs > li { | 997 | .nav-tabs-custom > .nav-tabs > li { |
| 998 | border-bottom: 2px solid transparent; | 998 | border-bottom: 2px solid transparent; |
| 999 | border-top: 3px solid transparent; | 999 | border-top: 3px solid transparent; |
| 1000 | margin-bottom: -2px; | 1000 | margin-bottom: -2px; |
| 1001 | margin-right: 5px; | 1001 | margin-right: 5px; |
| 1002 | } | 1002 | } |
| 1003 | .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { | 1003 | .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { |
| 1004 | border-left-width: 0; | 1004 | border-left-width: 0; |
| 1005 | } | 1005 | } |
| 1006 | .nav-tabs-custom > .nav-tabs > li.active > a { | 1006 | .nav-tabs-custom > .nav-tabs > li.active > a { |
| 1007 | border-top: 0; | 1007 | border-top: 0; |
| 1008 | border-bottom-color: #09a3a3; | 1008 | border-bottom-color: #09a3a3; |
| 1009 | } | 1009 | } |
| 1010 | .nav-tabs-custom > .nav-tabs > li.active > a, | 1010 | .nav-tabs-custom > .nav-tabs > li.active > a, |
| 1011 | .nav-tabs-custom > .nav-tabs > li.active:hover > a { | 1011 | .nav-tabs-custom > .nav-tabs > li.active:hover > a { |
| 1012 | background-color: #e5e5e5; | 1012 | background-color: #e5e5e5; |
| 1013 | border: 0px; | 1013 | border: 0px; |
| 1014 | color: #000000db; | 1014 | color: #000000db; |
| 1015 | } | 1015 | } |
| 1016 | .nav-tabs-custom > .nav-tabs > li > a, | 1016 | .nav-tabs-custom > .nav-tabs > li > a, |
| 1017 | .nav-tabs-custom > .nav-tabs > li > a:hover { | 1017 | .nav-tabs-custom > .nav-tabs > li > a:hover { |
| 1018 | border-radius: 0 !important; | 1018 | border-radius: 0 !important; |
| 1019 | } | 1019 | } |
| 1020 | .nav-tabs-custom > .tab-content { | 1020 | .nav-tabs-custom > .tab-content { |
| 1021 | background: #fff; | 1021 | background: #fff; |
| 1022 | padding: 10px; | 1022 | padding: 10px; |
| 1023 | } | 1023 | } |
| 1024 | .page-header { | 1024 | .page-header { |
| 1025 | margin: 10px 0 20px 0; | 1025 | margin: 10px 0 20px 0; |
| 1026 | padding: 0px 0px 16px; | 1026 | padding: 0px 0px 16px; |
| 1027 | font-size: 22px; | 1027 | font-size: 22px; |
| 1028 | border: none; | 1028 | border: none; |
| 1029 | } | 1029 | } |
| 1030 | .table { | 1030 | .table { |
| 1031 | width: 100%; | 1031 | width: 100%; |
| 1032 | border-collapse: collapse; | 1032 | border-collapse: collapse; |
| 1033 | border-spacing: 0; | 1033 | border-spacing: 0; |
| 1034 | } | 1034 | } |
| 1035 | .table > tbody > tr > th, | 1035 | .table > tbody > tr > th, |
| 1036 | .table > tfoot > tr > th, | 1036 | .table > tfoot > tr > th, |
| 1037 | .table > tbody > tr > td, | 1037 | .table > tbody > tr > td, |
| 1038 | .table > tfoot > tr > td { | 1038 | .table > tfoot > tr > td { |
| 1039 | padding: 8px; | 1039 | padding: 8px; |
| 1040 | line-height: 1.428571429; | 1040 | line-height: 1.428571429; |
| 1041 | vertical-align: top; | 1041 | vertical-align: top; |
| 1042 | border-top: 1px solid #ddd; | 1042 | border-top: 1px solid #ddd; |
| 1043 | } | 1043 | } |
| 1044 | .nav::before, | 1044 | .nav::before, |
| 1045 | .nav::after { | 1045 | .nav::after { |
| 1046 | display: table; | 1046 | display: table; |
| 1047 | content: ""; | 1047 | content: ""; |
| 1048 | } | 1048 | } |
| 1049 | .box .box-body .table { | 1049 | .box .box-body .table { |
| 1050 | margin-bottom: 0; | 1050 | margin-bottom: 0; |
| 1051 | } | 1051 | } |
| 1052 | .table-bordered { | 1052 | .table-bordered { |
| 1053 | border: 1px solid #e2e7eb; | 1053 | border: 1px solid #e2e7eb; |
| 1054 | } | 1054 | } |
| 1055 | .table-striped > tbody > tr:nth-child(2n + 1) > td, | 1055 | .table-striped > tbody > tr:nth-child(2n + 1) > td, |
| 1056 | .table-striped > tbody > tr:nth-child(2n + 1) > th { | 1056 | .table-striped > tbody > tr:nth-child(2n + 1) > th { |
| 1057 | background-color: #f0f3f5; | 1057 | background-color: #f0f3f5; |
| 1058 | } | 1058 | } |
| 1059 | .table-bordered > tbody > v-data-table > template > tr > th, | 1059 | .table-bordered > tbody > v-data-table > template > tr > th, |
| 1060 | .table-bordered > tbody > tr > td { | 1060 | .table-bordered > tbody > tr > td { |
| 1061 | border-color: #e2e7eb; | 1061 | border-color: #e2e7eb; |
| 1062 | font-size: 12px; | 1062 | font-size: 12px; |
| 1063 | } | 1063 | } |
| 1064 | .table-bordered > tbody > tr > td { | 1064 | .table-bordered > tbody > tr > td { |
| 1065 | color: #707070; | 1065 | color: #707070; |
| 1066 | } | 1066 | } |
| 1067 | /* | 1067 | /* |
| 1068 | .table-bordered > tbody > tr > th, | 1068 | .table-bordered > tbody > tr > th, |
| 1069 | .table-bordered > tfoot > tr > th, | 1069 | .table-bordered > tfoot > tr > th, |
| 1070 | .table-bordered > tbody > tr > td, | 1070 | .table-bordered > tbody > tr > td, |
| 1071 | .table-bordered > tfoot > tr > td { | 1071 | .table-bordered > tfoot > tr > td { |
| 1072 | border: 1px solid #ddd; | 1072 | border: 1px solid #ddd; |
| 1073 | } */ | 1073 | } */ |
| 1074 | .mCustomScrollbar.mCS_no_scrollbar, | 1074 | .mCustomScrollbar.mCS_no_scrollbar, |
| 1075 | .mCustomScrollbar.mCS_touch_action { | 1075 | .mCustomScrollbar.mCS_touch_action { |
| 1076 | touch-action: auto; | 1076 | touch-action: auto; |
| 1077 | } | 1077 | } |
| 1078 | .mCSB_scrollTools.mCSB_scrollTools_horizontal { | 1078 | .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
| 1079 | width: auto; | 1079 | width: auto; |
| 1080 | height: 16px; | 1080 | height: 16px; |
| 1081 | top: auto; | 1081 | top: auto; |
| 1082 | right: 0; | 1082 | right: 0; |
| 1083 | bottom: 0; | 1083 | bottom: 0; |
| 1084 | left: 0; | 1084 | left: 0; |
| 1085 | } | 1085 | } |
| 1086 | .mCSB_scrollTools { | 1086 | .mCSB_scrollTools { |
| 1087 | opacity: 0.75; | 1087 | opacity: 0.75; |
| 1088 | } | 1088 | } |
| 1089 | .mCSB_scrollTools .mCSB_draggerContainer { | 1089 | .mCSB_scrollTools .mCSB_draggerContainer { |
| 1090 | position: absolute; | 1090 | position: absolute; |
| 1091 | height: auto; | 1091 | height: auto; |
| 1092 | top: 0; | 1092 | top: 0; |
| 1093 | left: 0; | 1093 | left: 0; |
| 1094 | bottom: 0; | 1094 | bottom: 0; |
| 1095 | right: 0; | 1095 | right: 0; |
| 1096 | } | 1096 | } |
| 1097 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { | 1097 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { |
| 1098 | height: 100%; | 1098 | height: 100%; |
| 1099 | } | 1099 | } |
| 1100 | .mCSB_scrollTools .mCSB_dragger { | 1100 | .mCSB_scrollTools .mCSB_dragger { |
| 1101 | cursor: pointer; | 1101 | cursor: pointer; |
| 1102 | z-index: 1; | 1102 | z-index: 1; |
| 1103 | } | 1103 | } |
| 1104 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { | 1104 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { |
| 1105 | width: 100%; | 1105 | width: 100%; |
| 1106 | height: 4px; | 1106 | height: 4px; |
| 1107 | margin: 6px auto; | 1107 | margin: 6px auto; |
| 1108 | } | 1108 | } |
| 1109 | .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { | 1109 | .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
| 1110 | background-color: rgba(255, 255, 255, 0.75); | 1110 | background-color: rgba(255, 255, 255, 0.75); |
| 1111 | } | 1111 | } |
| 1112 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { | 1112 | .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { |
| 1113 | width: 100%; | 1113 | width: 100%; |
| 1114 | height: 2px; | 1114 | height: 2px; |
| 1115 | margin: 7px 0; | 1115 | margin: 7px 0; |
| 1116 | } | 1116 | } |
| 1117 | .mCSB_scrollTools .mCSB_draggerRail { | 1117 | .mCSB_scrollTools .mCSB_draggerRail { |
| 1118 | background-color: rgba(0, 0, 0, 0.4); | 1118 | background-color: rgba(0, 0, 0, 0.4); |
| 1119 | border-radius: 16px; | 1119 | border-radius: 16px; |
| 1120 | } | 1120 | } |
| 1121 | .mCustomScrollBox { | 1121 | .mCustomScrollBox { |
| 1122 | position: relative; | 1122 | position: relative; |
| 1123 | overflow: hidden; | 1123 | overflow: hidden; |
| 1124 | height: 100%; | 1124 | height: 100%; |
| 1125 | max-width: 100%; | 1125 | max-width: 100%; |
| 1126 | outline: none; | 1126 | outline: none; |
| 1127 | direction: ltr; | 1127 | direction: ltr; |
| 1128 | } | 1128 | } |
| 1129 | /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { | 1129 | /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { |
| 1130 | margin-bottom: 0; | 1130 | margin-bottom: 0; |
| 1131 | } | 1131 | } |
| 1132 | .mCSB_horizontal.mCSB_inside > .mCSB_container { | 1132 | .mCSB_horizontal.mCSB_inside > .mCSB_container { |
| 1133 | margin-right: 0; | 1133 | margin-right: 0; |
| 1134 | } */ | 1134 | } */ |
| 1135 | .mCSB_container { | 1135 | .mCSB_container { |
| 1136 | overflow: hidden; | 1136 | overflow: hidden; |
| 1137 | height: auto; | 1137 | height: auto; |
| 1138 | } | 1138 | } |
| 1139 | 1139 | ||
| 1140 | @media (min-width: 768px) { | 1140 | @media (min-width: 768px) { |
| 1141 | .col-sm-12 { | 1141 | .col-sm-12 { |
| 1142 | width: 100%; | 1142 | width: 100%; |
| 1143 | } | 1143 | } |
| 1144 | } | 1144 | } |
| 1145 | </style> | 1145 | </style> |
src/pages/Academic/subject.vue
| 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" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit 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 | 136 | <v-btn |
| 137 | round | 137 | round |
| 138 | dark | 138 | dark |
| 139 | @click="save" | 139 | @click="save" |
| 140 | :loading="editLoading" | 140 | :loading="editLoading" |
| 141 | class="add-button" | 141 | class="add-button" |
| 142 | >Update Subject</v-btn> | 142 | >Update Subject</v-btn> |
| 143 | </v-card-actions> | 143 | </v-card-actions> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-form> | 145 | </v-form> |
| 146 | </v-container> | 146 | </v-container> |
| 147 | </v-card> | 147 | </v-card> |
| 148 | </v-dialog> | 148 | </v-dialog> |
| 149 | 149 | ||
| 150 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 150 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 151 | 151 | ||
| 152 | <v-dialog v-model="viewSubjectDialog" max-width="500px"> | 152 | <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> |
| 153 | <v-card flat class="card-style pa-3" dark> | 153 | <v-card flat class="card-style pa-3" dark> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs12> | 155 | <v-flex xs12> |
| 156 | <label class="title text-xs-center">View Subject</label> | 156 | <label class="title text-xs-center">View Subject</label> |
| 157 | <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> | 157 | <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | <v-card-text> | 160 | <v-card-text> |
| 161 | <v-container grid-list-md> | 161 | <v-container grid-list-md> |
| 162 | <v-layout wrap> | 162 | <v-layout wrap> |
| 163 | <v-flex> | 163 | <v-flex> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs6 sm4> | 165 | <v-flex xs6 sm4> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Subject Name:</b> | 167 | <b>Subject Name:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm8 xs6> | 170 | <v-flex sm8 xs6> |
| 171 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 171 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs6 sm4> | 175 | <v-flex xs6 sm4> |
| 176 | <h5 class="right my-1"> | 176 | <h5 class="right my-1"> |
| 177 | <b>Subject Author:</b> | 177 | <b>Subject Author:</b> |
| 178 | </h5> | 178 | </h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex sm8 xs6> | 180 | <v-flex sm8 xs6> |
| 181 | <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> | 181 | <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs6 sm4> | 185 | <v-flex xs6 sm4> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Subject :</b> | 187 | <b>Subject :</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm8 xs6> | 190 | <v-flex sm8 xs6> |
| 191 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> | 191 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | <!-- <v-layout> | 194 | <!-- <v-layout> |
| 195 | <v-flex xs6 sm4> | 195 | <v-flex xs6 sm4> |
| 196 | <h5 class="right my-1"> | 196 | <h5 class="right my-1"> |
| 197 | <b>Teacher :</b> | 197 | <b>Teacher :</b> |
| 198 | </h5> | 198 | </h5> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex sm8 xs6> | 200 | <v-flex sm8 xs6> |
| 201 | <h5 class="my-1">{{ editedItem.teacherId }}</h5> | 201 | <h5 class="my-1">{{ editedItem.teacherId }}</h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | </v-layout>--> | 203 | </v-layout>--> |
| 204 | <v-layout> | 204 | <v-layout> |
| 205 | <v-flex xs6 sm4> | 205 | <v-flex xs6 sm4> |
| 206 | <h5 class="right my-1"> | 206 | <h5 class="right my-1"> |
| 207 | <b>Pass Marks :</b> | 207 | <b>Pass Marks :</b> |
| 208 | </h5> | 208 | </h5> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex sm8 xs6> | 210 | <v-flex sm8 xs6> |
| 211 | <h5 class="my-1">{{ editedItem.passMarks }}</h5> | 211 | <h5 class="my-1">{{ editedItem.passMarks }}</h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-layout> | 213 | </v-layout> |
| 214 | <v-layout> | 214 | <v-layout> |
| 215 | <v-flex xs6 sm4> | 215 | <v-flex xs6 sm4> |
| 216 | <h5 class="right my-1"> | 216 | <h5 class="right my-1"> |
| 217 | <b>Final Marks :</b> | 217 | <b>Final Marks :</b> |
| 218 | </h5> | 218 | </h5> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | <v-flex sm8 xs6> | 220 | <v-flex sm8 xs6> |
| 221 | <h5 class="my-1">{{ editedItem.finalMarks }}</h5> | 221 | <h5 class="my-1">{{ editedItem.finalMarks }}</h5> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | </v-layout> | 223 | </v-layout> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs6 sm4> | 225 | <v-flex xs6 sm4> |
| 226 | <h5 class="right my-1"> | 226 | <h5 class="right my-1"> |
| 227 | <b>Type :</b> | 227 | <b>Type :</b> |
| 228 | </h5> | 228 | </h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex sm8 xs6> | 230 | <v-flex sm8 xs6> |
| 231 | <h5 class="my-1">{{ editedItem.type }}</h5> | 231 | <h5 class="my-1">{{ editedItem.type }}</h5> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-container> | 236 | </v-container> |
| 237 | </v-card-text> | 237 | </v-card-text> |
| 238 | </v-card> | 238 | </v-card> |
| 239 | </v-dialog> | 239 | </v-dialog> |
| 240 | 240 | ||
| 241 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> | 241 | <!-- ****** EXISTING SUBJECTS TABLE ****** --> |
| 242 | <v-toolbar color="transparent" flat> | 242 | <v-toolbar color="transparent" flat> |
| 243 | <v-btn | 243 | <v-btn |
| 244 | fab | 244 | fab |
| 245 | dark | 245 | dark |
| 246 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 246 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 247 | small | 247 | small |
| 248 | @click="addSubjectDialog = true" | 248 | @click="addSubjectDialog = true" |
| 249 | > | 249 | > |
| 250 | <v-icon dark>add</v-icon> | 250 | <v-icon dark>add</v-icon> |
| 251 | </v-btn> | 251 | </v-btn> |
| 252 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 252 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 253 | <v-btn | 253 | <v-btn |
| 254 | round | 254 | round |
| 255 | class="open-dialog-button" | 255 | class="open-dialog-button" |
| 256 | dark | 256 | dark |
| 257 | @click="addSubjectDialog = true" | 257 | @click="addSubjectDialog = true" |
| 258 | v-if="role != 'TEACHER' " | 258 | v-if="role != 'TEACHER' " |
| 259 | > | 259 | > |
| 260 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject | 260 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject |
| 261 | </v-btn> | 261 | </v-btn> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | <v-spacer></v-spacer> | 263 | <v-spacer></v-spacer> |
| 264 | <v-flex lg2 md2 xs12 v-show="show"> | 264 | <v-flex lg2 md2 xs12 v-show="show"> |
| 265 | <v-select | 265 | <v-select |
| 266 | :items="classList" | 266 | :items="classList" |
| 267 | label="Select Your Class" | 267 | label="Select Your Class" |
| 268 | v-model="getSubject.classId" | 268 | v-model="getSubject.classId" |
| 269 | item-text="classNum" | 269 | item-text="classNum" |
| 270 | item-value="_id" | 270 | item-value="_id" |
| 271 | name="Select Class" | 271 | name="Select Class" |
| 272 | :rules="classRules" | 272 | :rules="classRules" |
| 273 | @change="getClassSubject" | 273 | @change="getClassSubject" |
| 274 | class="pl-2" | 274 | class="pl-2" |
| 275 | required | 275 | required |
| 276 | ></v-select> | 276 | ></v-select> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-card-title class="body-1" v-show="show"> | 278 | <v-card-title class="body-1" v-show="show"> |
| 279 | <v-btn icon flat @click="displaySearch"> | 279 | <v-btn icon flat @click="displaySearch"> |
| 280 | <v-avatar size="27"> | 280 | <v-avatar size="27"> |
| 281 | <img src="/static/icon/search.png" alt="icon" /> | 281 | <img src="/static/icon/search.png" alt="icon" /> |
| 282 | </v-avatar> | 282 | </v-avatar> |
| 283 | </v-btn> | 283 | </v-btn> |
| 284 | </v-card-title> | 284 | </v-card-title> |
| 285 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 285 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-text-field | 287 | <v-text-field |
| 288 | autofocus | 288 | autofocus |
| 289 | v-model="search" | 289 | v-model="search" |
| 290 | label="Search" | 290 | label="Search" |
| 291 | prepend-inner-icon="search" | 291 | prepend-inner-icon="search" |
| 292 | color="primary" | 292 | color="primary" |
| 293 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 293 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 294 | ></v-text-field> | 294 | ></v-text-field> |
| 295 | <v-icon @click="closeSearch" color="error">close</v-icon> | 295 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 296 | </v-layout> | 296 | </v-layout> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-toolbar> | 298 | </v-toolbar> |
| 299 | <v-data-table | 299 | <v-data-table |
| 300 | :headers="headers" | 300 | :headers="headers" |
| 301 | :items="subjectList.subjects" | 301 | :items="subjectList.subjects" |
| 302 | :pagination.sync="pagination" | 302 | :pagination.sync="pagination" |
| 303 | :search="search" | 303 | :search="search" |
| 304 | > | 304 | > |
| 305 | <template slot="items" slot-scope="props"> | 305 | <template slot="items" slot-scope="props"> |
| 306 | <tr class="tr"> | 306 | <tr class="tr"> |
| 307 | <td class="td-row td">{{ props.index + 1 }}</td> | 307 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 308 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> | 308 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> |
| 309 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> | 309 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> |
| 310 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> | 310 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> |
| 311 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> | 311 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> |
| 312 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> | 312 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> |
| 313 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> | 313 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> |
| 314 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> | 314 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> |
| 315 | 315 | ||
| 316 | <!-- <td class="text-xs-center td td-row"> | 316 | <!-- <td class="text-xs-center td td-row"> |
| 317 | <span> | 317 | <span> |
| 318 | <v-tooltip top> | 318 | <v-tooltip top> |
| 319 | <img | 319 | <img |
| 320 | slot="activator" | 320 | slot="activator" |
| 321 | style="cursor:pointer; width:25px; height:25px; " | 321 | style="cursor:pointer; width:25px; height:25px; " |
| 322 | class="mr-3" | 322 | class="mr-3" |
| 323 | @click="profile(props.item)" | 323 | @click="profile(props.item)" |
| 324 | src="/static/icon/view.png" | 324 | src="/static/icon/view.png" |
| 325 | /> | 325 | /> |
| 326 | <span>View</span> | 326 | <span>View</span> |
| 327 | </v-tooltip> | 327 | </v-tooltip> |
| 328 | <v-tooltip top> | 328 | <v-tooltip top> |
| 329 | <img | 329 | <img |
| 330 | slot="activator" | 330 | slot="activator" |
| 331 | style="cursor:pointer; width:20px; height:18px; " | 331 | style="cursor:pointer; width:20px; height:18px; " |
| 332 | class="mr-3" | 332 | class="mr-3" |
| 333 | @click="editItem(props.item)" | 333 | @click="editItem(props.item)" |
| 334 | src="/static/icon/edit.png" | 334 | src="/static/icon/edit.png" |
| 335 | /> | 335 | /> |
| 336 | <span>Edit</span> | 336 | <span>Edit</span> |
| 337 | </v-tooltip> | 337 | </v-tooltip> |
| 338 | <v-tooltip top> | 338 | <v-tooltip top> |
| 339 | <img | 339 | <img |
| 340 | slot="activator" | 340 | slot="activator" |
| 341 | style="cursor:pointer; width:20px; height:20px; " | 341 | style="cursor:pointer; width:20px; height:20px; " |
| 342 | class="mr-3" | 342 | class="mr-3" |
| 343 | @click="deleteItem(props.item)" | 343 | @click="deleteItem(props.item)" |
| 344 | src="/static/icon/delete.png" | 344 | src="/static/icon/delete.png" |
| 345 | /> | 345 | /> |
| 346 | <span>Delete</span> | 346 | <span>Delete</span> |
| 347 | </v-tooltip> | 347 | </v-tooltip> |
| 348 | </span> | 348 | </span> |
| 349 | </td>--> | 349 | </td>--> |
| 350 | </tr> | 350 | </tr> |
| 351 | </template> | 351 | </template> |
| 352 | <v-alert | 352 | <v-alert |
| 353 | slot="no-results" | 353 | slot="no-results" |
| 354 | :value="true" | 354 | :value="true" |
| 355 | color="error" | 355 | color="error" |
| 356 | icon="warning" | 356 | icon="warning" |
| 357 | >Your search for "{{ search }}" found no results.</v-alert> | 357 | >Your search for "{{ search }}" found no results.</v-alert> |
| 358 | </v-data-table> | 358 | </v-data-table> |
| 359 | <!-- ****** ADD MULTIPLE Subject ****** --> | 359 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 360 | <v-snackbar | 360 | <v-snackbar |
| 361 | :timeout="timeout" | 361 | :timeout="timeout" |
| 362 | :top="y === 'top'" | 362 | :top="y === 'top'" |
| 363 | :right="x === 'right'" | 363 | :right="x === 'right'" |
| 364 | :vertical="mode === 'vertical'" | 364 | :vertical="mode === 'vertical'" |
| 365 | v-model="snackbar" | 365 | v-model="snackbar" |
| 366 | :color="color" | 366 | :color="color" |
| 367 | >{{ text }}</v-snackbar> | 367 | >{{ text }}</v-snackbar> |
| 368 | <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog"> | 368 | <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent> |
| 369 | <v-card flat class="card-style pa-2" dark> | 369 | <v-card flat class="card-style pa-2" dark> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex xs12> | 371 | <v-flex xs12> |
| 372 | <label class="title text-xs-center">Add Subject</label> | 372 | <label class="title text-xs-center">Add Subject</label> |
| 373 | <v-icon | 373 | <v-icon |
| 374 | size="24" | 374 | size="24" |
| 375 | class="right" | 375 | class="right" |
| 376 | @click="$refs.form.reset();addSubjectDialog = false" | 376 | @click="$refs.form.reset();addSubjectDialog = false" |
| 377 | >cancel</v-icon> | 377 | >cancel</v-icon> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | </v-layout> | 379 | </v-layout> |
| 380 | <v-container fluid fill-height> | 380 | <v-container fluid fill-height> |
| 381 | <v-layout align-center> | 381 | <v-layout align-center> |
| 382 | <v-flex xs12> | 382 | <v-flex xs12> |
| 383 | <v-form ref="form" v-model="valid" lazy-validation> | 383 | <v-form ref="form" v-model="valid" lazy-validation> |
| 384 | <v-layout> | 384 | <v-layout> |
| 385 | <v-flex xs4 sm4 class="pt-4 subheading"> | 385 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 386 | <label class="right">Class Name :</label> | 386 | <label class="right">Class Name :</label> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex xs8 sm8 class="ml-3"> | 388 | <v-flex xs8 sm8 class="ml-3"> |
| 389 | <v-select | 389 | <v-select |
| 390 | v-model="addSubject.classId" | 390 | v-model="addSubject.classId" |
| 391 | label="Select your class" | 391 | label="Select your class" |
| 392 | type="text" | 392 | type="text" |
| 393 | :items="classList" | 393 | :items="classList" |
| 394 | item-text="classNum" | 394 | item-text="classNum" |
| 395 | item-value="_id" | 395 | item-value="_id" |
| 396 | :rules="classRules" | 396 | :rules="classRules" |
| 397 | required | 397 | required |
| 398 | ></v-select> | 398 | ></v-select> |
| 399 | </v-flex> | 399 | </v-flex> |
| 400 | </v-layout> | 400 | </v-layout> |
| 401 | <v-layout> | 401 | <v-layout> |
| 402 | <v-flex xs4 sm4 class="pt-4 subheading"> | 402 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 403 | <label class="right">Teacher Name :</label> | 403 | <label class="right">Teacher Name :</label> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | <v-flex xs8 sm8 class="ml-3"> | 405 | <v-flex xs8 sm8 class="ml-3"> |
| 406 | <v-select | 406 | <v-select |
| 407 | v-model="addSubject.teacherId" | 407 | v-model="addSubject.teacherId" |
| 408 | label="Select your teacher" | 408 | label="Select your teacher" |
| 409 | type="text" | 409 | type="text" |
| 410 | :items="teacherList" | 410 | :items="teacherList" |
| 411 | item-text="name" | 411 | item-text="name" |
| 412 | item-value="_id" | 412 | item-value="_id" |
| 413 | :rules="teacherRules" | 413 | :rules="teacherRules" |
| 414 | required | 414 | required |
| 415 | ></v-select> | 415 | ></v-select> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex xs4 sm4 class="pt-4 sybheading"> | 419 | <v-flex xs4 sm4 class="pt-4 sybheading"> |
| 420 | <label class="right">Type :</label> | 420 | <label class="right">Type :</label> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | <v-flex xs8 sm8 class="ml-3"> | 422 | <v-flex xs8 sm8 class="ml-3"> |
| 423 | <v-select | 423 | <v-select |
| 424 | v-model="addSubject.type" | 424 | v-model="addSubject.type" |
| 425 | :items="type" | 425 | :items="type" |
| 426 | label="Select your Type" | 426 | label="Select your Type" |
| 427 | :rules="typeRules" | 427 | :rules="typeRules" |
| 428 | required | 428 | required |
| 429 | ></v-select> | 429 | ></v-select> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 sm4 class="pt-4 subheading"> | 433 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 434 | <label class="right">Pass Mark :</label> | 434 | <label class="right">Pass Mark :</label> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | <v-flex xs8 sm8 class="ml-3"> | 436 | <v-flex xs8 sm8 class="ml-3"> |
| 437 | <v-text-field | 437 | <v-text-field |
| 438 | label="Fill your Pass Mark" | 438 | label="Fill your Pass Mark" |
| 439 | name="name" | 439 | name="name" |
| 440 | type="text" | 440 | type="text" |
| 441 | :rules="markRules" | 441 | :rules="markRules" |
| 442 | v-model="addSubject.passMarks" | 442 | v-model="addSubject.passMarks" |
| 443 | required | 443 | required |
| 444 | ></v-text-field> | 444 | ></v-text-field> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | </v-layout> | 446 | </v-layout> |
| 447 | <v-layout> | 447 | <v-layout> |
| 448 | <v-flex xs4 sm4 class="pt-4 subheading"> | 448 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 449 | <label class="right">Final Mark :</label> | 449 | <label class="right">Final Mark :</label> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | <v-flex xs8 sm8 class="ml-3"> | 451 | <v-flex xs8 sm8 class="ml-3"> |
| 452 | <v-text-field | 452 | <v-text-field |
| 453 | label="Fill your final mark" | 453 | label="Fill your final mark" |
| 454 | name="name" | 454 | name="name" |
| 455 | type="text" | 455 | type="text" |
| 456 | :rules="finalRules" | 456 | :rules="finalRules" |
| 457 | v-model="addSubject.finalMarks" | 457 | v-model="addSubject.finalMarks" |
| 458 | required | 458 | required |
| 459 | ></v-text-field> | 459 | ></v-text-field> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | </v-layout> | 461 | </v-layout> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs4 sm4 class="pt-4 subheading"> | 463 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 464 | <label class="right">Subject :</label> | 464 | <label class="right">Subject :</label> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-flex xs8 sm8 class="ml-3"> | 466 | <v-flex xs8 sm8 class="ml-3"> |
| 467 | <v-text-field | 467 | <v-text-field |
| 468 | v-model="addSubject.subjectName" | 468 | v-model="addSubject.subjectName" |
| 469 | placeholder="fill your Subject Name" | 469 | placeholder="fill your Subject Name" |
| 470 | name="name" | 470 | name="name" |
| 471 | type="text" | 471 | type="text" |
| 472 | :rules="subjectRules" | 472 | :rules="subjectRules" |
| 473 | required | 473 | required |
| 474 | ></v-text-field> | 474 | ></v-text-field> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | <v-layout> | 477 | <v-layout> |
| 478 | <v-flex xs4 sm4 class="pt-4 subheading"> | 478 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 479 | <label class="right">Subject Author :</label> | 479 | <label class="right">Subject Author :</label> |
| 480 | </v-flex> | 480 | </v-flex> |
| 481 | <v-flex xs8 sm8 class="ml-3"> | 481 | <v-flex xs8 sm8 class="ml-3"> |
| 482 | <v-text-field | 482 | <v-text-field |
| 483 | v-model="addSubject.subjectAuthor" | 483 | v-model="addSubject.subjectAuthor" |
| 484 | placeholder="fill your Subject Author" | 484 | placeholder="fill your Subject Author" |
| 485 | name="name" | 485 | name="name" |
| 486 | type="text" | 486 | type="text" |
| 487 | ></v-text-field> | 487 | ></v-text-field> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | </v-layout> | 489 | </v-layout> |
| 490 | <v-layout> | 490 | <v-layout> |
| 491 | <v-flex xs4 sm4 class="pt-4 subheading"> | 491 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 492 | <label class="right">Subject Code:</label> | 492 | <label class="right">Subject Code:</label> |
| 493 | </v-flex> | 493 | </v-flex> |
| 494 | <v-flex xs8 sm8 class="ml-3"> | 494 | <v-flex xs8 sm8 class="ml-3"> |
| 495 | <v-text-field | 495 | <v-text-field |
| 496 | v-model="addSubject.subjectCode" | 496 | v-model="addSubject.subjectCode" |
| 497 | placeholder="fill your Subject Code" | 497 | placeholder="fill your Subject Code" |
| 498 | name="name" | 498 | name="name" |
| 499 | type="text" | 499 | type="text" |
| 500 | ></v-text-field> | 500 | ></v-text-field> |
| 501 | </v-flex> | 501 | </v-flex> |
| 502 | </v-layout> | 502 | </v-layout> |
| 503 | <v-layout> | 503 | <v-layout> |
| 504 | <v-flex xs12 sm12> | 504 | <v-flex xs12 sm12> |
| 505 | <v-card-actions> | 505 | <v-card-actions> |
| 506 | <v-spacer></v-spacer> | 506 | <v-spacer></v-spacer> |
| 507 | <v-btn | 507 | <v-btn |
| 508 | @click="submit" | 508 | @click="submit" |
| 509 | round | 509 | round |
| 510 | dark | 510 | dark |
| 511 | :loading="addLoading" | 511 | :loading="addLoading" |
| 512 | class="add-button" | 512 | class="add-button" |
| 513 | >Add Subject</v-btn> | 513 | >Add Subject</v-btn> |
| 514 | </v-card-actions> | 514 | </v-card-actions> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | </v-layout> | 516 | </v-layout> |
| 517 | </v-form> | 517 | </v-form> |
| 518 | </v-flex> | 518 | </v-flex> |
| 519 | </v-layout> | 519 | </v-layout> |
| 520 | </v-container> | 520 | </v-container> |
| 521 | </v-card> | 521 | </v-card> |
| 522 | </v-dialog> | 522 | </v-dialog> |
| 523 | <div class="loader" v-if="showLoader"> | 523 | <div class="loader" v-if="showLoader"> |
| 524 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 524 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 525 | </div> | 525 | </div> |
| 526 | </v-container> | 526 | </v-container> |
| 527 | </template> | 527 | </template> |
| 528 | 528 | ||
| 529 | <script> | 529 | <script> |
| 530 | import http from "@/Services/http.js"; | 530 | import http from "@/Services/http.js"; |
| 531 | import Util from "@/util"; | 531 | import Util from "@/util"; |
| 532 | 532 | ||
| 533 | export default { | 533 | export default { |
| 534 | data: () => ({ | 534 | data: () => ({ |
| 535 | snackbar: false, | 535 | snackbar: false, |
| 536 | y: "top", | 536 | y: "top", |
| 537 | x: "right", | 537 | x: "right", |
| 538 | role: "", | 538 | role: "", |
| 539 | mode: "", | 539 | mode: "", |
| 540 | timeout: 3000, | 540 | timeout: 3000, |
| 541 | text: "", | 541 | text: "", |
| 542 | color: "", | 542 | color: "", |
| 543 | show: true, | 543 | show: true, |
| 544 | showSearch: false, | 544 | showSearch: false, |
| 545 | showLoader: false, | 545 | showLoader: false, |
| 546 | loading: false, | 546 | loading: false, |
| 547 | editLoading: false, | 547 | editLoading: false, |
| 548 | addLoading: false, | 548 | addLoading: false, |
| 549 | date: null, | 549 | date: null, |
| 550 | search: "", | 550 | search: "", |
| 551 | viewSubjectDialog: false, | 551 | viewSubjectDialog: false, |
| 552 | editSubjectDialog: false, | 552 | editSubjectDialog: false, |
| 553 | valid: true, | 553 | valid: true, |
| 554 | validEditSubject: true, | 554 | validEditSubject: true, |
| 555 | addSubjectDialog: false, | 555 | addSubjectDialog: false, |
| 556 | // isActive: true, | 556 | // isActive: true, |
| 557 | // newActive: false, | 557 | // newActive: false, |
| 558 | type: ["Optional", "Mandatory"], | 558 | type: ["Optional", "Mandatory"], |
| 559 | pagination: { | 559 | pagination: { |
| 560 | rowsPerPage: 10, | 560 | rowsPerPage: 10, |
| 561 | }, | 561 | }, |
| 562 | token: "", | 562 | token: "", |
| 563 | classRules: [(v) => !!v || " Class Name is required"], | 563 | classRules: [(v) => !!v || " Class Name is required"], |
| 564 | teacherRules: [(v) => !!v || " Teacher Name is required"], | 564 | teacherRules: [(v) => !!v || " Teacher Name is required"], |
| 565 | typeRules: [(v) => !!v || "Type is required"], | 565 | typeRules: [(v) => !!v || "Type is required"], |
| 566 | markRules: [(v) => !!v || " Pass Mark is required"], | 566 | markRules: [(v) => !!v || " Pass Mark is required"], |
| 567 | finalRules: [(v) => !!v || "Final MArk is required"], | 567 | finalRules: [(v) => !!v || "Final MArk is required"], |
| 568 | subjectRules: [(v) => !!v || " Subject Name is required"], | 568 | subjectRules: [(v) => !!v || " Subject Name is required"], |
| 569 | headers: [ | 569 | headers: [ |
| 570 | { | 570 | { |
| 571 | text: "No", | 571 | text: "No", |
| 572 | align: "", | 572 | align: "", |
| 573 | sortable: false, | 573 | sortable: false, |
| 574 | value: "No", | 574 | value: "No", |
| 575 | }, | 575 | }, |
| 576 | { | 576 | { |
| 577 | text: "Subject Name", | 577 | text: "Subject Name", |
| 578 | value: "subjectName", | 578 | value: "subjectName", |
| 579 | sortable: false, | 579 | sortable: false, |
| 580 | align: "center", | 580 | align: "center", |
| 581 | }, | 581 | }, |
| 582 | { | 582 | { |
| 583 | text: "Subject Author", | 583 | text: "Subject Author", |
| 584 | value: "subjectAuthor", | 584 | value: "subjectAuthor", |
| 585 | sortable: false, | 585 | sortable: false, |
| 586 | align: "center", | 586 | align: "center", |
| 587 | }, | 587 | }, |
| 588 | { | 588 | { |
| 589 | text: "Subject Code", | 589 | text: "Subject Code", |
| 590 | value: "subjectCode", | 590 | value: "subjectCode", |
| 591 | sortable: false, | 591 | sortable: false, |
| 592 | align: "center", | 592 | align: "center", |
| 593 | }, | 593 | }, |
| 594 | // { | 594 | // { |
| 595 | // text: "Teacher", | 595 | // text: "Teacher", |
| 596 | // value: "teacherId", | 596 | // value: "teacherId", |
| 597 | // sortable: false, | 597 | // sortable: false, |
| 598 | // align: "center" | 598 | // align: "center" |
| 599 | // }, | 599 | // }, |
| 600 | { | 600 | { |
| 601 | text: "Pass Marks", | 601 | text: "Pass Marks", |
| 602 | value: "passMarks", | 602 | value: "passMarks", |
| 603 | sortable: false, | 603 | sortable: false, |
| 604 | align: "center", | 604 | align: "center", |
| 605 | }, | 605 | }, |
| 606 | { | 606 | { |
| 607 | text: "Final Marks", | 607 | text: "Final Marks", |
| 608 | value: "finalMarks", | 608 | value: "finalMarks", |
| 609 | sortable: false, | 609 | sortable: false, |
| 610 | align: "center", | 610 | align: "center", |
| 611 | }, | 611 | }, |
| 612 | { | 612 | { |
| 613 | text: "Type", | 613 | text: "Type", |
| 614 | value: "type", | 614 | value: "type", |
| 615 | sortable: false, | 615 | sortable: false, |
| 616 | align: "center", | 616 | align: "center", |
| 617 | }, | 617 | }, |
| 618 | // { text: "Action", value: "", sortable: false, align: "center" } | 618 | // { text: "Action", value: "", sortable: false, align: "center" } |
| 619 | ], | 619 | ], |
| 620 | subjectList: [], | 620 | subjectList: [], |
| 621 | classList: [], | 621 | classList: [], |
| 622 | teacherList: [], | 622 | teacherList: [], |
| 623 | editedIndex: -1, | 623 | editedIndex: -1, |
| 624 | addSubject: {}, | 624 | addSubject: {}, |
| 625 | getSubject: {}, | 625 | getSubject: {}, |
| 626 | 626 | ||
| 627 | editedItem: { | 627 | editedItem: { |
| 628 | // subjectName: "", | 628 | // subjectName: "", |
| 629 | // subjectAuthor: "" | 629 | // subjectAuthor: "" |
| 630 | }, | 630 | }, |
| 631 | }), | 631 | }), |
| 632 | watch: { | 632 | watch: { |
| 633 | addSubjectDialog: function (val) { | 633 | addSubjectDialog: function (val) { |
| 634 | if (!val) { | 634 | if (!val) { |
| 635 | this.addSubject = []; | 635 | this.addSubject = []; |
| 636 | } | 636 | } |
| 637 | }, | 637 | }, |
| 638 | }, | 638 | }, |
| 639 | methods: { | 639 | methods: { |
| 640 | pickFile() { | 640 | pickFile() { |
| 641 | this.$refs.image.click(); | 641 | this.$refs.image.click(); |
| 642 | }, | 642 | }, |
| 643 | editItem(item) { | 643 | editItem(item) { |
| 644 | this.editedIndex = this.subjectList.subjects; | 644 | this.editedIndex = this.subjectList.subjects; |
| 645 | this.editedItem = Object.assign({}, item); | 645 | this.editedItem = Object.assign({}, item); |
| 646 | this.dialog = true; | 646 | this.dialog = true; |
| 647 | this.editSubjectDialog = true; | 647 | this.editSubjectDialog = true; |
| 648 | }, | 648 | }, |
| 649 | profile(item) { | 649 | profile(item) { |
| 650 | this.editedIndex = this.subjectList.subjects; | 650 | this.editedIndex = this.subjectList.subjects; |
| 651 | this.editedItem = Object.assign({}, item); | 651 | this.editedItem = Object.assign({}, item); |
| 652 | this.dialog1 = true; | 652 | this.dialog1 = true; |
| 653 | this.viewSubjectDialog = true; | 653 | this.viewSubjectDialog = true; |
| 654 | }, | 654 | }, |
| 655 | deleteItem(item) { | 655 | deleteItem(item) { |
| 656 | let deleteSubject = { | 656 | let deleteSubject = { |
| 657 | classId: this.addSubject.classId, | 657 | classId: this.addSubject.classId, |
| 658 | subjectId: item._id, | 658 | subjectId: item._id, |
| 659 | }; | 659 | }; |
| 660 | http() | 660 | http() |
| 661 | .delete( | 661 | .delete( |
| 662 | "/deleteSubject", | 662 | "/deleteSubject", |
| 663 | confirm("Are you sure you want to delete this?") && { | 663 | confirm("Are you sure you want to delete this?") && { |
| 664 | params: deleteSubject, | 664 | params: deleteSubject, |
| 665 | } | 665 | } |
| 666 | ) | 666 | ) |
| 667 | .then((response) => { | 667 | .then((response) => { |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.color = "green"; | 669 | this.color = "green"; |
| 670 | this.text = "Successfully delete Existing Subject"; | 670 | this.text = "Successfully delete Existing Subject"; |
| 671 | this.getClassSubject(this.addSubject.classId); | 671 | this.getClassSubject(this.addSubject.classId); |
| 672 | }) | 672 | }) |
| 673 | .catch((error) => { | 673 | .catch((error) => { |
| 674 | // this.snackbar = true; | 674 | // this.snackbar = true; |
| 675 | // this.text = error.response.data.message; | 675 | // this.text = error.response.data.message; |
| 676 | // this.color = "error"; | 676 | // this.color = "error"; |
| 677 | console.log("error", error); | 677 | console.log("error", error); |
| 678 | }); | 678 | }); |
| 679 | }, | 679 | }, |
| 680 | close() { | 680 | close() { |
| 681 | this.editSubjectDialog = false; | 681 | this.editSubjectDialog = false; |
| 682 | }, | 682 | }, |
| 683 | close1() { | 683 | close1() { |
| 684 | this.viewSubjectDialog = false; | 684 | this.viewSubjectDialog = false; |
| 685 | }, | 685 | }, |
| 686 | submit() { | 686 | submit() { |
| 687 | if (this.$refs.form.validate()) { | 687 | if (this.$refs.form.validate()) { |
| 688 | this.addLoading = true; | 688 | this.addLoading = true; |
| 689 | http() | 689 | http() |
| 690 | .post("/addSubject", this.addSubject) | 690 | .post("/addSubject", this.addSubject) |
| 691 | .then((response) => { | 691 | .then((response) => { |
| 692 | this.snackbar = true; | 692 | this.snackbar = true; |
| 693 | this.text = "New Subject added successfully"; | 693 | this.text = "New Subject added successfully"; |
| 694 | this.color = "green"; | 694 | this.color = "green"; |
| 695 | this.addLoading = false; | 695 | this.addLoading = false; |
| 696 | this.$refs.form.reset(); | 696 | this.$refs.form.reset(); |
| 697 | this.addSubjectDialog = false; | 697 | this.addSubjectDialog = false; |
| 698 | this.getClassSubject(_id); | 698 | this.getClassSubject(_id); |
| 699 | }) | 699 | }) |
| 700 | .catch((error) => { | 700 | .catch((error) => { |
| 701 | this.addLoading = false; | 701 | this.addLoading = false; |
| 702 | }); | 702 | }); |
| 703 | } | 703 | } |
| 704 | }, | 704 | }, |
| 705 | clear() { | 705 | clear() { |
| 706 | this.$refs.form.reset(); | 706 | this.$refs.form.reset(); |
| 707 | }, | 707 | }, |
| 708 | save() { | 708 | save() { |
| 709 | if (this.$refs.formEditSubject.validate()) { | 709 | if (this.$refs.formEditSubject.validate()) { |
| 710 | let editSubject = { | 710 | let editSubject = { |
| 711 | classId: this.editedItem.classId, | 711 | classId: this.editedItem.classId, |
| 712 | subjectId: this.editedItem._id, | 712 | subjectId: this.editedItem._id, |
| 713 | teacherId: this.editedItem.teacherId, | 713 | teacherId: this.editedItem.teacherId, |
| 714 | type: this.editedItem.type, | 714 | type: this.editedItem.type, |
| 715 | passMarks: this.editedItem.passMarks, | 715 | passMarks: this.editedItem.passMarks, |
| 716 | finalMarks: this.editedItem.finalMarks, | 716 | finalMarks: this.editedItem.finalMarks, |
| 717 | subjectAuthor: this.editedItem.subjectAuthor, | 717 | subjectAuthor: this.editedItem.subjectAuthor, |
| 718 | subjectCode: this.editedItem.subjectCode, | 718 | subjectCode: this.editedItem.subjectCode, |
| 719 | subjectName: this.editedItem.subjectName, | 719 | subjectName: this.editedItem.subjectName, |
| 720 | }; | 720 | }; |
| 721 | this.editLoading = true; | 721 | this.editLoading = true; |
| 722 | http() | 722 | http() |
| 723 | .put("/updateSubject", editSubject) | 723 | .put("/updateSubject", editSubject) |
| 724 | .then((response) => { | 724 | .then((response) => { |
| 725 | this.snackbar = true; | 725 | this.snackbar = true; |
| 726 | this.text = "Successfully Edit Existing Subject"; | 726 | this.text = "Successfully Edit Existing Subject"; |
| 727 | this.color = "green"; | 727 | this.color = "green"; |
| 728 | this.editLoading = false; | 728 | this.editLoading = false; |
| 729 | this.editSubjectDialog = false; | 729 | this.editSubjectDialog = false; |
| 730 | this.getClassSubject(this.editedItem.classId); | 730 | this.getClassSubject(this.editedItem.classId); |
| 731 | }) | 731 | }) |
| 732 | .catch((error) => { | 732 | .catch((error) => { |
| 733 | this.editLoading = false; | 733 | this.editLoading = false; |
| 734 | 734 | ||
| 735 | // console.log(error); | 735 | // console.log(error); |
| 736 | }); | 736 | }); |
| 737 | } | 737 | } |
| 738 | }, | 738 | }, |
| 739 | getClassSubject(_id) { | 739 | getClassSubject(_id) { |
| 740 | this.showLoader = true; | 740 | this.showLoader = true; |
| 741 | console.log("class", _id); | 741 | console.log("class", _id); |
| 742 | // this.classId = this.classId; | 742 | // this.classId = this.classId; |
| 743 | http() | 743 | http() |
| 744 | .get( | 744 | .get( |
| 745 | "/getParticularClass", | 745 | "/getParticularClass", |
| 746 | { params: { classId: _id } }, | 746 | { params: { classId: _id } }, |
| 747 | { | 747 | { |
| 748 | headers: { Authorization: "Bearer " + this.token }, | 748 | headers: { Authorization: "Bearer " + this.token }, |
| 749 | } | 749 | } |
| 750 | ) | 750 | ) |
| 751 | .then((response) => { | 751 | .then((response) => { |
| 752 | this.subjectList = response.data.data; | 752 | this.subjectList = response.data.data; |
| 753 | this.showLoader = false; | 753 | this.showLoader = false; |
| 754 | }) | 754 | }) |
| 755 | .catch((err) => { | 755 | .catch((err) => { |
| 756 | this.showLoader = false; | 756 | this.showLoader = false; |
| 757 | }); | 757 | }); |
| 758 | }, | 758 | }, |
| 759 | getClass() { | 759 | getClass() { |
| 760 | http() | 760 | http() |
| 761 | .get("/getClassesList", { | 761 | .get("/getClassesList", { |
| 762 | headers: { Authorization: "Bearer " + this.token }, | 762 | headers: { Authorization: "Bearer " + this.token }, |
| 763 | }) | 763 | }) |
| 764 | .then((response) => { | 764 | .then((response) => { |
| 765 | this.classList = response.data.data; | 765 | this.classList = response.data.data; |
| 766 | }) | 766 | }) |
| 767 | .catch((error) => { | 767 | .catch((error) => { |
| 768 | if (error.response.status === 401) { | 768 | if (error.response.status === 401) { |
| 769 | this.$router.replace({ path: "/" }); | 769 | this.$router.replace({ path: "/" }); |
| 770 | this.$store.dispatch("setToken", null); | 770 | this.$store.dispatch("setToken", null); |
| 771 | this.$store.dispatch("Id", null); | 771 | this.$store.dispatch("Id", null); |
| 772 | } | 772 | } |
| 773 | }); | 773 | }); |
| 774 | }, | 774 | }, |
| 775 | getTeacherList() { | 775 | getTeacherList() { |
| 776 | this.showLoader = true; | 776 | this.showLoader = true; |
| 777 | var token = this.$store.state.token; | 777 | var token = this.$store.state.token; |
| 778 | http() | 778 | http() |
| 779 | .get("/getTeachersList", { | 779 | .get("/getTeachersList", { |
| 780 | headers: { Authorization: "Bearer " + token }, | 780 | headers: { Authorization: "Bearer " + token }, |
| 781 | }) | 781 | }) |
| 782 | .then((response) => { | 782 | .then((response) => { |
| 783 | this.teacherList = response.data.data; | 783 | this.teacherList = response.data.data; |
| 784 | this.showLoader = false; | 784 | this.showLoader = false; |
| 785 | // console.log("getTeacherList=====>",this.desserts) | 785 | // console.log("getTeacherList=====>",this.desserts) |
| 786 | }) | 786 | }) |
| 787 | .catch((error) => { | 787 | .catch((error) => { |
| 788 | this.showLoader = false; | 788 | this.showLoader = false; |
| 789 | if (error.response.status === 401) { | 789 | if (error.response.status === 401) { |
| 790 | this.$router.replace({ path: "/" }); | 790 | this.$router.replace({ path: "/" }); |
| 791 | this.$store.dispatch("setToken", null); | 791 | this.$store.dispatch("setToken", null); |
| 792 | this.$store.dispatch("Id", null); | 792 | this.$store.dispatch("Id", null); |
| 793 | } | 793 | } |
| 794 | }); | 794 | }); |
| 795 | }, | 795 | }, |
| 796 | displaySearch() { | 796 | displaySearch() { |
| 797 | (this.show = false), (this.showSearch = true); | 797 | (this.show = false), (this.showSearch = true); |
| 798 | }, | 798 | }, |
| 799 | closeSearch() { | 799 | closeSearch() { |
| 800 | this.showSearch = false; | 800 | this.showSearch = false; |
| 801 | this.show = true; | 801 | this.show = true; |
| 802 | this.search = ""; | 802 | this.search = ""; |
| 803 | }, | 803 | }, |
| 804 | }, | 804 | }, |
| 805 | mounted() { | 805 | mounted() { |
| 806 | this.token = this.$store.state.token; | 806 | this.token = this.$store.state.token; |
| 807 | // this.getNoticeDataList(); | 807 | // this.getNoticeDataList(); |
| 808 | this.getClass(); | 808 | this.getClass(); |
| 809 | this.getTeacherList(); | 809 | this.getTeacherList(); |
| 810 | this.role = this.$store.state.role; | 810 | this.role = this.$store.state.role; |
| 811 | }, | 811 | }, |
| 812 | }; | 812 | }; |
| 813 | </script> | 813 | </script> |
src/pages/Academic/syllabus.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Syllabus ****** --> | 3 | <!-- ****** EDIT Syllabus ****** --> |
| 4 | <v-dialog v-model="editSyllabusDialog" max-width="400px"> | 4 | <v-dialog v-model="editSyllabusDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Syllabus</label> | 8 | <label class="title text-xs-center">Edit Syllabus</label> |
| 9 | <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSyllabusDialog = 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="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> | 13 | <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs4 sm4 class="pt-4 subheading"> | 15 | <v-flex xs4 sm4 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 xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field v-model="editedItem.title"></v-text-field> | 19 | <v-text-field v-model="editedItem.title"></v-text-field> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | </v-layout> | 21 | </v-layout> |
| 22 | <v-layout> | 22 | <v-layout> |
| 23 | <v-flex xs4 class="pt-4 subheading"> | 23 | <v-flex xs4 class="pt-4 subheading"> |
| 24 | <label class="right">Description:</label> | 24 | <label class="right">Description:</label> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | <v-flex xs8 class="ml-3"> | 26 | <v-flex xs8 class="ml-3"> |
| 27 | <v-text-field v-model="editedItem.description"></v-text-field> | 27 | <v-text-field v-model="editedItem.description"></v-text-field> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | </v-layout> | 29 | </v-layout> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs4 class="pt-4 subheading"> | 31 | <v-flex xs4 class="pt-4 subheading"> |
| 32 | <label class="right">Class:</label> | 32 | <label class="right">Class:</label> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 class="ml-3"> | 34 | <v-flex xs8 class="ml-3"> |
| 35 | <v-select | 35 | <v-select |
| 36 | :items="classList" | 36 | :items="classList" |
| 37 | v-model="editedItem.classId" | 37 | v-model="editedItem.classId" |
| 38 | label="Select Class" | 38 | label="Select Class" |
| 39 | item-text="classNum" | 39 | item-text="classNum" |
| 40 | item-value="_id" | 40 | item-value="_id" |
| 41 | name="Select Class" | 41 | name="Select Class" |
| 42 | @change="getSections(addSyllabus.classId)" | 42 | @change="getSections(addSyllabus.classId)" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | <!-- <v-layout> | 47 | <!-- <v-layout> |
| 48 | <v-flex xs4 sm4 class="pt-4 subheading"> | 48 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 49 | <label class="right">Section :</label> | 49 | <label class="right">Section :</label> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex xs8 sm8 class="ml-3"> | 51 | <v-flex xs8 sm8 class="ml-3"> |
| 52 | <v-select | 52 | <v-select |
| 53 | :items="addSection" | 53 | :items="addSection" |
| 54 | label="Select Section" | 54 | label="Select Section" |
| 55 | item-text="name" | 55 | item-text="name" |
| 56 | item-value="_id" | 56 | item-value="_id" |
| 57 | v-model="editedItem.sectionId" | 57 | v-model="editedItem.sectionId" |
| 58 | name="Select Section" | 58 | name="Select Section" |
| 59 | class="px-2" | 59 | class="px-2" |
| 60 | required | 60 | required |
| 61 | ></v-select> | 61 | ></v-select> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout>--> | 63 | </v-layout>--> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">File:</label> | 66 | <label class="right">File:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs8 sm6 class="ml-3"> | 68 | <v-flex xs8 sm6 class="ml-3"> |
| 69 | <v-text-field | 69 | <v-text-field |
| 70 | label="Select file" | 70 | label="Select file" |
| 71 | @click="pickFile" | 71 | @click="pickFile" |
| 72 | v-model="imageName" | 72 | v-model="imageName" |
| 73 | append-icon="attach_file" | 73 | append-icon="attach_file" |
| 74 | ></v-text-field> | 74 | ></v-text-field> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <input | 76 | <input |
| 77 | type="file" | 77 | type="file" |
| 78 | style="display:none" | 78 | style="display:none" |
| 79 | ref="image" | 79 | ref="image" |
| 80 | accept="image/*" | 80 | accept="image/*" |
| 81 | @change="onFilePicked" | 81 | @change="onFilePicked" |
| 82 | /> | 82 | /> |
| 83 | </v-layout> | 83 | </v-layout> |
| 84 | <v-flex xs12 sm12> | 84 | <v-flex xs12 sm12> |
| 85 | <v-card-actions> | 85 | <v-card-actions> |
| 86 | <v-spacer></v-spacer> | 86 | <v-spacer></v-spacer> |
| 87 | <v-btn | 87 | <v-btn |
| 88 | round | 88 | round |
| 89 | dark | 89 | dark |
| 90 | @click="save" | 90 | @click="save" |
| 91 | :loading="editLoading" | 91 | :loading="editLoading" |
| 92 | class="add-button" | 92 | class="add-button" |
| 93 | >Update Syllabus</v-btn> | 93 | >Update Syllabus</v-btn> |
| 94 | </v-card-actions> | 94 | </v-card-actions> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-form> | 96 | </v-form> |
| 97 | </v-container> | 97 | </v-container> |
| 98 | </v-card> | 98 | </v-card> |
| 99 | </v-dialog> | 99 | </v-dialog> |
| 100 | 100 | ||
| 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 101 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 102 | 102 | ||
| 103 | <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> | 103 | <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px"> |
| 104 | <v-toolbar flat class="card-style pa-3" dark> | 104 | <v-toolbar flat class="card-style pa-3" dark> |
| 105 | <v-spacer></v-spacer> | 105 | <v-spacer></v-spacer> |
| 106 | <v-toolbar-title> | 106 | <v-toolbar-title> |
| 107 | <h3>Subject</h3> | 107 | <h3>Subject</h3> |
| 108 | </v-toolbar-title> | 108 | </v-toolbar-title> |
| 109 | <v-spacer></v-spacer> | 109 | <v-spacer></v-spacer> |
| 110 | <v-icon @click="close1">close</v-icon> | 110 | <v-icon @click="close1">close</v-icon> |
| 111 | </v-toolbar> | 111 | </v-toolbar> |
| 112 | <v-card> | 112 | <v-card> |
| 113 | <v-card-text> | 113 | <v-card-text> |
| 114 | <v-container grid-list-md> | 114 | <v-container grid-list-md> |
| 115 | <v-layout wrap> | 115 | <v-layout wrap> |
| 116 | <v-flex> | 116 | <v-flex> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs7 sm6> | 118 | <v-flex xs7 sm6> |
| 119 | <h5 class="right my-1"> | 119 | <h5 class="right my-1"> |
| 120 | <b>Subject Name:</b> | 120 | <b>Subject Name:</b> |
| 121 | </h5> | 121 | </h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex sm6 xs5> | 123 | <v-flex sm6 xs5> |
| 124 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 124 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | </v-layout> | 128 | </v-layout> |
| 129 | </v-container> | 129 | </v-container> |
| 130 | </v-card-text> | 130 | </v-card-text> |
| 131 | </v-card> | 131 | </v-card> |
| 132 | </v-dialog>--> | 132 | </v-dialog>--> |
| 133 | 133 | ||
| 134 | <!-- ****** EXISTING SYLLABUS TABLE ****** --> | 134 | <!-- ****** EXISTING SYLLABUS TABLE ****** --> |
| 135 | <v-toolbar color="transparent" flat> | 135 | <v-toolbar color="transparent" flat> |
| 136 | <v-btn | 136 | <v-btn |
| 137 | fab | 137 | fab |
| 138 | dark | 138 | dark |
| 139 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 139 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 140 | small | 140 | small |
| 141 | @click="addSyllabusDialog = true" | 141 | @click="addSyllabusDialog = true" |
| 142 | > | 142 | > |
| 143 | <v-icon dark>add</v-icon> | 143 | <v-icon dark>add</v-icon> |
| 144 | </v-btn> | 144 | </v-btn> |
| 145 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 145 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 146 | <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> | 146 | <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true"> |
| 147 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus | 147 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus |
| 148 | </v-btn> | 148 | </v-btn> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-spacer></v-spacer> | 150 | <v-spacer></v-spacer> |
| 151 | <v-flex lg2 md2 xs12 v-show="show"> | 151 | <v-flex lg2 md2 xs12 v-show="show"> |
| 152 | <v-select | 152 | <v-select |
| 153 | :items="classList" | 153 | :items="classList" |
| 154 | label="Select Class" | 154 | label="Select Class" |
| 155 | v-model="showSyllabus.classId" | 155 | v-model="showSyllabus.classId" |
| 156 | item-text="classNum" | 156 | item-text="classNum" |
| 157 | item-value="_id" | 157 | item-value="_id" |
| 158 | name="Select Class" | 158 | name="Select Class" |
| 159 | :rules="classRules" | 159 | :rules="classRules" |
| 160 | @change="getSyallabusList" | 160 | @change="getSyallabusList" |
| 161 | class="pl-2" | 161 | class="pl-2" |
| 162 | required | 162 | required |
| 163 | ></v-select> | 163 | ></v-select> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | <v-card-title class="body-1" v-show="show"> | 165 | <v-card-title class="body-1" v-show="show"> |
| 166 | <v-btn icon flat @click="displaySearch"> | 166 | <v-btn icon flat @click="displaySearch"> |
| 167 | <v-avatar size="27"> | 167 | <v-avatar size="27"> |
| 168 | <img src="/static/icon/search.png" alt="icon" /> | 168 | <img src="/static/icon/search.png" alt="icon" /> |
| 169 | </v-avatar> | 169 | </v-avatar> |
| 170 | </v-btn> | 170 | </v-btn> |
| 171 | </v-card-title> | 171 | </v-card-title> |
| 172 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> | 172 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 173 | <v-layout> | 173 | <v-layout> |
| 174 | <v-text-field | 174 | <v-text-field |
| 175 | autofocus | 175 | autofocus |
| 176 | v-model="search" | 176 | v-model="search" |
| 177 | label="Search" | 177 | label="Search" |
| 178 | prepend-inner-icon="search" | 178 | prepend-inner-icon="search" |
| 179 | color="primary" | 179 | color="primary" |
| 180 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 180 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 181 | ></v-text-field> | 181 | ></v-text-field> |
| 182 | <v-icon @click="closeSearch" color="error">close</v-icon> | 182 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | </v-toolbar> | 185 | </v-toolbar> |
| 186 | <v-data-table | 186 | <v-data-table |
| 187 | :headers="headers" | 187 | :headers="headers" |
| 188 | :items="syllabusList" | 188 | :items="syllabusList" |
| 189 | :pagination.sync="pagination" | 189 | :pagination.sync="pagination" |
| 190 | :search="search" | 190 | :search="search" |
| 191 | > | 191 | > |
| 192 | <template slot="items" slot-scope="props"> | 192 | <template slot="items" slot-scope="props"> |
| 193 | <tr class="tr"> | 193 | <tr class="tr"> |
| 194 | <td class="td-row td">{{ props.index + 1 }}</td> | 194 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 195 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> | 195 | <td class="text-xs-center td td-row">{{ props.item.title }}</td> |
| 196 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 196 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 197 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> | 197 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> |
| 198 | <td | 198 | <td |
| 199 | class="text-xs-center td tgeneratePDF2Canvasd-row" | 199 | class="text-xs-center td tgeneratePDF2Canvasd-row" |
| 200 | v-if="props.item.teacherId" | 200 | v-if="props.item.teacherId" |
| 201 | >{{ props.item.teacherId.name }}</td> | 201 | >{{ props.item.teacherId.name }}</td> |
| 202 | <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> | 202 | <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td> |
| 203 | <td class="text-xs-center td td-row"> | 203 | <td class="text-xs-center td td-row"> |
| 204 | <!-- <v-btn | 204 | <!-- <v-btn |
| 205 | class="add-button" | 205 | class="add-button" |
| 206 | @click="generatePDF2Canvas(props.item)" | 206 | @click="generatePDF2Canvas(props.item)" |
| 207 | :loading="loadingPdf" | 207 | :loading="loadingPdf" |
| 208 | dark | 208 | dark |
| 209 | >{{ props.item.fileType }}</v-btn>--> | 209 | >{{ props.item.fileType }}</v-btn>--> |
| 210 | <a | 210 | <a |
| 211 | class="hover" | 211 | class="hover" |
| 212 | :href="props.item.documentUrl" | 212 | :href="props.item.documentUrl" |
| 213 | target="_blank" | 213 | target="_blank" |
| 214 | style="text-decoration: none!important; color: grey" | 214 | style="text-decoration: none!important; color: grey" |
| 215 | > | 215 | > |
| 216 | <!-- <v-btn flat block> | 216 | <!-- <v-btn flat block> |
| 217 | <span>--> | 217 | <span>--> |
| 218 | <h5>{{props.item.fileName}}</h5> | 218 | <h5>{{props.item.fileName}}</h5> |
| 219 | <!-- </span> | 219 | <!-- </span> |
| 220 | </v-btn>--> | 220 | </v-btn>--> |
| 221 | </a> | 221 | </a> |
| 222 | </td> | 222 | </td> |
| 223 | <td class="text-xs-center td td-row"> | 223 | <td class="text-xs-center td td-row"> |
| 224 | <span> | 224 | <span> |
| 225 | <v-tooltip top> | 225 | <v-tooltip top> |
| 226 | <img | 226 | <img |
| 227 | slot="activator" | 227 | slot="activator" |
| 228 | style="cursor:pointer; width:20px; height:18px; " | 228 | style="cursor:pointer; width:20px; height:18px; " |
| 229 | class="mr-3" | 229 | class="mr-3" |
| 230 | @click="editItem(props.item)" | 230 | @click="editItem(props.item)" |
| 231 | src="/static/icon/edit.png" | 231 | src="/static/icon/edit.png" |
| 232 | /> | 232 | /> |
| 233 | <span>Edit</span> | 233 | <span>Edit</span> |
| 234 | </v-tooltip> | 234 | </v-tooltip> |
| 235 | <v-tooltip top> | 235 | <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:20px; height:20px; " | 238 | style="cursor:pointer; width:20px; height:20px; " |
| 239 | class="mr-3" | 239 | class="mr-3" |
| 240 | @click="deleteItem(props.item)" | 240 | @click="deleteItem(props.item)" |
| 241 | src="/static/icon/delete.png" | 241 | src="/static/icon/delete.png" |
| 242 | /> | 242 | /> |
| 243 | <span>Delete</span> | 243 | <span>Delete</span> |
| 244 | </v-tooltip> | 244 | </v-tooltip> |
| 245 | </span> | 245 | </span> |
| 246 | </td> | 246 | </td> |
| 247 | </tr> | 247 | </tr> |
| 248 | </template> | 248 | </template> |
| 249 | <v-alert | 249 | <v-alert |
| 250 | slot="no-results" | 250 | slot="no-results" |
| 251 | :value="true" | 251 | :value="true" |
| 252 | color="error" | 252 | color="error" |
| 253 | icon="warning" | 253 | icon="warning" |
| 254 | >Your search for "{{ search }}" found no results.</v-alert> | 254 | >Your search for "{{ search }}" found no results.</v-alert> |
| 255 | </v-data-table> | 255 | </v-data-table> |
| 256 | <!-- ****** ADD SYLLABUS ****** --> | 256 | <!-- ****** ADD SYLLABUS ****** --> |
| 257 | <v-snackbar | 257 | <v-snackbar |
| 258 | :timeout="timeout" | 258 | :timeout="timeout" |
| 259 | :top="y === 'top'" | 259 | :top="y === 'top'" |
| 260 | :right="x === 'right'" | 260 | :right="x === 'right'" |
| 261 | :vertical="mode === 'vertical'" | 261 | :vertical="mode === 'vertical'" |
| 262 | v-model="snackbar" | 262 | v-model="snackbar" |
| 263 | :color="color" | 263 | :color="color" |
| 264 | >{{ text }}</v-snackbar> | 264 | >{{ text }}</v-snackbar> |
| 265 | <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog"> | 265 | <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog" persistent> |
| 266 | <v-card flat class="card-style pa-2" dark> | 266 | <v-card flat class="card-style pa-2" dark> |
| 267 | <v-layout> | 267 | <v-layout> |
| 268 | <v-flex xs12> | 268 | <v-flex xs12> |
| 269 | <label class="title text-xs-center">Add Syllabus</label> | 269 | <label class="title text-xs-center">Add Syllabus</label> |
| 270 | <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> | 270 | <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | <v-container fluid fill-height> | 273 | <v-container fluid fill-height> |
| 274 | <v-layout align-center> | 274 | <v-layout align-center> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <v-form ref="form" v-model="valid" lazy-validation> | 276 | <v-form ref="form" v-model="valid" lazy-validation> |
| 277 | <v-layout> | 277 | <v-layout> |
| 278 | <v-flex xs4 sm4 class="pt-4 subheading"> | 278 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 279 | <label class="right">Title :</label> | 279 | <label class="right">Title :</label> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs8 sm8 class="ml-3"> | 281 | <v-flex xs8 sm8 class="ml-3"> |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | v-model="addSyllabus.title" | 283 | v-model="addSyllabus.title" |
| 284 | name="name" | 284 | name="name" |
| 285 | type="text" | 285 | type="text" |
| 286 | placeholder="Add Title" | 286 | placeholder="Add Title" |
| 287 | :rules="titleRules" | 287 | :rules="titleRules" |
| 288 | required | 288 | required |
| 289 | ></v-text-field> | 289 | ></v-text-field> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | </v-layout> | 291 | </v-layout> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs4 sm4 class="pt-4 subheading"> | 293 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 294 | <label class="right">Description :</label> | 294 | <label class="right">Description :</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs8 sm8 class="ml-3"> | 296 | <v-flex xs8 sm8 class="ml-3"> |
| 297 | <v-text-field | 297 | <v-text-field |
| 298 | v-model="addSyllabus.description" | 298 | v-model="addSyllabus.description" |
| 299 | name="name" | 299 | name="name" |
| 300 | type="text" | 300 | type="text" |
| 301 | placeholder="Add Description" | 301 | placeholder="Add Description" |
| 302 | :rules="descriptionRules" | 302 | :rules="descriptionRules" |
| 303 | required | 303 | required |
| 304 | ></v-text-field> | 304 | ></v-text-field> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-layout> | 306 | </v-layout> |
| 307 | <v-layout> | 307 | <v-layout> |
| 308 | <v-flex xs4 class="pt-4 subheading"> | 308 | <v-flex xs4 class="pt-4 subheading"> |
| 309 | <label class="right">Class:</label> | 309 | <label class="right">Class:</label> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | <v-flex xs8 class="ml-3"> | 311 | <v-flex xs8 class="ml-3"> |
| 312 | <v-select | 312 | <v-select |
| 313 | :items="classList" | 313 | :items="classList" |
| 314 | v-model="addSyllabus.classId" | 314 | v-model="addSyllabus.classId" |
| 315 | label="Select Class" | 315 | label="Select Class" |
| 316 | item-text="classNum" | 316 | item-text="classNum" |
| 317 | item-value="_id" | 317 | item-value="_id" |
| 318 | name="Select Class" | 318 | name="Select Class" |
| 319 | @change="getSections(addSyllabus.classId)" | 319 | @change="getSections(addSyllabus.classId)" |
| 320 | required | 320 | required |
| 321 | ></v-select> | 321 | ></v-select> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | <!-- <v-layout> | 324 | <!-- <v-layout> |
| 325 | <v-flex xs4 sm4 class="pt-4 subheading"> | 325 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 326 | <label class="right">Section :</label> | 326 | <label class="right">Section :</label> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | <v-flex xs8 sm8 class="ml-3"> | 328 | <v-flex xs8 sm8 class="ml-3"> |
| 329 | <v-select | 329 | <v-select |
| 330 | :items="addSection" | 330 | :items="addSection" |
| 331 | label="Select Section" | 331 | label="Select Section" |
| 332 | item-text="name" | 332 | item-text="name" |
| 333 | item-value="_id" | 333 | item-value="_id" |
| 334 | v-model="addSyllabus.sectionId" | 334 | v-model="addSyllabus.sectionId" |
| 335 | name="Select Section" | 335 | name="Select Section" |
| 336 | class="px-2" | 336 | class="px-2" |
| 337 | required | 337 | required |
| 338 | ></v-select> | 338 | ></v-select> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | </v-layout>--> | 340 | </v-layout>--> |
| 341 | <v-layout> | 341 | <v-layout> |
| 342 | <v-flex xs4 class="pt-4 subheading"> | 342 | <v-flex xs4 class="pt-4 subheading"> |
| 343 | <label class="right">File:</label> | 343 | <label class="right">File:</label> |
| 344 | </v-flex> | 344 | </v-flex> |
| 345 | <v-flex xs8 sm6 class="ml-3"> | 345 | <v-flex xs8 sm6 class="ml-3"> |
| 346 | <v-text-field | 346 | <v-text-field |
| 347 | label="Select file" | 347 | label="Select file" |
| 348 | @click="pickFile" | 348 | @click="pickFile" |
| 349 | v-model="imageName" | 349 | v-model="imageName" |
| 350 | append-icon="attach_file" | 350 | append-icon="attach_file" |
| 351 | ></v-text-field> | 351 | ></v-text-field> |
| 352 | <input | 352 | <input |
| 353 | type="file" | 353 | type="file" |
| 354 | style="display:none" | 354 | style="display:none" |
| 355 | ref="image" | 355 | ref="image" |
| 356 | accept="image/*" | 356 | accept="image/*" |
| 357 | @change="onFilePicked" | 357 | @change="onFilePicked" |
| 358 | /> | 358 | /> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-layout> | 360 | </v-layout> |
| 361 | <v-layout> | 361 | <v-layout> |
| 362 | <v-flex xs12 sm12> | 362 | <v-flex xs12 sm12> |
| 363 | <v-card-actions> | 363 | <v-card-actions> |
| 364 | <v-spacer></v-spacer> | 364 | <v-spacer></v-spacer> |
| 365 | <v-btn | 365 | <v-btn |
| 366 | @click="submit" | 366 | @click="submit" |
| 367 | round | 367 | round |
| 368 | dark | 368 | dark |
| 369 | :loading="loading" | 369 | :loading="loading" |
| 370 | class="add-button" | 370 | class="add-button" |
| 371 | >Add Syllabus</v-btn> | 371 | >Add Syllabus</v-btn> |
| 372 | </v-card-actions> | 372 | </v-card-actions> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | </v-layout> | 374 | </v-layout> |
| 375 | </v-form> | 375 | </v-form> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | </v-container> | 378 | </v-container> |
| 379 | </v-card> | 379 | </v-card> |
| 380 | </v-dialog> | 380 | </v-dialog> |
| 381 | <div class="loader" v-if="showLoader"> | 381 | <div class="loader" v-if="showLoader"> |
| 382 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 382 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 383 | </div> | 383 | </div> |
| 384 | </v-container> | 384 | </v-container> |
| 385 | </template> | 385 | </template> |
| 386 | 386 | ||
| 387 | <script> | 387 | <script> |
| 388 | import http from "@/Services/http.js"; | 388 | import http from "@/Services/http.js"; |
| 389 | import Util from "@/util"; | 389 | import Util from "@/util"; |
| 390 | import moment from "moment"; | 390 | import moment from "moment"; |
| 391 | import jsPDF from "jspdf"; | 391 | import jsPDF from "jspdf"; |
| 392 | import { saveAs } from "file-saver"; | 392 | import { saveAs } from "file-saver"; |
| 393 | 393 | ||
| 394 | export default { | 394 | export default { |
| 395 | data: () => ({ | 395 | data: () => ({ |
| 396 | snackbar: false, | 396 | snackbar: false, |
| 397 | y: "top", | 397 | y: "top", |
| 398 | x: "right", | 398 | x: "right", |
| 399 | mode: "", | 399 | mode: "", |
| 400 | timeout: 3000, | 400 | timeout: 3000, |
| 401 | text: "", | 401 | text: "", |
| 402 | color: "", | 402 | color: "", |
| 403 | show: true, | 403 | show: true, |
| 404 | showSearch: false, | 404 | showSearch: false, |
| 405 | showLoader: false, | 405 | showLoader: false, |
| 406 | loading: false, | 406 | loading: false, |
| 407 | editLoading: false, | 407 | editLoading: false, |
| 408 | date: null, | 408 | date: null, |
| 409 | search: "", | 409 | search: "", |
| 410 | editSyllabusDialog: false, | 410 | editSyllabusDialog: false, |
| 411 | valid: true, | 411 | valid: true, |
| 412 | validEditSyllabus: true, | 412 | validEditSyllabus: true, |
| 413 | addSyllabusDialog: false, | 413 | addSyllabusDialog: false, |
| 414 | loadingPdf: false, | 414 | loadingPdf: false, |
| 415 | 415 | ||
| 416 | pagination: { | 416 | pagination: { |
| 417 | rowsPerPage: 10, | 417 | rowsPerPage: 10, |
| 418 | }, | 418 | }, |
| 419 | token: "", | 419 | token: "", |
| 420 | upload: "", | 420 | upload: "", |
| 421 | titleRules: [(v) => !!v || " Title is required"], | 421 | titleRules: [(v) => !!v || " Title is required"], |
| 422 | descriptionRules: [(v) => !!v || " Description is required"], | 422 | descriptionRules: [(v) => !!v || " Description is required"], |
| 423 | classRules: [(v) => !!v || " Class Name is required"], | 423 | classRules: [(v) => !!v || " Class Name is required"], |
| 424 | fileRules: [(v) => !!v || " File is required"], | 424 | fileRules: [(v) => !!v || " File is required"], |
| 425 | headers: [ | 425 | headers: [ |
| 426 | { | 426 | { |
| 427 | text: "No", | 427 | text: "No", |
| 428 | align: "", | 428 | align: "", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | value: "No", | 430 | value: "No", |
| 431 | }, | 431 | }, |
| 432 | { | 432 | { |
| 433 | text: "Title", | 433 | text: "Title", |
| 434 | value: "title", | 434 | value: "title", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | align: "center", | 436 | align: "center", |
| 437 | }, | 437 | }, |
| 438 | { | 438 | { |
| 439 | text: "Description", | 439 | text: "Description", |
| 440 | value: "description", | 440 | value: "description", |
| 441 | sortable: false, | 441 | sortable: false, |
| 442 | align: "center", | 442 | align: "center", |
| 443 | }, | 443 | }, |
| 444 | { | 444 | { |
| 445 | text: "Date", | 445 | text: "Date", |
| 446 | value: "created", | 446 | value: "created", |
| 447 | sortable: false, | 447 | sortable: false, |
| 448 | align: "center", | 448 | align: "center", |
| 449 | }, | 449 | }, |
| 450 | { | 450 | { |
| 451 | text: "Uploader", | 451 | text: "Uploader", |
| 452 | value: "upload", | 452 | value: "upload", |
| 453 | sortable: false, | 453 | sortable: false, |
| 454 | align: "center", | 454 | align: "center", |
| 455 | }, | 455 | }, |
| 456 | { | 456 | { |
| 457 | text: "File", | 457 | text: "File", |
| 458 | value: "documentUrl", | 458 | value: "documentUrl", |
| 459 | sortable: false, | 459 | sortable: false, |
| 460 | align: "center", | 460 | align: "center", |
| 461 | }, | 461 | }, |
| 462 | { text: "Action", value: "", sortable: false, align: "center" }, | 462 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 463 | ], | 463 | ], |
| 464 | syllabusList: [], | 464 | syllabusList: [], |
| 465 | classList: [], | 465 | classList: [], |
| 466 | addSection: [], | 466 | addSection: [], |
| 467 | editedIndex: -1, | 467 | editedIndex: -1, |
| 468 | addSyllabus: {}, | 468 | addSyllabus: {}, |
| 469 | showSyllabus: {}, | 469 | showSyllabus: {}, |
| 470 | 470 | ||
| 471 | editedItem: { | 471 | editedItem: { |
| 472 | subjectName: "", | 472 | subjectName: "", |
| 473 | }, | 473 | }, |
| 474 | imageData: {}, | 474 | imageData: {}, |
| 475 | imageName: "", | 475 | imageName: "", |
| 476 | imageUrl: "", | 476 | imageUrl: "", |
| 477 | imageFile: "", | 477 | imageFile: "", |
| 478 | }), | 478 | }), |
| 479 | 479 | ||
| 480 | watch: { | 480 | watch: { |
| 481 | addSyllabusDialog: function (val) { | 481 | addSyllabusDialog: function (val) { |
| 482 | if (!val) { | 482 | if (!val) { |
| 483 | this.addSyllabus = []; | 483 | this.addSyllabus = []; |
| 484 | this.imageName = ""; | 484 | this.imageName = ""; |
| 485 | } | 485 | } |
| 486 | }, | 486 | }, |
| 487 | }, | 487 | }, |
| 488 | 488 | ||
| 489 | methods: { | 489 | methods: { |
| 490 | pickFile() { | 490 | pickFile() { |
| 491 | this.$refs.image.click(); | 491 | this.$refs.image.click(); |
| 492 | }, | 492 | }, |
| 493 | dates: function (date) { | 493 | dates: function (date) { |
| 494 | return moment(date).format("MMMM DD, YYYY"); | 494 | return moment(date).format("MMMM DD, YYYY"); |
| 495 | }, | 495 | }, |
| 496 | editItem(item) { | 496 | editItem(item) { |
| 497 | this.editedIndex = this.syllabusList; | 497 | this.editedIndex = this.syllabusList; |
| 498 | this.editedItem = Object.assign({}, item); | 498 | this.editedItem = Object.assign({}, item); |
| 499 | this.dialog = true; | 499 | this.dialog = true; |
| 500 | this.editSyllabusDialog = true; | 500 | this.editSyllabusDialog = true; |
| 501 | }, | 501 | }, |
| 502 | download(item) { | 502 | download(item) { |
| 503 | this.editedIndex = this.syllabusList; | 503 | this.editedIndex = this.syllabusList; |
| 504 | this.editedItem = Object.assign({}, item); | 504 | this.editedItem = Object.assign({}, item); |
| 505 | this.dialog1 = true; | 505 | this.dialog1 = true; |
| 506 | }, | 506 | }, |
| 507 | deleteItem(item) { | 507 | deleteItem(item) { |
| 508 | let deleteSyallabus = { | 508 | let deleteSyallabus = { |
| 509 | syallabusId: item._id, | 509 | syallabusId: item._id, |
| 510 | }; | 510 | }; |
| 511 | http() | 511 | http() |
| 512 | .delete( | 512 | .delete( |
| 513 | "/deleteSyallabus", | 513 | "/deleteSyallabus", |
| 514 | confirm("Are you sure you want to delete this?") && { | 514 | confirm("Are you sure you want to delete this?") && { |
| 515 | params: deleteSyallabus, | 515 | params: deleteSyallabus, |
| 516 | } | 516 | } |
| 517 | ) | 517 | ) |
| 518 | .then((response) => { | 518 | .then((response) => { |
| 519 | this.getSyallabusList(); | 519 | this.getSyallabusList(); |
| 520 | this.snackbar = true; | 520 | this.snackbar = true; |
| 521 | this.color = "green"; | 521 | this.color = "green"; |
| 522 | this.text = "Successfully delete Existing Syllabus"; | 522 | this.text = "Successfully delete Existing Syllabus"; |
| 523 | }) | 523 | }) |
| 524 | .catch((error) => { | 524 | .catch((error) => { |
| 525 | this.snackbar = true; | 525 | this.snackbar = true; |
| 526 | this.text = error.response.data.message; | 526 | this.text = error.response.data.message; |
| 527 | this.color = "error"; | 527 | this.color = "error"; |
| 528 | }); | 528 | }); |
| 529 | }, | 529 | }, |
| 530 | close() { | 530 | close() { |
| 531 | this.editSyllabusDialog = false; | 531 | this.editSyllabusDialog = false; |
| 532 | }, | 532 | }, |
| 533 | closeAddStudentModel() { | 533 | closeAddStudentModel() { |
| 534 | this.addSyllabusDialog = false; | 534 | this.addSyllabusDialog = false; |
| 535 | // this.syllabusList = []; | 535 | // this.syllabusList = []; |
| 536 | this.addSyllabus = []; | 536 | this.addSyllabus = []; |
| 537 | this.imageName = ""; | 537 | this.imageName = ""; |
| 538 | }, | 538 | }, |
| 539 | 539 | ||
| 540 | submit() { | 540 | submit() { |
| 541 | // var addSyllabus = { | 541 | // var addSyllabus = { |
| 542 | // classId: this.addSyllabus.classId, | 542 | // classId: this.addSyllabus.classId, |
| 543 | // title: this.addSyllabus.title, | 543 | // title: this.addSyllabus.title, |
| 544 | // description: this.addSyllabus.description, | 544 | // description: this.addSyllabus.description, |
| 545 | // upload: this.addSyllabus.upload, | 545 | // upload: this.addSyllabus.upload, |
| 546 | // fileType: this.addSyllabus.fileType | 546 | // fileType: this.addSyllabus.fileType |
| 547 | // }; | 547 | // }; |
| 548 | var signatures = { | 548 | var signatures = { |
| 549 | // JVBERi0: "other", | 549 | // JVBERi0: "other", |
| 550 | // iVBORw0KGgo: "image", | 550 | // iVBORw0KGgo: "image", |
| 551 | // UEsDBBQ: "other", | 551 | // UEsDBBQ: "other", |
| 552 | // "/": "image", | 552 | // "/": "image", |
| 553 | // AAABAA: "image", | 553 | // AAABAA: "image", |
| 554 | // IywiV2hhdC: "other", | 554 | // IywiV2hhdC: "other", |
| 555 | // bmFtZSxl: "other", | 555 | // bmFtZSxl: "other", |
| 556 | }; | 556 | }; |
| 557 | function detectMimeType(b64) { | 557 | function detectMimeType(b64) { |
| 558 | for (var s in signatures) { | 558 | for (var s in signatures) { |
| 559 | if (b64.indexOf(s) === 0) { | 559 | if (b64.indexOf(s) === 0) { |
| 560 | return signatures[s]; | 560 | return signatures[s]; |
| 561 | } | 561 | } |
| 562 | } | 562 | } |
| 563 | } | 563 | } |
| 564 | if (this.$refs.form.validate()) { | 564 | if (this.$refs.form.validate()) { |
| 565 | if (this.imageUrl) { | 565 | if (this.imageUrl) { |
| 566 | var str = this.imageUrl; | 566 | var str = this.imageUrl; |
| 567 | const [baseUrl, imageUrl] = str.split(/,/); | 567 | const [baseUrl, imageUrl] = str.split(/,/); |
| 568 | this.addSyllabus.upload = imageUrl; | 568 | this.addSyllabus.upload = imageUrl; |
| 569 | this.addSyllabus.fileType = detectMimeType(imageUrl); | 569 | this.addSyllabus.fileType = detectMimeType(imageUrl); |
| 570 | this.addSyllabus.fileName = this.imageName; | 570 | this.addSyllabus.fileName = this.imageName; |
| 571 | } | 571 | } |
| 572 | http() | 572 | http() |
| 573 | .post("/createSyallabus", this.addSyllabus) | 573 | .post("/createSyallabus", this.addSyllabus) |
| 574 | .then((response) => { | 574 | .then((response) => { |
| 575 | this.getSyallabusList(); | 575 | this.getSyallabusList(); |
| 576 | this.snackbar = true; | 576 | this.snackbar = true; |
| 577 | this.text = "Syllabus added successfully"; | 577 | this.text = "Syllabus added successfully"; |
| 578 | this.clear(); | 578 | this.clear(); |
| 579 | this.color = "green"; | 579 | this.color = "green"; |
| 580 | this.addSyllabusDialog = false; | 580 | this.addSyllabusDialog = false; |
| 581 | }) | 581 | }) |
| 582 | .catch((error) => { | 582 | .catch((error) => { |
| 583 | // console.log(error); | 583 | // console.log(error); |
| 584 | this.snackbar = true; | 584 | this.snackbar = true; |
| 585 | this.text = error.response.data.message; | 585 | this.text = error.response.data.message; |
| 586 | this.color = "error"; | 586 | this.color = "error"; |
| 587 | }); | 587 | }); |
| 588 | } | 588 | } |
| 589 | }, | 589 | }, |
| 590 | onFilePicked(e) { | 590 | onFilePicked(e) { |
| 591 | const files = e.target.files; | 591 | const files = e.target.files; |
| 592 | this.upload = e.target.files[0]; | 592 | this.upload = e.target.files[0]; |
| 593 | if (files[0] !== undefined) { | 593 | if (files[0] !== undefined) { |
| 594 | this.imageName = files[0].name; | 594 | this.imageName = files[0].name; |
| 595 | if (this.imageName.lastIndexOf(".") <= 0) { | 595 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 596 | return; | 596 | return; |
| 597 | } | 597 | } |
| 598 | const fr = new FileReader(); | 598 | const fr = new FileReader(); |
| 599 | fr.readAsDataURL(files[0]); | 599 | fr.readAsDataURL(files[0]); |
| 600 | fr.addEventListener("load", () => { | 600 | fr.addEventListener("load", () => { |
| 601 | this.imageUrl = fr.result; | 601 | this.imageUrl = fr.result; |
| 602 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 602 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 603 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 603 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 604 | }); | 604 | }); |
| 605 | } else { | 605 | } else { |
| 606 | this.imageName = ""; | 606 | this.imageName = ""; |
| 607 | this.imageFile = ""; | 607 | this.imageFile = ""; |
| 608 | this.imageUrl = ""; | 608 | this.imageUrl = ""; |
| 609 | } | 609 | } |
| 610 | }, | 610 | }, |
| 611 | clear() { | 611 | clear() { |
| 612 | this.$refs.form.reset(); | 612 | this.$refs.form.reset(); |
| 613 | }, | 613 | }, |
| 614 | save() { | 614 | save() { |
| 615 | if (this.$refs.formEditSyllabus.validate()) { | 615 | if (this.$refs.formEditSyllabus.validate()) { |
| 616 | let syllabusData = { | 616 | let syllabusData = { |
| 617 | syallabusId: this.editedItem._id, | 617 | syallabusId: this.editedItem._id, |
| 618 | classId: this.editedItem.classId._id, | 618 | classId: this.editedItem.classId._id, |
| 619 | // sectionId: this.editedItem.sectionId, | 619 | // sectionId: this.editedItem.sectionId, |
| 620 | title: this.editedItem.title, | 620 | title: this.editedItem.title, |
| 621 | description: this.editedItem.description, | 621 | description: this.editedItem.description, |
| 622 | upload: this.editedItem.upload, | 622 | upload: this.editedItem.upload, |
| 623 | fileType: this.editedItem.fileType, | 623 | fileType: this.editedItem.fileType, |
| 624 | fileName: this.imageName, | 624 | fileName: this.imageName, |
| 625 | }; | 625 | }; |
| 626 | this.editLoading = true; | 626 | this.editLoading = true; |
| 627 | var signatures = { | 627 | var signatures = { |
| 628 | // JVBERi0: "other", | 628 | // JVBERi0: "other", |
| 629 | // iVBORw0KGgo: "image", | 629 | // iVBORw0KGgo: "image", |
| 630 | // UEsDBBQ: "other", | 630 | // UEsDBBQ: "other", |
| 631 | // "/": "image", | 631 | // "/": "image", |
| 632 | // AAABAA: "image", | 632 | // AAABAA: "image", |
| 633 | // IywiV2hhdC: "other", | 633 | // IywiV2hhdC: "other", |
| 634 | }; | 634 | }; |
| 635 | function detectMimeType(b64) { | 635 | function detectMimeType(b64) { |
| 636 | for (var s in signatures) { | 636 | for (var s in signatures) { |
| 637 | if (b64.indexOf(s) === 0) { | 637 | if (b64.indexOf(s) === 0) { |
| 638 | return signatures[s]; | 638 | return signatures[s]; |
| 639 | } | 639 | } |
| 640 | } | 640 | } |
| 641 | } | 641 | } |
| 642 | if (this.imageUrl) { | 642 | if (this.imageUrl) { |
| 643 | var str = this.imageUrl; | 643 | var str = this.imageUrl; |
| 644 | const [baseUrl, imageUrl] = str.split(/,/); | 644 | const [baseUrl, imageUrl] = str.split(/,/); |
| 645 | syllabusData.upload = imageUrl; | 645 | syllabusData.upload = imageUrl; |
| 646 | syllabusData.fileType = detectMimeType(imageUrl); | 646 | syllabusData.fileType = detectMimeType(imageUrl); |
| 647 | } | 647 | } |
| 648 | http() | 648 | http() |
| 649 | .put("/updateSyallabus", syllabusData) | 649 | .put("/updateSyallabus", syllabusData) |
| 650 | .then((response) => { | 650 | .then((response) => { |
| 651 | this.snackbar = true; | 651 | this.snackbar = true; |
| 652 | this.text = "Successfully Edit Existing Syllabus"; | 652 | this.text = "Successfully Edit Existing Syllabus"; |
| 653 | this.color = "green"; | 653 | this.color = "green"; |
| 654 | this.editLoading = false; | 654 | this.editLoading = false; |
| 655 | this.editSyllabusDialog = false; | 655 | this.editSyllabusDialog = false; |
| 656 | http() | 656 | http() |
| 657 | .get( | 657 | .get( |
| 658 | "/getSyallabusList", | 658 | "/getSyallabusList", |
| 659 | { params: { classId: this.addSyllabus.classId } }, | 659 | { params: { classId: this.addSyllabus.classId } }, |
| 660 | { | 660 | { |
| 661 | headers: { Authorization: "Bearer " + this.token }, | 661 | headers: { Authorization: "Bearer " + this.token }, |
| 662 | } | 662 | } |
| 663 | ) | 663 | ) |
| 664 | .then((response) => { | 664 | .then((response) => { |
| 665 | this.syllabusList = response.data.data; | 665 | this.syllabusList = response.data.data; |
| 666 | this.getSyallabusList(); | 666 | this.getSyallabusList(); |
| 667 | this.snackbar = true; | 667 | this.snackbar = true; |
| 668 | this.color = "green"; | 668 | this.color = "green"; |
| 669 | this.close(); | 669 | this.close(); |
| 670 | }) | 670 | }) |
| 671 | .catch((err) => { | 671 | .catch((err) => { |
| 672 | console.log("err====>", err); | 672 | console.log("err====>", err); |
| 673 | this.text = error.response.data.message; | 673 | this.text = error.response.data.message; |
| 674 | this.color = "error"; | 674 | this.color = "error"; |
| 675 | }); | 675 | }); |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | this.editLoading = false; | 678 | this.editLoading = false; |
| 679 | }); | 679 | }); |
| 680 | } | 680 | } |
| 681 | }, | 681 | }, |
| 682 | getSyallabusList() { | 682 | getSyallabusList() { |
| 683 | this.showLoader = true; | 683 | this.showLoader = true; |
| 684 | http() | 684 | http() |
| 685 | .get( | 685 | .get( |
| 686 | "/getSyallabusList", | 686 | "/getSyallabusList", |
| 687 | { params: { classId: this.showSyllabus.classId } }, | 687 | { params: { classId: this.showSyllabus.classId } }, |
| 688 | { | 688 | { |
| 689 | headers: { Authorization: "Bearer " + this.token }, | 689 | headers: { Authorization: "Bearer " + this.token }, |
| 690 | } | 690 | } |
| 691 | ) | 691 | ) |
| 692 | .then((response) => { | 692 | .then((response) => { |
| 693 | this.syllabusList = response.data.data; | 693 | this.syllabusList = response.data.data; |
| 694 | this.showLoader = false; | 694 | this.showLoader = false; |
| 695 | }) | 695 | }) |
| 696 | .catch((err) => { | 696 | .catch((err) => { |
| 697 | this.showLoader = false; | 697 | this.showLoader = false; |
| 698 | }); | 698 | }); |
| 699 | }, | 699 | }, |
| 700 | getClass() { | 700 | getClass() { |
| 701 | http() | 701 | http() |
| 702 | .get("/getClassesList", { | 702 | .get("/getClassesList", { |
| 703 | headers: { Authorization: "Bearer " + this.token }, | 703 | headers: { Authorization: "Bearer " + this.token }, |
| 704 | }) | 704 | }) |
| 705 | .then((response) => { | 705 | .then((response) => { |
| 706 | this.classList = response.data.data; | 706 | this.classList = response.data.data; |
| 707 | }) | 707 | }) |
| 708 | .catch((error) => { | 708 | .catch((error) => { |
| 709 | if (error.response.status === 401) { | 709 | if (error.response.status === 401) { |
| 710 | this.$router.replace({ path: "/" }); | 710 | this.$router.replace({ path: "/" }); |
| 711 | this.$store.dispatch("setToken", null); | 711 | this.$store.dispatch("setToken", null); |
| 712 | this.$store.dispatch("Id", null); | 712 | this.$store.dispatch("Id", null); |
| 713 | } | 713 | } |
| 714 | }); | 714 | }); |
| 715 | }, | 715 | }, |
| 716 | getSections(_id) { | 716 | getSections(_id) { |
| 717 | var token = this.$store.state.token; | 717 | var token = this.$store.state.token; |
| 718 | this.showLoader = true; | 718 | this.showLoader = true; |
| 719 | http() | 719 | http() |
| 720 | .get( | 720 | .get( |
| 721 | "/getSectionsList", | 721 | "/getSectionsList", |
| 722 | { params: { classId: _id } }, | 722 | { params: { classId: _id } }, |
| 723 | { | 723 | { |
| 724 | headers: { Authorization: "Bearer " + token }, | 724 | headers: { Authorization: "Bearer " + token }, |
| 725 | } | 725 | } |
| 726 | ) | 726 | ) |
| 727 | .then((response) => { | 727 | .then((response) => { |
| 728 | this.addSection = response.data.data; | 728 | this.addSection = response.data.data; |
| 729 | this.showLoader = false; | 729 | this.showLoader = false; |
| 730 | }) | 730 | }) |
| 731 | .catch((err) => { | 731 | .catch((err) => { |
| 732 | this.showLoader = false; | 732 | this.showLoader = false; |
| 733 | }); | 733 | }); |
| 734 | }, | 734 | }, |
| 735 | displaySearch() { | 735 | displaySearch() { |
| 736 | (this.show = false), (this.showSearch = true); | 736 | (this.show = false), (this.showSearch = true); |
| 737 | }, | 737 | }, |
| 738 | closeSearch() { | 738 | closeSearch() { |
| 739 | this.showSearch = false; | 739 | this.showSearch = false; |
| 740 | this.show = true; | 740 | this.show = true; |
| 741 | this.search = ""; | 741 | this.search = ""; |
| 742 | }, | 742 | }, |
| 743 | 743 | ||
| 744 | async generatePDF2Canvas(item) { | 744 | async generatePDF2Canvas(item) { |
| 745 | // console.log("documentUrl", documentUrl); | 745 | // console.log("documentUrl", documentUrl); |
| 746 | // this.loadingPdf = true; | 746 | // this.loadingPdf = true; |
| 747 | // const el = this.$refs.printMe; | 747 | // const el = this.$refs.printMe; |
| 748 | // add option type to get the image version | 748 | // add option type to get the image version |
| 749 | // if not provided the promise will return | 749 | // if not provided the promise will return |
| 750 | // the canvas. | 750 | // the canvas. |
| 751 | // const options = { | 751 | // const options = { |
| 752 | // type: "dataURL" | 752 | // type: "dataURL" |
| 753 | // }; | 753 | // }; |
| 754 | // this.output = await this.$html2canvas(el, options); | 754 | // this.output = await this.$html2canvas(el, options); |
| 755 | // console.log("el,option", this.output); | 755 | // console.log("el,option", this.output); |
| 756 | // if (this.output) { | 756 | // if (this.output) { |
| 757 | // this.loadingPdf = false; | 757 | // this.loadingPdf = false; |
| 758 | // } | 758 | // } |
| 759 | // let doc = new jsPDF(); | 759 | // let doc = new jsPDF(); |
| 760 | // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); | 760 | // doc.addImage(this.output,"JPEG", 5, 10, 200, 280); |
| 761 | // doc.save("File.pdf"); | 761 | // doc.save("File.pdf"); |
| 762 | 762 | ||
| 763 | // function download(documentUrl, filename) { | 763 | // function download(documentUrl, filename) { |
| 764 | // fetch(documentUrl).then(function(t) { | 764 | // fetch(documentUrl).then(function(t) { |
| 765 | // return t.blob().then(b => { | 765 | // return t.blob().then(b => { |
| 766 | // var a = document.createElement("a"); | 766 | // var a = document.createElement("a"); |
| 767 | // a.href = URL.createObjectURL(b); | 767 | // a.href = URL.createObjectURL(b); |
| 768 | // a.setAttribute("download", "filename"); | 768 | // a.setAttribute("download", "filename"); |
| 769 | // a.click(); | 769 | // a.click(); |
| 770 | // }); | 770 | // }); |
| 771 | // }); | 771 | // }); |
| 772 | // } | 772 | // } |
| 773 | var dataType = ""; | 773 | var dataType = ""; |
| 774 | var type = ""; | 774 | var type = ""; |
| 775 | if (item.fileType == "image") { | 775 | if (item.fileType == "image") { |
| 776 | dataType = "file.jpg"; | 776 | dataType = "file.jpg"; |
| 777 | } else if (item.fileType == "other") { | 777 | } else if (item.fileType == "other") { |
| 778 | dataType = "file.pdf"; | 778 | dataType = "file.pdf"; |
| 779 | type = "application/pdf"; | 779 | type = "application/pdf"; |
| 780 | } | 780 | } |
| 781 | var FileSaver = require("file-saver"); | 781 | var FileSaver = require("file-saver"); |
| 782 | FileSaver.saveAs(item.documentUrl, "image.jpg"); | 782 | FileSaver.saveAs(item.documentUrl, "image.jpg"); |
| 783 | 783 | ||
| 784 | // var blob = new Blob([item.documentUrl], { | 784 | // var blob = new Blob([item.documentUrl], { |
| 785 | // type: type | 785 | // type: type |
| 786 | // }); | 786 | // }); |
| 787 | // FileSaver.saveAs(blob, dataType); | 787 | // FileSaver.saveAs(blob, dataType); |
| 788 | // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); | 788 | // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); |
| 789 | // console.log("document", item.documentUrl); | 789 | // console.log("document", item.documentUrl); |
| 790 | // const link = document.createElement("a"); | 790 | // const link = document.createElement("a"); |
| 791 | // link.href = url; | 791 | // link.href = url; |
| 792 | // link.setAttribute("download", dataType); //or any other extension | 792 | // link.setAttribute("download", dataType); //or any other extension |
| 793 | // document.body.appendChild(link); | 793 | // document.body.appendChild(link); |
| 794 | // link.click(); | 794 | // link.click(); |
| 795 | 795 | ||
| 796 | // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); | 796 | // const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } )); |
| 797 | // const link = document.createElement('a') | 797 | // const link = document.createElement('a') |
| 798 | // link.href = URL.createObjectURL(blob) | 798 | // link.href = URL.createObjectURL(blob) |
| 799 | // link.download = dataType | 799 | // link.download = dataType |
| 800 | // link.click() | 800 | // link.click() |
| 801 | // URL.revokeObjectURL(link.href) | 801 | // URL.revokeObjectURL(link.href) |
| 802 | }, | 802 | }, |
| 803 | }, | 803 | }, |
| 804 | mounted() { | 804 | mounted() { |
| 805 | this.token = this.$store.state.token; | 805 | this.token = this.$store.state.token; |
| 806 | this.role = this.$store.state.role; | 806 | this.role = this.$store.state.role; |
| 807 | this.getClass(); | 807 | this.getClass(); |
| 808 | }, | 808 | }, |
| 809 | }; | 809 | }; |
| 810 | </script> | 810 | </script> |
| 811 | 811 | ||
| 812 | <style scoped> | 812 | <style scoped> |
| 813 | a:hover :hover { | 813 | a:hover :hover { |
| 814 | text-decoration: underline !important; | 814 | text-decoration: underline !important; |
| 815 | color: blue; | 815 | color: blue; |
| 816 | } | 816 | } |
| 817 | </style> | 817 | </style> |
src/pages/Account/expense.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT EXPENSE ****** --> | 3 | <!-- ****** EDIT EXPENSE ****** --> |
| 4 | <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editExpenseDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Expense Profile</label> | 8 | <label class="title text-xs-center">Edit Expense Profile</label> |
| 9 | <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExpenseDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text style="height: 600px;"> | 12 | <v-card-text style="height: 600px;"> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> | 18 | <v-avatar size="140px" v-if="!editedItem.fileUrl && !imageUrl"> |
| 19 | <img src="/static/icon/user.png" /> | 19 | <img src="/static/icon/user.png" /> |
| 20 | </v-avatar> | 20 | </v-avatar> |
| 21 | <img | 21 | <img |
| 22 | :src="editedItem.fileUrl" | 22 | :src="editedItem.fileUrl" |
| 23 | v-else-if="editedItem.fileUrl && !imageUrl" | 23 | v-else-if="editedItem.fileUrl && !imageUrl" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="imageUrl" | 27 | v-if="imageUrl" |
| 28 | :src="imageUrl" | 28 | :src="imageUrl" |
| 29 | height="150" | 29 | height="150" |
| 30 | style="border-radius:50%; width:150px" | 30 | style="border-radius:50%; width:150px" |
| 31 | /> | 31 | /> |
| 32 | <input | 32 | <input |
| 33 | type="file" | 33 | type="file" |
| 34 | style="display:none" | 34 | style="display:none" |
| 35 | ref="image" | 35 | ref="image" |
| 36 | accept="image/*" | 36 | accept="image/*" |
| 37 | @change="onFilePicked" | 37 | @change="onFilePicked" |
| 38 | /> | 38 | /> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | <v-layout wrap> | 41 | <v-layout wrap> |
| 42 | <v-flex xs12 sm12> | 42 | <v-flex xs12 sm12> |
| 43 | <v-layout> | 43 | <v-layout> |
| 44 | <v-flex xs4 class="pt-4 subheading"> | 44 | <v-flex xs4 class="pt-4 subheading"> |
| 45 | <label class="right">Name:</label> | 45 | <label class="right">Name:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs7 class="ml-3"> | 47 | <v-flex xs7 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.name" | 49 | v-model="editedItem.name" |
| 50 | placeholder="fill your full Name" | 50 | placeholder="fill your full Name" |
| 51 | name="name" | 51 | name="name" |
| 52 | type="text" | 52 | type="text" |
| 53 | required | 53 | required |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout wrap> | 59 | <v-layout wrap> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Date:</label> | 63 | <label class="right">Date:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-menu | 66 | <v-menu |
| 67 | ref="menu" | 67 | ref="menu" |
| 68 | :close-on-content-click="false" | 68 | :close-on-content-click="false" |
| 69 | v-model="menu3" | 69 | v-model="menu3" |
| 70 | :nudge-right="40" | 70 | :nudge-right="40" |
| 71 | lazy | 71 | lazy |
| 72 | transition="scale-transition" | 72 | transition="scale-transition" |
| 73 | offset-y | 73 | offset-y |
| 74 | full-width | 74 | full-width |
| 75 | min-width="290px" | 75 | min-width="290px" |
| 76 | > | 76 | > |
| 77 | <v-text-field | 77 | <v-text-field |
| 78 | slot="activator" | 78 | slot="activator" |
| 79 | v-model="editedItem.date" | 79 | v-model="editedItem.date" |
| 80 | placeholder="Select date" | 80 | placeholder="Select date" |
| 81 | ></v-text-field> | 81 | ></v-text-field> |
| 82 | <v-date-picker | 82 | <v-date-picker |
| 83 | ref="picker" | 83 | ref="picker" |
| 84 | v-model="editedItem.date" | 84 | v-model="editedItem.date" |
| 85 | @input="$refs.menu.save(editedItem.date)" | 85 | @input="$refs.menu.save(editedItem.date)" |
| 86 | ></v-date-picker> | 86 | ></v-date-picker> |
| 87 | </v-menu> | 87 | </v-menu> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-layout wrap> | 91 | <v-layout wrap> |
| 92 | <v-flex xs12 sm12> | 92 | <v-flex xs12 sm12> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs4 class="pt-4 subheading"> | 94 | <v-flex xs4 class="pt-4 subheading"> |
| 95 | <label class="right">Amount:</label> | 95 | <label class="right">Amount:</label> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs7 class="ml-3"> | 97 | <v-flex xs7 class="ml-3"> |
| 98 | <v-text-field v-model="editedItem.amount" required></v-text-field> | 98 | <v-text-field v-model="editedItem.amount" required></v-text-field> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | </v-layout> | 100 | </v-layout> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout wrap> | 104 | <v-layout wrap> |
| 105 | <v-flex xs4 class="pt-4 subheading"> | 105 | <v-flex xs4 class="pt-4 subheading"> |
| 106 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 106 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex xs7 class="ml-3"> | 109 | <v-flex xs7 class="ml-3"> |
| 110 | <v-text-field | 110 | <v-text-field |
| 111 | label="Select Image" | 111 | label="Select Image" |
| 112 | @click="pickFile" | 112 | @click="pickFile" |
| 113 | v-model="imageName" | 113 | v-model="imageName" |
| 114 | append-icon="attach_file" | 114 | append-icon="attach_file" |
| 115 | ></v-text-field> | 115 | ></v-text-field> |
| 116 | <input | 116 | <input |
| 117 | type="file" | 117 | type="file" |
| 118 | style="display:none" | 118 | style="display:none" |
| 119 | ref="image" | 119 | ref="image" |
| 120 | accept="image/*" | 120 | accept="image/*" |
| 121 | @change="onFilePicked" | 121 | @change="onFilePicked" |
| 122 | /> | 122 | /> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | </v-layout> | 124 | </v-layout> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | <v-flex xs12> | 126 | <v-flex xs12> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs4 class="pt-4 subheading"> | 128 | <v-flex xs4 class="pt-4 subheading"> |
| 129 | <label class="right">Note:</label> | 129 | <label class="right">Note:</label> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | <v-flex xs7 class="ml-3"> | 131 | <v-flex xs7 class="ml-3"> |
| 132 | <v-textarea | 132 | <v-textarea |
| 133 | name="input-7-1" | 133 | name="input-7-1" |
| 134 | v-model="editedItem.note" | 134 | v-model="editedItem.note" |
| 135 | placeholder="fill your Note" | 135 | placeholder="fill your Note" |
| 136 | type="text" | 136 | type="text" |
| 137 | :rules="noteRules" | 137 | :rules="noteRules" |
| 138 | multi-line | 138 | multi-line |
| 139 | required | 139 | required |
| 140 | ></v-textarea> | 140 | ></v-textarea> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | </v-layout> | 144 | </v-layout> |
| 145 | <v-layout> | 145 | <v-layout> |
| 146 | <v-flex xs12 sm12> | 146 | <v-flex xs12 sm12> |
| 147 | <v-card-actions> | 147 | <v-card-actions> |
| 148 | <v-spacer></v-spacer> | 148 | <v-spacer></v-spacer> |
| 149 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 149 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 150 | </v-card-actions> | 150 | </v-card-actions> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-card-text> | 153 | </v-card-text> |
| 154 | </v-card> | 154 | </v-card> |
| 155 | </v-dialog> | 155 | </v-dialog> |
| 156 | 156 | ||
| 157 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> | 157 | <!-- ****** PROFILE VIEW EXPENSE DETAILS ****** --> |
| 158 | 158 | ||
| 159 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable> | 159 | <v-dialog v-model="viewExpenseDialog" max-width="600px" scrollable persistent> |
| 160 | <v-card flat class="card-style pa-3" dark> | 160 | <v-card flat class="card-style pa-3" dark> |
| 161 | <v-layout> | 161 | <v-layout> |
| 162 | <v-flex xs12> | 162 | <v-flex xs12> |
| 163 | <label class="title text-xs-center">View Expense</label> | 163 | <label class="title text-xs-center">View Expense</label> |
| 164 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> | 164 | <v-icon size="24" class="right" @click="viewExpenseDialog = false">cancel</v-icon> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | <v-card-text> | 167 | <v-card-text> |
| 168 | <v-container grid-list-md> | 168 | <v-container grid-list-md> |
| 169 | <v-layout wrap> | 169 | <v-layout wrap> |
| 170 | <v-flex> | 170 | <v-flex> |
| 171 | <v-flex align-center justify-center layout text-xs-center> | 171 | <v-flex align-center justify-center layout text-xs-center> |
| 172 | <v-avatar size="160px"> | 172 | <v-avatar size="160px"> |
| 173 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> | 173 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" /> |
| 174 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> | 174 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" /> |
| 175 | </v-avatar> | 175 | </v-avatar> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | <v-layout> | 177 | <v-layout> |
| 178 | <v-flex xs5 sm6> | 178 | <v-flex xs5 sm6> |
| 179 | <h5 class="right my-1"> | 179 | <h5 class="right my-1"> |
| 180 | <b>Name:</b> | 180 | <b>Name:</b> |
| 181 | </h5> | 181 | </h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | <v-flex sm6 xs8> | 183 | <v-flex sm6 xs8> |
| 184 | <h5 class="my-1">{{ editedItem.name }}</h5> | 184 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs5 sm6> | 188 | <v-flex xs5 sm6> |
| 189 | <h5 class="right my-1"> | 189 | <h5 class="right my-1"> |
| 190 | <b>Amount:</b> | 190 | <b>Amount:</b> |
| 191 | </h5> | 191 | </h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex sm6 xs8> | 193 | <v-flex sm6 xs8> |
| 194 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 194 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 195 | </v-flex> | 195 | </v-flex> |
| 196 | </v-layout> | 196 | </v-layout> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-flex xs5 sm6> | 198 | <v-flex xs5 sm6> |
| 199 | <h5 class="right my-1"> | 199 | <h5 class="right my-1"> |
| 200 | <b>Date:</b> | 200 | <b>Date:</b> |
| 201 | </h5> | 201 | </h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | <v-flex sm6 xs8> | 203 | <v-flex sm6 xs8> |
| 204 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 204 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <v-flex xs5 sm6> | 208 | <v-flex xs5 sm6> |
| 209 | <h5 class="right my-1"> | 209 | <h5 class="right my-1"> |
| 210 | <b>Note:</b> | 210 | <b>Note:</b> |
| 211 | </h5> | 211 | </h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | <v-flex sm6 xs8> | 213 | <v-flex sm6 xs8> |
| 214 | <h5 class="my-1">{{ editedItem.note }}</h5> | 214 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 217 | </v-flex> | 217 | </v-flex> |
| 218 | </v-layout> | 218 | </v-layout> |
| 219 | </v-container> | 219 | </v-container> |
| 220 | </v-card-text> | 220 | </v-card-text> |
| 221 | </v-card> | 221 | </v-card> |
| 222 | </v-dialog> | 222 | </v-dialog> |
| 223 | <!-- ****** EXPENSE TABLE ****** --> | 223 | <!-- ****** EXPENSE TABLE ****** --> |
| 224 | <v-toolbar color="transparent" flat> | 224 | <v-toolbar color="transparent" flat> |
| 225 | <v-btn | 225 | <v-btn |
| 226 | fab | 226 | fab |
| 227 | dark | 227 | dark |
| 228 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 228 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 229 | small | 229 | small |
| 230 | @click="addExpenseDialog = true" | 230 | @click="addExpenseDialog = true" |
| 231 | > | 231 | > |
| 232 | <v-icon dark>add</v-icon> | 232 | <v-icon dark>add</v-icon> |
| 233 | </v-btn> | 233 | </v-btn> |
| 234 | <v-btn | 234 | <v-btn |
| 235 | round | 235 | round |
| 236 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 236 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 237 | dark | 237 | dark |
| 238 | @click="addExpenseDialog = true" | 238 | @click="addExpenseDialog = true" |
| 239 | > | 239 | > |
| 240 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense | 240 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Expense |
| 241 | </v-btn> | 241 | </v-btn> |
| 242 | <v-spacer></v-spacer> | 242 | <v-spacer></v-spacer> |
| 243 | <v-card-title class="body-1" v-show="show"> | 243 | <v-card-title class="body-1" v-show="show"> |
| 244 | <v-btn icon large flat @click="displaySearch"> | 244 | <v-btn icon large flat @click="displaySearch"> |
| 245 | <v-avatar size="27"> | 245 | <v-avatar size="27"> |
| 246 | <img src="/static/icon/search.png" alt="icon" /> | 246 | <img src="/static/icon/search.png" alt="icon" /> |
| 247 | </v-avatar> | 247 | </v-avatar> |
| 248 | </v-btn> | 248 | </v-btn> |
| 249 | </v-card-title> | 249 | </v-card-title> |
| 250 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 250 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-text-field | 252 | <v-text-field |
| 253 | autofocus | 253 | autofocus |
| 254 | v-model="search" | 254 | v-model="search" |
| 255 | label="Search" | 255 | label="Search" |
| 256 | prepend-inner-icon="search" | 256 | prepend-inner-icon="search" |
| 257 | color="primary" | 257 | color="primary" |
| 258 | ></v-text-field> | 258 | ></v-text-field> |
| 259 | <v-icon @click="closeSearch" color="error">close</v-icon> | 259 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | </v-toolbar> | 262 | </v-toolbar> |
| 263 | <v-data-table | 263 | <v-data-table |
| 264 | :headers="headers" | 264 | :headers="headers" |
| 265 | :items="expenseList" | 265 | :items="expenseList" |
| 266 | :pagination.sync="pagination" | 266 | :pagination.sync="pagination" |
| 267 | :search="search" | 267 | :search="search" |
| 268 | > | 268 | > |
| 269 | <template slot="items" slot-scope="props"> | 269 | <template slot="items" slot-scope="props"> |
| 270 | <tr class="tr"> | 270 | <tr class="tr"> |
| 271 | <td class="td td-row">{{ props.index + 1}}</td> | 271 | <td class="td td-row">{{ props.index + 1}}</td> |
| 272 | <td class="text-xs-center td td-row"> | 272 | <td class="text-xs-center td td-row"> |
| 273 | <v-avatar> | 273 | <v-avatar> |
| 274 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 274 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 275 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 275 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 276 | </v-avatar> | 276 | </v-avatar> |
| 277 | </td> | 277 | </td> |
| 278 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 278 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 279 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 279 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 280 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 280 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 281 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 281 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 282 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 282 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 283 | <td class="text-xs-center td td-row"> | 283 | <td class="text-xs-center td td-row"> |
| 284 | <span> | 284 | <span> |
| 285 | <v-tooltip top> | 285 | <v-tooltip top> |
| 286 | <img | 286 | <img |
| 287 | slot="activator" | 287 | slot="activator" |
| 288 | style="cursor:pointer; width:25px; height:25px; " | 288 | style="cursor:pointer; width:25px; height:25px; " |
| 289 | class="mr-3" | 289 | class="mr-3" |
| 290 | @click="profile(props.item)" | 290 | @click="profile(props.item)" |
| 291 | src="/static/icon/view.png" | 291 | src="/static/icon/view.png" |
| 292 | /> | 292 | /> |
| 293 | <span>View</span> | 293 | <span>View</span> |
| 294 | </v-tooltip> | 294 | </v-tooltip> |
| 295 | <v-tooltip top> | 295 | <v-tooltip top> |
| 296 | <img | 296 | <img |
| 297 | slot="activator" | 297 | slot="activator" |
| 298 | style="cursor:pointer; width:20px; height:18px; " | 298 | style="cursor:pointer; width:20px; height:18px; " |
| 299 | class="mr-3" | 299 | class="mr-3" |
| 300 | @click="editItem(props.item)" | 300 | @click="editItem(props.item)" |
| 301 | src="/static/icon/edit.png" | 301 | src="/static/icon/edit.png" |
| 302 | /> | 302 | /> |
| 303 | <span>Edit</span> | 303 | <span>Edit</span> |
| 304 | </v-tooltip> | 304 | </v-tooltip> |
| 305 | <v-tooltip top> | 305 | <v-tooltip top> |
| 306 | <img | 306 | <img |
| 307 | slot="activator" | 307 | slot="activator" |
| 308 | style="cursor:pointer; width:20px; height:20px; " | 308 | style="cursor:pointer; width:20px; height:20px; " |
| 309 | @click="deleteItem(props.item)" | 309 | @click="deleteItem(props.item)" |
| 310 | src="/static/icon/delete.png" | 310 | src="/static/icon/delete.png" |
| 311 | /> | 311 | /> |
| 312 | <span>Delete</span> | 312 | <span>Delete</span> |
| 313 | </v-tooltip> | 313 | </v-tooltip> |
| 314 | </span> | 314 | </span> |
| 315 | </td> | 315 | </td> |
| 316 | </tr> | 316 | </tr> |
| 317 | </template> | 317 | </template> |
| 318 | <v-alert | 318 | <v-alert |
| 319 | slot="no-results" | 319 | slot="no-results" |
| 320 | :value="true" | 320 | :value="true" |
| 321 | color="error" | 321 | color="error" |
| 322 | icon="warning" | 322 | icon="warning" |
| 323 | >Your search for "{{ search }}" found no results.</v-alert> | 323 | >Your search for "{{ search }}" found no results.</v-alert> |
| 324 | </v-data-table> | 324 | </v-data-table> |
| 325 | 325 | ||
| 326 | <!-- ****** Add Expense Data ****** --> | 326 | <!-- ****** Add Expense Data ****** --> |
| 327 | <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog"> | 327 | <v-dialog v-model="addExpenseDialog" max-width="600px" v-if="addExpenseDialog" persistent> |
| 328 | <v-card flat class="card-style pa-2" dark> | 328 | <v-card flat class="card-style pa-2" dark> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <label class="title text-xs-center">Add Expense</label> | 331 | <label class="title text-xs-center">Add Expense</label> |
| 332 | <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> | 332 | <v-icon size="24" class="right" @click="closeAddExpenseModel">cancel</v-icon> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | </v-layout> | 334 | </v-layout> |
| 335 | <v-flex xs12 sm12> | 335 | <v-flex xs12 sm12> |
| 336 | <v-form ref="form" v-model="valid" lazy-validation> | 336 | <v-form ref="form" v-model="valid" lazy-validation> |
| 337 | <v-container fluid> | 337 | <v-container fluid> |
| 338 | <v-layout> | 338 | <v-layout> |
| 339 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 339 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 340 | <v-avatar size="80px"> | 340 | <v-avatar size="80px"> |
| 341 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 341 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 342 | </v-avatar> | 342 | </v-avatar> |
| 343 | <img | 343 | <img |
| 344 | :src="imageUrl" | 344 | :src="imageUrl" |
| 345 | height="150" | 345 | height="150" |
| 346 | v-if="imageUrl" | 346 | v-if="imageUrl" |
| 347 | style="border-radius:50%; width:150px" | 347 | style="border-radius:50%; width:150px" |
| 348 | /> | 348 | /> |
| 349 | </v-flex> | 349 | </v-flex> |
| 350 | </v-layout> | 350 | </v-layout> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs12 sm12> | 352 | <v-flex xs12 sm12> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs4 class="pt-4 subheading"> | 354 | <v-flex xs4 class="pt-4 subheading"> |
| 355 | <label class="right">Name:</label> | 355 | <label class="right">Name:</label> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | <v-flex xs8 sm6 class="ml-3"> | 357 | <v-flex xs8 sm6 class="ml-3"> |
| 358 | <v-text-field | 358 | <v-text-field |
| 359 | v-model="addExpense.name" | 359 | v-model="addExpense.name" |
| 360 | placeholder="fill your full Name" | 360 | placeholder="fill your full Name" |
| 361 | name="name" | 361 | name="name" |
| 362 | type="text" | 362 | type="text" |
| 363 | :rules="nameRules" | 363 | :rules="nameRules" |
| 364 | required | 364 | required |
| 365 | ></v-text-field> | 365 | ></v-text-field> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex xs12 sm12> | 371 | <v-flex xs12 sm12> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs4 class="pt-4 subheading"> | 373 | <v-flex xs4 class="pt-4 subheading"> |
| 374 | <label class="right">Amount:</label> | 374 | <label class="right">Amount:</label> |
| 375 | </v-flex> | 375 | </v-flex> |
| 376 | <v-flex xs8 sm6 class="ml-3"> | 376 | <v-flex xs8 sm6 class="ml-3"> |
| 377 | <v-text-field | 377 | <v-text-field |
| 378 | v-model="addExpense.amount" | 378 | v-model="addExpense.amount" |
| 379 | placeholder="fill your Amount" | 379 | placeholder="fill your Amount" |
| 380 | name="name" | 380 | name="name" |
| 381 | type="text" | 381 | type="text" |
| 382 | :rules="amountRules" | 382 | :rules="amountRules" |
| 383 | required | 383 | required |
| 384 | ></v-text-field> | 384 | ></v-text-field> |
| 385 | </v-flex> | 385 | </v-flex> |
| 386 | </v-layout> | 386 | </v-layout> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | <v-layout> | 389 | <v-layout> |
| 390 | <v-flex xs12 sm12> | 390 | <v-flex xs12 sm12> |
| 391 | <v-layout> | 391 | <v-layout> |
| 392 | <v-flex xs4 class="pt-4 subheading"> | 392 | <v-flex xs4 class="pt-4 subheading"> |
| 393 | <label class="right">Date</label> | 393 | <label class="right">Date</label> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | <v-flex xs8 sm6 class="ml-3"> | 395 | <v-flex xs8 sm6 class="ml-3"> |
| 396 | <v-menu | 396 | <v-menu |
| 397 | ref="menu1" | 397 | ref="menu1" |
| 398 | :close-on-content-click="false" | 398 | :close-on-content-click="false" |
| 399 | v-model="menu1" | 399 | v-model="menu1" |
| 400 | :nudge-right="40" | 400 | :nudge-right="40" |
| 401 | lazy | 401 | lazy |
| 402 | transition="scale-transition" | 402 | transition="scale-transition" |
| 403 | offset-y | 403 | offset-y |
| 404 | full-width | 404 | full-width |
| 405 | min-width="290px" | 405 | min-width="290px" |
| 406 | > | 406 | > |
| 407 | <v-text-field | 407 | <v-text-field |
| 408 | slot="activator" | 408 | slot="activator" |
| 409 | :rules="joinDateRules" | 409 | :rules="joinDateRules" |
| 410 | v-model="addExpense.date" | 410 | v-model="addExpense.date" |
| 411 | placeholder="Select date" | 411 | placeholder="Select date" |
| 412 | ></v-text-field> | 412 | ></v-text-field> |
| 413 | <v-date-picker | 413 | <v-date-picker |
| 414 | ref="picker" | 414 | ref="picker" |
| 415 | v-model="addExpense.date" | 415 | v-model="addExpense.date" |
| 416 | @input="$refs.menu1.save(addExpense.date)" | 416 | @input="$refs.menu1.save(addExpense.date)" |
| 417 | ></v-date-picker> | 417 | ></v-date-picker> |
| 418 | </v-menu> | 418 | </v-menu> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | </v-layout> | 420 | </v-layout> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs12 sm12> | 424 | <v-flex xs12 sm12> |
| 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">File:</label> | 427 | <label class="right">File:</label> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex xs8 sm6 class="ml-3"> | 429 | <v-flex xs8 sm6 class="ml-3"> |
| 430 | <v-text-field | 430 | <v-text-field |
| 431 | label="Select file" | 431 | label="Select file" |
| 432 | @click="pickFile" | 432 | @click="pickFile" |
| 433 | v-model="imageName" | 433 | v-model="imageName" |
| 434 | append-icon="attach_file" | 434 | append-icon="attach_file" |
| 435 | ></v-text-field> | 435 | ></v-text-field> |
| 436 | <input | 436 | <input |
| 437 | type="file" | 437 | type="file" |
| 438 | style="display:none" | 438 | style="display:none" |
| 439 | ref="image" | 439 | ref="image" |
| 440 | accept="image/*" | 440 | accept="image/*" |
| 441 | @change="onFilePicked" | 441 | @change="onFilePicked" |
| 442 | /> | 442 | /> |
| 443 | </v-flex> | 443 | </v-flex> |
| 444 | </v-layout> | 444 | </v-layout> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | </v-layout> | 446 | </v-layout> |
| 447 | <v-layout> | 447 | <v-layout> |
| 448 | <v-flex xs12 sm12> | 448 | <v-flex xs12 sm12> |
| 449 | <v-layout> | 449 | <v-layout> |
| 450 | <v-flex xs4 class="pt-4 subheading"> | 450 | <v-flex xs4 class="pt-4 subheading"> |
| 451 | <label class="right">Note:</label> | 451 | <label class="right">Note:</label> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-flex xs8 sm6 class="ml-3"> | 453 | <v-flex xs8 sm6 class="ml-3"> |
| 454 | <v-textarea | 454 | <v-textarea |
| 455 | name="input-7-1" | 455 | name="input-7-1" |
| 456 | v-model="addExpense.note" | 456 | v-model="addExpense.note" |
| 457 | placeholder="fill your Note" | 457 | placeholder="fill your Note" |
| 458 | type="text" | 458 | type="text" |
| 459 | multi-line | 459 | multi-line |
| 460 | required | 460 | required |
| 461 | ></v-textarea> | 461 | ></v-textarea> |
| 462 | </v-flex> | 462 | </v-flex> |
| 463 | </v-layout> | 463 | </v-layout> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | </v-layout> | 465 | </v-layout> |
| 466 | <v-layout> | 466 | <v-layout> |
| 467 | <v-flex xs11> | 467 | <v-flex xs11> |
| 468 | <v-layout> | 468 | <v-layout> |
| 469 | <v-spacer></v-spacer> | 469 | <v-spacer></v-spacer> |
| 470 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 470 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 471 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 471 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 472 | </v-layout> | 472 | </v-layout> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | </v-container> | 475 | </v-container> |
| 476 | </v-form> | 476 | </v-form> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | </v-card> | 478 | </v-card> |
| 479 | </v-dialog> | 479 | </v-dialog> |
| 480 | <div class="loader" v-if="showLoader"> | 480 | <div class="loader" v-if="showLoader"> |
| 481 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 481 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 482 | </div> | 482 | </div> |
| 483 | <v-snackbar | 483 | <v-snackbar |
| 484 | :timeout="timeout" | 484 | :timeout="timeout" |
| 485 | :top="y === 'top'" | 485 | :top="y === 'top'" |
| 486 | :right="x === 'right'" | 486 | :right="x === 'right'" |
| 487 | :vertical="mode === 'vertical'" | 487 | :vertical="mode === 'vertical'" |
| 488 | v-model="snackbar" | 488 | v-model="snackbar" |
| 489 | :color="color" | 489 | :color="color" |
| 490 | >{{ text }}</v-snackbar> | 490 | >{{ text }}</v-snackbar> |
| 491 | </v-container> | 491 | </v-container> |
| 492 | </template> | 492 | </template> |
| 493 | 493 | ||
| 494 | <script> | 494 | <script> |
| 495 | import http from "@/Services/http.js"; | 495 | import http from "@/Services/http.js"; |
| 496 | import moment from "moment"; | 496 | import moment from "moment"; |
| 497 | 497 | ||
| 498 | export default { | 498 | export default { |
| 499 | data: () => ({ | 499 | data: () => ({ |
| 500 | component: "report-generate", | 500 | component: "report-generate", |
| 501 | snackbar: false, | 501 | snackbar: false, |
| 502 | y: "top", | 502 | y: "top", |
| 503 | x: "right", | 503 | x: "right", |
| 504 | mode: "", | 504 | mode: "", |
| 505 | timeout: 5000, | 505 | timeout: 5000, |
| 506 | text: "", | 506 | text: "", |
| 507 | color: "", | 507 | color: "", |
| 508 | showLoader: false, | 508 | showLoader: false, |
| 509 | loading: false, | 509 | loading: false, |
| 510 | date: null, | 510 | date: null, |
| 511 | search: "", | 511 | search: "", |
| 512 | menu: false, | 512 | menu: false, |
| 513 | menu1: false, | 513 | menu1: false, |
| 514 | menu2: false, | 514 | menu2: false, |
| 515 | menu3: false, | 515 | menu3: false, |
| 516 | editExpenseDialog: false, | 516 | editExpenseDialog: false, |
| 517 | viewExpenseDialog: false, | 517 | viewExpenseDialog: false, |
| 518 | valid: true, | 518 | valid: true, |
| 519 | show: true, | 519 | show: true, |
| 520 | addExpenseDialog: false, | 520 | addExpenseDialog: false, |
| 521 | showSearch: false, | 521 | showSearch: false, |
| 522 | pagination: { | 522 | pagination: { |
| 523 | rowsPerPage: 10, | 523 | rowsPerPage: 10, |
| 524 | }, | 524 | }, |
| 525 | imageData: {}, | 525 | imageData: {}, |
| 526 | token: "", | 526 | token: "", |
| 527 | imageName: "", | 527 | imageName: "", |
| 528 | imageUrl: "", | 528 | imageUrl: "", |
| 529 | imageFile: "", | 529 | imageFile: "", |
| 530 | nameRules: [(v) => !!v || " Full Name is required"], | 530 | nameRules: [(v) => !!v || " Full Name is required"], |
| 531 | amountRules: [(v) => !!v || "Amount is required"], | 531 | amountRules: [(v) => !!v || "Amount is required"], |
| 532 | noteRules: [(v) => !!v || "Note Name is required"], | 532 | noteRules: [(v) => !!v || "Note Name is required"], |
| 533 | joinDateRules: [(v) => !!v || "Date is required"], | 533 | joinDateRules: [(v) => !!v || "Date is required"], |
| 534 | errorMessages: "", | 534 | errorMessages: "", |
| 535 | headers: [ | 535 | headers: [ |
| 536 | { | 536 | { |
| 537 | text: "No", | 537 | text: "No", |
| 538 | align: "center", | 538 | align: "center", |
| 539 | sortable: false, | 539 | sortable: false, |
| 540 | value: "No", | 540 | value: "No", |
| 541 | }, | 541 | }, |
| 542 | { | 542 | { |
| 543 | text: "Profile Pic", | 543 | text: "Profile Pic", |
| 544 | value: "profilePicUrl", | 544 | value: "profilePicUrl", |
| 545 | sortable: false, | 545 | sortable: false, |
| 546 | align: "center", | 546 | align: "center", |
| 547 | }, | 547 | }, |
| 548 | { text: "Name", value: "name", sortable: false, align: "center" }, | 548 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 549 | { text: "Date", value: "date", sortable: false, align: "center" }, | 549 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 550 | { text: "User", value: "user", sortable: false, align: "center" }, | 550 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 551 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 551 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 552 | { text: "Note", value: "note", sortable: false, align: "center" }, | 552 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 553 | { text: "Action", value: "", sortable: false, align: "center" }, | 553 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 554 | ], | 554 | ], |
| 555 | expenseList: [], | 555 | expenseList: [], |
| 556 | editedIndex: -1, | 556 | editedIndex: -1, |
| 557 | upload: "", | 557 | upload: "", |
| 558 | editedItem: { | 558 | editedItem: { |
| 559 | role: "TEACHER", | 559 | role: "TEACHER", |
| 560 | name: "", | 560 | name: "", |
| 561 | email: "", | 561 | email: "", |
| 562 | date: null, | 562 | date: null, |
| 563 | city: "", | 563 | city: "", |
| 564 | pincode: "", | 564 | pincode: "", |
| 565 | country: "", | 565 | country: "", |
| 566 | permanentAddress: "", | 566 | permanentAddress: "", |
| 567 | presentAddress: "", | 567 | presentAddress: "", |
| 568 | mobileNo: "", | 568 | mobileNo: "", |
| 569 | state: "", | 569 | state: "", |
| 570 | joinDate: null, | 570 | joinDate: null, |
| 571 | }, | 571 | }, |
| 572 | addExpense: {}, | 572 | addExpense: {}, |
| 573 | }), | 573 | }), |
| 574 | watch: { | 574 | watch: { |
| 575 | menu(val) { | 575 | menu(val) { |
| 576 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 576 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 577 | }, | 577 | }, |
| 578 | menu1(val) { | 578 | menu1(val) { |
| 579 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 579 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 580 | }, | 580 | }, |
| 581 | addExpenseDialog: function (val) { | 581 | addExpenseDialog: function (val) { |
| 582 | if (!val) { | 582 | if (!val) { |
| 583 | this.addExpense = []; | 583 | this.addExpense = []; |
| 584 | this.menu1 = false; | 584 | this.menu1 = false; |
| 585 | this.imageName = ""; | 585 | this.imageName = ""; |
| 586 | this.imageFile = ""; | 586 | this.imageFile = ""; |
| 587 | this.imageUrl = ""; | 587 | this.imageUrl = ""; |
| 588 | } | 588 | } |
| 589 | }, | 589 | }, |
| 590 | }, | 590 | }, |
| 591 | methods: { | 591 | methods: { |
| 592 | save(date) { | 592 | save(date) { |
| 593 | this.$refs.menu.save(date); | 593 | this.$refs.menu.save(date); |
| 594 | }, | 594 | }, |
| 595 | save(date) { | 595 | save(date) { |
| 596 | this.$refs.menu1.save(date); | 596 | this.$refs.menu1.save(date); |
| 597 | }, | 597 | }, |
| 598 | pickFile() { | 598 | pickFile() { |
| 599 | this.$refs.image.click(); | 599 | this.$refs.image.click(); |
| 600 | }, | 600 | }, |
| 601 | dates: function (date) { | 601 | dates: function (date) { |
| 602 | return moment(date).format("MMMM DD, YYYY"); | 602 | return moment(date).format("MMMM DD, YYYY"); |
| 603 | }, | 603 | }, |
| 604 | onFilePicked(e) { | 604 | onFilePicked(e) { |
| 605 | // console.log(e) | 605 | // console.log(e) |
| 606 | const files = e.target.files; | 606 | const files = e.target.files; |
| 607 | this.upload = e.target.files[0]; | 607 | this.upload = e.target.files[0]; |
| 608 | console.log("imageData-upload========>", this.upload); | 608 | console.log("imageData-upload========>", this.upload); |
| 609 | if (files[0] !== undefined) { | 609 | if (files[0] !== undefined) { |
| 610 | this.imageName = files[0].name; | 610 | this.imageName = files[0].name; |
| 611 | if (this.imageName.lastIndexOf(".") <= 0) { | 611 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 612 | return; | 612 | return; |
| 613 | } | 613 | } |
| 614 | const fr = new FileReader(); | 614 | const fr = new FileReader(); |
| 615 | fr.readAsDataURL(files[0]); | 615 | fr.readAsDataURL(files[0]); |
| 616 | fr.addEventListener("load", () => { | 616 | fr.addEventListener("load", () => { |
| 617 | this.imageUrl = fr.result; | 617 | this.imageUrl = fr.result; |
| 618 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 618 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 619 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 619 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 620 | // console.log("upload=======>", this.imageData.imageUrl); | 620 | // console.log("upload=======>", this.imageData.imageUrl); |
| 621 | console.log("imageFile", this.imageUrl); | 621 | console.log("imageFile", this.imageUrl); |
| 622 | }); | 622 | }); |
| 623 | } else { | 623 | } else { |
| 624 | this.imageName = ""; | 624 | this.imageName = ""; |
| 625 | this.imageFile = ""; | 625 | this.imageFile = ""; |
| 626 | this.imageUrl = ""; | 626 | this.imageUrl = ""; |
| 627 | } | 627 | } |
| 628 | }, | 628 | }, |
| 629 | getExpenseList() { | 629 | getExpenseList() { |
| 630 | http() | 630 | http() |
| 631 | .get("/getExpensesList", { | 631 | .get("/getExpensesList", { |
| 632 | params: { schoolId: this.$store.state.schoolId }, | 632 | params: { schoolId: this.$store.state.schoolId }, |
| 633 | headers: { Authorization: "Bearer " + this.token }, | 633 | headers: { Authorization: "Bearer " + this.token }, |
| 634 | }) | 634 | }) |
| 635 | .then((response) => { | 635 | .then((response) => { |
| 636 | this.expenseList = response.data.data; | 636 | this.expenseList = response.data.data; |
| 637 | this.showLoader = false; | 637 | this.showLoader = false; |
| 638 | // console.log("getTeacherList=====>",this.expenseList) | 638 | // console.log("getTeacherList=====>",this.expenseList) |
| 639 | }) | 639 | }) |
| 640 | .catch((error) => { | 640 | .catch((error) => { |
| 641 | this.showLoader = false; | 641 | this.showLoader = false; |
| 642 | // if (error.response.status === 401) { | 642 | // if (error.response.status === 401) { |
| 643 | // this.$router.replace({ path: "/" }); | 643 | // this.$router.replace({ path: "/" }); |
| 644 | // this.$store.dispatch("setToken", null); | 644 | // this.$store.dispatch("setToken", null); |
| 645 | // this.$store.dispatch("Id", null); | 645 | // this.$store.dispatch("Id", null); |
| 646 | // } | 646 | // } |
| 647 | }); | 647 | }); |
| 648 | }, | 648 | }, |
| 649 | editItem(item) { | 649 | editItem(item) { |
| 650 | this.editedIndex = this.expenseList.indexOf(item); | 650 | this.editedIndex = this.expenseList.indexOf(item); |
| 651 | this.editedItem = Object.assign({}, item); | 651 | this.editedItem = Object.assign({}, item); |
| 652 | this.editedItem.date = | 652 | this.editedItem.date = |
| 653 | this.editedItem.date != undefined | 653 | this.editedItem.date != undefined |
| 654 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 654 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 655 | : (this.editedItem.date = ""); | 655 | : (this.editedItem.date = ""); |
| 656 | 656 | ||
| 657 | this.editExpenseDialog = true; | 657 | this.editExpenseDialog = true; |
| 658 | }, | 658 | }, |
| 659 | profile(item) { | 659 | profile(item) { |
| 660 | this.editedIndex = this.expenseList.indexOf(item); | 660 | this.editedIndex = this.expenseList.indexOf(item); |
| 661 | this.editedItem = Object.assign({}, item); | 661 | this.editedItem = Object.assign({}, item); |
| 662 | this.viewExpenseDialog = true; | 662 | this.viewExpenseDialog = true; |
| 663 | }, | 663 | }, |
| 664 | deleteItem(item) { | 664 | deleteItem(item) { |
| 665 | let deleteExpense = { | 665 | let deleteExpense = { |
| 666 | expenseId: item._id, | 666 | expenseId: item._id, |
| 667 | }; | 667 | }; |
| 668 | // console.log("deleteUers",deleteTeachers) | 668 | // console.log("deleteUers",deleteTeachers) |
| 669 | http() | 669 | http() |
| 670 | .delete( | 670 | .delete( |
| 671 | "/deleteExpense", | 671 | "/deleteExpense", |
| 672 | confirm("Are you sure you want to delete this?") && { | 672 | confirm("Are you sure you want to delete this?") && { |
| 673 | params: deleteExpense, | 673 | params: deleteExpense, |
| 674 | } | 674 | } |
| 675 | ) | 675 | ) |
| 676 | .then((response) => { | 676 | .then((response) => { |
| 677 | // console.log("deleteUers",deleteTeachers) | 677 | // console.log("deleteUers",deleteTeachers) |
| 678 | this.snackbar = true; | 678 | this.snackbar = true; |
| 679 | this.text = response.data.message; | 679 | this.text = response.data.message; |
| 680 | this.color = "green"; | 680 | this.color = "green"; |
| 681 | this.getExpenseList(); | 681 | this.getExpenseList(); |
| 682 | }) | 682 | }) |
| 683 | .catch((error) => { | 683 | .catch((error) => { |
| 684 | this.snackbar = true; | 684 | this.snackbar = true; |
| 685 | this.text = error.response.data.message; | 685 | this.text = error.response.data.message; |
| 686 | this.color = "error"; | 686 | this.color = "error"; |
| 687 | }); | 687 | }); |
| 688 | }, | 688 | }, |
| 689 | close() { | 689 | close() { |
| 690 | this.editExpenseDialog = false; | 690 | this.editExpenseDialog = false; |
| 691 | }, | 691 | }, |
| 692 | closeAddExpenseModel() { | 692 | closeAddExpenseModel() { |
| 693 | this.addExpenseDialog = false; | 693 | this.addExpenseDialog = false; |
| 694 | this.addExpense = []; | 694 | this.addExpense = []; |
| 695 | this.menu1 = false; | 695 | this.menu1 = false; |
| 696 | this.imageName = ""; | 696 | this.imageName = ""; |
| 697 | this.imageFile = ""; | 697 | this.imageFile = ""; |
| 698 | this.imageUrl = ""; | 698 | this.imageUrl = ""; |
| 699 | }, | 699 | }, |
| 700 | submit() { | 700 | submit() { |
| 701 | if (this.$refs.form.validate()) { | 701 | if (this.$refs.form.validate()) { |
| 702 | if (this.imageUrl) { | 702 | if (this.imageUrl) { |
| 703 | var str = this.imageUrl; | 703 | var str = this.imageUrl; |
| 704 | const [baseUrl, imageUrl] = str.split(/,/); | 704 | const [baseUrl, imageUrl] = str.split(/,/); |
| 705 | this.addExpense.upload = imageUrl; | 705 | this.addExpense.upload = imageUrl; |
| 706 | } | 706 | } |
| 707 | this.loading = true; | 707 | this.loading = true; |
| 708 | // this.addExpense = this.$store.state.schoolId; | 708 | // this.addExpense = this.$store.state.schoolId; |
| 709 | http() | 709 | http() |
| 710 | .post("/createExpense", this.addExpense) | 710 | .post("/createExpense", this.addExpense) |
| 711 | .then((response) => { | 711 | .then((response) => { |
| 712 | this.getExpenseList(); | 712 | this.getExpenseList(); |
| 713 | this.snackbar = true; | 713 | this.snackbar = true; |
| 714 | this.text = response.data.message; | 714 | this.text = response.data.message; |
| 715 | this.color = "green"; | 715 | this.color = "green"; |
| 716 | this.clear(); | 716 | this.clear(); |
| 717 | this.imageUrl = ""; | 717 | this.imageUrl = ""; |
| 718 | this.loading = false; | 718 | this.loading = false; |
| 719 | this.addExpenseDialog = false; | 719 | this.addExpenseDialog = false; |
| 720 | }) | 720 | }) |
| 721 | .catch((error) => { | 721 | .catch((error) => { |
| 722 | // console.log(error); | 722 | // console.log(error); |
| 723 | this.snackbar = true; | 723 | this.snackbar = true; |
| 724 | this.color = "error"; | 724 | this.color = "error"; |
| 725 | this.text = error.response.data.message; | 725 | this.text = error.response.data.message; |
| 726 | this.loading = false; | 726 | this.loading = false; |
| 727 | }); | 727 | }); |
| 728 | } | 728 | } |
| 729 | }, | 729 | }, |
| 730 | clear() { | 730 | clear() { |
| 731 | this.$refs.form.reset(); | 731 | this.$refs.form.reset(); |
| 732 | }, | 732 | }, |
| 733 | save() { | 733 | save() { |
| 734 | this.loading = true; | 734 | this.loading = true; |
| 735 | this.editedItem.expenseId = this.editedItem._id; | 735 | this.editedItem.expenseId = this.editedItem._id; |
| 736 | if (this.imageUrl) { | 736 | if (this.imageUrl) { |
| 737 | var str = this.imageUrl; | 737 | var str = this.imageUrl; |
| 738 | const [baseUrl, imageUrl] = str.split(/,/); | 738 | const [baseUrl, imageUrl] = str.split(/,/); |
| 739 | this.editedItem.upload = imageUrl; | 739 | this.editedItem.upload = imageUrl; |
| 740 | } | 740 | } |
| 741 | http() | 741 | http() |
| 742 | .put("/updateExpense", this.editedItem) | 742 | .put("/updateExpense", this.editedItem) |
| 743 | .then((response) => { | 743 | .then((response) => { |
| 744 | this.snackbar = true; | 744 | this.snackbar = true; |
| 745 | this.text = response.data.message; | 745 | this.text = response.data.message; |
| 746 | this.color = "green"; | 746 | this.color = "green"; |
| 747 | this.loading = false; | 747 | this.loading = false; |
| 748 | this.getExpenseList(); | 748 | this.getExpenseList(); |
| 749 | this.close(); | 749 | this.close(); |
| 750 | }) | 750 | }) |
| 751 | .catch((error) => { | 751 | .catch((error) => { |
| 752 | this.snackbar = true; | 752 | this.snackbar = true; |
| 753 | this.text = error.response.data.message; | 753 | this.text = error.response.data.message; |
| 754 | this.color = "error"; | 754 | this.color = "error"; |
| 755 | }); | 755 | }); |
| 756 | }, | 756 | }, |
| 757 | displaySearch() { | 757 | displaySearch() { |
| 758 | (this.show = false), (this.showSearch = true); | 758 | (this.show = false), (this.showSearch = true); |
| 759 | }, | 759 | }, |
| 760 | closeSearch() { | 760 | closeSearch() { |
| 761 | this.showSearch = false; | 761 | this.showSearch = false; |
| 762 | this.show = true; | 762 | this.show = true; |
| 763 | this.search = ""; | 763 | this.search = ""; |
| 764 | }, | 764 | }, |
| 765 | }, | 765 | }, |
| 766 | mounted() { | 766 | mounted() { |
| 767 | this.token = this.$store.state.token; | 767 | this.token = this.$store.state.token; |
| 768 | this.getExpenseList(); | 768 | this.getExpenseList(); |
| 769 | }, | 769 | }, |
| 770 | }; | 770 | }; |
| 771 | </script> | 771 | </script> |
src/pages/Account/feeTypes.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT SECTION ****** --> | 3 | <!-- ****** EDIT SECTION ****** --> |
| 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px"> | 4 | <v-dialog v-model="editFeeTypeDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Fee Type</label> | 8 | <label class="title text-xs-center">Edit Fee Type</label> |
| 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editFeeTypeDialog = 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 wrap justify-center> | 13 | <v-layout wrap justify-center> |
| 14 | <v-flex xs12 sm11> | 14 | <v-flex xs12 sm11> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Fee Type:</label> | 17 | <label class="right">Fee Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8> | 19 | <v-flex xs8> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | class="ml-3" | 21 | class="ml-3" |
| 22 | v-model="editedItem.feeType" | 22 | v-model="editedItem.feeType" |
| 23 | placeholder="fill your Fee Type" | 23 | placeholder="fill your Fee Type" |
| 24 | required | 24 | required |
| 25 | ></v-text-field> | 25 | ></v-text-field> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-layout> | 27 | </v-layout> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Note:</label> | 30 | <label class="right">Note:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8> | 32 | <v-flex xs8> |
| 33 | <v-textarea | 33 | <v-textarea |
| 34 | name="input-7-1" | 34 | name="input-7-1" |
| 35 | class="ml-3" | 35 | class="ml-3" |
| 36 | v-model="editedItem.note" | 36 | v-model="editedItem.note" |
| 37 | placeholder="fill your Note" | 37 | placeholder="fill your Note" |
| 38 | multi-line | 38 | multi-line |
| 39 | required | 39 | required |
| 40 | ></v-textarea> | 40 | ></v-textarea> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-layout> | 42 | </v-layout> |
| 43 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 43 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 44 | <v-spacer></v-spacer> | 44 | <v-spacer></v-spacer> |
| 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 45 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 47 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 48 | <v-spacer></v-spacer> | 48 | <v-spacer></v-spacer> |
| 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 49 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 50 | <v-spacer></v-spacer> | 50 | <v-spacer></v-spacer> |
| 51 | </v-card-actions> | 51 | </v-card-actions> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-container> | 54 | </v-container> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-dialog> | 56 | </v-dialog> |
| 57 | 57 | ||
| 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> | 58 | <!-- ****** PROFILE VIEW FEE TYPE DATA ****** --> |
| 59 | 59 | ||
| 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px"> | 60 | <v-dialog v-model="viewFeeTypeDialog" max-width="400px" persistent> |
| 61 | <v-card flat class="card-style pa-3" dark> | 61 | <v-card flat class="card-style pa-3" dark> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs12> | 63 | <v-flex xs12> |
| 64 | <label class="title text-xs-center">View Fee Type</label> | 64 | <label class="title text-xs-center">View Fee Type</label> |
| 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> | 65 | <v-icon size="24" class="right" @click="viewFeeTypeDialog = false">cancel</v-icon> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | </v-layout> | 67 | </v-layout> |
| 68 | <v-container grid-list-md> | 68 | <v-container grid-list-md> |
| 69 | <v-layout wrap> | 69 | <v-layout wrap> |
| 70 | <v-flex> | 70 | <v-flex> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs5 sm6> | 72 | <v-flex xs5 sm6> |
| 73 | <h5 class="right my-1"> | 73 | <h5 class="right my-1"> |
| 74 | <b>Fee Type:</b> | 74 | <b>Fee Type:</b> |
| 75 | </h5> | 75 | </h5> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex sm6 xs8> | 77 | <v-flex sm6 xs8> |
| 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> | 78 | <h5 class="my-1">{{ editedItem.feeType }}</h5> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | <v-layout> | 81 | <v-layout> |
| 82 | <v-flex xs5 sm6> | 82 | <v-flex xs5 sm6> |
| 83 | <h5 class="right my-1"> | 83 | <h5 class="right my-1"> |
| 84 | <b>Note:</b> | 84 | <b>Note:</b> |
| 85 | </h5> | 85 | </h5> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-flex sm6 xs8> | 87 | <v-flex sm6 xs8> |
| 88 | <h5 class="my-1">{{ editedItem.note }}</h5> | 88 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | </v-layout> | 92 | </v-layout> |
| 93 | </v-container> | 93 | </v-container> |
| 94 | </v-card> | 94 | </v-card> |
| 95 | </v-dialog> | 95 | </v-dialog> |
| 96 | 96 | ||
| 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> | 97 | <!-- ****** EXISTING-FEETYPE TABLE ****** --> |
| 98 | <v-toolbar color="transparent" flat> | 98 | <v-toolbar color="transparent" flat> |
| 99 | <v-btn | 99 | <v-btn |
| 100 | fab | 100 | fab |
| 101 | dark | 101 | dark |
| 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 102 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 103 | small | 103 | small |
| 104 | @click="addFeeTypeDialog = true" | 104 | @click="addFeeTypeDialog = true" |
| 105 | > | 105 | > |
| 106 | <v-icon dark>add</v-icon> | 106 | <v-icon dark>add</v-icon> |
| 107 | </v-btn> | 107 | </v-btn> |
| 108 | <v-btn | 108 | <v-btn |
| 109 | round | 109 | round |
| 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 110 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 111 | dark | 111 | dark |
| 112 | @click="addFeeTypeDialog = true" | 112 | @click="addFeeTypeDialog = true" |
| 113 | > | 113 | > |
| 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type | 114 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Fee Type |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | <v-spacer></v-spacer> | 116 | <v-spacer></v-spacer> |
| 117 | <v-card-title class="body-1" v-show="show"> | 117 | <v-card-title class="body-1" v-show="show"> |
| 118 | <v-btn icon large flat @click="displaySearch"> | 118 | <v-btn icon large flat @click="displaySearch"> |
| 119 | <v-avatar size="27"> | 119 | <v-avatar size="27"> |
| 120 | <img src="/static/icon/search.png" alt="icon" /> | 120 | <img src="/static/icon/search.png" alt="icon" /> |
| 121 | </v-avatar> | 121 | </v-avatar> |
| 122 | </v-btn> | 122 | </v-btn> |
| 123 | </v-card-title> | 123 | </v-card-title> |
| 124 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 124 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-text-field | 126 | <v-text-field |
| 127 | autofocus | 127 | autofocus |
| 128 | v-model="search" | 128 | v-model="search" |
| 129 | label="Search" | 129 | label="Search" |
| 130 | prepend-inner-icon="search" | 130 | prepend-inner-icon="search" |
| 131 | color="primary" | 131 | color="primary" |
| 132 | ></v-text-field> | 132 | ></v-text-field> |
| 133 | <v-icon @click="closeSearch" color="error">close</v-icon> | 133 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-toolbar> | 136 | </v-toolbar> |
| 137 | <v-data-table | 137 | <v-data-table |
| 138 | :headers="headers" | 138 | :headers="headers" |
| 139 | :items="feeTypeList" | 139 | :items="feeTypeList" |
| 140 | :pagination.sync="pagination" | 140 | :pagination.sync="pagination" |
| 141 | :search="search" | 141 | :search="search" |
| 142 | > | 142 | > |
| 143 | <template slot="items" slot-scope="props"> | 143 | <template slot="items" slot-scope="props"> |
| 144 | <tr class="tr"> | 144 | <tr class="tr"> |
| 145 | <td class="td td-row">{{ props.index + 1}}</td> | 145 | <td class="td td-row">{{ props.index + 1}}</td> |
| 146 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> | 146 | <td class="text-xs-center td td-row">{{ props.item.feeType }}</td> |
| 147 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 147 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 148 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> | 148 | <!-- <td id="td" class="text-xs-center">{{ props.item.session}}</td> --> |
| 149 | 149 | ||
| 150 | <td class="text-xs-center td td-row"> | 150 | <td class="text-xs-center td td-row"> |
| 151 | <!-- <span> --> | 151 | <!-- <span> --> |
| 152 | <v-tooltip top> | 152 | <v-tooltip top> |
| 153 | <img | 153 | <img |
| 154 | slot="activator" | 154 | slot="activator" |
| 155 | style="cursor:pointer; width:25px; height:25px; " | 155 | style="cursor:pointer; width:25px; height:25px; " |
| 156 | class="mr-3" | 156 | class="mr-3" |
| 157 | @click="profile(props.item)" | 157 | @click="profile(props.item)" |
| 158 | src="/static/icon/view.png" | 158 | src="/static/icon/view.png" |
| 159 | /> | 159 | /> |
| 160 | <span>View</span> | 160 | <span>View</span> |
| 161 | </v-tooltip> | 161 | </v-tooltip> |
| 162 | <v-tooltip top> | 162 | <v-tooltip top> |
| 163 | <img | 163 | <img |
| 164 | slot="activator" | 164 | slot="activator" |
| 165 | style="cursor:pointer; width:20px; height:18px; " | 165 | style="cursor:pointer; width:20px; height:18px; " |
| 166 | class="mr-3" | 166 | class="mr-3" |
| 167 | @click="editItem(props.item)" | 167 | @click="editItem(props.item)" |
| 168 | src="/static/icon/edit.png" | 168 | src="/static/icon/edit.png" |
| 169 | /> | 169 | /> |
| 170 | <span>Edit</span> | 170 | <span>Edit</span> |
| 171 | </v-tooltip> | 171 | </v-tooltip> |
| 172 | <v-tooltip top> | 172 | <v-tooltip top> |
| 173 | <img | 173 | <img |
| 174 | slot="activator" | 174 | slot="activator" |
| 175 | style="cursor:pointer; width:20px; height:20px; " | 175 | style="cursor:pointer; width:20px; height:20px; " |
| 176 | @click="deleteItem(props.item)" | 176 | @click="deleteItem(props.item)" |
| 177 | class="mr-3" | 177 | class="mr-3" |
| 178 | src="/static/icon/delete.png" | 178 | src="/static/icon/delete.png" |
| 179 | /> | 179 | /> |
| 180 | <span>Delete</span> | 180 | <span>Delete</span> |
| 181 | </v-tooltip> | 181 | </v-tooltip> |
| 182 | <!-- </span> --> | 182 | <!-- </span> --> |
| 183 | </td> | 183 | </td> |
| 184 | </tr> | 184 | </tr> |
| 185 | </template> | 185 | </template> |
| 186 | <v-alert | 186 | <v-alert |
| 187 | slot="no-results" | 187 | slot="no-results" |
| 188 | :value="true" | 188 | :value="true" |
| 189 | color="error" | 189 | color="error" |
| 190 | icon="warning" | 190 | icon="warning" |
| 191 | >Your search for "{{ search }}" found no results.</v-alert> | 191 | >Your search for "{{ search }}" found no results.</v-alert> |
| 192 | </v-data-table> | 192 | </v-data-table> |
| 193 | 193 | ||
| 194 | <!-- ****** ADD Fee Type ****** --> | 194 | <!-- ****** ADD Fee Type ****** --> |
| 195 | <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog"> | 195 | <v-dialog v-model="addFeeTypeDialog" max-width="500px" v-if="addFeeTypeDialog" persistent> |
| 196 | <v-card flat class="card-style pa-2" dark> | 196 | <v-card flat class="card-style pa-2" dark> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-flex xs12> | 198 | <v-flex xs12> |
| 199 | <label class="title text-xs-center">Add Fee Type</label> | 199 | <label class="title text-xs-center">Add Fee Type</label> |
| 200 | <v-icon size="24" class="right" @click="closeAddFeeTypeModel">cancel</v-icon> | 200 | <v-icon size="24" class="right" @click="closeAddFeeTypeModel">cancel</v-icon> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | <v-container fluid fill-height> | 203 | <v-container fluid fill-height> |
| 204 | <v-layout align-center> | 204 | <v-layout align-center> |
| 205 | <v-flex xs12 class="mt-4"> | 205 | <v-flex xs12 class="mt-4"> |
| 206 | <v-form ref="form" v-model="valid" lazy-validation> | 206 | <v-form ref="form" v-model="valid" lazy-validation> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <v-flex xs4 class="pt-4 subheading"> | 208 | <v-flex xs4 class="pt-4 subheading"> |
| 209 | <label class="right">Fee Type:</label> | 209 | <label class="right">Fee Type:</label> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | <v-flex xs7 class="ml-3"> | 211 | <v-flex xs7 class="ml-3"> |
| 212 | <v-text-field | 212 | <v-text-field |
| 213 | v-model="feeTypeData.feeType" | 213 | v-model="feeTypeData.feeType" |
| 214 | placeholder="fill your Fee Type" | 214 | placeholder="fill your Fee Type" |
| 215 | type="text" | 215 | type="text" |
| 216 | :rules="feetTypeRules" | 216 | :rules="feetTypeRules" |
| 217 | required | 217 | required |
| 218 | ></v-text-field> | 218 | ></v-text-field> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-layout> | 221 | <v-layout> |
| 222 | <v-flex xs4 class="pt-4 subheading"> | 222 | <v-flex xs4 class="pt-4 subheading"> |
| 223 | <label class="right">Note:</label> | 223 | <label class="right">Note:</label> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | <v-flex xs7 class="ml-3"> | 225 | <v-flex xs7 class="ml-3"> |
| 226 | <v-textarea | 226 | <v-textarea |
| 227 | name="input-7-1" | 227 | name="input-7-1" |
| 228 | v-model="feeTypeData.note" | 228 | v-model="feeTypeData.note" |
| 229 | placeholder="fill your Note" | 229 | placeholder="fill your Note" |
| 230 | type="text" | 230 | type="text" |
| 231 | multi-line | 231 | multi-line |
| 232 | required | 232 | required |
| 233 | ></v-textarea> | 233 | ></v-textarea> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | <!-- <v-layout> | 236 | <!-- <v-layout> |
| 237 | <v-flex xs4 class="pt-4 subheading"> | 237 | <v-flex xs4 class="pt-4 subheading"> |
| 238 | <label class="right">Monthly:</label> | 238 | <label class="right">Monthly:</label> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex xs6 class="ml-3"> | 240 | <v-flex xs6 class="ml-3"> |
| 241 | <v-checkbox | 241 | <v-checkbox |
| 242 | v-model="feeTypeData.monthly" | 242 | v-model="feeTypeData.monthly" |
| 243 | :rules="monthlyRules" | 243 | :rules="monthlyRules" |
| 244 | multi-line | 244 | multi-line |
| 245 | required | 245 | required |
| 246 | ></v-checkbox> | 246 | ></v-checkbox> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | </v-layout>--> | 248 | </v-layout>--> |
| 249 | <v-layout> | 249 | <v-layout> |
| 250 | <v-flex xs12> | 250 | <v-flex xs12> |
| 251 | <v-card-actions> | 251 | <v-card-actions> |
| 252 | <v-spacer></v-spacer> | 252 | <v-spacer></v-spacer> |
| 253 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 253 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 254 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 254 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 255 | </v-card-actions> | 255 | </v-card-actions> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-form> | 258 | </v-form> |
| 259 | </v-flex> | 259 | </v-flex> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | </v-container> | 261 | </v-container> |
| 262 | </v-card> | 262 | </v-card> |
| 263 | </v-dialog> | 263 | </v-dialog> |
| 264 | <div class="loader" v-if="showLoader"> | 264 | <div class="loader" v-if="showLoader"> |
| 265 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 265 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 266 | </div> | 266 | </div> |
| 267 | <v-snackbar | 267 | <v-snackbar |
| 268 | :timeout="timeout" | 268 | :timeout="timeout" |
| 269 | :top="y === 'top'" | 269 | :top="y === 'top'" |
| 270 | :right="x === 'right'" | 270 | :right="x === 'right'" |
| 271 | :vertical="mode === 'vertical'" | 271 | :vertical="mode === 'vertical'" |
| 272 | v-model="snackbar" | 272 | v-model="snackbar" |
| 273 | :color="color" | 273 | :color="color" |
| 274 | >{{ text }}</v-snackbar> | 274 | >{{ text }}</v-snackbar> |
| 275 | </v-container> | 275 | </v-container> |
| 276 | </template> | 276 | </template> |
| 277 | 277 | ||
| 278 | <script> | 278 | <script> |
| 279 | import http from "@/Services/http.js"; | 279 | import http from "@/Services/http.js"; |
| 280 | 280 | ||
| 281 | export default { | 281 | export default { |
| 282 | data: () => ({ | 282 | data: () => ({ |
| 283 | snackbar: false, | 283 | snackbar: false, |
| 284 | y: "top", | 284 | y: "top", |
| 285 | x: "right", | 285 | x: "right", |
| 286 | mode: "", | 286 | mode: "", |
| 287 | timeout: 5000, | 287 | timeout: 5000, |
| 288 | text: "", | 288 | text: "", |
| 289 | color: "", | 289 | color: "", |
| 290 | showLoader: false, | 290 | showLoader: false, |
| 291 | loading: false, | 291 | loading: false, |
| 292 | date: null, | 292 | date: null, |
| 293 | search: "", | 293 | search: "", |
| 294 | editFeeTypeDialog: false, | 294 | editFeeTypeDialog: false, |
| 295 | viewFeeTypeDialog: false, | 295 | viewFeeTypeDialog: false, |
| 296 | valid: true, | 296 | valid: true, |
| 297 | show: true, | 297 | show: true, |
| 298 | showSearch: false, | 298 | showSearch: false, |
| 299 | addFeeTypeDialog: false, | 299 | addFeeTypeDialog: false, |
| 300 | validEdit: true, | 300 | validEdit: true, |
| 301 | pagination: { | 301 | pagination: { |
| 302 | rowsPerPage: 10, | 302 | rowsPerPage: 10, |
| 303 | }, | 303 | }, |
| 304 | feetTypeRules: [(v) => !!v || " Fee Type Name is required"], | 304 | feetTypeRules: [(v) => !!v || " Fee Type Name is required"], |
| 305 | monthlyRules: [(v) => !!v || " Select Monthly"], | 305 | monthlyRules: [(v) => !!v || " Select Monthly"], |
| 306 | noteRules: [(v) => !!v || " Note is required"], | 306 | noteRules: [(v) => !!v || " Note is required"], |
| 307 | headers: [ | 307 | headers: [ |
| 308 | { | 308 | { |
| 309 | text: "No", | 309 | text: "No", |
| 310 | align: "", | 310 | align: "", |
| 311 | sortable: false, | 311 | sortable: false, |
| 312 | value: "No", | 312 | value: "No", |
| 313 | }, | 313 | }, |
| 314 | { | 314 | { |
| 315 | text: "fee Type", | 315 | text: "fee Type", |
| 316 | value: "feeType", | 316 | value: "feeType", |
| 317 | sortable: false, | 317 | sortable: false, |
| 318 | align: "center", | 318 | align: "center", |
| 319 | }, | 319 | }, |
| 320 | { text: "Note", value: "note", sortable: false, align: "center" }, | 320 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 321 | // { text: "Session", value: "session", sortable: false, align: "center" }, | 321 | // { text: "Session", value: "session", sortable: false, align: "center" }, |
| 322 | { text: "Action", value: "", sortable: false, align: "center" }, | 322 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 323 | ], | 323 | ], |
| 324 | feeTypeList: [], | 324 | feeTypeList: [], |
| 325 | select: "", | 325 | select: "", |
| 326 | token: "", | 326 | token: "", |
| 327 | editedItem: {}, | 327 | editedItem: {}, |
| 328 | feeTypeData: {}, | 328 | feeTypeData: {}, |
| 329 | }), | 329 | }), |
| 330 | watch: { | 330 | watch: { |
| 331 | addFeeTypeDialog: function (val) { | 331 | addFeeTypeDialog: function (val) { |
| 332 | if (!val) { | 332 | if (!val) { |
| 333 | this.feeTypeData = []; | 333 | this.feeTypeData = []; |
| 334 | } | 334 | } |
| 335 | }, | 335 | }, |
| 336 | }, | 336 | }, |
| 337 | methods: { | 337 | methods: { |
| 338 | getFeeTypeList() { | 338 | getFeeTypeList() { |
| 339 | this.showLoader = true; | 339 | this.showLoader = true; |
| 340 | http() | 340 | http() |
| 341 | .get("/getFeesList", { | 341 | .get("/getFeesList", { |
| 342 | params: { schoolId: this.$store.state.schoolId }, | 342 | params: { schoolId: this.$store.state.schoolId }, |
| 343 | headers: { Authorization: "Bearer " + this.token }, | 343 | headers: { Authorization: "Bearer " + this.token }, |
| 344 | }) | 344 | }) |
| 345 | .then((response) => { | 345 | .then((response) => { |
| 346 | this.feeTypeList = response.data.data; | 346 | this.feeTypeList = response.data.data; |
| 347 | this.showLoader = false; | 347 | this.showLoader = false; |
| 348 | }) | 348 | }) |
| 349 | .catch((error) => { | 349 | .catch((error) => { |
| 350 | this.showLoader = false; | 350 | this.showLoader = false; |
| 351 | if (error.response.status === 401) { | 351 | if (error.response.status === 401) { |
| 352 | this.$router.replace({ path: "/" }); | 352 | this.$router.replace({ path: "/" }); |
| 353 | this.$store.dispatch("setToken", null); | 353 | this.$store.dispatch("setToken", null); |
| 354 | this.$store.dispatch("Id", null); | 354 | this.$store.dispatch("Id", null); |
| 355 | this.$store.dispatch("Role", null); | 355 | this.$store.dispatch("Role", null); |
| 356 | } | 356 | } |
| 357 | }); | 357 | }); |
| 358 | }, | 358 | }, |
| 359 | editItem(item) { | 359 | editItem(item) { |
| 360 | this.editedIndex = this.feeTypeList.indexOf(item); | 360 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 361 | this.editedItem = Object.assign({}, item); | 361 | this.editedItem = Object.assign({}, item); |
| 362 | this.editFeeTypeDialog = true; | 362 | this.editFeeTypeDialog = true; |
| 363 | }, | 363 | }, |
| 364 | profile(item) { | 364 | profile(item) { |
| 365 | this.editedIndex = this.feeTypeList.indexOf(item); | 365 | this.editedIndex = this.feeTypeList.indexOf(item); |
| 366 | this.editedItem = Object.assign({}, item); | 366 | this.editedItem = Object.assign({}, item); |
| 367 | this.viewFeeTypeDialog = true; | 367 | this.viewFeeTypeDialog = true; |
| 368 | }, | 368 | }, |
| 369 | deleteItem(item) { | 369 | deleteItem(item) { |
| 370 | let deleteFeeType = { | 370 | let deleteFeeType = { |
| 371 | feeId: item._id, | 371 | feeId: item._id, |
| 372 | }; | 372 | }; |
| 373 | http() | 373 | http() |
| 374 | .delete( | 374 | .delete( |
| 375 | "/deleteFee", | 375 | "/deleteFee", |
| 376 | confirm("Are you sure you want to delete this?") && { | 376 | confirm("Are you sure you want to delete this?") && { |
| 377 | params: deleteFeeType, | 377 | params: deleteFeeType, |
| 378 | } | 378 | } |
| 379 | ) | 379 | ) |
| 380 | .then((response) => { | 380 | .then((response) => { |
| 381 | this.snackbar = true; | 381 | this.snackbar = true; |
| 382 | this.text = response.data.message; | 382 | this.text = response.data.message; |
| 383 | this.color = "green"; | 383 | this.color = "green"; |
| 384 | this.getFeeTypeList(); | 384 | this.getFeeTypeList(); |
| 385 | }) | 385 | }) |
| 386 | .catch((error) => { | 386 | .catch((error) => { |
| 387 | this.snackbar = true; | 387 | this.snackbar = true; |
| 388 | this.color = "error"; | 388 | this.color = "error"; |
| 389 | this.text = error.response.data.message; | 389 | this.text = error.response.data.message; |
| 390 | }); | 390 | }); |
| 391 | }, | 391 | }, |
| 392 | close() { | 392 | close() { |
| 393 | this.dialog = false; | 393 | this.dialog = false; |
| 394 | }, | 394 | }, |
| 395 | close1() { | 395 | close1() { |
| 396 | this.dialog1 = false; | 396 | this.dialog1 = false; |
| 397 | }, | 397 | }, |
| 398 | close2() { | 398 | close2() { |
| 399 | this.dialog2 = false; | 399 | this.dialog2 = false; |
| 400 | }, | 400 | }, |
| 401 | closeAddFeeTypeModel() { | 401 | closeAddFeeTypeModel() { |
| 402 | this.addFeeTypeDialog = false; | 402 | this.addFeeTypeDialog = false; |
| 403 | this.feeTypeData = []; | 403 | this.feeTypeData = []; |
| 404 | }, | 404 | }, |
| 405 | submit() { | 405 | submit() { |
| 406 | if (this.$refs.form.validate()) { | 406 | if (this.$refs.form.validate()) { |
| 407 | this.loading = true; | 407 | this.loading = true; |
| 408 | this.schoolId = this.$store.state.schoolId; | 408 | this.schoolId = this.$store.state.schoolId; |
| 409 | http() | 409 | http() |
| 410 | .post("/createFee", this.feeTypeData) | 410 | .post("/createFee", this.feeTypeData) |
| 411 | .then((response) => { | 411 | .then((response) => { |
| 412 | this.getFeeTypeList(); | 412 | this.getFeeTypeList(); |
| 413 | this.snackbar = true; | 413 | this.snackbar = true; |
| 414 | this.text = response.data.message; | 414 | this.text = response.data.message; |
| 415 | this.color = "green"; | 415 | this.color = "green"; |
| 416 | this.clear(); | 416 | this.clear(); |
| 417 | this.addFeeTypeDialog = false; | 417 | this.addFeeTypeDialog = false; |
| 418 | this.loading = false; | 418 | this.loading = false; |
| 419 | }) | 419 | }) |
| 420 | .catch((error) => { | 420 | .catch((error) => { |
| 421 | // console.log(error); | 421 | // console.log(error); |
| 422 | this.snackbar = true; | 422 | this.snackbar = true; |
| 423 | this.color = "error"; | 423 | this.color = "error"; |
| 424 | this.text = error.response.data.message; | 424 | this.text = error.response.data.message; |
| 425 | this.loading = false; | 425 | this.loading = false; |
| 426 | }); | 426 | }); |
| 427 | } | 427 | } |
| 428 | }, | 428 | }, |
| 429 | clear() { | 429 | clear() { |
| 430 | this.$refs.form.reset(); | 430 | this.$refs.form.reset(); |
| 431 | }, | 431 | }, |
| 432 | save() { | 432 | save() { |
| 433 | this.editedItem.feeId = this.editedItem._id; | 433 | this.editedItem.feeId = this.editedItem._id; |
| 434 | http() | 434 | http() |
| 435 | .put("/updateFee", this.editedItem) | 435 | .put("/updateFee", this.editedItem) |
| 436 | .then((response) => { | 436 | .then((response) => { |
| 437 | this.snackbar = true; | 437 | this.snackbar = true; |
| 438 | this.text = response.data.message; | 438 | this.text = response.data.message; |
| 439 | this.color = "green"; | 439 | this.color = "green"; |
| 440 | this.getFeeTypeList(); | 440 | this.getFeeTypeList(); |
| 441 | this.editFeeTypeDialog = false; | 441 | this.editFeeTypeDialog = false; |
| 442 | this.close(); | 442 | this.close(); |
| 443 | }) | 443 | }) |
| 444 | .catch((error) => { | 444 | .catch((error) => { |
| 445 | this.snackbar = true; | 445 | this.snackbar = true; |
| 446 | this.color = "error"; | 446 | this.color = "error"; |
| 447 | this.text = error.response.data.message; | 447 | this.text = error.response.data.message; |
| 448 | }); | 448 | }); |
| 449 | }, | 449 | }, |
| 450 | displaySearch() { | 450 | displaySearch() { |
| 451 | (this.show = false), (this.showSearch = true); | 451 | (this.show = false), (this.showSearch = true); |
| 452 | }, | 452 | }, |
| 453 | closeSearch() { | 453 | closeSearch() { |
| 454 | this.showSearch = false; | 454 | this.showSearch = false; |
| 455 | this.show = true; | 455 | this.show = true; |
| 456 | this.search = ""; | 456 | this.search = ""; |
| 457 | }, | 457 | }, |
| 458 | }, | 458 | }, |
| 459 | mounted() { | 459 | mounted() { |
| 460 | this.token = this.$store.state.token; | 460 | this.token = this.$store.state.token; |
| 461 | this.getFeeTypeList(); | 461 | this.getFeeTypeList(); |
| 462 | }, | 462 | }, |
| 463 | }; | 463 | }; |
| 464 | </script> | 464 | </script> |
src/pages/Account/income.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Income DETAILS ****** --> | 3 | <!-- ****** EDIT Income DETAILS ****** --> |
| 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editIncomeDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Income</label> | 8 | <label class="title text-xs-center">Edit Income</label> |
| 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editIncomeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="160px"> | 18 | <v-avatar size="160px"> |
| 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> | 19 | <img src="/static/icon/user.png" v-if="!editedItem.fileUrl && !imageUrl" /> |
| 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> | 20 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl && !imageUrl" /> |
| 21 | <img | 21 | <img |
| 22 | v-if="imageUrl" | 22 | v-if="imageUrl" |
| 23 | :src="imageUrl" | 23 | :src="imageUrl" |
| 24 | height="150" | 24 | height="150" |
| 25 | style="border-radius:50%; width:200px" | 25 | style="border-radius:50%; width:200px" |
| 26 | /> | 26 | /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | <input | 28 | <input |
| 29 | type="file" | 29 | type="file" |
| 30 | style="display:none" | 30 | style="display:none" |
| 31 | ref="image" | 31 | ref="image" |
| 32 | accept="image/*" | 32 | accept="image/*" |
| 33 | @change="onFilePicked" | 33 | @change="onFilePicked" |
| 34 | /> | 34 | /> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-layout wrap> | 37 | <v-layout wrap> |
| 38 | <v-flex xs12 sm12> | 38 | <v-flex xs12 sm12> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right">Name:</label> | 41 | <label class="right">Name:</label> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs8 sm6 class="ml-3"> | 43 | <v-flex xs8 sm6 class="ml-3"> |
| 44 | <v-text-field | 44 | <v-text-field |
| 45 | v-model="editedItem.name" | 45 | v-model="editedItem.name" |
| 46 | placeholder="fill your full Name" | 46 | placeholder="fill your full Name" |
| 47 | name="name" | 47 | name="name" |
| 48 | type="text" | 48 | type="text" |
| 49 | required | 49 | required |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-layout wrap> | 55 | <v-layout wrap> |
| 56 | <v-flex xs12> | 56 | <v-flex xs12> |
| 57 | <v-layout> | 57 | <v-layout> |
| 58 | <v-flex xs4 class="pt-4 subheading"> | 58 | <v-flex xs4 class="pt-4 subheading"> |
| 59 | <label class="right">Date:</label> | 59 | <label class="right">Date:</label> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs8 sm6 class="ml-3"> | 61 | <v-flex xs8 sm6 class="ml-3"> |
| 62 | <v-menu | 62 | <v-menu |
| 63 | ref="menu" | 63 | ref="menu" |
| 64 | :close-on-content-click="false" | 64 | :close-on-content-click="false" |
| 65 | v-model="menu3" | 65 | v-model="menu3" |
| 66 | :nudge-right="40" | 66 | :nudge-right="40" |
| 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 | min-width="290px" | 71 | min-width="290px" |
| 72 | > | 72 | > |
| 73 | <v-text-field | 73 | <v-text-field |
| 74 | slot="activator" | 74 | slot="activator" |
| 75 | v-model="editedItem.date" | 75 | v-model="editedItem.date" |
| 76 | placeholder="Select date" | 76 | placeholder="Select date" |
| 77 | ></v-text-field> | 77 | ></v-text-field> |
| 78 | <v-date-picker | 78 | <v-date-picker |
| 79 | ref="picker" | 79 | ref="picker" |
| 80 | v-model="editedItem.date" | 80 | v-model="editedItem.date" |
| 81 | @input="$refs.menu.save(editedItem.date)" | 81 | @input="$refs.menu.save(editedItem.date)" |
| 82 | ></v-date-picker> | 82 | ></v-date-picker> |
| 83 | </v-menu> | 83 | </v-menu> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | <v-layout wrap> | 87 | <v-layout wrap> |
| 88 | <v-flex xs12 sm12> | 88 | <v-flex xs12 sm12> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs4 class="pt-4 subheading"> | 90 | <v-flex xs4 class="pt-4 subheading"> |
| 91 | <label class="right">Amount:</label> | 91 | <label class="right">Amount:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs8 sm6 class="ml-3"> | 93 | <v-flex xs8 sm6 class="ml-3"> |
| 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> | 94 | <v-text-field v-model="editedItem.amount" required></v-text-field> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-flex xs12> | 99 | <v-flex xs12> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 class="pt-4 subheading"> | 101 | <v-flex xs4 class="pt-4 subheading"> |
| 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs8 sm6 class="ml-3"> | 105 | <v-flex xs8 sm6 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | label="Select Image" | 107 | label="Select Image" |
| 108 | @click="pickFile" | 108 | @click="pickFile" |
| 109 | v-model="imageName" | 109 | v-model="imageName" |
| 110 | append-icon="attach_file" | 110 | append-icon="attach_file" |
| 111 | ></v-text-field> | 111 | ></v-text-field> |
| 112 | <input | 112 | <input |
| 113 | type="file" | 113 | type="file" |
| 114 | style="display:none" | 114 | style="display:none" |
| 115 | ref="image" | 115 | ref="image" |
| 116 | accept="image/*" | 116 | accept="image/*" |
| 117 | @change="onFilePicked" | 117 | @change="onFilePicked" |
| 118 | /> | 118 | /> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-flex xs12> | 122 | <v-flex xs12> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs4 class="pt-4 subheading"> | 124 | <v-flex xs4 class="pt-4 subheading"> |
| 125 | <label class="right">Note:</label> | 125 | <label class="right">Note:</label> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | <v-flex xs8 sm6 class="ml-3"> | 127 | <v-flex xs8 sm6 class="ml-3"> |
| 128 | <v-textarea | 128 | <v-textarea |
| 129 | name="input-7-1" | 129 | name="input-7-1" |
| 130 | v-model="editedItem.note" | 130 | v-model="editedItem.note" |
| 131 | placeholder="fill your Note" | 131 | placeholder="fill your Note" |
| 132 | type="text" | 132 | type="text" |
| 133 | :rules="noteRules" | 133 | :rules="noteRules" |
| 134 | multi-line | 134 | multi-line |
| 135 | required | 135 | required |
| 136 | ></v-textarea> | 136 | ></v-textarea> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs12> | 142 | <v-flex xs12> |
| 143 | <v-card-actions> | 143 | <v-card-actions> |
| 144 | <v-spacer></v-spacer> | 144 | <v-spacer></v-spacer> |
| 145 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 145 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 146 | <v-spacer></v-spacer> | 146 | <v-spacer></v-spacer> |
| 147 | </v-card-actions> | 147 | </v-card-actions> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | </v-card-text> | 150 | </v-card-text> |
| 151 | </v-card> | 151 | </v-card> |
| 152 | </v-dialog> | 152 | </v-dialog> |
| 153 | 153 | ||
| 154 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> | 154 | <!-- ****** PROFILE VIEW INCOME DETAILS ****** --> |
| 155 | <v-dialog v-model="profileIncomeDialog" max-width="400px"> | 155 | <v-dialog v-model="profileIncomeDialog" max-width="400px" persistent> |
| 156 | <v-card flat class="card-style pa-3" dark> | 156 | <v-card flat class="card-style pa-3" dark> |
| 157 | <v-layout> | 157 | <v-layout> |
| 158 | <v-flex xs12> | 158 | <v-flex xs12> |
| 159 | <label class="title text-xs-center">View Income</label> | 159 | <label class="title text-xs-center">View Income</label> |
| 160 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> | 160 | <v-icon size="24" class="right" @click="profileIncomeDialog = false">cancel</v-icon> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | <v-card-text> | 163 | <v-card-text> |
| 164 | <v-container grid-list-md> | 164 | <v-container grid-list-md> |
| 165 | <v-layout wrap> | 165 | <v-layout wrap> |
| 166 | <v-flex> | 166 | <v-flex> |
| 167 | <v-flex align-center justify-center layout text-xs-center> | 167 | <v-flex align-center justify-center layout text-xs-center> |
| 168 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> | 168 | <v-avatar size="80px" v-if="!editedItem.fileUrl"> |
| 169 | <img src="/static/icon/user.png" /> | 169 | <img src="/static/icon/user.png" /> |
| 170 | </v-avatar> | 170 | </v-avatar> |
| 171 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> | 171 | <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" width="150" /> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-layout> | 173 | <v-layout> |
| 174 | <v-flex xs5 sm6> | 174 | <v-flex xs5 sm6> |
| 175 | <h5 class="right my-1"> | 175 | <h5 class="right my-1"> |
| 176 | <b>Name:</b> | 176 | <b>Name:</b> |
| 177 | </h5> | 177 | </h5> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-flex sm6 xs8> | 179 | <v-flex sm6 xs8> |
| 180 | <h5 class="my-1">{{ editedItem.name }}</h5> | 180 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-layout> | 183 | <v-layout> |
| 184 | <v-flex xs5 sm6> | 184 | <v-flex xs5 sm6> |
| 185 | <h5 class="right my-1"> | 185 | <h5 class="right my-1"> |
| 186 | <b>Amount:</b> | 186 | <b>Amount:</b> |
| 187 | </h5> | 187 | </h5> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | <v-flex sm6 xs8> | 189 | <v-flex sm6 xs8> |
| 190 | <h5 class="my-1">{{ editedItem.amount }}</h5> | 190 | <h5 class="my-1">{{ editedItem.amount }}</h5> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | <v-layout> | 193 | <v-layout> |
| 194 | <v-flex xs5 sm6> | 194 | <v-flex xs5 sm6> |
| 195 | <h5 class="right my-1"> | 195 | <h5 class="right my-1"> |
| 196 | <b>Date:</b> | 196 | <b>Date:</b> |
| 197 | </h5> | 197 | </h5> |
| 198 | </v-flex> | 198 | </v-flex> |
| 199 | <v-flex sm6 xs8> | 199 | <v-flex sm6 xs8> |
| 200 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 200 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | <v-layout> | 203 | <v-layout> |
| 204 | <v-flex xs5 sm6> | 204 | <v-flex xs5 sm6> |
| 205 | <h5 class="right my-1"> | 205 | <h5 class="right my-1"> |
| 206 | <b>Note:</b> | 206 | <b>Note:</b> |
| 207 | </h5> | 207 | </h5> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-flex sm6 xs8> | 209 | <v-flex sm6 xs8> |
| 210 | <h5 class="my-1">{{ editedItem.note }}</h5> | 210 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | </v-container> | 215 | </v-container> |
| 216 | </v-card-text> | 216 | </v-card-text> |
| 217 | </v-card> | 217 | </v-card> |
| 218 | </v-dialog> | 218 | </v-dialog> |
| 219 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> | 219 | <!-- ****** EXISTING-EXPENSE TABLE DATA****** --> |
| 220 | 220 | ||
| 221 | <v-toolbar color="transparent" flat> | 221 | <v-toolbar color="transparent" flat> |
| 222 | <v-btn | 222 | <v-btn |
| 223 | fab | 223 | fab |
| 224 | dark | 224 | dark |
| 225 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 225 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 226 | small | 226 | small |
| 227 | @click="addIncomeDialog = true" | 227 | @click="addIncomeDialog = true" |
| 228 | > | 228 | > |
| 229 | <v-icon dark>add</v-icon> | 229 | <v-icon dark>add</v-icon> |
| 230 | </v-btn> | 230 | </v-btn> |
| 231 | <v-btn | 231 | <v-btn |
| 232 | round | 232 | round |
| 233 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 233 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 234 | dark | 234 | dark |
| 235 | @click="addIncomeDialog = true" | 235 | @click="addIncomeDialog = true" |
| 236 | > | 236 | > |
| 237 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income | 237 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Income |
| 238 | </v-btn> | 238 | </v-btn> |
| 239 | <v-spacer></v-spacer> | 239 | <v-spacer></v-spacer> |
| 240 | <v-card-title class="body-1" v-show="show"> | 240 | <v-card-title class="body-1" v-show="show"> |
| 241 | <v-btn icon large flat @click="displaySearch"> | 241 | <v-btn icon large flat @click="displaySearch"> |
| 242 | <v-avatar size="27"> | 242 | <v-avatar size="27"> |
| 243 | <img src="/static/icon/search.png" alt="icon" /> | 243 | <img src="/static/icon/search.png" alt="icon" /> |
| 244 | </v-avatar> | 244 | </v-avatar> |
| 245 | </v-btn> | 245 | </v-btn> |
| 246 | </v-card-title> | 246 | </v-card-title> |
| 247 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 247 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-text-field | 249 | <v-text-field |
| 250 | autofocus | 250 | autofocus |
| 251 | v-model="search" | 251 | v-model="search" |
| 252 | label="Search" | 252 | label="Search" |
| 253 | prepend-inner-icon="search" | 253 | prepend-inner-icon="search" |
| 254 | color="primary" | 254 | color="primary" |
| 255 | ></v-text-field> | 255 | ></v-text-field> |
| 256 | <v-icon @click="closeSearch" color="error">close</v-icon> | 256 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-toolbar> | 259 | </v-toolbar> |
| 260 | <v-data-table | 260 | <v-data-table |
| 261 | :headers="headers" | 261 | :headers="headers" |
| 262 | :items="incomeList" | 262 | :items="incomeList" |
| 263 | :pagination.sync="pagination" | 263 | :pagination.sync="pagination" |
| 264 | :search="search" | 264 | :search="search" |
| 265 | > | 265 | > |
| 266 | <template slot="items" slot-scope="props"> | 266 | <template slot="items" slot-scope="props"> |
| 267 | <tr class="tr"> | 267 | <tr class="tr"> |
| 268 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 268 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 269 | <td class="text-xs-center td td-row"> | 269 | <td class="text-xs-center td td-row"> |
| 270 | <v-avatar class="40"> | 270 | <v-avatar class="40"> |
| 271 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> | 271 | <img :src="props.item.fileUrl" v-if="props.item.fileUrl" /> |
| 272 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> | 272 | <img src="/static/icon/user.png" v-else-if="!props.item.fileUrl" /> |
| 273 | </v-avatar> | 273 | </v-avatar> |
| 274 | </td> | 274 | </td> |
| 275 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 275 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 276 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 276 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 277 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> | 277 | <td class="text-xs-center td td-row">{{ props.item.user }}</td> |
| 278 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> | 278 | <td class="text-xs-center td td-row">{{ props.item.amount }}</td> |
| 279 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> | 279 | <td class="text-xs-center td td-row">{{ props.item.note }}</td> |
| 280 | <td class="text-xs-center td td-row"> | 280 | <td class="text-xs-center td td-row"> |
| 281 | <span> | 281 | <span> |
| 282 | <v-tooltip top> | 282 | <v-tooltip top> |
| 283 | <img | 283 | <img |
| 284 | slot="activator" | 284 | slot="activator" |
| 285 | style="cursor:pointer; width:25px; height:25px; " | 285 | style="cursor:pointer; width:25px; height:25px; " |
| 286 | class="mr-3" | 286 | class="mr-3" |
| 287 | @click="profile(props.item)" | 287 | @click="profile(props.item)" |
| 288 | src="/static/icon/view.png" | 288 | src="/static/icon/view.png" |
| 289 | /> | 289 | /> |
| 290 | <span>View</span> | 290 | <span>View</span> |
| 291 | </v-tooltip> | 291 | </v-tooltip> |
| 292 | <v-tooltip top> | 292 | <v-tooltip top> |
| 293 | <img | 293 | <img |
| 294 | slot="activator" | 294 | slot="activator" |
| 295 | style="cursor:pointer; width:20px; height:18px; " | 295 | style="cursor:pointer; width:20px; height:18px; " |
| 296 | class="mr-3" | 296 | class="mr-3" |
| 297 | @click="editItem(props.item)" | 297 | @click="editItem(props.item)" |
| 298 | src="/static/icon/edit.png" | 298 | src="/static/icon/edit.png" |
| 299 | /> | 299 | /> |
| 300 | <span>Edit</span> | 300 | <span>Edit</span> |
| 301 | </v-tooltip> | 301 | </v-tooltip> |
| 302 | <v-tooltip top> | 302 | <v-tooltip top> |
| 303 | <img | 303 | <img |
| 304 | slot="activator" | 304 | slot="activator" |
| 305 | style="cursor:pointer; width:20px; height:20px; " | 305 | style="cursor:pointer; width:20px; height:20px; " |
| 306 | @click="deleteItem(props.item)" | 306 | @click="deleteItem(props.item)" |
| 307 | src="/static/icon/delete.png" | 307 | src="/static/icon/delete.png" |
| 308 | /> | 308 | /> |
| 309 | <span>Delete</span> | 309 | <span>Delete</span> |
| 310 | </v-tooltip> | 310 | </v-tooltip> |
| 311 | </span> | 311 | </span> |
| 312 | </td> | 312 | </td> |
| 313 | </tr> | 313 | </tr> |
| 314 | </template> | 314 | </template> |
| 315 | <v-alert | 315 | <v-alert |
| 316 | slot="no-results" | 316 | slot="no-results" |
| 317 | :value="true" | 317 | :value="true" |
| 318 | color="error" | 318 | color="error" |
| 319 | icon="warning" | 319 | icon="warning" |
| 320 | >Your search for "{{ search }}" found no results.</v-alert> | 320 | >Your search for "{{ search }}" found no results.</v-alert> |
| 321 | </v-data-table> | 321 | </v-data-table> |
| 322 | 322 | ||
| 323 | <!-- ****** Add Income Data****** --> | 323 | <!-- ****** Add Income Data****** --> |
| 324 | <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog"> | 324 | <v-dialog v-model="addIncomeDialog" max-width="600px" v-if="addIncomeDialog" persistent> |
| 325 | <v-card flat class="card-style pa-2" dark> | 325 | <v-card flat class="card-style pa-2" dark> |
| 326 | <v-layout> | 326 | <v-layout> |
| 327 | <v-flex xs12> | 327 | <v-flex xs12> |
| 328 | <label class="title text-xs-center">Add Income</label> | 328 | <label class="title text-xs-center">Add Income</label> |
| 329 | <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> | 329 | <v-icon size="24" class="right" @click="closeAddIncomeModel">cancel</v-icon> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | </v-layout> | 331 | </v-layout> |
| 332 | <v-form ref="form" v-model="valid" lazy-validation> | 332 | <v-form ref="form" v-model="valid" lazy-validation> |
| 333 | <v-container fluid> | 333 | <v-container fluid> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 335 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 336 | <v-avatar size="80px"> | 336 | <v-avatar size="80px"> |
| 337 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 337 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 338 | </v-avatar> | 338 | </v-avatar> |
| 339 | <img | 339 | <img |
| 340 | :src="imageUrl" | 340 | :src="imageUrl" |
| 341 | height="150" | 341 | height="150" |
| 342 | v-if="imageUrl" | 342 | v-if="imageUrl" |
| 343 | style="border-radius:50%; width:200px" | 343 | style="border-radius:50%; width:200px" |
| 344 | /> | 344 | /> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | <v-layout> | 347 | <v-layout> |
| 348 | <v-flex xs12 sm12> | 348 | <v-flex xs12 sm12> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right">Name:</label> | 351 | <label class="right">Name:</label> |
| 352 | </v-flex> | 352 | </v-flex> |
| 353 | <v-flex xs8 sm6 class="ml-3"> | 353 | <v-flex xs8 sm6 class="ml-3"> |
| 354 | <v-text-field | 354 | <v-text-field |
| 355 | v-model="addIncome.name" | 355 | v-model="addIncome.name" |
| 356 | placeholder="fill your full Name" | 356 | placeholder="fill your full Name" |
| 357 | name="name" | 357 | name="name" |
| 358 | type="text" | 358 | type="text" |
| 359 | :rules="nameRules" | 359 | :rules="nameRules" |
| 360 | required | 360 | required |
| 361 | ></v-text-field> | 361 | ></v-text-field> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | <v-layout> | 366 | <v-layout> |
| 367 | <v-flex xs12 sm12> | 367 | <v-flex xs12 sm12> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs4 class="pt-4 subheading"> | 369 | <v-flex xs4 class="pt-4 subheading"> |
| 370 | <label class="right">Amount:</label> | 370 | <label class="right">Amount:</label> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | <v-flex xs8 sm6 class="ml-3"> | 372 | <v-flex xs8 sm6 class="ml-3"> |
| 373 | <v-text-field | 373 | <v-text-field |
| 374 | v-model="addIncome.amount" | 374 | v-model="addIncome.amount" |
| 375 | placeholder="fill your Amount" | 375 | placeholder="fill your Amount" |
| 376 | name="name" | 376 | name="name" |
| 377 | type="text" | 377 | type="text" |
| 378 | :rules="amountRules" | 378 | :rules="amountRules" |
| 379 | required | 379 | required |
| 380 | ></v-text-field> | 380 | ></v-text-field> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | </v-layout> | 384 | </v-layout> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs12 sm12> | 386 | <v-flex xs12 sm12> |
| 387 | <v-layout> | 387 | <v-layout> |
| 388 | <v-flex xs4 class="pt-4 subheading"> | 388 | <v-flex xs4 class="pt-4 subheading"> |
| 389 | <label class="right">Date</label> | 389 | <label class="right">Date</label> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | <v-flex xs8 sm6 class="ml-3"> | 391 | <v-flex xs8 sm6 class="ml-3"> |
| 392 | <v-menu | 392 | <v-menu |
| 393 | ref="menu1" | 393 | ref="menu1" |
| 394 | :close-on-content-click="false" | 394 | :close-on-content-click="false" |
| 395 | v-model="menu1" | 395 | v-model="menu1" |
| 396 | :nudge-right="40" | 396 | :nudge-right="40" |
| 397 | lazy | 397 | lazy |
| 398 | transition="scale-transition" | 398 | transition="scale-transition" |
| 399 | offset-y | 399 | offset-y |
| 400 | full-width | 400 | full-width |
| 401 | min-width="290px" | 401 | min-width="290px" |
| 402 | > | 402 | > |
| 403 | <v-text-field | 403 | <v-text-field |
| 404 | slot="activator" | 404 | slot="activator" |
| 405 | :rules="joinDateRules" | 405 | :rules="joinDateRules" |
| 406 | v-model="addIncome.date" | 406 | v-model="addIncome.date" |
| 407 | placeholder="Select date" | 407 | placeholder="Select date" |
| 408 | ></v-text-field> | 408 | ></v-text-field> |
| 409 | <v-date-picker | 409 | <v-date-picker |
| 410 | ref="picker" | 410 | ref="picker" |
| 411 | v-model="addIncome.date" | 411 | v-model="addIncome.date" |
| 412 | @input="$refs.menu1.save(addIncome.date)" | 412 | @input="$refs.menu1.save(addIncome.date)" |
| 413 | ></v-date-picker> | 413 | ></v-date-picker> |
| 414 | </v-menu> | 414 | </v-menu> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | </v-layout> | 418 | </v-layout> |
| 419 | <v-layout> | 419 | <v-layout> |
| 420 | <v-flex xs12 sm12> | 420 | <v-flex xs12 sm12> |
| 421 | <v-layout> | 421 | <v-layout> |
| 422 | <v-flex xs4 class="pt-4 subheading"> | 422 | <v-flex xs4 class="pt-4 subheading"> |
| 423 | <label class="right">File:</label> | 423 | <label class="right">File:</label> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | <v-flex xs8 sm6 class="ml-3"> | 425 | <v-flex xs8 sm6 class="ml-3"> |
| 426 | <v-text-field | 426 | <v-text-field |
| 427 | label="Select file" | 427 | label="Select file" |
| 428 | @click="pickFile" | 428 | @click="pickFile" |
| 429 | v-model="imageName" | 429 | v-model="imageName" |
| 430 | append-icon="attach_file" | 430 | append-icon="attach_file" |
| 431 | ></v-text-field> | 431 | ></v-text-field> |
| 432 | <input | 432 | <input |
| 433 | type="file" | 433 | type="file" |
| 434 | style="display:none" | 434 | style="display:none" |
| 435 | ref="image" | 435 | ref="image" |
| 436 | accept="image/*" | 436 | accept="image/*" |
| 437 | @change="onFilePicked" | 437 | @change="onFilePicked" |
| 438 | /> | 438 | /> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | </v-layout> | 442 | </v-layout> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs12 sm12> | 444 | <v-flex xs12 sm12> |
| 445 | <v-layout> | 445 | <v-layout> |
| 446 | <v-flex xs4 class="pt-4 subheading"> | 446 | <v-flex xs4 class="pt-4 subheading"> |
| 447 | <label class="right">Note:</label> | 447 | <label class="right">Note:</label> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | <v-flex xs8 sm6 class="ml-3"> | 449 | <v-flex xs8 sm6 class="ml-3"> |
| 450 | <v-textarea | 450 | <v-textarea |
| 451 | name="input-7-1" | 451 | name="input-7-1" |
| 452 | v-model="addIncome.note" | 452 | v-model="addIncome.note" |
| 453 | placeholder="fill your Note" | 453 | placeholder="fill your Note" |
| 454 | type="text" | 454 | type="text" |
| 455 | multi-line | 455 | multi-line |
| 456 | required | 456 | required |
| 457 | ></v-textarea> | 457 | ></v-textarea> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | </v-layout> | 459 | </v-layout> |
| 460 | </v-flex> | 460 | </v-flex> |
| 461 | </v-layout> | 461 | </v-layout> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs12 sm11> | 463 | <v-flex xs12 sm11> |
| 464 | <v-layout> | 464 | <v-layout> |
| 465 | <v-spacer></v-spacer> | 465 | <v-spacer></v-spacer> |
| 466 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 466 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 467 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 467 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 468 | </v-layout> | 468 | </v-layout> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | </v-layout> | 470 | </v-layout> |
| 471 | </v-container> | 471 | </v-container> |
| 472 | </v-form> | 472 | </v-form> |
| 473 | </v-card> | 473 | </v-card> |
| 474 | </v-dialog> | 474 | </v-dialog> |
| 475 | <div class="loader" v-if="showLoader"> | 475 | <div class="loader" v-if="showLoader"> |
| 476 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 476 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 477 | </div> | 477 | </div> |
| 478 | </v-container> | 478 | </v-container> |
| 479 | </template> | 479 | </template> |
| 480 | 480 | ||
| 481 | <script> | 481 | <script> |
| 482 | import http from "@/Services/http.js"; | 482 | import http from "@/Services/http.js"; |
| 483 | import Util from "@/util"; | 483 | import Util from "@/util"; |
| 484 | import moment from "moment"; | 484 | import moment from "moment"; |
| 485 | 485 | ||
| 486 | export default { | 486 | export default { |
| 487 | data: () => ({ | 487 | data: () => ({ |
| 488 | component: "report-generate", | 488 | component: "report-generate", |
| 489 | snackbar: false, | 489 | snackbar: false, |
| 490 | y: "top", | 490 | y: "top", |
| 491 | x: "right", | 491 | x: "right", |
| 492 | mode: "", | 492 | mode: "", |
| 493 | timeout: 3000, | 493 | timeout: 3000, |
| 494 | text: "", | 494 | text: "", |
| 495 | show: true, | 495 | show: true, |
| 496 | showSearch: false, | 496 | showSearch: false, |
| 497 | showLoader: false, | 497 | showLoader: false, |
| 498 | loading: false, | 498 | loading: false, |
| 499 | date: null, | 499 | date: null, |
| 500 | search: "", | 500 | search: "", |
| 501 | addIncomeDialog: false, | 501 | addIncomeDialog: false, |
| 502 | menu: false, | 502 | menu: false, |
| 503 | menu1: false, | 503 | menu1: false, |
| 504 | menu2: false, | 504 | menu2: false, |
| 505 | menu3: false, | 505 | menu3: false, |
| 506 | editIncomeDialog: false, | 506 | editIncomeDialog: false, |
| 507 | profileIncomeDialog: false, | 507 | profileIncomeDialog: false, |
| 508 | valid: true, | 508 | valid: true, |
| 509 | pagination: { | 509 | pagination: { |
| 510 | rowsPerPage: 10, | 510 | rowsPerPage: 10, |
| 511 | }, | 511 | }, |
| 512 | imageData: {}, | 512 | imageData: {}, |
| 513 | imageName: "", | 513 | imageName: "", |
| 514 | imageUrl: "", | 514 | imageUrl: "", |
| 515 | imageFile: "", | 515 | imageFile: "", |
| 516 | nameRules: [(v) => !!v || " Full Name is required"], | 516 | nameRules: [(v) => !!v || " Full Name is required"], |
| 517 | amountRules: [(v) => !!v || "Amount is required"], | 517 | amountRules: [(v) => !!v || "Amount is required"], |
| 518 | noteRules: [(v) => !!v || "Note Name is required"], | 518 | noteRules: [(v) => !!v || "Note Name is required"], |
| 519 | joinDateRules: [(v) => !!v || "Date is required"], | 519 | joinDateRules: [(v) => !!v || "Date is required"], |
| 520 | errorMessages: "", | 520 | errorMessages: "", |
| 521 | headers: [ | 521 | headers: [ |
| 522 | { | 522 | { |
| 523 | text: "No", | 523 | text: "No", |
| 524 | align: "", | 524 | align: "", |
| 525 | sortable: false, | 525 | sortable: false, |
| 526 | value: "No", | 526 | value: "No", |
| 527 | }, | 527 | }, |
| 528 | { | 528 | { |
| 529 | text: "Profile Pic", | 529 | text: "Profile Pic", |
| 530 | value: "profilePicUrl", | 530 | value: "profilePicUrl", |
| 531 | sortable: false, | 531 | sortable: false, |
| 532 | align: "center", | 532 | align: "center", |
| 533 | }, | 533 | }, |
| 534 | { text: "Name", value: "name", sortable: false, align: "center" }, | 534 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 535 | { text: "Date", value: "date", sortable: false, align: "center" }, | 535 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 536 | { text: "User", value: "user", sortable: false, align: "center" }, | 536 | { text: "User", value: "user", sortable: false, align: "center" }, |
| 537 | { text: "Amount", value: "amount", sortable: false, align: "center" }, | 537 | { text: "Amount", value: "amount", sortable: false, align: "center" }, |
| 538 | { text: "Note", value: "note", sortable: false, align: "center" }, | 538 | { text: "Note", value: "note", sortable: false, align: "center" }, |
| 539 | { text: "Action", value: "", sortable: false, align: "center" }, | 539 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 540 | ], | 540 | ], |
| 541 | incomeList: [], | 541 | incomeList: [], |
| 542 | editedIndex: -1, | 542 | editedIndex: -1, |
| 543 | upload: "", | 543 | upload: "", |
| 544 | editedItem: {}, | 544 | editedItem: {}, |
| 545 | addIncome: {}, | 545 | addIncome: {}, |
| 546 | }), | 546 | }), |
| 547 | watch: { | 547 | watch: { |
| 548 | menu(val) { | 548 | menu(val) { |
| 549 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 549 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 550 | }, | 550 | }, |
| 551 | menu1(val) { | 551 | menu1(val) { |
| 552 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 552 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 553 | }, | 553 | }, |
| 554 | addIncomeDialog: function (val) { | 554 | addIncomeDialog: function (val) { |
| 555 | if (!val) { | 555 | if (!val) { |
| 556 | this.addIncome = []; | 556 | this.addIncome = []; |
| 557 | this.menu1 = false; | 557 | this.menu1 = false; |
| 558 | this.imageName = ""; | 558 | this.imageName = ""; |
| 559 | this.imageUrl = ""; | 559 | this.imageUrl = ""; |
| 560 | this.imageFile = ""; | 560 | this.imageFile = ""; |
| 561 | } | 561 | } |
| 562 | }, | 562 | }, |
| 563 | }, | 563 | }, |
| 564 | methods: { | 564 | methods: { |
| 565 | save(date) { | 565 | save(date) { |
| 566 | this.$refs.menu.save(date); | 566 | this.$refs.menu.save(date); |
| 567 | }, | 567 | }, |
| 568 | save(date) { | 568 | save(date) { |
| 569 | this.$refs.menu1.save(date); | 569 | this.$refs.menu1.save(date); |
| 570 | }, | 570 | }, |
| 571 | pickFile() { | 571 | pickFile() { |
| 572 | this.$refs.image.click(); | 572 | this.$refs.image.click(); |
| 573 | }, | 573 | }, |
| 574 | onFilePicked(e) { | 574 | onFilePicked(e) { |
| 575 | // console.log(e) | 575 | // console.log(e) |
| 576 | const files = e.target.files; | 576 | const files = e.target.files; |
| 577 | this.upload = e.target.files[0]; | 577 | this.upload = e.target.files[0]; |
| 578 | console.log("imageData-upload========>", this.upload); | 578 | console.log("imageData-upload========>", this.upload); |
| 579 | if (files[0] !== undefined) { | 579 | if (files[0] !== undefined) { |
| 580 | this.imageName = files[0].name; | 580 | this.imageName = files[0].name; |
| 581 | if (this.imageName.lastIndexOf(".") <= 0) { | 581 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 582 | return; | 582 | return; |
| 583 | } | 583 | } |
| 584 | const fr = new FileReader(); | 584 | const fr = new FileReader(); |
| 585 | fr.readAsDataURL(files[0]); | 585 | fr.readAsDataURL(files[0]); |
| 586 | fr.addEventListener("load", () => { | 586 | fr.addEventListener("load", () => { |
| 587 | this.imageUrl = fr.result; | 587 | this.imageUrl = fr.result; |
| 588 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 588 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 589 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 589 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 590 | // console.log("upload=======>", this.imageData.imageUrl); | 590 | // console.log("upload=======>", this.imageData.imageUrl); |
| 591 | console.log("imageFile", this.imageUrl); | 591 | console.log("imageFile", this.imageUrl); |
| 592 | }); | 592 | }); |
| 593 | } else { | 593 | } else { |
| 594 | this.imageName = ""; | 594 | this.imageName = ""; |
| 595 | this.imageFile = ""; | 595 | this.imageFile = ""; |
| 596 | this.imageUrl = ""; | 596 | this.imageUrl = ""; |
| 597 | } | 597 | } |
| 598 | }, | 598 | }, |
| 599 | dates: function (date) { | 599 | dates: function (date) { |
| 600 | return moment(date).format("MMMM DD, YYYY"); | 600 | return moment(date).format("MMMM DD, YYYY"); |
| 601 | }, | 601 | }, |
| 602 | getIncomeList() { | 602 | getIncomeList() { |
| 603 | this.showLoader = true; | 603 | this.showLoader = true; |
| 604 | var token = this.$store.state.token; | 604 | var token = this.$store.state.token; |
| 605 | http() | 605 | http() |
| 606 | .get("/getIncomesList", { | 606 | .get("/getIncomesList", { |
| 607 | params: { schoolId: this.$store.state.schoolId }, | 607 | params: { schoolId: this.$store.state.schoolId }, |
| 608 | headers: { Authorization: "Bearer " + token }, | 608 | headers: { Authorization: "Bearer " + token }, |
| 609 | }) | 609 | }) |
| 610 | .then((response) => { | 610 | .then((response) => { |
| 611 | this.incomeList = response.data.data; | 611 | this.incomeList = response.data.data; |
| 612 | this.showLoader = false; | 612 | this.showLoader = false; |
| 613 | // console.log("getTeacherList=====>",this.incomeList) | 613 | // console.log("getTeacherList=====>",this.incomeList) |
| 614 | }) | 614 | }) |
| 615 | .catch((error) => { | 615 | .catch((error) => { |
| 616 | this.showLoader = false; | 616 | this.showLoader = false; |
| 617 | if (error.response.status === 401) { | 617 | if (error.response.status === 401) { |
| 618 | this.$router.replace({ path: "/" }); | 618 | this.$router.replace({ path: "/" }); |
| 619 | this.$store.dispatch("setToken", null); | 619 | this.$store.dispatch("setToken", null); |
| 620 | this.$store.dispatch("Id", null); | 620 | this.$store.dispatch("Id", null); |
| 621 | } | 621 | } |
| 622 | }); | 622 | }); |
| 623 | }, | 623 | }, |
| 624 | editItem(item) { | 624 | editItem(item) { |
| 625 | this.editedIndex = this.incomeList.indexOf(item); | 625 | this.editedIndex = this.incomeList.indexOf(item); |
| 626 | this.editedItem = Object.assign({}, item); | 626 | this.editedItem = Object.assign({}, item); |
| 627 | this.editedItem.date = | 627 | this.editedItem.date = |
| 628 | this.editedItem.date != undefined | 628 | this.editedItem.date != undefined |
| 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 629 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 630 | : (this.editedItem.date = ""); | 630 | : (this.editedItem.date = ""); |
| 631 | 631 | ||
| 632 | this.editIncomeDialog = true; | 632 | this.editIncomeDialog = true; |
| 633 | }, | 633 | }, |
| 634 | profile(item) { | 634 | profile(item) { |
| 635 | this.editedIndex = this.incomeList.indexOf(item); | 635 | this.editedIndex = this.incomeList.indexOf(item); |
| 636 | this.editedItem = Object.assign({}, item); | 636 | this.editedItem = Object.assign({}, item); |
| 637 | this.profileIncomeDialog = true; | 637 | this.profileIncomeDialog = true; |
| 638 | }, | 638 | }, |
| 639 | deleteItem(item) { | 639 | deleteItem(item) { |
| 640 | let deleteIncome = { | 640 | let deleteIncome = { |
| 641 | incomeId: item._id, | 641 | incomeId: item._id, |
| 642 | }; | 642 | }; |
| 643 | http() | 643 | http() |
| 644 | .delete( | 644 | .delete( |
| 645 | "/deleteIncome", | 645 | "/deleteIncome", |
| 646 | confirm("Are you sure you want to delete this?") && { | 646 | confirm("Are you sure you want to delete this?") && { |
| 647 | params: deleteIncome, | 647 | params: deleteIncome, |
| 648 | } | 648 | } |
| 649 | ) | 649 | ) |
| 650 | .then((response) => { | 650 | .then((response) => { |
| 651 | // console.log("deleteUers",deleteTeachers) | 651 | // console.log("deleteUers",deleteTeachers) |
| 652 | if ((this.snackbar = true)) { | 652 | if ((this.snackbar = true)) { |
| 653 | this.text = "Successfully delete Existing Income"; | 653 | this.text = "Successfully delete Existing Income"; |
| 654 | } | 654 | } |
| 655 | this.getIncomeList(); | 655 | this.getIncomeList(); |
| 656 | }) | 656 | }) |
| 657 | .catch((error) => { | 657 | .catch((error) => { |
| 658 | console.log(error); | 658 | console.log(error); |
| 659 | }); | 659 | }); |
| 660 | }, | 660 | }, |
| 661 | close() { | 661 | close() { |
| 662 | this.editIncomeDialog = false; | 662 | this.editIncomeDialog = false; |
| 663 | }, | 663 | }, |
| 664 | close1() { | 664 | close1() { |
| 665 | this.dialog1 = false; | 665 | this.dialog1 = false; |
| 666 | }, | 666 | }, |
| 667 | closeAddIncomeModel() { | 667 | closeAddIncomeModel() { |
| 668 | this.addIncomeDialog = false; | 668 | this.addIncomeDialog = false; |
| 669 | this.addIncome = []; | 669 | this.addIncome = []; |
| 670 | this.menu1 = false; | 670 | this.menu1 = false; |
| 671 | this.imageName = ""; | 671 | this.imageName = ""; |
| 672 | this.imageUrl = ""; | 672 | this.imageUrl = ""; |
| 673 | this.imageFile = ""; | 673 | this.imageFile = ""; |
| 674 | }, | 674 | }, |
| 675 | submit() { | 675 | submit() { |
| 676 | if (this.$refs.form.validate()) { | 676 | if (this.$refs.form.validate()) { |
| 677 | if (this.imageUrl) { | 677 | if (this.imageUrl) { |
| 678 | var str = this.imageUrl; | 678 | var str = this.imageUrl; |
| 679 | const [baseUrl, imageUrl] = str.split(/,/); | 679 | const [baseUrl, imageUrl] = str.split(/,/); |
| 680 | this.addIncome.upload = imageUrl; | 680 | this.addIncome.upload = imageUrl; |
| 681 | } | 681 | } |
| 682 | this.loading = true; | 682 | this.loading = true; |
| 683 | // this.addIncome = this.$store.state.schoolId; | 683 | // this.addIncome = this.$store.state.schoolId; |
| 684 | http() | 684 | http() |
| 685 | .post("/createIncome", this.addIncome) | 685 | .post("/createIncome", this.addIncome) |
| 686 | .then((response) => { | 686 | .then((response) => { |
| 687 | this.getIncomeList(); | 687 | this.getIncomeList(); |
| 688 | this.snackbar = true; | 688 | this.snackbar = true; |
| 689 | this.text = response.data.message; | 689 | this.text = response.data.message; |
| 690 | this.color = "green"; | 690 | this.color = "green"; |
| 691 | this.addIncomeDialog = false; | 691 | this.addIncomeDialog = false; |
| 692 | this.clear(); | 692 | this.clear(); |
| 693 | this.loading = false; | 693 | this.loading = false; |
| 694 | }) | 694 | }) |
| 695 | .catch((error) => { | 695 | .catch((error) => { |
| 696 | // console.log(error); | 696 | // console.log(error); |
| 697 | this.loading = false; | 697 | this.loading = false; |
| 698 | this.snackbar = true; | 698 | this.snackbar = true; |
| 699 | this.color = "error"; | 699 | this.color = "error"; |
| 700 | this.text = error.response.data.message; | 700 | this.text = error.response.data.message; |
| 701 | }); | 701 | }); |
| 702 | } | 702 | } |
| 703 | }, | 703 | }, |
| 704 | clear() { | 704 | clear() { |
| 705 | this.$refs.form.reset(); | 705 | this.$refs.form.reset(); |
| 706 | }, | 706 | }, |
| 707 | save() { | 707 | save() { |
| 708 | this.loading = true; | 708 | this.loading = true; |
| 709 | this.editedItem.incomeId = this.editedItem._id; | 709 | this.editedItem.incomeId = this.editedItem._id; |
| 710 | if (this.imageUrl) { | 710 | if (this.imageUrl) { |
| 711 | var str = this.imageUrl; | 711 | var str = this.imageUrl; |
| 712 | const [baseUrl, imageUrl] = str.split(/,/); | 712 | const [baseUrl, imageUrl] = str.split(/,/); |
| 713 | this.editedItem.upload = imageUrl; | 713 | this.editedItem.upload = imageUrl; |
| 714 | } | 714 | } |
| 715 | http() | 715 | http() |
| 716 | .put("/updateIncome", this.editedItem) | 716 | .put("/updateIncome", this.editedItem) |
| 717 | .then((response) => { | 717 | .then((response) => { |
| 718 | this.snackbar = true; | 718 | this.snackbar = true; |
| 719 | this.text = response.data.message; | 719 | this.text = response.data.message; |
| 720 | this.color = "green"; | 720 | this.color = "green"; |
| 721 | this.loading = false; | 721 | this.loading = false; |
| 722 | this.getIncomeList(); | 722 | this.getIncomeList(); |
| 723 | this.close(); | 723 | this.close(); |
| 724 | }) | 724 | }) |
| 725 | .catch((error) => { | 725 | .catch((error) => { |
| 726 | this.loading = false; | 726 | this.loading = false; |
| 727 | this.snackbar = true; | 727 | this.snackbar = true; |
| 728 | this.color = "error"; | 728 | this.color = "error"; |
| 729 | this.loading = false; | 729 | this.loading = false; |
| 730 | }); | 730 | }); |
| 731 | }, | 731 | }, |
| 732 | 732 | ||
| 733 | displaySearch() { | 733 | displaySearch() { |
| 734 | (this.show = false), (this.showSearch = true); | 734 | (this.show = false), (this.showSearch = true); |
| 735 | }, | 735 | }, |
| 736 | closeSearch() { | 736 | closeSearch() { |
| 737 | this.showSearch = false; | 737 | this.showSearch = false; |
| 738 | this.show = true; | 738 | this.show = true; |
| 739 | this.search = ""; | 739 | this.search = ""; |
| 740 | }, | 740 | }, |
| 741 | }, | 741 | }, |
| 742 | mounted() { | 742 | mounted() { |
| 743 | this.getIncomeList(); | 743 | this.getIncomeList(); |
| 744 | }, | 744 | }, |
| 745 | }; | 745 | }; |
| 746 | </script> | 746 | </script> |
src/pages/Account/invoice.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit INVOICE ****** --> | 3 | <!-- ****** Edit INVOICE ****** --> |
| 4 | <v-dialog v-model="editInvoiceDialog"> | 4 | <v-dialog v-model="editInvoiceDialog" persistent> |
| 5 | <v-card flat class="text-xs-center white--text"> | 5 | <v-card flat class="text-xs-center white--text"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12 class="card-styles pa-2"> | 7 | <v-flex xs12 class="card-styles pa-2"> |
| 8 | <label class="title text-xs-center">Edit Invoice</label> | 8 | <label class="title text-xs-center">Edit Invoice</label> |
| 9 | <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> | 12 | <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" /> |
| 13 | </v-card> | 13 | </v-card> |
| 14 | </v-dialog> | 14 | </v-dialog> |
| 15 | 15 | ||
| 16 | <!-- ****PAYMENT INVOICE DIALOG --> | 16 | <!-- ****PAYMENT INVOICE DIALOG --> |
| 17 | <v-dialog v-model="paymentInvoiceDialog"> | 17 | <v-dialog v-model="paymentInvoiceDialog" persistent> |
| 18 | <v-card flat class="text-xs-center white--text"> | 18 | <v-card flat class="text-xs-center white--text"> |
| 19 | <v-layout> | 19 | <v-layout> |
| 20 | <v-flex xs12 class="card-styles pa-2"> | 20 | <v-flex xs12 class="card-styles pa-2"> |
| 21 | <label class="title text-xs-center">Payment Template</label> | 21 | <label class="title text-xs-center">Payment Template</label> |
| 22 | <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> | 22 | <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> | 25 | <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" /> |
| 26 | </v-card> | 26 | </v-card> |
| 27 | </v-dialog> | 27 | </v-dialog> |
| 28 | 28 | ||
| 29 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> | 29 | <!-- ****** PROFILE VIEW SECTION DATA ****** --> |
| 30 | 30 | ||
| 31 | <v-dialog v-model="dialog1" max-width="800px"> | 31 | <v-dialog v-model="dialog1" max-width="800px" persistent> |
| 32 | <v-card flat class="text-xs-center white--text"> | 32 | <v-card flat class="text-xs-center white--text"> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs12 class="card-style pa-2"> | 34 | <v-flex xs12 class="card-style pa-2"> |
| 35 | <label class="title text-xs-center">View Payments</label> | 35 | <label class="title text-xs-center">View Payments</label> |
| 36 | <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> | 36 | <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | <table class="feeTypeTable tableRsponsive"> | 39 | <table class="feeTypeTable tableRsponsive"> |
| 40 | <tr style="color: black"> | 40 | <tr style="color: black"> |
| 41 | <th>#</th> | 41 | <th>#</th> |
| 42 | <th>Date</th> | 42 | <th>Date</th> |
| 43 | <th>Paid By</th> | 43 | <th>Paid By</th> |
| 44 | <th>Payment Amount</th> | 44 | <th>Payment Amount</th> |
| 45 | <th>Weaver</th> | 45 | <th>Weaver</th> |
| 46 | <th>Action</th> | 46 | <th>Action</th> |
| 47 | </tr> | 47 | </tr> |
| 48 | <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> | 48 | <tr v-if="editedItem.paymentStatus != 'NOT_PAID'"> |
| 49 | <td style="width:40px ; color:black" class="tdFeeType">1</td> | 49 | <td style="width:40px ; color:black" class="tdFeeType">1</td> |
| 50 | <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> | 50 | <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td> |
| 51 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> | 51 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td> |
| 52 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> | 52 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td> |
| 53 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> | 53 | <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td> |
| 54 | <td class="text-xs-center td td-row"> | 54 | <td class="text-xs-center td td-row"> |
| 55 | <router-link | 55 | <router-link |
| 56 | :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" | 56 | :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }" |
| 57 | > | 57 | > |
| 58 | <v-tooltip top> | 58 | <v-tooltip top> |
| 59 | <img | 59 | <img |
| 60 | slot="activator" | 60 | slot="activator" |
| 61 | style="cursor:pointer; width:25px; height:25px; " | 61 | style="cursor:pointer; width:25px; height:25px; " |
| 62 | class="mr-3" | 62 | class="mr-3" |
| 63 | src="/static/icon/view.png" | 63 | src="/static/icon/view.png" |
| 64 | /> | 64 | /> |
| 65 | <span>View</span> | 65 | <span>View</span> |
| 66 | </v-tooltip> | 66 | </v-tooltip> |
| 67 | </router-link> | 67 | </router-link> |
| 68 | <v-tooltip top> | 68 | <v-tooltip top> |
| 69 | <img | 69 | <img |
| 70 | slot="activator" | 70 | slot="activator" |
| 71 | style="cursor:pointer;width:20px; height:20px; " | 71 | style="cursor:pointer;width:20px; height:20px; " |
| 72 | class="mr-3" | 72 | class="mr-3" |
| 73 | @click="deletePayment(editedItem)" | 73 | @click="deletePayment(editedItem)" |
| 74 | src="/static/icon/delete.png" | 74 | src="/static/icon/delete.png" |
| 75 | /> | 75 | /> |
| 76 | <span>Delete</span> | 76 | <span>Delete</span> |
| 77 | </v-tooltip> | 77 | </v-tooltip> |
| 78 | </td> | 78 | </td> |
| 79 | </tr> | 79 | </tr> |
| 80 | <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> | 80 | <tr v-if="editedItem.paymentStatus == 'NOT_PAID'"> |
| 81 | <td style="width:40px ; color:black" class="tdFeeType'">-</td> | 81 | <td style="width:40px ; color:black" class="tdFeeType'">-</td> |
| 82 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 82 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 83 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 83 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 84 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 84 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 85 | <td style="width:120px; color:black" class="tdFeeType">-</td> | 85 | <td style="width:120px; color:black" class="tdFeeType">-</td> |
| 86 | <td class="text-xs-center td td-row"></td> | 86 | <td class="text-xs-center td td-row"></td> |
| 87 | </tr> | 87 | </tr> |
| 88 | </table> | 88 | </table> |
| 89 | </v-card> | 89 | </v-card> |
| 90 | </v-dialog> | 90 | </v-dialog> |
| 91 | 91 | ||
| 92 | <!-- ****** Invoice Table ****** --> | 92 | <!-- ****** Invoice Table ****** --> |
| 93 | <v-toolbar color="transparent" flat> | 93 | <v-toolbar color="transparent" flat> |
| 94 | <v-btn | 94 | <v-btn |
| 95 | fab | 95 | fab |
| 96 | dark | 96 | dark |
| 97 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 97 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 98 | small | 98 | small |
| 99 | @click="addInvoiceDialog = true" | 99 | @click="addInvoiceDialog = true" |
| 100 | > | 100 | > |
| 101 | <v-icon dark>add</v-icon> | 101 | <v-icon dark>add</v-icon> |
| 102 | </v-btn> | 102 | </v-btn> |
| 103 | <v-btn | 103 | <v-btn |
| 104 | round | 104 | round |
| 105 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 105 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 106 | dark | 106 | dark |
| 107 | @click="addInvoiceDialog = true" | 107 | @click="addInvoiceDialog = true" |
| 108 | > | 108 | > |
| 109 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice | 109 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice |
| 110 | </v-btn> | 110 | </v-btn> |
| 111 | <v-spacer></v-spacer> | 111 | <v-spacer></v-spacer> |
| 112 | <v-card-title class="body-1" v-show="show"> | 112 | <v-card-title class="body-1" v-show="show"> |
| 113 | <v-btn icon large flat @click="displaySearch"> | 113 | <v-btn icon large flat @click="displaySearch"> |
| 114 | <v-avatar size="27"> | 114 | <v-avatar size="27"> |
| 115 | <img src="/static/icon/search.png" alt="icon" /> | 115 | <img src="/static/icon/search.png" alt="icon" /> |
| 116 | </v-avatar> | 116 | </v-avatar> |
| 117 | </v-btn> | 117 | </v-btn> |
| 118 | </v-card-title> | 118 | </v-card-title> |
| 119 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 119 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 120 | <v-layout> | 120 | <v-layout> |
| 121 | <v-text-field | 121 | <v-text-field |
| 122 | autofocus | 122 | autofocus |
| 123 | v-model="search" | 123 | v-model="search" |
| 124 | label="Search" | 124 | label="Search" |
| 125 | prepend-inner-icon="search" | 125 | prepend-inner-icon="search" |
| 126 | color="primary" | 126 | color="primary" |
| 127 | ></v-text-field> | 127 | ></v-text-field> |
| 128 | <v-icon @click="closeSearch" color="error">close</v-icon> | 128 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-toolbar> | 131 | </v-toolbar> |
| 132 | <v-data-table | 132 | <v-data-table |
| 133 | :headers="headers" | 133 | :headers="headers" |
| 134 | :items="invoiceList" | 134 | :items="invoiceList" |
| 135 | :pagination.sync="pagination" | 135 | :pagination.sync="pagination" |
| 136 | :search="search" | 136 | :search="search" |
| 137 | > | 137 | > |
| 138 | <template slot="items" slot-scope="props"> | 138 | <template slot="items" slot-scope="props"> |
| 139 | <tr class="tr"> | 139 | <tr class="tr"> |
| 140 | <td class="td td-row">{{ props.index + 1 }}</td> | 140 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 141 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> | 141 | <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> |
| 142 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> | 142 | <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> |
| 143 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> | 143 | <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> |
| 144 | <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> | 144 | <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td> |
| 145 | <td | 145 | <td |
| 146 | class="text-xs-center td td-row" | 146 | class="text-xs-center td td-row" |
| 147 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> | 147 | >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> |
| 148 | <td | 148 | <td |
| 149 | class="text-xs-center td td-row" | 149 | class="text-xs-center td td-row" |
| 150 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> | 150 | >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> |
| 151 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> | 151 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 152 | <span | 152 | <span |
| 153 | class="red lighten-1 py-1 px-2 white--text paymentStatus" | 153 | class="red lighten-1 py-1 px-2 white--text paymentStatus" |
| 154 | >{{ props.item.paymentStatus }}</span> | 154 | >{{ props.item.paymentStatus }}</span> |
| 155 | </td> | 155 | </td> |
| 156 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> | 156 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> |
| 157 | <span | 157 | <span |
| 158 | class="green lighten-1 py-1 px-2 white--text paymentStatus" | 158 | class="green lighten-1 py-1 px-2 white--text paymentStatus" |
| 159 | >{{ props.item.paymentStatus }}</span> | 159 | >{{ props.item.paymentStatus }}</span> |
| 160 | </td> | 160 | </td> |
| 161 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> | 161 | <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> |
| 162 | <span | 162 | <span |
| 163 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" | 163 | class="yellow darken-3 py-1 px-2 white--text paymentStatus" |
| 164 | >{{ props.item.paymentStatus }}</span> | 164 | >{{ props.item.paymentStatus }}</span> |
| 165 | </td> | 165 | </td> |
| 166 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> | 166 | <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> |
| 167 | <td class="text-xs-center td td-row"> | 167 | <td class="text-xs-center td td-row"> |
| 168 | <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> | 168 | <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> |
| 169 | <v-tooltip top> | 169 | <v-tooltip top> |
| 170 | <img | 170 | <img |
| 171 | slot="activator" | 171 | slot="activator" |
| 172 | style="cursor:pointer; width:25px; height:25px; " | 172 | style="cursor:pointer; width:25px; height:25px; " |
| 173 | class="mr-3" | 173 | class="mr-3" |
| 174 | src="/static/icon/view.png" | 174 | src="/static/icon/view.png" |
| 175 | /> | 175 | /> |
| 176 | <span>View</span> | 176 | <span>View</span> |
| 177 | </v-tooltip> | 177 | </v-tooltip> |
| 178 | </router-link> | 178 | </router-link> |
| 179 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> | 179 | <span v-if="props.item.paymentStatus === 'NOT_PAID'"> |
| 180 | <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> | 180 | <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }"> |
| 181 | <v-tooltip top> | 181 | <v-tooltip top> |
| 182 | <img | 182 | <img |
| 183 | slot="activator" | 183 | slot="activator" |
| 184 | style="cursor:pointer; width:20px; height:18px; " | 184 | style="cursor:pointer; width:20px; height:18px; " |
| 185 | class="mr-3" | 185 | class="mr-3" |
| 186 | @click="editItem(props.item)" | 186 | @click="editItem(props.item)" |
| 187 | src="/static/icon/edit.png" | 187 | src="/static/icon/edit.png" |
| 188 | /> | 188 | /> |
| 189 | <span>Edit</span> | 189 | <span>Edit</span> |
| 190 | </v-tooltip> | 190 | </v-tooltip> |
| 191 | </router-link>--> | 191 | </router-link>--> |
| 192 | <v-tooltip top> | 192 | <v-tooltip top> |
| 193 | <img | 193 | <img |
| 194 | slot="activator" | 194 | slot="activator" |
| 195 | style="cursor:pointer; width:20px; height:18px; " | 195 | style="cursor:pointer; width:20px; height:18px; " |
| 196 | class="mr-3" | 196 | class="mr-3" |
| 197 | @click="editItem(props.item)" | 197 | @click="editItem(props.item)" |
| 198 | src="/static/icon/edit.png" | 198 | src="/static/icon/edit.png" |
| 199 | /> | 199 | /> |
| 200 | <span>Edit</span> | 200 | <span>Edit</span> |
| 201 | </v-tooltip> | 201 | </v-tooltip> |
| 202 | <v-tooltip top> | 202 | <v-tooltip top> |
| 203 | <img | 203 | <img |
| 204 | slot="activator" | 204 | slot="activator" |
| 205 | style="cursor:pointer;width:20px; height:20px; " | 205 | style="cursor:pointer;width:20px; height:20px; " |
| 206 | class="mr-3" | 206 | class="mr-3" |
| 207 | @click="deleteItem(props.item)" | 207 | @click="deleteItem(props.item)" |
| 208 | src="/static/icon/delete.png" | 208 | src="/static/icon/delete.png" |
| 209 | /> | 209 | /> |
| 210 | <span>Delete</span> | 210 | <span>Delete</span> |
| 211 | </v-tooltip> | 211 | </v-tooltip> |
| 212 | <v-tooltip top> | 212 | <v-tooltip top> |
| 213 | <img | 213 | <img |
| 214 | slot="activator" | 214 | slot="activator" |
| 215 | style="cursor:pointer; width:20px; height:18px; " | 215 | style="cursor:pointer; width:20px; height:18px; " |
| 216 | class="mr-3" | 216 | class="mr-3" |
| 217 | @click="paymentItem(props.item)" | 217 | @click="paymentItem(props.item)" |
| 218 | src="/static/schoolIcons/Account.png" | 218 | src="/static/schoolIcons/Account.png" |
| 219 | /> | 219 | /> |
| 220 | <span>Payment</span> | 220 | <span>Payment</span> |
| 221 | </v-tooltip> | 221 | </v-tooltip> |
| 222 | </span> | 222 | </span> |
| 223 | <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> | 223 | <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> |
| 224 | <v-tooltip top> | 224 | <v-tooltip top> |
| 225 | <img | 225 | <img |
| 226 | slot="activator" | 226 | slot="activator" |
| 227 | style="cursor:pointer; width:20px; height:18px; " | 227 | style="cursor:pointer; width:20px; height:18px; " |
| 228 | class="mr-3" | 228 | class="mr-3" |
| 229 | @click="paymentItem(props.item)" | 229 | @click="paymentItem(props.item)" |
| 230 | src="/static/schoolIcons/Account.png" | 230 | src="/static/schoolIcons/Account.png" |
| 231 | /> | 231 | /> |
| 232 | <span>Payment</span> | 232 | <span>Payment</span> |
| 233 | </v-tooltip> | 233 | </v-tooltip> |
| 234 | </span> | 234 | </span> |
| 235 | <v-tooltip top> | 235 | <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:18px; height:17px;" | 238 | style="cursor:pointer; width:18px; height:17px;" |
| 239 | @click="profile(props.item)" | 239 | @click="profile(props.item)" |
| 240 | src="/static/icon/eye1.png" | 240 | src="/static/icon/eye1.png" |
| 241 | /> | 241 | /> |
| 242 | <span>View Payment</span> | 242 | <span>View Payment</span> |
| 243 | </v-tooltip> | 243 | </v-tooltip> |
| 244 | </td> | 244 | </td> |
| 245 | </tr> | 245 | </tr> |
| 246 | </template> | 246 | </template> |
| 247 | <v-alert | 247 | <v-alert |
| 248 | slot="no-results" | 248 | slot="no-results" |
| 249 | :value="true" | 249 | :value="true" |
| 250 | color="error" | 250 | color="error" |
| 251 | icon="warning" | 251 | icon="warning" |
| 252 | >Your search for "{{ search }}" found no results.</v-alert> | 252 | >Your search for "{{ search }}" found no results.</v-alert> |
| 253 | </v-data-table> | 253 | </v-data-table> |
| 254 | 254 | ||
| 255 | <!-- ****** ADD INVOICE ****** --> | 255 | <!-- ****** ADD INVOICE ****** --> |
| 256 | <v-snackbar | 256 | <v-snackbar |
| 257 | :timeout="timeout" | 257 | :timeout="timeout" |
| 258 | :top="y === 'top'" | 258 | :top="y === 'top'" |
| 259 | :right="x === 'right'" | 259 | :right="x === 'right'" |
| 260 | :vertical="mode === 'vertical'" | 260 | :vertical="mode === 'vertical'" |
| 261 | v-model="snackbar" | 261 | v-model="snackbar" |
| 262 | :color="color" | 262 | :color="color" |
| 263 | >{{ text }}</v-snackbar> | 263 | >{{ text }}</v-snackbar> |
| 264 | <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog"> | 264 | <v-dialog v-model="addInvoiceDialog" v-if="addInvoiceDialog" persistent> |
| 265 | <v-card flat class="text-xs-center white--text"> | 265 | <v-card flat class="text-xs-center white--text"> |
| 266 | <v-layout> | 266 | <v-layout> |
| 267 | <v-flex xs12 class="card-styles pa-2"> | 267 | <v-flex xs12 class="card-styles pa-2"> |
| 268 | <label class="title text-xs-center">Add Invoice</label> | 268 | <label class="title text-xs-center">Add Invoice</label> |
| 269 | <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon> | 269 | <v-icon size="24" class="right white--text" @click="closeAddInvoiceModel">cancel</v-icon> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | <v-flex xs12 sm12> | 272 | <v-flex xs12 sm12> |
| 273 | <v-container fluid grid-list-md> | 273 | <v-container fluid grid-list-md> |
| 274 | <v-layout wrap> | 274 | <v-layout wrap> |
| 275 | <v-flex xs12 sm12 md5> | 275 | <v-flex xs12 sm12 md5> |
| 276 | <v-card flat> | 276 | <v-card flat> |
| 277 | <v-toolbar dark class="card-styles" flat> | 277 | <v-toolbar dark class="card-styles" flat> |
| 278 | <v-spacer></v-spacer> | 278 | <v-spacer></v-spacer> |
| 279 | <h3>Invoice</h3> | 279 | <h3>Invoice</h3> |
| 280 | <v-spacer></v-spacer> | 280 | <v-spacer></v-spacer> |
| 281 | </v-toolbar> | 281 | </v-toolbar> |
| 282 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 282 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 283 | <v-layout> | 283 | <v-layout> |
| 284 | <v-flex xs4 class="pt-4 subheading"> | 284 | <v-flex xs4 class="pt-4 subheading"> |
| 285 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 285 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 286 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 286 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 287 | </v-flex> | 287 | </v-flex> |
| 288 | <v-flex xs6 class="ml-3"> | 288 | <v-flex xs6 class="ml-3"> |
| 289 | <v-select | 289 | <v-select |
| 290 | :items="addclass" | 290 | :items="addclass" |
| 291 | label="Select Class" | 291 | label="Select Class" |
| 292 | v-model="invoiceData.classNum" | 292 | v-model="invoiceData.classNum" |
| 293 | item-text="classNum" | 293 | item-text="classNum" |
| 294 | item-value="_id" | 294 | item-value="_id" |
| 295 | @change="getAllStudents()" | 295 | @change="getAllStudents()" |
| 296 | :rules="classRules" | 296 | :rules="classRules" |
| 297 | required | 297 | required |
| 298 | ></v-select> | 298 | ></v-select> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs4 class="pt-4 subheading"> | 302 | <v-flex xs4 class="pt-4 subheading"> |
| 303 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> | 303 | <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> |
| 304 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> | 304 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | <v-flex xs6 class="ml-3"> | 306 | <v-flex xs6 class="ml-3"> |
| 307 | <v-select | 307 | <v-select |
| 308 | :items="studentList" | 308 | :items="studentList" |
| 309 | label="Select Student" | 309 | label="Select Student" |
| 310 | v-model="invoiceData.studentId" | 310 | v-model="invoiceData.studentId" |
| 311 | item-text="name" | 311 | item-text="name" |
| 312 | item-value="_id" | 312 | item-value="_id" |
| 313 | :rules="inchargeRules" | 313 | :rules="inchargeRules" |
| 314 | @change="selectAllStudent()" | 314 | @change="selectAllStudent()" |
| 315 | required | 315 | required |
| 316 | ></v-select> | 316 | ></v-select> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | </v-layout> | 318 | </v-layout> |
| 319 | <v-layout> | 319 | <v-layout> |
| 320 | <v-flex xs4 class="pt-4 subheading"> | 320 | <v-flex xs4 class="pt-4 subheading"> |
| 321 | <label class="right">Date:</label> | 321 | <label class="right">Date:</label> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | <v-flex xs6 class="ml-3"> | 323 | <v-flex xs6 class="ml-3"> |
| 324 | <v-menu | 324 | <v-menu |
| 325 | ref="menu1" | 325 | ref="menu1" |
| 326 | :close-on-content-click="false" | 326 | :close-on-content-click="false" |
| 327 | v-model="menu1" | 327 | v-model="menu1" |
| 328 | :nudge-right="40" | 328 | :nudge-right="40" |
| 329 | lazy | 329 | lazy |
| 330 | :return-value.sync="invoiceData.date" | 330 | :return-value.sync="invoiceData.date" |
| 331 | transition="scale-transition" | 331 | transition="scale-transition" |
| 332 | offset-y | 332 | offset-y |
| 333 | full-width | 333 | full-width |
| 334 | min-width="290px" | 334 | min-width="290px" |
| 335 | > | 335 | > |
| 336 | <v-text-field | 336 | <v-text-field |
| 337 | slot="activator" | 337 | slot="activator" |
| 338 | :rules="dateRules" | 338 | :rules="dateRules" |
| 339 | v-model="invoiceData.date" | 339 | v-model="invoiceData.date" |
| 340 | placeholder="Select date" | 340 | placeholder="Select date" |
| 341 | ></v-text-field> | 341 | ></v-text-field> |
| 342 | <v-date-picker | 342 | <v-date-picker |
| 343 | v-model="invoiceData.date" | 343 | v-model="invoiceData.date" |
| 344 | @input="$refs.menu1.save(invoiceData.date)" | 344 | @input="$refs.menu1.save(invoiceData.date)" |
| 345 | ></v-date-picker> | 345 | ></v-date-picker> |
| 346 | </v-menu> | 346 | </v-menu> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> | 351 | <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> |
| 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> | 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | <v-flex xs6 class="ml-3"> | 354 | <v-flex xs6 class="ml-3"> |
| 355 | <v-select | 355 | <v-select |
| 356 | :items="paymentStatus" | 356 | :items="paymentStatus" |
| 357 | v-model="invoiceData.paymentStatus" | 357 | v-model="invoiceData.paymentStatus" |
| 358 | item-text="name" | 358 | item-text="name" |
| 359 | item-value="value" | 359 | item-value="value" |
| 360 | label="Select Payment Status" | 360 | label="Select Payment Status" |
| 361 | @change="getPayMethodList" | 361 | @change="getPayMethodList" |
| 362 | :rules="paymentStatusRules" | 362 | :rules="paymentStatusRules" |
| 363 | required | 363 | required |
| 364 | ></v-select> | 364 | ></v-select> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-layout> | 366 | </v-layout> |
| 367 | <v-layout v-show="showPayMethods"> | 367 | <v-layout v-show="showPayMethods"> |
| 368 | <v-flex xs4 class="pt-4 subheading"> | 368 | <v-flex xs4 class="pt-4 subheading"> |
| 369 | <label class="right">Payment Method:</label> | 369 | <label class="right">Payment Method:</label> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | <v-flex xs6 class="ml-3"> | 371 | <v-flex xs6 class="ml-3"> |
| 372 | <v-select | 372 | <v-select |
| 373 | :items="paymentMethods" | 373 | :items="paymentMethods" |
| 374 | v-model="invoiceData.paymentMethod" | 374 | v-model="invoiceData.paymentMethod" |
| 375 | :rules="paymentMethodRules" | 375 | :rules="paymentMethodRules" |
| 376 | label="Select Payment Method" | 376 | label="Select Payment Method" |
| 377 | required | 377 | required |
| 378 | ></v-select> | 378 | ></v-select> |
| 379 | </v-flex> | 379 | </v-flex> |
| 380 | </v-layout> | 380 | </v-layout> |
| 381 | <v-layout> | 381 | <v-layout> |
| 382 | <v-flex xs12 sm11> | 382 | <v-flex xs12 sm11> |
| 383 | <v-card-actions> | 383 | <v-card-actions> |
| 384 | <v-spacer></v-spacer> | 384 | <v-spacer></v-spacer> |
| 385 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 385 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 386 | <v-btn | 386 | <v-btn |
| 387 | @click="submit" | 387 | @click="submit" |
| 388 | round | 388 | round |
| 389 | dark | 389 | dark |
| 390 | :loading="loading" | 390 | :loading="loading" |
| 391 | class="add-button" | 391 | class="add-button" |
| 392 | >Add</v-btn> | 392 | >Add</v-btn> |
| 393 | </v-card-actions> | 393 | </v-card-actions> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | </v-layout> | 395 | </v-layout> |
| 396 | </v-form> | 396 | </v-form> |
| 397 | </v-card> | 397 | </v-card> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs12 sm12 md7> | 399 | <v-flex xs12 sm12 md7> |
| 400 | <v-card> | 400 | <v-card> |
| 401 | <v-toolbar dark class="card-styles" flat> | 401 | <v-toolbar dark class="card-styles" flat> |
| 402 | <v-spacer></v-spacer> | 402 | <v-spacer></v-spacer> |
| 403 | <h3>Fee Type List</h3> | 403 | <h3>Fee Type List</h3> |
| 404 | <v-spacer></v-spacer> | 404 | <v-spacer></v-spacer> |
| 405 | </v-toolbar> | 405 | </v-toolbar> |
| 406 | <v-layout> | 406 | <v-layout> |
| 407 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> | 407 | <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 408 | <label class="right title">Fee Type:</label> | 408 | <label class="right title">Fee Type:</label> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs8 sm4> | 410 | <v-flex xs8 sm4> |
| 411 | <v-select | 411 | <v-select |
| 412 | :items="feeTypes" | 412 | :items="feeTypes" |
| 413 | v-model="feeType.feeTypeName" | 413 | v-model="feeType.feeTypeName" |
| 414 | item-text="feeType" | 414 | item-text="feeType" |
| 415 | item-value="feeType" | 415 | item-value="feeType" |
| 416 | label="Select Fee Type" | 416 | label="Select Fee Type" |
| 417 | required | 417 | required |
| 418 | ></v-select> | 418 | ></v-select> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-flex xs4 sm6> | 420 | <v-flex xs4 sm6> |
| 421 | <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn> | 421 | <v-btn round dark class="right add-button" @click="selectFeeType">ADD</v-btn> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | </v-layout> | 423 | </v-layout> |
| 424 | <table class="feeTypeTable tableRsponsive"> | 424 | <table class="feeTypeTable tableRsponsive"> |
| 425 | <tr class="info white--text"> | 425 | <tr class="info white--text"> |
| 426 | <th>#</th> | 426 | <th>#</th> |
| 427 | <th>Fee Type</th> | 427 | <th>Fee Type</th> |
| 428 | <th>Amount</th> | 428 | <th>Amount</th> |
| 429 | <th>Discount</th> | 429 | <th>Discount</th> |
| 430 | <th>Subtotal</th> | 430 | <th>Subtotal</th> |
| 431 | <th>Paid Amount</th> | 431 | <th>Paid Amount</th> |
| 432 | <th>Action</th> | 432 | <th>Action</th> |
| 433 | </tr> | 433 | </tr> |
| 434 | <tr | 434 | <tr |
| 435 | v-show="showFeeType" | 435 | v-show="showFeeType" |
| 436 | v-for="(feeType, index) in feeTypeData" | 436 | v-for="(feeType, index) in feeTypeData" |
| 437 | :key="index" | 437 | :key="index" |
| 438 | v-on:keyup="getAmmountDetails(feeType)" | 438 | v-on:keyup="getAmmountDetails(feeType)" |
| 439 | > | 439 | > |
| 440 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> | 440 | <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> |
| 441 | <td | 441 | <td |
| 442 | style="width:120px" | 442 | style="width:120px" |
| 443 | class="tdFeeType" | 443 | class="tdFeeType" |
| 444 | :rules="feeTypeNameRules" | 444 | :rules="feeTypeNameRules" |
| 445 | >{{ feeType.feeTypeName }}</td> | 445 | >{{ feeType.feeTypeName }}</td> |
| 446 | <td class="tdFeeType"> | 446 | <td class="tdFeeType"> |
| 447 | <v-text-field | 447 | <v-text-field |
| 448 | placeholder="fill your Amount" | 448 | placeholder="fill your Amount" |
| 449 | v-model="feeType.amount" | 449 | v-model="feeType.amount" |
| 450 | type="number" | 450 | type="number" |
| 451 | :rules="amountRules" | 451 | :rules="amountRules" |
| 452 | required | 452 | required |
| 453 | ></v-text-field> | 453 | ></v-text-field> |
| 454 | </td> | 454 | </td> |
| 455 | <td class="tdFeeType"> | 455 | <td class="tdFeeType"> |
| 456 | <v-text-field | 456 | <v-text-field |
| 457 | placeholder="fill your Discount" | 457 | placeholder="fill your Discount" |
| 458 | v-model="feeType.discount" | 458 | v-model="feeType.discount" |
| 459 | type="number" | 459 | type="number" |
| 460 | :rules="discountRules" | 460 | :rules="discountRules" |
| 461 | required | 461 | required |
| 462 | ></v-text-field> | 462 | ></v-text-field> |
| 463 | </td> | 463 | </td> |
| 464 | <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> | 464 | <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td> |
| 465 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> | 465 | <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | placeholder="fill your Paid Amount" | 467 | placeholder="fill your Paid Amount" |
| 468 | v-model="feeType.paidAmount" | 468 | v-model="feeType.paidAmount" |
| 469 | type="number" | 469 | type="number" |
| 470 | :disabled="disabled" | 470 | :disabled="disabled" |
| 471 | ></v-text-field> | 471 | ></v-text-field> |
| 472 | </td> | 472 | </td> |
| 473 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> | 473 | <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> |
| 474 | <v-text-field | 474 | <v-text-field |
| 475 | placeholder="fill your Paid Amount" | 475 | placeholder="fill your Paid Amount" |
| 476 | v-model="feeType.paidAmount" | 476 | v-model="feeType.paidAmount" |
| 477 | type="number" | 477 | type="number" |
| 478 | :disabled="disabled" | 478 | :disabled="disabled" |
| 479 | ></v-text-field> | 479 | ></v-text-field> |
| 480 | </td> | 480 | </td> |
| 481 | <td | 481 | <td |
| 482 | class="tdFeeType" | 482 | class="tdFeeType" |
| 483 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" | 483 | v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" |
| 484 | > | 484 | > |
| 485 | <v-text-field | 485 | <v-text-field |
| 486 | placeholder="fill your Paid Amount" | 486 | placeholder="fill your Paid Amount" |
| 487 | v-model="feeType.paidAmount" | 487 | v-model="feeType.paidAmount" |
| 488 | type="number" | 488 | type="number" |
| 489 | ></v-text-field> | 489 | ></v-text-field> |
| 490 | </td> | 490 | </td> |
| 491 | <td class="tdFeeType"> | 491 | <td class="tdFeeType"> |
| 492 | <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> | 492 | <v-icon color="error" @click="deleteSelectFee(index,feeType)">delete</v-icon> |
| 493 | </td> | 493 | </td> |
| 494 | </tr> | 494 | </tr> |
| 495 | <tfoot> | 495 | <tfoot> |
| 496 | <tr> | 496 | <tr> |
| 497 | <td colspan="2" class="tdFeeType">Total:</td> | 497 | <td colspan="2" class="tdFeeType">Total:</td> |
| 498 | <td class="tdFeeType">{{ feeType.amount }}</td> | 498 | <td class="tdFeeType">{{ feeType.amount }}</td> |
| 499 | <td class="tdFeeType">{{ feeType.discount }}</td> | 499 | <td class="tdFeeType">{{ feeType.discount }}</td> |
| 500 | <td class="tdFeeType">{{ feeType.subTotal }}</td> | 500 | <td class="tdFeeType">{{ feeType.subTotal }}</td> |
| 501 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> | 501 | <td class="tdFeeType">{{ feeType.paidAmount }}</td> |
| 502 | <!-- <td class="tdFeeType"> | 502 | <!-- <td class="tdFeeType"> |
| 503 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> | 503 | <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> |
| 504 | </td>--> | 504 | </td>--> |
| 505 | </tr> | 505 | </tr> |
| 506 | </tfoot> | 506 | </tfoot> |
| 507 | </table> | 507 | </table> |
| 508 | </v-card> | 508 | </v-card> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | </v-layout> | 510 | </v-layout> |
| 511 | </v-container> | 511 | </v-container> |
| 512 | </v-flex> | 512 | </v-flex> |
| 513 | </v-card> | 513 | </v-card> |
| 514 | </v-dialog> | 514 | </v-dialog> |
| 515 | <div class="loader" v-if="showLoader"> | 515 | <div class="loader" v-if="showLoader"> |
| 516 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 516 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 517 | </div> | 517 | </div> |
| 518 | </v-container> | 518 | </v-container> |
| 519 | </template> | 519 | </template> |
| 520 | 520 | ||
| 521 | <script> | 521 | <script> |
| 522 | import http from "@/Services/http.js"; | 522 | import http from "@/Services/http.js"; |
| 523 | import editInvoice from "./editInvoice"; | 523 | import editInvoice from "./editInvoice"; |
| 524 | import paymentTemplate from "./paymentTemplate.vue"; | 524 | import paymentTemplate from "./paymentTemplate.vue"; |
| 525 | import moment from "moment"; | 525 | import moment from "moment"; |
| 526 | 526 | ||
| 527 | export default { | 527 | export default { |
| 528 | components: { | 528 | components: { |
| 529 | editInvoice: editInvoice, | 529 | editInvoice: editInvoice, |
| 530 | paymentTemplate: paymentTemplate, | 530 | paymentTemplate: paymentTemplate, |
| 531 | }, | 531 | }, |
| 532 | data: () => ({ | 532 | data: () => ({ |
| 533 | snackbar: false, | 533 | snackbar: false, |
| 534 | showPayMethods: false, | 534 | showPayMethods: false, |
| 535 | y: "top", | 535 | y: "top", |
| 536 | x: "right", | 536 | x: "right", |
| 537 | mode: "", | 537 | mode: "", |
| 538 | timeout: 5000, | 538 | timeout: 5000, |
| 539 | text: "", | 539 | text: "", |
| 540 | color: "", | 540 | color: "", |
| 541 | show: true, | 541 | show: true, |
| 542 | showSearch: false, | 542 | showSearch: false, |
| 543 | showLoader: false, | 543 | showLoader: false, |
| 544 | loading: false, | 544 | loading: false, |
| 545 | date: null, | 545 | date: null, |
| 546 | search: "", | 546 | search: "", |
| 547 | dialog: false, | 547 | dialog: false, |
| 548 | dialog1: false, | 548 | dialog1: false, |
| 549 | valid: true, | 549 | valid: true, |
| 550 | validEdit: true, | 550 | validEdit: true, |
| 551 | isActive: true, | 551 | isActive: true, |
| 552 | newActive: false, | 552 | newActive: false, |
| 553 | showFeeType: true, | 553 | showFeeType: true, |
| 554 | addInvoiceDialog: false, | 554 | addInvoiceDialog: false, |
| 555 | editInvoiceDialog: false, | 555 | editInvoiceDialog: false, |
| 556 | paymentInvoiceDialog: false, | 556 | paymentInvoiceDialog: false, |
| 557 | disabled: true, | 557 | disabled: true, |
| 558 | details: [], | 558 | details: [], |
| 559 | feeTypes: [], | 559 | feeTypes: [], |
| 560 | invoiceData: [], | 560 | invoiceData: [], |
| 561 | editData: [], | 561 | editData: [], |
| 562 | invoiceList: [], | 562 | invoiceList: [], |
| 563 | editPayment: { | 563 | editPayment: { |
| 564 | studentId: { | 564 | studentId: { |
| 565 | name: "", | 565 | name: "", |
| 566 | rollNo: "", | 566 | rollNo: "", |
| 567 | }, | 567 | }, |
| 568 | classId: { | 568 | classId: { |
| 569 | classNum: "", | 569 | classNum: "", |
| 570 | }, | 570 | }, |
| 571 | }, | 571 | }, |
| 572 | menu1: false, | 572 | menu1: false, |
| 573 | paymentMethods: ["Cash", "Cheque"], | 573 | paymentMethods: ["Cash", "Cheque"], |
| 574 | feeType: { | 574 | feeType: { |
| 575 | amount: "0.00", | 575 | amount: "0.00", |
| 576 | discount: "0.00", | 576 | discount: "0.00", |
| 577 | subTotal: "0.00", | 577 | subTotal: "0.00", |
| 578 | paidAmount: "0.00", | 578 | paidAmount: "0.00", |
| 579 | feeTypeName: "", | 579 | feeTypeName: "", |
| 580 | }, | 580 | }, |
| 581 | 581 | ||
| 582 | feeTypeData: [], | 582 | feeTypeData: [], |
| 583 | editFeeTypeData: [], | 583 | editFeeTypeData: [], |
| 584 | paymentFeeTypeData: [], | 584 | paymentFeeTypeData: [], |
| 585 | pagination: { | 585 | pagination: { |
| 586 | rowsPerPage: 10, | 586 | rowsPerPage: 10, |
| 587 | }, | 587 | }, |
| 588 | classRules: [(v) => !!v || " Class Name is required"], | 588 | classRules: [(v) => !!v || " Class Name is required"], |
| 589 | inchargeRules: [(v) => !!v || "Student Name is required"], | 589 | inchargeRules: [(v) => !!v || "Student Name is required"], |
| 590 | dateRules: [(v) => !!v || " Date is required"], | 590 | dateRules: [(v) => !!v || " Date is required"], |
| 591 | paymentStatusRules: [(v) => !!v || "Payment Status is required"], | 591 | paymentStatusRules: [(v) => !!v || "Payment Status is required"], |
| 592 | paymentMethodsRules: [(v) => !!v || "payment Method is required"], | 592 | paymentMethodsRules: [(v) => !!v || "payment Method is required"], |
| 593 | feeTypeRules: [(v) => !!v || "Fee Type is required"], | 593 | feeTypeRules: [(v) => !!v || "Fee Type is required"], |
| 594 | feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], | 594 | feeTypeNameRules: [(v) => !!v || "Fee Type Name is required"], |
| 595 | amountRules: [(v) => !!v || "Amount is required"], | 595 | amountRules: [(v) => !!v || "Amount is required"], |
| 596 | discountRules: [(v) => !!v || "Discount is required"], | 596 | discountRules: [(v) => !!v || "Discount is required"], |
| 597 | subtotalRules: [(v) => !!v || "Subtotal is required"], | 597 | subtotalRules: [(v) => !!v || "Subtotal is required"], |
| 598 | paymentRules: [(v) => !!v || "Payment is required"], | 598 | paymentRules: [(v) => !!v || "Payment is required"], |
| 599 | paidAmountRules: [(v) => !!v || "Paid Amount is required"], | 599 | paidAmountRules: [(v) => !!v || "Paid Amount is required"], |
| 600 | paymentMethodRules: [], | 600 | paymentMethodRules: [], |
| 601 | headers: [ | 601 | headers: [ |
| 602 | { | 602 | { |
| 603 | text: "No", | 603 | text: "No", |
| 604 | align: "", | 604 | align: "", |
| 605 | sortable: false, | 605 | sortable: false, |
| 606 | value: "No", | 606 | value: "No", |
| 607 | }, | 607 | }, |
| 608 | { | 608 | { |
| 609 | text: "Student", | 609 | text: "Student", |
| 610 | value: "name", | 610 | value: "name", |
| 611 | sortable: false, | 611 | sortable: false, |
| 612 | align: "center", | 612 | align: "center", |
| 613 | }, | 613 | }, |
| 614 | { text: "Class", value: "class", sortable: false, align: "center" }, | 614 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 615 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, | 615 | { text: "Total", value: "subtotal", sortable: false, align: "center" }, |
| 616 | { | 616 | { |
| 617 | text: "Discount", | 617 | text: "Discount", |
| 618 | value: "discount", | 618 | value: "discount", |
| 619 | sortable: false, | 619 | sortable: false, |
| 620 | align: "center", | 620 | align: "center", |
| 621 | }, | 621 | }, |
| 622 | { | 622 | { |
| 623 | text: "Paid Amount", | 623 | text: "Paid Amount", |
| 624 | value: "paidAmount", | 624 | value: "paidAmount", |
| 625 | sortable: false, | 625 | sortable: false, |
| 626 | align: "center", | 626 | align: "center", |
| 627 | }, | 627 | }, |
| 628 | { | 628 | { |
| 629 | text: "Balance", | 629 | text: "Balance", |
| 630 | value: "Balance", | 630 | value: "Balance", |
| 631 | sortable: false, | 631 | sortable: false, |
| 632 | align: "center", | 632 | align: "center", |
| 633 | }, | 633 | }, |
| 634 | { | 634 | { |
| 635 | text: "Status", | 635 | text: "Status", |
| 636 | value: "paymentStatus", | 636 | value: "paymentStatus", |
| 637 | sortable: false, | 637 | sortable: false, |
| 638 | align: "center", | 638 | align: "center", |
| 639 | }, | 639 | }, |
| 640 | { | 640 | { |
| 641 | text: "Date", | 641 | text: "Date", |
| 642 | value: "date", | 642 | value: "date", |
| 643 | sortable: false, | 643 | sortable: false, |
| 644 | align: "center", | 644 | align: "center", |
| 645 | }, | 645 | }, |
| 646 | { text: "Action", value: "", sortable: false, align: "center" }, | 646 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 647 | ], | 647 | ], |
| 648 | 648 | ||
| 649 | studentId: { | 649 | studentId: { |
| 650 | name: "", | 650 | name: "", |
| 651 | }, | 651 | }, |
| 652 | token: "", | 652 | token: "", |
| 653 | editedItem: {}, | 653 | editedItem: {}, |
| 654 | invoiceData: { | 654 | invoiceData: { |
| 655 | paymentStatus: "", | 655 | paymentStatus: "", |
| 656 | students: [], | 656 | students: [], |
| 657 | }, | 657 | }, |
| 658 | addclass: [], | 658 | addclass: [], |
| 659 | studentList: [], | 659 | studentList: [], |
| 660 | paymentStatus: [ | 660 | paymentStatus: [ |
| 661 | { | 661 | { |
| 662 | name: "Not Paid", | 662 | name: "Not Paid", |
| 663 | value: "NOT_PAID", | 663 | value: "NOT_PAID", |
| 664 | }, | 664 | }, |
| 665 | { | 665 | { |
| 666 | name: "Partially Paid", | 666 | name: "Partially Paid", |
| 667 | value: "PARTIALLY_PAID", | 667 | value: "PARTIALLY_PAID", |
| 668 | }, | 668 | }, |
| 669 | { | 669 | { |
| 670 | name: "Fully Paid", | 670 | name: "Fully Paid", |
| 671 | value: "FULLY_PAID", | 671 | value: "FULLY_PAID", |
| 672 | }, | 672 | }, |
| 673 | ], | 673 | ], |
| 674 | }), | 674 | }), |
| 675 | watch: { | 675 | watch: { |
| 676 | addInvoiceDialog: function (val) { | 676 | addInvoiceDialog: function (val) { |
| 677 | if (!val) { | 677 | if (!val) { |
| 678 | this.invoiceData = []; | 678 | this.invoiceData = []; |
| 679 | this.menu1 = false; | 679 | this.menu1 = false; |
| 680 | this.feeType = []; | 680 | this.feeType = []; |
| 681 | this.feeTypeData = []; | 681 | this.feeTypeData = []; |
| 682 | } | 682 | } |
| 683 | }, | 683 | }, |
| 684 | }, | 684 | }, |
| 685 | methods: { | 685 | methods: { |
| 686 | save(date) { | 686 | save(date) { |
| 687 | this.$refs.menu1.save(date); | 687 | this.$refs.menu1.save(date); |
| 688 | }, | 688 | }, |
| 689 | dates: function (date) { | 689 | dates: function (date) { |
| 690 | return moment(date).format("MMMM DD, YYYY"); | 690 | return moment(date).format("MMMM DD, YYYY"); |
| 691 | }, | 691 | }, |
| 692 | profile(item) { | 692 | profile(item) { |
| 693 | // console.log("item", item); | 693 | // console.log("item", item); |
| 694 | this.editedIndex = this.invoiceList.indexOf(item); | 694 | this.editedIndex = this.invoiceList.indexOf(item); |
| 695 | this.editedItem = Object.assign({}, item); | 695 | this.editedItem = Object.assign({}, item); |
| 696 | console.log("editedItem", this.editedItem); | 696 | console.log("editedItem", this.editedItem); |
| 697 | this.dialog1 = true; | 697 | this.dialog1 = true; |
| 698 | }, | 698 | }, |
| 699 | editItem(item) { | 699 | editItem(item) { |
| 700 | this.editedIndex = this.invoiceList.indexOf(item); | 700 | this.editedIndex = this.invoiceList.indexOf(item); |
| 701 | this.editData = Object.assign({}, item); | 701 | this.editData = Object.assign({}, item); |
| 702 | this.editData.date = this.editData.date.slice(0, 10); | 702 | this.editData.date = this.editData.date.slice(0, 10); |
| 703 | // console.log("invoiceData", this.editData); | 703 | // console.log("invoiceData", this.editData); |
| 704 | this.editFeeTypeData = this.editData.feeType; | 704 | this.editFeeTypeData = this.editData.feeType; |
| 705 | this.editInvoiceDialog = true; | 705 | this.editInvoiceDialog = true; |
| 706 | }, | 706 | }, |
| 707 | paymentItem(item) { | 707 | paymentItem(item) { |
| 708 | // console.log("item", item); | 708 | // console.log("item", item); |
| 709 | this.editedIndex = this.invoiceList.indexOf(item); | 709 | this.editedIndex = this.invoiceList.indexOf(item); |
| 710 | this.editPayment = Object.assign({}, item); | 710 | this.editPayment = Object.assign({}, item); |
| 711 | this.editPayment.date = this.editPayment.date.slice(0, 10); | 711 | this.editPayment.date = this.editPayment.date.slice(0, 10); |
| 712 | if (this.editPayment.paymentStatus == "NOT_PAID") { | 712 | if (this.editPayment.paymentStatus == "NOT_PAID") { |
| 713 | for (let i = 0; i < this.editPayment.feeType.length; i++) { | 713 | for (let i = 0; i < this.editPayment.feeType.length; i++) { |
| 714 | this.editPayment.feeType[i].paidAmount = "0.00"; | 714 | this.editPayment.feeType[i].paidAmount = "0.00"; |
| 715 | } | 715 | } |
| 716 | } | 716 | } |
| 717 | // console.log("this.editPayment", this.editPayment); | 717 | // console.log("this.editPayment", this.editPayment); |
| 718 | this.paymentFeeTypeData = this.editPayment.feeType; | 718 | this.paymentFeeTypeData = this.editPayment.feeType; |
| 719 | this.paymentInvoiceDialog = true; | 719 | this.paymentInvoiceDialog = true; |
| 720 | }, | 720 | }, |
| 721 | deleteItem(item) { | 721 | deleteItem(item) { |
| 722 | let deleteInvoice = { | 722 | let deleteInvoice = { |
| 723 | invoiceId: item._id, | 723 | invoiceId: item._id, |
| 724 | }; | 724 | }; |
| 725 | http() | 725 | http() |
| 726 | .delete( | 726 | .delete( |
| 727 | "/deleteInvoice", | 727 | "/deleteInvoice", |
| 728 | confirm("Are you sure you want to delete this?") && { | 728 | confirm("Are you sure you want to delete this?") && { |
| 729 | params: deleteInvoice, | 729 | params: deleteInvoice, |
| 730 | } | 730 | } |
| 731 | ) | 731 | ) |
| 732 | .then((response) => { | 732 | .then((response) => { |
| 733 | this.snackbar = true; | 733 | this.snackbar = true; |
| 734 | this.text = "Successfully delete Existing Invoice"; | 734 | this.text = "Successfully delete Existing Invoice"; |
| 735 | this.color = "green"; | 735 | this.color = "green"; |
| 736 | this.dialog1 = false; | 736 | this.dialog1 = false; |
| 737 | this.getInvoiceList(); | 737 | this.getInvoiceList(); |
| 738 | }) | 738 | }) |
| 739 | .catch((error) => { | 739 | .catch((error) => { |
| 740 | // console.log(error); | 740 | // console.log(error); |
| 741 | }); | 741 | }); |
| 742 | }, | 742 | }, |
| 743 | deletePayment(editedItem) { | 743 | deletePayment(editedItem) { |
| 744 | let deleteInvoice = { | 744 | let deleteInvoice = { |
| 745 | invoiceId: editedItem._id, | 745 | invoiceId: editedItem._id, |
| 746 | }; | 746 | }; |
| 747 | http() | 747 | http() |
| 748 | .put( | 748 | .put( |
| 749 | "/removePayment", | 749 | "/removePayment", |
| 750 | deleteInvoice, | 750 | deleteInvoice, |
| 751 | confirm("Are you sure you want to delete this?") && { | 751 | confirm("Are you sure you want to delete this?") && { |
| 752 | headers: { | 752 | headers: { |
| 753 | Authorization: "Bearer " + this.token, | 753 | Authorization: "Bearer " + this.token, |
| 754 | }, | 754 | }, |
| 755 | } | 755 | } |
| 756 | ) | 756 | ) |
| 757 | .then((response) => { | 757 | .then((response) => { |
| 758 | this.snackbar = true; | 758 | this.snackbar = true; |
| 759 | this.text = "Successfully delete Existing Invoice"; | 759 | this.text = "Successfully delete Existing Invoice"; |
| 760 | this.color = "green"; | 760 | this.color = "green"; |
| 761 | this.dialog1 = false; | 761 | this.dialog1 = false; |
| 762 | this.getInvoiceList(); | 762 | this.getInvoiceList(); |
| 763 | }) | 763 | }) |
| 764 | .catch((error) => { | 764 | .catch((error) => { |
| 765 | // console.log(error); | 765 | // console.log(error); |
| 766 | }); | 766 | }); |
| 767 | }, | 767 | }, |
| 768 | close() { | 768 | close() { |
| 769 | this.dialog = false; | 769 | this.dialog = false; |
| 770 | }, | 770 | }, |
| 771 | closeAddInvoiceModel() { | 771 | closeAddInvoiceModel() { |
| 772 | this.addInvoiceDialog = false; | 772 | this.addInvoiceDialog = false; |
| 773 | this.invoiceData = []; | 773 | this.invoiceData = []; |
| 774 | this.menu1 = false; | 774 | this.menu1 = false; |
| 775 | this.feeType = []; | 775 | this.feeType = []; |
| 776 | this.feeTypeData = []; | 776 | this.feeTypeData = []; |
| 777 | }, | 777 | }, |
| 778 | // totalAmount() { | 778 | // totalAmount() { |
| 779 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); | 779 | // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); |
| 780 | // // console.log( | 780 | // // console.log( |
| 781 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", | 781 | // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", |
| 782 | // // this.feeType.subTotal | 782 | // // this.feeType.subTotal |
| 783 | // // ); | 783 | // // ); |
| 784 | 784 | ||
| 785 | // if (this.feeType.paidAmount < this.feeType.subTotal) { | 785 | // if (this.feeType.paidAmount < this.feeType.subTotal) { |
| 786 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); | 786 | // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); |
| 787 | 787 | ||
| 788 | // this.feeType.paidAmount = this.feeType.subTotal; | 788 | // this.feeType.paidAmount = this.feeType.subTotal; |
| 789 | // console.log( | 789 | // console.log( |
| 790 | // "this.feeType.paidAmount BBBBBBBBBBB", | 790 | // "this.feeType.paidAmount BBBBBBBBBBB", |
| 791 | // this.feeType.paidAmount | 791 | // this.feeType.paidAmount |
| 792 | // ); | 792 | // ); |
| 793 | // } | 793 | // } |
| 794 | // }, | 794 | // }, |
| 795 | submit() { | 795 | submit() { |
| 796 | let feeTypeId = ""; | 796 | let feeTypeId = ""; |
| 797 | for (let i = 0; i < this.feeTypes.length; i++) { | 797 | for (let i = 0; i < this.feeTypes.length; i++) { |
| 798 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { | 798 | if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { |
| 799 | feeTypeId = this.feeTypes[i]._id; | 799 | feeTypeId = this.feeTypes[i]._id; |
| 800 | } | 800 | } |
| 801 | } | 801 | } |
| 802 | if (this.$refs.form.validate()) { | 802 | if (this.$refs.form.validate()) { |
| 803 | let invoiceData = { | 803 | let invoiceData = { |
| 804 | classId: this.invoiceData.classNum, | 804 | classId: this.invoiceData.classNum, |
| 805 | students: this.invoiceData.students, | 805 | students: this.invoiceData.students, |
| 806 | date: this.invoiceData.date, | 806 | date: this.invoiceData.date, |
| 807 | paymentStatus: this.invoiceData.paymentStatus, | 807 | paymentStatus: this.invoiceData.paymentStatus, |
| 808 | paymentMethod: this.invoiceData.paymentMethod, | 808 | paymentMethod: this.invoiceData.paymentMethod, |
| 809 | feeType: this.feeTypeData, | 809 | feeType: this.feeTypeData, |
| 810 | totalAmount: this.feeType.amount.toString(), | 810 | totalAmount: this.feeType.amount.toString(), |
| 811 | totalDiscount: this.feeType.discount.toString(), | 811 | totalDiscount: this.feeType.discount.toString(), |
| 812 | totalSubTotal: this.feeType.subTotal.toString(), | 812 | totalSubTotal: this.feeType.subTotal.toString(), |
| 813 | totalPaidAmount: this.feeType.paidAmount, | 813 | totalPaidAmount: this.feeType.paidAmount, |
| 814 | }; | 814 | }; |
| 815 | 815 | ||
| 816 | if (invoiceData.paymentStatus == "NOT_PAID") { | 816 | if (invoiceData.paymentStatus == "NOT_PAID") { |
| 817 | delete invoiceData.paymentMethod; | 817 | delete invoiceData.paymentMethod; |
| 818 | } | 818 | } |
| 819 | if (this.feeType.paidAmount != "0.00") { | 819 | if (this.feeType.paidAmount != "0.00") { |
| 820 | if (this.feeType.subTotal == this.feeType.paidAmount) { | 820 | if (this.feeType.subTotal == this.feeType.paidAmount) { |
| 821 | invoiceData.paymentStatus = "FULLY_PAID"; | 821 | invoiceData.paymentStatus = "FULLY_PAID"; |
| 822 | // console.log("FULLY_PAID"); | 822 | // console.log("FULLY_PAID"); |
| 823 | } | 823 | } |
| 824 | if (invoiceData.totalPaidAmount) { | 824 | if (invoiceData.totalPaidAmount) { |
| 825 | if (this.feeType.subTotal != this.feeType.paidAmount) { | 825 | if (this.feeType.subTotal != this.feeType.paidAmount) { |
| 826 | invoiceData.paymentStatus = "PARTIALLY_PAID"; | 826 | invoiceData.paymentStatus = "PARTIALLY_PAID"; |
| 827 | // console.log("PARTIALLY_PAID"); | 827 | // console.log("PARTIALLY_PAID"); |
| 828 | } | 828 | } |
| 829 | } | 829 | } |
| 830 | } | 830 | } |
| 831 | 831 | ||
| 832 | if (invoiceData.totalSubTotal == "0.00") { | 832 | if (invoiceData.totalSubTotal == "0.00") { |
| 833 | invoiceData.paymentStatus = "FULLY_PAID"; | 833 | invoiceData.paymentStatus = "FULLY_PAID"; |
| 834 | } else if (invoiceData.totalSubTotal != "0.00") { | 834 | } else if (invoiceData.totalSubTotal != "0.00") { |
| 835 | if (this.feeType.paidAmount === "0.00") { | 835 | if (this.feeType.paidAmount === "0.00") { |
| 836 | invoiceData.paymentStatus = "NOT_PAID"; | 836 | invoiceData.paymentStatus = "NOT_PAID"; |
| 837 | delete invoiceData.paymentMethod; | 837 | delete invoiceData.paymentMethod; |
| 838 | } | 838 | } |
| 839 | } | 839 | } |
| 840 | http() | 840 | http() |
| 841 | .post("/createInvoice", invoiceData) | 841 | .post("/createInvoice", invoiceData) |
| 842 | .then((response) => { | 842 | .then((response) => { |
| 843 | this.getInvoiceList(); | 843 | this.getInvoiceList(); |
| 844 | this.snackbar = true; | 844 | this.snackbar = true; |
| 845 | this.text = "New Invoice added successfully"; | 845 | this.text = "New Invoice added successfully"; |
| 846 | this.color = "green"; | 846 | this.color = "green"; |
| 847 | this.clear(); | 847 | this.clear(); |
| 848 | this.feeTypeData = []; | 848 | this.feeTypeData = []; |
| 849 | if (this.feeTypeData.length == 0) { | 849 | if (this.feeTypeData.length == 0) { |
| 850 | this.feeType = { | 850 | this.feeType = { |
| 851 | amount: "0.00", | 851 | amount: "0.00", |
| 852 | discount: "0.00", | 852 | discount: "0.00", |
| 853 | paidAmount: "0.00", | 853 | paidAmount: "0.00", |
| 854 | subTotal: "0.00", | 854 | subTotal: "0.00", |
| 855 | feeTypeList: "", | 855 | feeTypeList: "", |
| 856 | }; | 856 | }; |
| 857 | } | 857 | } |
| 858 | this.loading = false; | 858 | this.loading = false; |
| 859 | this.addInvoiceDialog = false; | 859 | this.addInvoiceDialog = false; |
| 860 | }) | 860 | }) |
| 861 | .catch((error) => { | 861 | .catch((error) => { |
| 862 | this.snackbar = true; | 862 | this.snackbar = true; |
| 863 | this.text = error.response.data.errors[0].messages[0]; | 863 | this.text = error.response.data.errors[0].messages[0]; |
| 864 | this.color = "error"; | 864 | this.color = "error"; |
| 865 | this.loading = false; | 865 | this.loading = false; |
| 866 | }); | 866 | }); |
| 867 | } | 867 | } |
| 868 | }, | 868 | }, |
| 869 | clear() { | 869 | clear() { |
| 870 | this.$refs.form.reset(); | 870 | this.$refs.form.reset(); |
| 871 | }, | 871 | }, |
| 872 | getInvoiceList() { | 872 | getInvoiceList() { |
| 873 | this.showLoader = true; | 873 | this.showLoader = true; |
| 874 | http() | 874 | http() |
| 875 | .get("/getInvoicesList", { | 875 | .get("/getInvoicesList", { |
| 876 | params: { schoolId: this.$store.state.schoolId }, | 876 | params: { schoolId: this.$store.state.schoolId }, |
| 877 | headers: { Authorization: "Bearer " + this.token }, | 877 | headers: { Authorization: "Bearer " + this.token }, |
| 878 | }) | 878 | }) |
| 879 | .then((response) => { | 879 | .then((response) => { |
| 880 | this.invoiceList = response.data.data; | 880 | this.invoiceList = response.data.data; |
| 881 | this.showLoader = false; | 881 | this.showLoader = false; |
| 882 | }) | 882 | }) |
| 883 | .catch((error) => { | 883 | .catch((error) => { |
| 884 | // console.log("err====>", err); | 884 | // console.log("err====>", err); |
| 885 | this.showLoader = false; | 885 | this.showLoader = false; |
| 886 | if (error.response.status === 401) { | 886 | if (error.response.status === 401) { |
| 887 | this.$router.replace({ path: "/" }); | 887 | this.$router.replace({ path: "/" }); |
| 888 | this.$store.dispatch("setToken", null); | 888 | this.$store.dispatch("setToken", null); |
| 889 | this.$store.dispatch("Id", null); | 889 | this.$store.dispatch("Id", null); |
| 890 | } | 890 | } |
| 891 | }); | 891 | }); |
| 892 | }, | 892 | }, |
| 893 | selectFeeType() { | 893 | selectFeeType() { |
| 894 | this.showFeeType = true; | 894 | this.showFeeType = true; |
| 895 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); | 895 | this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); |
| 896 | }, | 896 | }, |
| 897 | deleteSelectFee: function (index, feeTyp) { | 897 | deleteSelectFee: function (index, feeTyp) { |
| 898 | console.log("---index----", index); | 898 | console.log("---index----", index); |
| 899 | this.feeTypeData.splice(index, 1); | 899 | this.feeTypeData.splice(index, 1); |
| 900 | this.getAmmountDetails(feeTyp); | 900 | this.getAmmountDetails(feeTyp); |
| 901 | if (this.feeTypeData.length == 0) { | 901 | if (this.feeTypeData.length == 0) { |
| 902 | this.feeType = { | 902 | this.feeType = { |
| 903 | amount: "0.00", | 903 | amount: "0.00", |
| 904 | discount: "0.00", | 904 | discount: "0.00", |
| 905 | paidAmount: "0.00", | 905 | paidAmount: "0.00", |
| 906 | subTotal: "0.00", | 906 | subTotal: "0.00", |
| 907 | feeTypeName: "", | 907 | feeTypeName: "", |
| 908 | }; | 908 | }; |
| 909 | } | 909 | } |
| 910 | }, | 910 | }, |
| 911 | getAllClasses() { | 911 | getAllClasses() { |
| 912 | http() | 912 | http() |
| 913 | .get("/getClassesList", { | 913 | .get("/getClassesList", { |
| 914 | params: { schoolId: this.$store.state.schoolId }, | 914 | params: { schoolId: this.$store.state.schoolId }, |
| 915 | headers: { Authorization: "Bearer " + this.token }, | 915 | headers: { Authorization: "Bearer " + this.token }, |
| 916 | }) | 916 | }) |
| 917 | .then((response) => { | 917 | .then((response) => { |
| 918 | this.addclass = response.data.data; | 918 | this.addclass = response.data.data; |
| 919 | }) | 919 | }) |
| 920 | .catch((err) => { | 920 | .catch((err) => { |
| 921 | // console.log("err====>", err); | 921 | // console.log("err====>", err); |
| 922 | // this.$router.replace({ path: "/" }); | 922 | // this.$router.replace({ path: "/" }); |
| 923 | }); | 923 | }); |
| 924 | }, | 924 | }, |
| 925 | getAllStudents() { | 925 | getAllStudents() { |
| 926 | this.showLoader = true; | 926 | this.showLoader = true; |
| 927 | http() | 927 | http() |
| 928 | .get("/getStudentsList", { | 928 | .get("/getStudentsList", { |
| 929 | params: { | 929 | params: { |
| 930 | classId: this.invoiceData.classNum, | 930 | classId: this.invoiceData.classNum, |
| 931 | schoolId: this.$store.state.schoolId, | 931 | schoolId: this.$store.state.schoolId, |
| 932 | }, | 932 | }, |
| 933 | headers: { Authorization: "Bearer " + this.token }, | 933 | headers: { Authorization: "Bearer " + this.token }, |
| 934 | }) | 934 | }) |
| 935 | .then((response) => { | 935 | .then((response) => { |
| 936 | this.studentList = response.data.data.filter((item) => item.status); | 936 | this.studentList = response.data.data.filter((item) => item.status); |
| 937 | this.studentList.unshift({ | 937 | this.studentList.unshift({ |
| 938 | name: "Select All", | 938 | name: "Select All", |
| 939 | _id: "Select All", | 939 | _id: "Select All", |
| 940 | }); | 940 | }); |
| 941 | console.log("=======studentist====", this.studentList); | 941 | console.log("=======studentist====", this.studentList); |
| 942 | this.showLoader = false; | 942 | this.showLoader = false; |
| 943 | }) | 943 | }) |
| 944 | .catch((err) => { | 944 | .catch((err) => { |
| 945 | this.showLoader = false; | 945 | this.showLoader = false; |
| 946 | // console.log("err====>", err); | 946 | // console.log("err====>", err); |
| 947 | // this.$router.replace({ path: "/" }); | 947 | // this.$router.replace({ path: "/" }); |
| 948 | }); | 948 | }); |
| 949 | }, | 949 | }, |
| 950 | getfeeType() { | 950 | getfeeType() { |
| 951 | http() | 951 | http() |
| 952 | .get("/getFeesList", { | 952 | .get("/getFeesList", { |
| 953 | params: { | 953 | params: { |
| 954 | schoolId: this.$store.state.schoolId, | 954 | schoolId: this.$store.state.schoolId, |
| 955 | }, | 955 | }, |
| 956 | headers: { Authorization: "Bearer " + this.token }, | 956 | headers: { Authorization: "Bearer " + this.token }, |
| 957 | }) | 957 | }) |
| 958 | .then((response) => { | 958 | .then((response) => { |
| 959 | this.feeTypes = response.data.data; | 959 | this.feeTypes = response.data.data; |
| 960 | }) | 960 | }) |
| 961 | .catch((err) => { | 961 | .catch((err) => { |
| 962 | // console.log("err====>", err); | 962 | // console.log("err====>", err); |
| 963 | // this.$router.replace({ path: "/" }); | 963 | // this.$router.replace({ path: "/" }); |
| 964 | }); | 964 | }); |
| 965 | }, | 965 | }, |
| 966 | 966 | ||
| 967 | getAmmountDetails(feeTyp) { | 967 | getAmmountDetails(feeTyp) { |
| 968 | let feeType = { | 968 | let feeType = { |
| 969 | amount: "0.00", | 969 | amount: "0.00", |
| 970 | discount: "0.00", | 970 | discount: "0.00", |
| 971 | subTotal: "0.00", | 971 | subTotal: "0.00", |
| 972 | subParticularTotal: "0.00", | 972 | subParticularTotal: "0.00", |
| 973 | paidAmount: "", | 973 | paidAmount: "", |
| 974 | }; | 974 | }; |
| 975 | for (let i = 0; i < this.feeTypeData.length; i++) { | 975 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 976 | // *********** AMOUNT *********** | 976 | // *********** AMOUNT *********** |
| 977 | if (this.feeTypeData[i].amount) { | 977 | if (this.feeTypeData[i].amount) { |
| 978 | feeType.amount = | 978 | feeType.amount = |
| 979 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 979 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 980 | this.feeType.amount = feeType.amount; | 980 | this.feeType.amount = feeType.amount; |
| 981 | this.feeType.subTotal = feeType.amount; | 981 | this.feeType.subTotal = feeType.amount; |
| 982 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; | 982 | this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; |
| 983 | } else if (this.feeTypeData[0].amount == "") { | 983 | } else if (this.feeTypeData[0].amount == "") { |
| 984 | this.feeType.amount = "0.00"; | 984 | this.feeType.amount = "0.00"; |
| 985 | this.feeTypeData[i].subTotal = "0.00"; | 985 | this.feeTypeData[i].subTotal = "0.00"; |
| 986 | this.feeType.subTotal = "0.00"; | 986 | this.feeType.subTotal = "0.00"; |
| 987 | } else if (this.feeTypeData[i].amount == "") { | 987 | } else if (this.feeTypeData[i].amount == "") { |
| 988 | this.feeType.amount = | 988 | this.feeType.amount = |
| 989 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 989 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 990 | this.feeTypeData[i].subTotal = | 990 | this.feeTypeData[i].subTotal = |
| 991 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 991 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 992 | this.feeType.subTotal = | 992 | this.feeType.subTotal = |
| 993 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); | 993 | Number(feeType.amount) + Number(this.feeTypeData[i].amount); |
| 994 | } | 994 | } |
| 995 | // *********** DISCOUNT *********** | 995 | // *********** DISCOUNT *********** |
| 996 | if (this.feeTypeData[i].discount) { | 996 | if (this.feeTypeData[i].discount) { |
| 997 | if ( | 997 | if ( |
| 998 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount | 998 | Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount |
| 999 | ) { | 999 | ) { |
| 1000 | feeType.discount = | 1000 | feeType.discount = |
| 1001 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1001 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1002 | this.feeType.discount = feeType.discount; | 1002 | this.feeType.discount = feeType.discount; |
| 1003 | feeType.subParticularTotal = | 1003 | feeType.subParticularTotal = |
| 1004 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 1004 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 1005 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( | 1005 | this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed( |
| 1006 | 2 | 1006 | 2 |
| 1007 | ); | 1007 | ); |
| 1008 | } else if ( | 1008 | } else if ( |
| 1009 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount | 1009 | Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount |
| 1010 | ) { | 1010 | ) { |
| 1011 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; | 1011 | this.feeTypeData[i].discount = this.feeTypeData[i].amount; |
| 1012 | feeType.discount = | 1012 | feeType.discount = |
| 1013 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1013 | Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1014 | this.feeType.discount = feeType.discount.toString(); | 1014 | this.feeType.discount = feeType.discount.toString(); |
| 1015 | feeType.subParticularTotal = | 1015 | feeType.subParticularTotal = |
| 1016 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; | 1016 | this.feeTypeData[i].amount - this.feeTypeData[i].discount; |
| 1017 | this.feeTypeData[ | 1017 | this.feeTypeData[ |
| 1018 | i | 1018 | i |
| 1019 | ].subTotal = feeType.subParticularTotal.toString(); | 1019 | ].subTotal = feeType.subParticularTotal.toString(); |
| 1020 | } | 1020 | } |
| 1021 | } else if (this.feeTypeData[0].discount == "") { | 1021 | } else if (this.feeTypeData[0].discount == "") { |
| 1022 | this.feeType.discount = "0.00"; | 1022 | this.feeType.discount = "0.00"; |
| 1023 | } | 1023 | } |
| 1024 | // else if (this.feeTypeData[i].discount == "") { | 1024 | // else if (this.feeTypeData[i].discount == "") { |
| 1025 | // this.feeType.discount = | 1025 | // this.feeType.discount = |
| 1026 | // Number(feeType.discount) + Number(this.feeTypeData[i].discount); | 1026 | // Number(feeType.discount) + Number(this.feeTypeData[i].discount); |
| 1027 | // } | 1027 | // } |
| 1028 | 1028 | ||
| 1029 | // *********** SUBTOTAL *********** | 1029 | // *********** SUBTOTAL *********** |
| 1030 | if (this.feeTypeData[i].subTotal) { | 1030 | if (this.feeTypeData[i].subTotal) { |
| 1031 | feeType.subTotal = | 1031 | feeType.subTotal = |
| 1032 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); | 1032 | Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); |
| 1033 | this.feeType.subTotal = feeType.subTotal.toFixed(2); | 1033 | this.feeType.subTotal = feeType.subTotal.toFixed(2); |
| 1034 | } | 1034 | } |
| 1035 | 1035 | ||
| 1036 | // *********** PAID-AMOUNT *********** | 1036 | // *********** PAID-AMOUNT *********** |
| 1037 | if (this.feeTypeData[i].paidAmount) { | 1037 | if (this.feeTypeData[i].paidAmount) { |
| 1038 | feeType.paidAmount = | 1038 | feeType.paidAmount = |
| 1039 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 1039 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 1040 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); | 1040 | this.feeType.paidAmount = feeType.paidAmount.toFixed(2); |
| 1041 | } else if (this.feeTypeData[0].paidAmount == "") { | 1041 | } else if (this.feeTypeData[0].paidAmount == "") { |
| 1042 | this.feeType.paidAmount = "0.00"; | 1042 | this.feeType.paidAmount = "0.00"; |
| 1043 | } else if (this.feeTypeData[i].paidAmount == "") { | 1043 | } else if (this.feeTypeData[i].paidAmount == "") { |
| 1044 | this.feeType.paidAmount = feeType.paidAmount = | 1044 | this.feeType.paidAmount = feeType.paidAmount = |
| 1045 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); | 1045 | Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); |
| 1046 | } | 1046 | } |
| 1047 | 1047 | ||
| 1048 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. | 1048 | // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. |
| 1049 | if (feeType.paidAmount > feeType.subTotal) { | 1049 | if (feeType.paidAmount > feeType.subTotal) { |
| 1050 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; | 1050 | this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; |
| 1051 | this.feeType.paidAmount = feeType.subTotal; | 1051 | this.feeType.paidAmount = feeType.subTotal; |
| 1052 | } | 1052 | } |
| 1053 | } | 1053 | } |
| 1054 | }, | 1054 | }, |
| 1055 | getPayMethodList() { | 1055 | getPayMethodList() { |
| 1056 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { | 1056 | if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { |
| 1057 | this.showPayMethods = true; | 1057 | this.showPayMethods = true; |
| 1058 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 1058 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 1059 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { | 1059 | } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { |
| 1060 | this.showPayMethods = true; | 1060 | this.showPayMethods = true; |
| 1061 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; | 1061 | this.paymentMethodRules = [(v) => !!v || "Payment Method is required"]; |
| 1062 | } else if (this.invoiceData.paymentStatus == "NOT_PAID") { | 1062 | } else if (this.invoiceData.paymentStatus == "NOT_PAID") { |
| 1063 | for (let i = 0; i < this.feeTypeData.length; i++) { | 1063 | for (let i = 0; i < this.feeTypeData.length; i++) { |
| 1064 | this.feeTypeData[i].paidAmount = "0.00"; | 1064 | this.feeTypeData[i].paidAmount = "0.00"; |
| 1065 | this.feeType.paidAmount = "0.00"; | 1065 | this.feeType.paidAmount = "0.00"; |
| 1066 | } | 1066 | } |
| 1067 | this.paymentMethodRules = ""; | 1067 | this.paymentMethodRules = ""; |
| 1068 | this.showPayMethods = false; | 1068 | this.showPayMethods = false; |
| 1069 | } else { | 1069 | } else { |
| 1070 | this.showPayMethods = false; | 1070 | this.showPayMethods = false; |
| 1071 | } | 1071 | } |
| 1072 | }, | 1072 | }, |
| 1073 | selectAllStudent() { | 1073 | selectAllStudent() { |
| 1074 | this.invoiceData.students = []; | 1074 | this.invoiceData.students = []; |
| 1075 | if (this.invoiceData.studentId === "Select All") { | 1075 | if (this.invoiceData.studentId === "Select All") { |
| 1076 | for (let i = 1; i < this.studentList.length; i++) { | 1076 | for (let i = 1; i < this.studentList.length; i++) { |
| 1077 | this.invoiceData.students.push(this.studentList[i]._id); | 1077 | this.invoiceData.students.push(this.studentList[i]._id); |
| 1078 | // console.log("data", this.invoiceData.students); | 1078 | // console.log("data", this.invoiceData.students); |
| 1079 | // data.push(this.studentList[i]._id); | 1079 | // data.push(this.studentList[i]._id); |
| 1080 | // console.log("data", data); | 1080 | // console.log("data", data); |
| 1081 | } | 1081 | } |
| 1082 | } else { | 1082 | } else { |
| 1083 | this.invoiceData.students.push(this.invoiceData.studentId); | 1083 | this.invoiceData.students.push(this.invoiceData.studentId); |
| 1084 | } | 1084 | } |
| 1085 | }, | 1085 | }, |
| 1086 | displaySearch() { | 1086 | displaySearch() { |
| 1087 | this.show = false; | 1087 | this.show = false; |
| 1088 | this.showSearch = true; | 1088 | this.showSearch = true; |
| 1089 | }, | 1089 | }, |
| 1090 | closeSearch() { | 1090 | closeSearch() { |
| 1091 | this.showSearch = false; | 1091 | this.showSearch = false; |
| 1092 | this.show = true; | 1092 | this.show = true; |
| 1093 | this.search = ""; | 1093 | this.search = ""; |
| 1094 | }, | 1094 | }, |
| 1095 | updateDoneInvoice() { | 1095 | updateDoneInvoice() { |
| 1096 | this.editInvoiceDialog = false; | 1096 | this.editInvoiceDialog = false; |
| 1097 | this.getInvoiceList(); | 1097 | this.getInvoiceList(); |
| 1098 | }, | 1098 | }, |
| 1099 | updatePayment() { | 1099 | updatePayment() { |
| 1100 | this.paymentInvoiceDialog = false; | 1100 | this.paymentInvoiceDialog = false; |
| 1101 | this.getInvoiceList(); | 1101 | this.getInvoiceList(); |
| 1102 | this.snackbar = true; | 1102 | this.snackbar = true; |
| 1103 | this.text = "Payment added successfully"; | 1103 | this.text = "Payment added successfully"; |
| 1104 | this.color = "green"; | 1104 | this.color = "green"; |
| 1105 | }, | 1105 | }, |
| 1106 | }, | 1106 | }, |
| 1107 | mounted() { | 1107 | mounted() { |
| 1108 | this.token = this.$store.state.token; | 1108 | this.token = this.$store.state.token; |
| 1109 | this.getInvoiceList(); | 1109 | this.getInvoiceList(); |
| 1110 | this.getAllClasses(); | 1110 | this.getAllClasses(); |
| 1111 | this.getfeeType(); | 1111 | this.getfeeType(); |
| 1112 | this.getAllStudents(); | 1112 | this.getAllStudents(); |
| 1113 | }, | 1113 | }, |
| 1114 | }; | 1114 | }; |
| 1115 | </script> | 1115 | </script> |
| 1116 | 1116 | ||
| 1117 | 1117 | ||
| 1118 | <style scoped> | 1118 | <style scoped> |
| 1119 | table { | 1119 | table { |
| 1120 | border-collapse: collapse; | 1120 | border-collapse: collapse; |
| 1121 | border: 1px solid #e2e7eb; | 1121 | border: 1px solid #e2e7eb; |
| 1122 | } | 1122 | } |
| 1123 | 1123 | ||
| 1124 | th, | 1124 | th, |
| 1125 | .tdFeeType { | 1125 | .tdFeeType { |
| 1126 | border: 1px solid #e2e7eb; | 1126 | border: 1px solid #e2e7eb; |
| 1127 | padding: 10px; | 1127 | padding: 10px; |
| 1128 | text-align: center; | 1128 | text-align: center; |
| 1129 | } | 1129 | } |
| 1130 | table.feeTypeTable { | 1130 | table.feeTypeTable { |
| 1131 | table-layout: auto !important; | 1131 | table-layout: auto !important; |
| 1132 | width: 100% !important; | 1132 | width: 100% !important; |
| 1133 | } | 1133 | } |
| 1134 | .card-style { | 1134 | .card-style { |
| 1135 | background: #7f62f8 !important; | 1135 | background: #7f62f8 !important; |
| 1136 | border-color: #7f62f8 !important; | 1136 | border-color: #7f62f8 !important; |
| 1137 | border-radius: 12px; | 1137 | border-radius: 12px; |
| 1138 | text-align: center !important; | 1138 | text-align: center !important; |
| 1139 | padding-top: 10px !important; | 1139 | padding-top: 10px !important; |
| 1140 | } | 1140 | } |
| 1141 | .add-button { | 1141 | .add-button { |
| 1142 | background: #feb83c !important; | 1142 | background: #feb83c !important; |
| 1143 | border-color: #feb83c !important; | 1143 | border-color: #feb83c !important; |
| 1144 | text-transform: none !important; | 1144 | text-transform: none !important; |
| 1145 | -webkit-box-shadow: none !important; | 1145 | -webkit-box-shadow: none !important; |
| 1146 | box-shadow: none !important; | 1146 | box-shadow: none !important; |
| 1147 | } | 1147 | } |
| 1148 | .clear-button { | 1148 | .clear-button { |
| 1149 | background: #fa7676 !important; | 1149 | background: #fa7676 !important; |
| 1150 | border-color: #fa7676 !important; | 1150 | border-color: #fa7676 !important; |
| 1151 | text-transform: none !important; | 1151 | text-transform: none !important; |
| 1152 | -webkit-box-shadow: none !important; | 1152 | -webkit-box-shadow: none !important; |
| 1153 | box-shadow: none !important; | 1153 | box-shadow: none !important; |
| 1154 | } | 1154 | } |
| 1155 | .card-styles { | 1155 | .card-styles { |
| 1156 | background: #7f62f8 !important; | 1156 | background: #7f62f8 !important; |
| 1157 | border-color: #7f62f8 !important; | 1157 | border-color: #7f62f8 !important; |
| 1158 | } | 1158 | } |
| 1159 | .v-card__actions .v-btn { | 1159 | .v-card__actions .v-btn { |
| 1160 | margin: 0 15px !important; | 1160 | margin: 0 15px !important; |
| 1161 | min-width: 96px !important; | 1161 | min-width: 96px !important; |
| 1162 | } | 1162 | } |
| 1163 | </style> | 1163 | </style> |
src/pages/Account/paymentHistory.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Payment History ****** --> | 3 | <!-- ****** Edit Payment History ****** --> |
| 4 | <v-dialog v-model="editPaymentDialog" max-width="400px"> | 4 | <v-dialog v-model="editPaymentDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Payment History</label> | 8 | <label class="title text-xs-center">Edit Payment History</label> |
| 9 | <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Amount:</label> | 17 | <label class="right">Amount:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.paidAmount" | 21 | v-model="editedItem.paidAmount" |
| 22 | placeholder="please fill this field" | 22 | placeholder="please fill this field" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs3 class="pt-4 subheading"> | 29 | <v-flex xs3 class="pt-4 subheading"> |
| 30 | <label class="right">Method:</label> | 30 | <label class="right">Method:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm7 class="ml-3"> | 32 | <v-flex xs8 sm7 class="ml-3"> |
| 33 | <v-select | 33 | <v-select |
| 34 | :items="paymentMethod" | 34 | :items="paymentMethod" |
| 35 | v-model="editedItem.paymentMethod" | 35 | v-model="editedItem.paymentMethod" |
| 36 | label="please fill this field" | 36 | label="please fill this field" |
| 37 | required | 37 | required |
| 38 | ></v-select> | 38 | ></v-select> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn> | 46 | <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn> |
| 47 | <v-spacer></v-spacer> | 47 | <v-spacer></v-spacer> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-container> | 51 | </v-container> |
| 52 | </v-form> | 52 | </v-form> |
| 53 | </v-card> | 53 | </v-card> |
| 54 | </v-dialog> | 54 | </v-dialog> |
| 55 | 55 | ||
| 56 | <!-- ****** PAYMENT HISTORY TABLE ****** --> | 56 | <!-- ****** PAYMENT HISTORY TABLE ****** --> |
| 57 | <v-toolbar color="transparent" flat> | 57 | <v-toolbar color="transparent" flat> |
| 58 | <v-spacer></v-spacer> | 58 | <v-spacer></v-spacer> |
| 59 | <v-card-title class="body-1" v-show="show"> | 59 | <v-card-title class="body-1" v-show="show"> |
| 60 | <v-btn icon large flat @click="displaySearch"> | 60 | <v-btn icon large flat @click="displaySearch"> |
| 61 | <v-avatar size="27"> | 61 | <v-avatar size="27"> |
| 62 | <img src="/static/icon/search.png" alt="icon" /> | 62 | <img src="/static/icon/search.png" alt="icon" /> |
| 63 | </v-avatar> | 63 | </v-avatar> |
| 64 | </v-btn> | 64 | </v-btn> |
| 65 | </v-card-title> | 65 | </v-card-title> |
| 66 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 66 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 68 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 69 | <v-icon @click="closeSearch" color="error">close</v-icon> | 69 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-toolbar> | 72 | </v-toolbar> |
| 73 | <v-data-table | 73 | <v-data-table |
| 74 | :headers="headers" | 74 | :headers="headers" |
| 75 | :items="paymentHistory" | 75 | :items="paymentHistory" |
| 76 | :pagination.sync="pagination" | 76 | :pagination.sync="pagination" |
| 77 | :search="search" | 77 | :search="search" |
| 78 | > | 78 | > |
| 79 | <template slot="items" slot-scope="props"> | 79 | <template slot="items" slot-scope="props"> |
| 80 | <tr class="tr"> | 80 | <tr class="tr"> |
| 81 | <td class="td td-row">{{ props.index + 1 }}</td> | 81 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 82 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> | 82 | <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> |
| 83 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> | 83 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> |
| 84 | <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td> | 84 | <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td> |
| 85 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> | 85 | <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td> |
| 86 | <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td> | 86 | <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td> |
| 87 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 87 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 88 | <td class="td td-row text-xs-center"> | 88 | <td class="td td-row text-xs-center"> |
| 89 | <span> | 89 | <span> |
| 90 | <v-tooltip top> | 90 | <v-tooltip top> |
| 91 | <img | 91 | <img |
| 92 | slot="activator" | 92 | slot="activator" |
| 93 | style="cursor:pointer; width:20px; height:18px;" | 93 | style="cursor:pointer; width:20px; height:18px;" |
| 94 | class="mr-3" | 94 | class="mr-3" |
| 95 | @click="editItem(props.item)" | 95 | @click="editItem(props.item)" |
| 96 | src="/static/icon/edit.png" | 96 | src="/static/icon/edit.png" |
| 97 | /> | 97 | /> |
| 98 | <span>Edit</span> | 98 | <span>Edit</span> |
| 99 | </v-tooltip> | 99 | </v-tooltip> |
| 100 | <v-tooltip top> | 100 | <v-tooltip top> |
| 101 | <img | 101 | <img |
| 102 | slot="activator" | 102 | slot="activator" |
| 103 | style="cursor:pointer;width:20px; height:20px;" | 103 | style="cursor:pointer;width:20px; height:20px;" |
| 104 | class="mr-3" | 104 | class="mr-3" |
| 105 | @click="deleteItem(props.item)" | 105 | @click="deleteItem(props.item)" |
| 106 | src="/static/icon/delete.png" | 106 | src="/static/icon/delete.png" |
| 107 | /> | 107 | /> |
| 108 | <span>Delete</span> | 108 | <span>Delete</span> |
| 109 | </v-tooltip> | 109 | </v-tooltip> |
| 110 | </span> | 110 | </span> |
| 111 | </td> | 111 | </td> |
| 112 | </tr> | 112 | </tr> |
| 113 | </template> | 113 | </template> |
| 114 | <v-alert | 114 | <v-alert |
| 115 | slot="no-results" | 115 | slot="no-results" |
| 116 | :value="true" | 116 | :value="true" |
| 117 | color="error" | 117 | color="error" |
| 118 | icon="warning" | 118 | icon="warning" |
| 119 | >Your search for "{{ search }}" found no results.</v-alert> | 119 | >Your search for "{{ search }}" found no results.</v-alert> |
| 120 | </v-data-table> | 120 | </v-data-table> |
| 121 | <div class="loader" v-if="showLoader"> | 121 | <div class="loader" v-if="showLoader"> |
| 122 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 122 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 123 | </div> | 123 | </div> |
| 124 | <v-snackbar | 124 | <v-snackbar |
| 125 | :timeout="timeout" | 125 | :timeout="timeout" |
| 126 | :top="y === 'top'" | 126 | :top="y === 'top'" |
| 127 | :right="x === 'right'" | 127 | :right="x === 'right'" |
| 128 | :vertical="mode === 'vertical'" | 128 | :vertical="mode === 'vertical'" |
| 129 | v-model="snackbar" | 129 | v-model="snackbar" |
| 130 | :color="color" | 130 | :color="color" |
| 131 | >{{ text }}</v-snackbar> | 131 | >{{ text }}</v-snackbar> |
| 132 | </v-container> | 132 | </v-container> |
| 133 | </template> | 133 | </template> |
| 134 | 134 | ||
| 135 | <script> | 135 | <script> |
| 136 | import http from "@/Services/http.js"; | 136 | import http from "@/Services/http.js"; |
| 137 | import moment from "moment"; | 137 | import moment from "moment"; |
| 138 | 138 | ||
| 139 | export default { | 139 | export default { |
| 140 | data: () => ({ | 140 | data: () => ({ |
| 141 | snackbar: false, | 141 | snackbar: false, |
| 142 | showLoader: false, | 142 | showLoader: false, |
| 143 | search: "", | 143 | search: "", |
| 144 | show: true, | 144 | show: true, |
| 145 | showSearch: false, | 145 | showSearch: false, |
| 146 | pagination: { | 146 | pagination: { |
| 147 | rowsPerPage: 10 | 147 | rowsPerPage: 10 |
| 148 | }, | 148 | }, |
| 149 | paymentMethod: ["Cash", "Cheque"], | 149 | paymentMethod: ["Cash", "Cheque"], |
| 150 | headers: [ | 150 | headers: [ |
| 151 | { | 151 | { |
| 152 | text: "No", | 152 | text: "No", |
| 153 | align: "", | 153 | align: "", |
| 154 | sortable: false, | 154 | sortable: false, |
| 155 | value: "No" | 155 | value: "No" |
| 156 | }, | 156 | }, |
| 157 | { | 157 | { |
| 158 | text: "Student", | 158 | text: "Student", |
| 159 | value: "name", | 159 | value: "name", |
| 160 | sortable: false, | 160 | sortable: false, |
| 161 | align: "center" | 161 | align: "center" |
| 162 | }, | 162 | }, |
| 163 | { text: "Class", value: "class", sortable: false, align: "center" }, | 163 | { text: "Class", value: "class", sortable: false, align: "center" }, |
| 164 | { | 164 | { |
| 165 | text: "Fee Type", | 165 | text: "Fee Type", |
| 166 | value: "feeTypeName", | 166 | value: "feeTypeName", |
| 167 | sortable: false, | 167 | sortable: false, |
| 168 | align: "center" | 168 | align: "center" |
| 169 | }, | 169 | }, |
| 170 | { | 170 | { |
| 171 | text: "Method", | 171 | text: "Method", |
| 172 | value: "paymentMethod", | 172 | value: "paymentMethod", |
| 173 | sortable: false, | 173 | sortable: false, |
| 174 | align: "center" | 174 | align: "center" |
| 175 | }, | 175 | }, |
| 176 | { | 176 | { |
| 177 | text: "Paid Amount", | 177 | text: "Paid Amount", |
| 178 | value: "totalPaidAmount", | 178 | value: "totalPaidAmount", |
| 179 | sortable: false, | 179 | sortable: false, |
| 180 | align: "center" | 180 | align: "center" |
| 181 | }, | 181 | }, |
| 182 | { | 182 | { |
| 183 | text: "Date", | 183 | text: "Date", |
| 184 | value: "date", | 184 | value: "date", |
| 185 | sortable: false, | 185 | sortable: false, |
| 186 | align: "center" | 186 | align: "center" |
| 187 | }, | 187 | }, |
| 188 | { text: "Action", value: "", sortable: false, align: "center" } | 188 | { text: "Action", value: "", sortable: false, align: "center" } |
| 189 | ], | 189 | ], |
| 190 | paymentHistory: [], | 190 | paymentHistory: [], |
| 191 | addPaymentHistoryDialog: "", | 191 | addPaymentHistoryDialog: "", |
| 192 | editPaymentDialog: false, | 192 | editPaymentDialog: false, |
| 193 | editedItem: {}, | 193 | editedItem: {}, |
| 194 | y: "top", | 194 | y: "top", |
| 195 | x: "right", | 195 | x: "right", |
| 196 | mode: "", | 196 | mode: "", |
| 197 | timeout: 5000, | 197 | timeout: 5000, |
| 198 | text: "", | 198 | text: "", |
| 199 | color: "", | 199 | color: "", |
| 200 | snackbar: false | 200 | snackbar: false |
| 201 | }), | 201 | }), |
| 202 | methods: { | 202 | methods: { |
| 203 | editItem(item) { | 203 | editItem(item) { |
| 204 | this.editedIndex = this.paymentHistory.indexOf(item); | 204 | this.editedIndex = this.paymentHistory.indexOf(item); |
| 205 | this.editedItem = Object.assign({}, item); | 205 | this.editedItem = Object.assign({}, item); |
| 206 | this.editedItem.paidAmount = this.editedItem.feeType.paidAmount; | 206 | this.editedItem.paidAmount = this.editedItem.feeType.paidAmount; |
| 207 | this.editPaymentDialog = true; | 207 | this.editPaymentDialog = true; |
| 208 | }, | 208 | }, |
| 209 | deleteItem(item) { | 209 | deleteItem(item) { |
| 210 | let deleteGrade = { | 210 | let deleteGrade = { |
| 211 | invoiceId: item._id, | 211 | invoiceId: item._id, |
| 212 | feeTypeId: item.feeType._id | 212 | feeTypeId: item.feeType._id |
| 213 | }; | 213 | }; |
| 214 | http() | 214 | http() |
| 215 | .put( | 215 | .put( |
| 216 | "/deleteFeeType", | 216 | "/deleteFeeType", |
| 217 | confirm("Are you sure you want to delete this?") && deleteGrade, | 217 | confirm("Are you sure you want to delete this?") && deleteGrade, |
| 218 | { | 218 | { |
| 219 | headers: { | 219 | headers: { |
| 220 | Authorization: "Bearer " + this.token | 220 | Authorization: "Bearer " + this.token |
| 221 | } | 221 | } |
| 222 | } | 222 | } |
| 223 | ) | 223 | ) |
| 224 | .then(response => { | 224 | .then(response => { |
| 225 | this.snackbar = true; | 225 | this.snackbar = true; |
| 226 | // this.text = "Successfully Delete Salary "; | 226 | // this.text = "Successfully Delete Salary "; |
| 227 | this.text = response.data.message; | 227 | this.text = response.data.message; |
| 228 | this.color = "green"; | 228 | this.color = "green"; |
| 229 | this.getPaymentHistory(); | 229 | this.getPaymentHistory(); |
| 230 | }) | 230 | }) |
| 231 | .catch(error => { | 231 | .catch(error => { |
| 232 | console.log("error", error); | 232 | console.log("error", error); |
| 233 | this.snackbar = true; | 233 | this.snackbar = true; |
| 234 | this.text = error.response.data.message; | 234 | this.text = error.response.data.message; |
| 235 | this.color = "red"; | 235 | this.color = "red"; |
| 236 | }); | 236 | }); |
| 237 | }, | 237 | }, |
| 238 | 238 | ||
| 239 | dates: function(date) { | 239 | dates: function(date) { |
| 240 | return moment(date).format("MMMM DD, YYYY"); | 240 | return moment(date).format("MMMM DD, YYYY"); |
| 241 | }, | 241 | }, |
| 242 | getPaymentHistory() { | 242 | getPaymentHistory() { |
| 243 | this.showLoader = true; | 243 | this.showLoader = true; |
| 244 | var token = this.$store.state.token; | 244 | var token = this.$store.state.token; |
| 245 | http() | 245 | http() |
| 246 | .get("/getPaymentHistory", { | 246 | .get("/getPaymentHistory", { |
| 247 | params: { | 247 | params: { |
| 248 | paymentStatus: "FULLY_PAID", | 248 | paymentStatus: "FULLY_PAID", |
| 249 | schoolId: this.$store.state.schoolId | 249 | schoolId: this.$store.state.schoolId |
| 250 | }, | 250 | }, |
| 251 | headers: { Authorization: "Bearer " + token } | 251 | headers: { Authorization: "Bearer " + token } |
| 252 | }) | 252 | }) |
| 253 | .then(response => { | 253 | .then(response => { |
| 254 | this.paymentHistory = response.data.data; | 254 | this.paymentHistory = response.data.data; |
| 255 | this.showLoader = false; | 255 | this.showLoader = false; |
| 256 | }) | 256 | }) |
| 257 | .catch(error => { | 257 | .catch(error => { |
| 258 | this.showLoader = false; | 258 | this.showLoader = false; |
| 259 | if (error.response.status === 401) { | 259 | if (error.response.status === 401) { |
| 260 | this.$router.replace({ path: "/" }); | 260 | this.$router.replace({ path: "/" }); |
| 261 | this.$store.dispatch("setToken", null); | 261 | this.$store.dispatch("setToken", null); |
| 262 | this.$store.dispatch("Id", null); | 262 | this.$store.dispatch("Id", null); |
| 263 | this.$store.dispatch("Role", null); | 263 | this.$store.dispatch("Role", null); |
| 264 | } | 264 | } |
| 265 | }); | 265 | }); |
| 266 | }, | 266 | }, |
| 267 | save() { | 267 | save() { |
| 268 | var updatePayment = { | 268 | var updatePayment = { |
| 269 | invoiceId: this.editedItem._id, | 269 | invoiceId: this.editedItem._id, |
| 270 | feeTypeId: this.editedItem.feeType._id, | 270 | feeTypeId: this.editedItem.feeType._id, |
| 271 | paidAmount: this.editedItem.paidAmount, | 271 | paidAmount: this.editedItem.paidAmount, |
| 272 | paymentMethod: this.editedItem.paymentMethod | 272 | paymentMethod: this.editedItem.paymentMethod |
| 273 | }; | 273 | }; |
| 274 | http() | 274 | http() |
| 275 | .put("/updateFeeType", updatePayment, { | 275 | .put("/updateFeeType", updatePayment, { |
| 276 | headers: { | 276 | headers: { |
| 277 | Authorization: "Bearer " + this.token | 277 | Authorization: "Bearer " + this.token |
| 278 | } | 278 | } |
| 279 | }) | 279 | }) |
| 280 | .then(response => { | 280 | .then(response => { |
| 281 | this.getPaymentHistory(); | 281 | this.getPaymentHistory(); |
| 282 | this.snackbar = true; | 282 | this.snackbar = true; |
| 283 | this.text = response.data.message; | 283 | this.text = response.data.message; |
| 284 | this.color = "green"; | 284 | this.color = "green"; |
| 285 | this.editPaymentDialog = false; | 285 | this.editPaymentDialog = false; |
| 286 | }) | 286 | }) |
| 287 | .catch(error => { | 287 | .catch(error => { |
| 288 | console.log("error", error.response); | 288 | console.log("error", error.response); |
| 289 | this.snackbar = true; | 289 | this.snackbar = true; |
| 290 | this.text = error.response.data.message; | 290 | this.text = error.response.data.message; |
| 291 | this.color = "red"; | 291 | this.color = "red"; |
| 292 | }); | 292 | }); |
| 293 | }, | 293 | }, |
| 294 | displaySearch() { | 294 | displaySearch() { |
| 295 | this.show = false; | 295 | this.show = false; |
| 296 | this.showSearch = true; | 296 | this.showSearch = true; |
| 297 | }, | 297 | }, |
| 298 | closeSearch() { | 298 | closeSearch() { |
| 299 | this.showSearch = false; | 299 | this.showSearch = false; |
| 300 | this.show = true; | 300 | this.show = true; |
| 301 | this.search = ""; | 301 | this.search = ""; |
| 302 | } | 302 | } |
| 303 | }, | 303 | }, |
| 304 | mounted() { | 304 | mounted() { |
| 305 | this.token = this.$store.state.token; | 305 | this.token = this.$store.state.token; |
| 306 | this.getPaymentHistory(); | 306 | this.getPaymentHistory(); |
| 307 | } | 307 | } |
| 308 | }; | 308 | }; |
| 309 | </script> | 309 | </script> |
src/pages/Administrator/academicYear.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> | 3 | <!-- ****** EDIT ACADEMIC YEAR ****** --> |
| 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px"> | 4 | <v-dialog v-model="editAcademinYearDialog" max-width="600px" persistent > |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Academic Year</label> | 8 | <label class="title text-xs-center">Edit Academic Year</label> |
| 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editAcademinYearDialog = 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">Year:</label> | 16 | <label class="right">Year:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm7 class="ml-3"> | 18 | <v-flex xs8 sm7 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.year" | 20 | v-model="editedItem.year" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Year Title:</label> | 31 | <label class="right">Year Title:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm7 class="ml-3"> | 33 | <v-flex xs8 sm7 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | v-model="editedItem.yearTitle" | 35 | v-model="editedItem.yearTitle" |
| 36 | placeholder="fill your Year Title" | 36 | placeholder="fill your Year Title" |
| 37 | name="name" | 37 | name="name" |
| 38 | type="text" | 38 | type="text" |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs12 sm12> | 43 | <v-flex xs12 sm12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> | 46 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 47 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs8 sm7 class="ml-3"> | 49 | <v-flex xs8 sm7 class="ml-3"> |
| 50 | <v-menu | 50 | <v-menu |
| 51 | ref="menu" | 51 | ref="menu" |
| 52 | :close-on-content-click="false" | 52 | :close-on-content-click="false" |
| 53 | v-model="menu" | 53 | v-model="menu" |
| 54 | :nudge-right="40" | 54 | :nudge-right="40" |
| 55 | lazy | 55 | lazy |
| 56 | transition="scale-transition" | 56 | transition="scale-transition" |
| 57 | offset-y | 57 | offset-y |
| 58 | full-width | 58 | full-width |
| 59 | min-width="290px" | 59 | min-width="290px" |
| 60 | > | 60 | > |
| 61 | <v-text-field | 61 | <v-text-field |
| 62 | slot="activator" | 62 | slot="activator" |
| 63 | v-model="editedItem.startingDate" | 63 | v-model="editedItem.startingDate" |
| 64 | placeholder="Select date" | 64 | placeholder="Select date" |
| 65 | ></v-text-field> | 65 | ></v-text-field> |
| 66 | <v-date-picker | 66 | <v-date-picker |
| 67 | color="info" | 67 | color="info" |
| 68 | ref="picker" | 68 | ref="picker" |
| 69 | v-model="editedItem.startingDate" | 69 | v-model="editedItem.startingDate" |
| 70 | @input="$refs.menu.save(editedItem.startingDate)" | 70 | @input="$refs.menu.save(editedItem.startingDate)" |
| 71 | ></v-date-picker> | 71 | ></v-date-picker> |
| 72 | </v-menu> | 72 | </v-menu> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | <v-flex xs12 sm12> | 76 | <v-flex xs12 sm12> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 class="pt-4 subheading"> | 78 | <v-flex xs4 class="pt-4 subheading"> |
| 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> | 79 | <label class="right hidden-xs-only hidden-sm-only">Ending Date:</label> |
| 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> | 80 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs8 sm7 class="ml-3"> | 82 | <v-flex xs8 sm7 class="ml-3"> |
| 83 | <v-menu | 83 | <v-menu |
| 84 | ref="menuEndDate" | 84 | ref="menuEndDate" |
| 85 | :close-on-content-click="false" | 85 | :close-on-content-click="false" |
| 86 | v-model="menuEndDate" | 86 | v-model="menuEndDate" |
| 87 | :nudge-right="40" | 87 | :nudge-right="40" |
| 88 | lazy | 88 | lazy |
| 89 | transition="scale-transition" | 89 | transition="scale-transition" |
| 90 | offset-y | 90 | offset-y |
| 91 | full-width | 91 | full-width |
| 92 | min-width="290px" | 92 | min-width="290px" |
| 93 | > | 93 | > |
| 94 | <v-text-field | 94 | <v-text-field |
| 95 | slot="activator" | 95 | slot="activator" |
| 96 | v-model="editedItem.endingDate" | 96 | v-model="editedItem.endingDate" |
| 97 | placeholder="Select date" | 97 | placeholder="Select date" |
| 98 | ></v-text-field> | 98 | ></v-text-field> |
| 99 | <v-date-picker | 99 | <v-date-picker |
| 100 | color="info" | 100 | color="info" |
| 101 | ref="picker" | 101 | ref="picker" |
| 102 | v-model="editedItem.endingDate" | 102 | v-model="editedItem.endingDate" |
| 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" | 103 | @input="$refs.menuEndDate.save(editedItem.endingDate)" |
| 104 | ></v-date-picker> | 104 | ></v-date-picker> |
| 105 | </v-menu> | 105 | </v-menu> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | </v-layout> | 107 | </v-layout> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12> | 110 | <v-flex xs12> |
| 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 111 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 112 | <v-spacer></v-spacer> | 112 | <v-spacer></v-spacer> |
| 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 113 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | </v-card-actions> | 115 | </v-card-actions> |
| 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 116 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 117 | <v-spacer></v-spacer> | 117 | <v-spacer></v-spacer> |
| 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 118 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 119 | <v-spacer></v-spacer> | 119 | <v-spacer></v-spacer> |
| 120 | </v-card-actions> | 120 | </v-card-actions> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | </v-container> | 123 | </v-container> |
| 124 | </v-card> | 124 | </v-card> |
| 125 | </v-dialog> | 125 | </v-dialog> |
| 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> | 126 | <!-- ****** PROFILE ACADEMIC YEAR DEATILS ****** --> |
| 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px"> | 127 | <v-dialog v-model="viewAcademinYearDialog" max-width="500px" persistent> |
| 128 | <v-card flat class="card-style pa-3" dark> | 128 | <v-card flat class="card-style pa-3" dark> |
| 129 | <v-layout> | 129 | <v-layout> |
| 130 | <v-flex xs12> | 130 | <v-flex xs12> |
| 131 | <label class="title text-xs-center">View Academic Year</label> | 131 | <label class="title text-xs-center">View Academic Year</label> |
| 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> | 132 | <v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | <v-card-text> | 135 | <v-card-text> |
| 136 | <v-container grid-list-md> | 136 | <v-container grid-list-md> |
| 137 | <v-layout wrap> | 137 | <v-layout wrap> |
| 138 | <v-flex> | 138 | <v-flex> |
| 139 | <v-layout> | 139 | <v-layout> |
| 140 | <v-flex xs5 sm6> | 140 | <v-flex xs5 sm6> |
| 141 | <h5 class="right my-1"> | 141 | <h5 class="right my-1"> |
| 142 | <b>Title:</b> | 142 | <b>Title:</b> |
| 143 | </h5> | 143 | </h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex sm6 xs7> | 145 | <v-flex sm6 xs7> |
| 146 | <h5 class="my-1">{{ editedItem.year }}</h5> | 146 | <h5 class="my-1">{{ editedItem.year }}</h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | <v-layout> | 149 | <v-layout> |
| 150 | <v-flex xs5 sm6> | 150 | <v-flex xs5 sm6> |
| 151 | <h5 class="right my-1"> | 151 | <h5 class="right my-1"> |
| 152 | <b>Year Title:</b> | 152 | <b>Year Title:</b> |
| 153 | </h5> | 153 | </h5> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex sm6 xs7> | 155 | <v-flex sm6 xs7> |
| 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> | 156 | <h5 class="my-1">{{ editedItem.yearTitle }}</h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | </v-layout> | 158 | </v-layout> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs5 sm6> | 160 | <v-flex xs5 sm6> |
| 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 161 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 162 | <b>Starting Date:</b> | 162 | <b>Starting Date:</b> |
| 163 | </h5> | 163 | </h5> |
| 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 164 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 165 | <b>StartingDate:</b> | 165 | <b>StartingDate:</b> |
| 166 | </h5> | 166 | </h5> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-flex sm6 xs7> | 168 | <v-flex sm6 xs7> |
| 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> | 169 | <h5 class="my-1">{{dates(editedItem.startingDate)}}</h5> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | <v-layout> | 172 | <v-layout> |
| 173 | <v-flex xs5 sm6> | 173 | <v-flex xs5 sm6> |
| 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> | 174 | <h5 class="right my-1 hidden-xs-only hidden-sm-only"> |
| 175 | <b>Ending Date:</b> | 175 | <b>Ending Date:</b> |
| 176 | </h5> | 176 | </h5> |
| 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> | 177 | <h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only"> |
| 178 | <b>EndingDate:</b> | 178 | <b>EndingDate:</b> |
| 179 | </h5> | 179 | </h5> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | <v-flex sm6 xs7> | 181 | <v-flex sm6 xs7> |
| 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> | 182 | <h5 class="my-1">{{dates(editedItem.endingDate)}}</h5> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | </v-container> | 187 | </v-container> |
| 188 | </v-card-text> | 188 | </v-card-text> |
| 189 | </v-card> | 189 | </v-card> |
| 190 | </v-dialog> | 190 | </v-dialog> |
| 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> | 191 | <!-- ****** EXISTING ACADEMIC YEAR TABLE ****** --> |
| 192 | <v-toolbar color="transparent" flat> | 192 | <v-toolbar color="transparent" flat> |
| 193 | <v-btn | 193 | <v-btn |
| 194 | fab | 194 | fab |
| 195 | dark | 195 | dark |
| 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 196 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 197 | small | 197 | small |
| 198 | @click="addAcademicYearDialog = true" | 198 | @click="addAcademicYearDialog = true" |
| 199 | > | 199 | > |
| 200 | <v-icon dark>add</v-icon> | 200 | <v-icon dark>add</v-icon> |
| 201 | </v-btn> | 201 | </v-btn> |
| 202 | <v-btn | 202 | <v-btn |
| 203 | round | 203 | round |
| 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 204 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 205 | dark | 205 | dark |
| 206 | @click="addAcademicYearDialog = true" | 206 | @click="addAcademicYearDialog = true" |
| 207 | > | 207 | > |
| 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year | 208 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year |
| 209 | </v-btn> | 209 | </v-btn> |
| 210 | <v-spacer></v-spacer> | 210 | <v-spacer></v-spacer> |
| 211 | <v-card-title class="body-1" v-show="show"> | 211 | <v-card-title class="body-1" v-show="show"> |
| 212 | <v-btn icon large flat @click="displaySearch"> | 212 | <v-btn icon large flat @click="displaySearch"> |
| 213 | <v-avatar size="27"> | 213 | <v-avatar size="27"> |
| 214 | <img src="/static/icon/search.png" alt="icon" /> | 214 | <img src="/static/icon/search.png" alt="icon" /> |
| 215 | </v-avatar> | 215 | </v-avatar> |
| 216 | </v-btn> | 216 | </v-btn> |
| 217 | </v-card-title> | 217 | </v-card-title> |
| 218 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 218 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-text-field | 220 | <v-text-field |
| 221 | autofocus | 221 | autofocus |
| 222 | v-model="search" | 222 | v-model="search" |
| 223 | label="Search" | 223 | label="Search" |
| 224 | prepend-inner-icon="search" | 224 | prepend-inner-icon="search" |
| 225 | color="primary" | 225 | color="primary" |
| 226 | ></v-text-field> | 226 | ></v-text-field> |
| 227 | <v-icon @click="closeSearch" color="error">close</v-icon> | 227 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-toolbar> | 230 | </v-toolbar> |
| 231 | <v-data-table | 231 | <v-data-table |
| 232 | :headers="headers" | 232 | :headers="headers" |
| 233 | :items="getAcademicYearList" | 233 | :items="getAcademicYearList" |
| 234 | :pagination.sync="pagination" | 234 | :pagination.sync="pagination" |
| 235 | :search="search" | 235 | :search="search" |
| 236 | > | 236 | > |
| 237 | <template slot="items" slot-scope="props"> | 237 | <template slot="items" slot-scope="props"> |
| 238 | <tr class="tr"> | 238 | <tr class="tr"> |
| 239 | <td class="td td-row">{{ props.index + 1}}</td> | 239 | <td class="td td-row">{{ props.index + 1}}</td> |
| 240 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> | 240 | <td class="td td-row text-xs-center">{{ props.item.year}}</td> |
| 241 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> | 241 | <td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td> |
| 242 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> | 242 | <td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td> |
| 243 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> | 243 | <td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td> |
| 244 | <td class="td td-row text-xs-center"> | 244 | <td class="td td-row text-xs-center"> |
| 245 | <span> | 245 | <span> |
| 246 | <v-tooltip top> | 246 | <v-tooltip top> |
| 247 | <img | 247 | <img |
| 248 | slot="activator" | 248 | slot="activator" |
| 249 | style="cursor:pointer; width:25px; height:25px; " | 249 | style="cursor:pointer; width:25px; height:25px; " |
| 250 | class="mr-3" | 250 | class="mr-3" |
| 251 | @click="profile(props.item)" | 251 | @click="profile(props.item)" |
| 252 | src="/static/icon/view.png" | 252 | src="/static/icon/view.png" |
| 253 | /> | 253 | /> |
| 254 | <span>View</span> | 254 | <span>View</span> |
| 255 | </v-tooltip> | 255 | </v-tooltip> |
| 256 | <v-tooltip top> | 256 | <v-tooltip top> |
| 257 | <img | 257 | <img |
| 258 | slot="activator" | 258 | slot="activator" |
| 259 | style="cursor:pointer; width:20px; height:18px; " | 259 | style="cursor:pointer; width:20px; height:18px; " |
| 260 | class="mr-3" | 260 | class="mr-3" |
| 261 | @click="editItem(props.item)" | 261 | @click="editItem(props.item)" |
| 262 | src="/static/icon/edit.png" | 262 | src="/static/icon/edit.png" |
| 263 | /> | 263 | /> |
| 264 | <span>Edit</span> | 264 | <span>Edit</span> |
| 265 | </v-tooltip> | 265 | </v-tooltip> |
| 266 | <v-tooltip top> | 266 | <v-tooltip top> |
| 267 | <img | 267 | <img |
| 268 | slot="activator" | 268 | slot="activator" |
| 269 | style="cursor:pointer; width:20px; height:20px; " | 269 | style="cursor:pointer; width:20px; height:20px; " |
| 270 | @click="deleteItem(props.item)" | 270 | @click="deleteItem(props.item)" |
| 271 | class="mr-3" | 271 | class="mr-3" |
| 272 | src="/static/icon/delete.png" | 272 | src="/static/icon/delete.png" |
| 273 | /> | 273 | /> |
| 274 | <span>Delete</span> | 274 | <span>Delete</span> |
| 275 | </v-tooltip> | 275 | </v-tooltip> |
| 276 | </span> | 276 | </span> |
| 277 | </td> | 277 | </td> |
| 278 | </tr> | 278 | </tr> |
| 279 | </template> | 279 | </template> |
| 280 | <v-alert | 280 | <v-alert |
| 281 | slot="no-results" | 281 | slot="no-results" |
| 282 | :value="true" | 282 | :value="true" |
| 283 | color="error" | 283 | color="error" |
| 284 | icon="warning" | 284 | icon="warning" |
| 285 | >Your search for "{{ search }}" found no results.</v-alert> | 285 | >Your search for "{{ search }}" found no results.</v-alert> |
| 286 | </v-data-table> | 286 | </v-data-table> |
| 287 | <!-- ****** ADD ACADEMIC YEAR ****** --> | 287 | <!-- ****** ADD ACADEMIC YEAR ****** --> |
| 288 | <v-dialog v-model="addAcademicYearDialog" max-width="600px" v-if="addAcademicYearDialog"> | 288 | <v-dialog v-model="addAcademicYearDialog" max-width="600px" v-if="addAcademicYearDialog" persistent> |
| 289 | <v-card flat class="card-style pa-2" dark> | 289 | <v-card flat class="card-style pa-2" dark> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs12> | 291 | <v-flex xs12> |
| 292 | <label class="title text-xs-center">Add Academic Year</label> | 292 | <label class="title text-xs-center">Add Academic Year</label> |
| 293 | <v-icon size="24" class="right" @click="closeAddAcademicYearModel">cancel</v-icon> | 293 | <v-icon size="24" class="right" @click="closeAddAcademicYearModel">cancel</v-icon> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | <v-form ref="form" v-model="valid" lazy-validation> | 296 | <v-form ref="form" v-model="valid" lazy-validation> |
| 297 | <v-container fluid> | 297 | <v-container fluid> |
| 298 | <v-flex xs12> | 298 | <v-flex xs12> |
| 299 | <v-layout> | 299 | <v-layout> |
| 300 | <v-flex xs5 sm4 class="pt-4 subheading"> | 300 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 301 | <label class="right">Year:</label> | 301 | <label class="right">Year:</label> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | <v-flex xs7 class="ml-3"> | 303 | <v-flex xs7 class="ml-3"> |
| 304 | <v-text-field | 304 | <v-text-field |
| 305 | v-model="addAcademicYear.year" | 305 | v-model="addAcademicYear.year" |
| 306 | placeholder="fill Year (2019-2020)" | 306 | placeholder="fill Year (2019-2020)" |
| 307 | type="text" | 307 | type="text" |
| 308 | :rules="yearRules" | 308 | :rules="yearRules" |
| 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-flex> | 313 | </v-flex> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs5 sm4 class="pt-4 subheading"> | 316 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Year Title:</label> | 317 | <label class="right">Year Title:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 319 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | placeholder="fill your Year Title" | 321 | placeholder="fill your Year Title" |
| 322 | :rules="yearTitleRules" | 322 | :rules="yearTitleRules" |
| 323 | v-model="addAcademicYear.yearTitle" | 323 | v-model="addAcademicYear.yearTitle" |
| 324 | type="text" | 324 | type="text" |
| 325 | required | 325 | required |
| 326 | ></v-text-field> | 326 | ></v-text-field> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | </v-layout> | 328 | </v-layout> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <v-layout> | 331 | <v-layout> |
| 332 | <v-flex xs5 sm4 class="pt-4 subheading"> | 332 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 333 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> | 333 | <label class="right hidden-xs-only hidden-sm-only">Starting Date:</label> |
| 334 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> | 334 | <label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label> |
| 335 | </v-flex> | 335 | </v-flex> |
| 336 | <v-flex xs7 class="ml-3"> | 336 | <v-flex xs7 class="ml-3"> |
| 337 | <v-menu | 337 | <v-menu |
| 338 | ref="menuStart" | 338 | ref="menuStart" |
| 339 | :close-on-content-click="false" | 339 | :close-on-content-click="false" |
| 340 | v-model="menuStart" | 340 | v-model="menuStart" |
| 341 | :nudge-right="40" | 341 | :nudge-right="40" |
| 342 | :return-value.sync="addAcademicYear.startingDate" | 342 | :return-value.sync="addAcademicYear.startingDate" |
| 343 | app | 343 | app |
| 344 | lazy | 344 | lazy |
| 345 | transition="scale-transition" | 345 | transition="scale-transition" |
| 346 | offset-y | 346 | offset-y |
| 347 | full-width | 347 | full-width |
| 348 | min-width="290px" | 348 | min-width="290px" |
| 349 | > | 349 | > |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | slot="activator" | 351 | slot="activator" |
| 352 | :rules="startDateRules" | 352 | :rules="startDateRules" |
| 353 | v-model="addAcademicYear.startingDate" | 353 | v-model="addAcademicYear.startingDate" |
| 354 | append-icon="event" | 354 | append-icon="event" |
| 355 | placeholder="Select starting date" | 355 | placeholder="Select starting date" |
| 356 | ></v-text-field> | 356 | ></v-text-field> |
| 357 | <v-date-picker | 357 | <v-date-picker |
| 358 | color="info" | 358 | color="info" |
| 359 | v-model="addAcademicYear.startingDate" | 359 | v-model="addAcademicYear.startingDate" |
| 360 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" | 360 | @input="$refs.menuStart.save(addAcademicYear.startingDate)" |
| 361 | ></v-date-picker> | 361 | ></v-date-picker> |
| 362 | </v-menu> | 362 | </v-menu> |
| 363 | </v-flex> | 363 | </v-flex> |
| 364 | </v-layout> | 364 | </v-layout> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | <v-flex xs12> | 366 | <v-flex xs12> |
| 367 | <v-layout> | 367 | <v-layout> |
| 368 | <v-flex xs5 sm4 class="pt-4 subheading"> | 368 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 369 | <label class="right">Ending Date:</label> | 369 | <label class="right">Ending Date:</label> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | <v-flex xs7 class="ml-3"> | 371 | <v-flex xs7 class="ml-3"> |
| 372 | <v-menu | 372 | <v-menu |
| 373 | ref="menu1" | 373 | ref="menu1" |
| 374 | :close-on-content-click="false" | 374 | :close-on-content-click="false" |
| 375 | v-model="menu1" | 375 | v-model="menu1" |
| 376 | :nudge-right="40" | 376 | :nudge-right="40" |
| 377 | :return-value.sync="addAcademicYear.endingDate" | 377 | :return-value.sync="addAcademicYear.endingDate" |
| 378 | app | 378 | app |
| 379 | lazy | 379 | lazy |
| 380 | transition="scale-transition" | 380 | transition="scale-transition" |
| 381 | offset-y | 381 | offset-y |
| 382 | full-width | 382 | full-width |
| 383 | min-width="290px" | 383 | min-width="290px" |
| 384 | > | 384 | > |
| 385 | <v-text-field | 385 | <v-text-field |
| 386 | slot="activator" | 386 | slot="activator" |
| 387 | :rules="endDateRules" | 387 | :rules="endDateRules" |
| 388 | v-model="addAcademicYear.endingDate" | 388 | v-model="addAcademicYear.endingDate" |
| 389 | append-icon="event" | 389 | append-icon="event" |
| 390 | placeholder="Select ending date" | 390 | placeholder="Select ending date" |
| 391 | ></v-text-field> | 391 | ></v-text-field> |
| 392 | <v-date-picker | 392 | <v-date-picker |
| 393 | color="info" | 393 | color="info" |
| 394 | v-model="addAcademicYear.endingDate" | 394 | v-model="addAcademicYear.endingDate" |
| 395 | @input="$refs.menu1.save(addAcademicYear.endingDate)" | 395 | @input="$refs.menu1.save(addAcademicYear.endingDate)" |
| 396 | ></v-date-picker> | 396 | ></v-date-picker> |
| 397 | </v-menu> | 397 | </v-menu> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | </v-flex> | 400 | </v-flex> |
| 401 | <v-layout> | 401 | <v-layout> |
| 402 | <v-flex xs12> | 402 | <v-flex xs12> |
| 403 | <v-layout> | 403 | <v-layout> |
| 404 | <v-spacer></v-spacer> | 404 | <v-spacer></v-spacer> |
| 405 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 405 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 406 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 406 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | </v-layout> | 409 | </v-layout> |
| 410 | </v-container> | 410 | </v-container> |
| 411 | </v-form> | 411 | </v-form> |
| 412 | </v-card> | 412 | </v-card> |
| 413 | </v-dialog> | 413 | </v-dialog> |
| 414 | <div class="loader" v-if="showLoader"> | 414 | <div class="loader" v-if="showLoader"> |
| 415 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 415 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 416 | </div> | 416 | </div> |
| 417 | <v-snackbar | 417 | <v-snackbar |
| 418 | :timeout="timeout" | 418 | :timeout="timeout" |
| 419 | :top="y === 'top'" | 419 | :top="y === 'top'" |
| 420 | :right="x === 'right'" | 420 | :right="x === 'right'" |
| 421 | :vertical="mode === 'vertical'" | 421 | :vertical="mode === 'vertical'" |
| 422 | v-model="snackbar" | 422 | v-model="snackbar" |
| 423 | :color="color" | 423 | :color="color" |
| 424 | >{{ text }}</v-snackbar> | 424 | >{{ text }}</v-snackbar> |
| 425 | </v-container> | 425 | </v-container> |
| 426 | </template> | 426 | </template> |
| 427 | 427 | ||
| 428 | <script> | 428 | <script> |
| 429 | import http from "@/Services/http.js"; | 429 | import http from "@/Services/http.js"; |
| 430 | import Util from "@/util"; | 430 | import Util from "@/util"; |
| 431 | import moment from "moment"; | 431 | import moment from "moment"; |
| 432 | 432 | ||
| 433 | export default { | 433 | export default { |
| 434 | data: () => ({ | 434 | data: () => ({ |
| 435 | snackbar: false, | 435 | snackbar: false, |
| 436 | y: "top", | 436 | y: "top", |
| 437 | x: "right", | 437 | x: "right", |
| 438 | mode: "", | 438 | mode: "", |
| 439 | timeout: 5000, | 439 | timeout: 5000, |
| 440 | text: "", | 440 | text: "", |
| 441 | color: "", | 441 | color: "", |
| 442 | loading: false, | 442 | loading: false, |
| 443 | date: null, | 443 | date: null, |
| 444 | show: true, | 444 | show: true, |
| 445 | showSearch: false, | 445 | showSearch: false, |
| 446 | search: "", | 446 | search: "", |
| 447 | showLoader: false, | 447 | showLoader: false, |
| 448 | addAcademicYearDialog: false, | 448 | addAcademicYearDialog: false, |
| 449 | editAcademinYearDialog: false, | 449 | editAcademinYearDialog: false, |
| 450 | viewAcademinYearDialog: false, | 450 | viewAcademinYearDialog: false, |
| 451 | valid: true, | 451 | valid: true, |
| 452 | pagination: { | 452 | pagination: { |
| 453 | rowsPerPage: 10, | 453 | rowsPerPage: 10, |
| 454 | }, | 454 | }, |
| 455 | date: null, | 455 | date: null, |
| 456 | menu1: false, | 456 | menu1: false, |
| 457 | menu: false, | 457 | menu: false, |
| 458 | menuStart: false, | 458 | menuStart: false, |
| 459 | menuEndDate: false, | 459 | menuEndDate: false, |
| 460 | yearRules: [(v) => !!v || "Year is required"], | 460 | yearRules: [(v) => !!v || "Year is required"], |
| 461 | yearTitleRules: [(v) => !!v || "Year Title is required"], | 461 | yearTitleRules: [(v) => !!v || "Year Title is required"], |
| 462 | startDateRules: [(v) => !!v || "startDate is required"], | 462 | startDateRules: [(v) => !!v || "startDate is required"], |
| 463 | endDateRules: [(v) => !!v || "endDate is required"], | 463 | endDateRules: [(v) => !!v || "endDate is required"], |
| 464 | headers: [ | 464 | headers: [ |
| 465 | { | 465 | { |
| 466 | text: "No", | 466 | text: "No", |
| 467 | align: "center", | 467 | align: "center", |
| 468 | sortable: false, | 468 | sortable: false, |
| 469 | value: "No", | 469 | value: "No", |
| 470 | }, | 470 | }, |
| 471 | { text: "Year", value: "year", sortable: false, align: "center" }, | 471 | { text: "Year", value: "year", sortable: false, align: "center" }, |
| 472 | { | 472 | { |
| 473 | text: "Year Title", | 473 | text: "Year Title", |
| 474 | value: "yearTitle", | 474 | value: "yearTitle", |
| 475 | sortable: false, | 475 | sortable: false, |
| 476 | align: "center", | 476 | align: "center", |
| 477 | }, | 477 | }, |
| 478 | 478 | ||
| 479 | { | 479 | { |
| 480 | text: "Starting Date", | 480 | text: "Starting Date", |
| 481 | value: "startingDate", | 481 | value: "startingDate", |
| 482 | sortable: false, | 482 | sortable: false, |
| 483 | align: "center", | 483 | align: "center", |
| 484 | }, | 484 | }, |
| 485 | { | 485 | { |
| 486 | text: "Ending Date", | 486 | text: "Ending Date", |
| 487 | value: "endingDate", | 487 | value: "endingDate", |
| 488 | sortable: false, | 488 | sortable: false, |
| 489 | align: "center", | 489 | align: "center", |
| 490 | }, | 490 | }, |
| 491 | { text: "Action", value: "", sortable: false, align: "center" }, | 491 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 492 | ], | 492 | ], |
| 493 | getAcademicYearList: [], | 493 | getAcademicYearList: [], |
| 494 | editedIndex: -1, | 494 | editedIndex: -1, |
| 495 | addAcademicYear: {}, | 495 | addAcademicYear: {}, |
| 496 | editedItem: {}, | 496 | editedItem: {}, |
| 497 | token: "", | 497 | token: "", |
| 498 | }), | 498 | }), |
| 499 | watch: { | 499 | watch: { |
| 500 | addAcademicYearDialog: function (val) { | 500 | addAcademicYearDialog: function (val) { |
| 501 | if (!val) { | 501 | if (!val) { |
| 502 | this.addAcademicYear = []; | 502 | this.addAcademicYear = []; |
| 503 | } | 503 | } |
| 504 | }, | 504 | }, |
| 505 | }, | 505 | }, |
| 506 | methods: { | 506 | methods: { |
| 507 | dates: function (date) { | 507 | dates: function (date) { |
| 508 | return moment(date).format("MMMM DD, YYYY"); | 508 | return moment(date).format("MMMM DD, YYYY"); |
| 509 | }, | 509 | }, |
| 510 | getAcademicYear() { | 510 | getAcademicYear() { |
| 511 | this.showLoader = true; | 511 | this.showLoader = true; |
| 512 | http() | 512 | http() |
| 513 | .get("/getAcademicsList", { | 513 | .get("/getAcademicsList", { |
| 514 | headers: { Authorization: "Bearer " + this.token }, | 514 | headers: { Authorization: "Bearer " + this.token }, |
| 515 | }) | 515 | }) |
| 516 | .then((response) => { | 516 | .then((response) => { |
| 517 | this.getAcademicYearList = response.data.data; | 517 | this.getAcademicYearList = response.data.data; |
| 518 | this.showLoader = false; | 518 | this.showLoader = false; |
| 519 | }) | 519 | }) |
| 520 | .catch((error) => { | 520 | .catch((error) => { |
| 521 | this.showLoader = false; | 521 | this.showLoader = false; |
| 522 | if (error.response.status === 401) { | 522 | if (error.response.status === 401) { |
| 523 | this.$router.replace({ path: "/" }); | 523 | this.$router.replace({ path: "/" }); |
| 524 | this.$store.dispatch("setToken", null); | 524 | this.$store.dispatch("setToken", null); |
| 525 | this.$store.dispatch("Id", null); | 525 | this.$store.dispatch("Id", null); |
| 526 | } | 526 | } |
| 527 | }); | 527 | }); |
| 528 | }, | 528 | }, |
| 529 | editItem(item) { | 529 | editItem(item) { |
| 530 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 530 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 531 | this.editedItem = Object.assign({}, item); | 531 | this.editedItem = Object.assign({}, item); |
| 532 | this.editedItem.schoolEventId = item._id; | 532 | this.editedItem.schoolEventId = item._id; |
| 533 | this.editAcademinYearDialog = true; | 533 | this.editAcademinYearDialog = true; |
| 534 | }, | 534 | }, |
| 535 | profile(item) { | 535 | profile(item) { |
| 536 | this.editedIndex = this.getAcademicYearList.indexOf(item); | 536 | this.editedIndex = this.getAcademicYearList.indexOf(item); |
| 537 | this.editedItem = Object.assign({}, item); | 537 | this.editedItem = Object.assign({}, item); |
| 538 | this.viewAcademinYearDialog = true; | 538 | this.viewAcademinYearDialog = true; |
| 539 | }, | 539 | }, |
| 540 | 540 | ||
| 541 | deleteItem(item) { | 541 | deleteItem(item) { |
| 542 | let deleteAcademic = { | 542 | let deleteAcademic = { |
| 543 | academicId: item._id, | 543 | academicId: item._id, |
| 544 | }; | 544 | }; |
| 545 | http() | 545 | http() |
| 546 | .delete( | 546 | .delete( |
| 547 | "/deleteAcademic", | 547 | "/deleteAcademic", |
| 548 | confirm("Are you sure you want to delete this?") && { | 548 | confirm("Are you sure you want to delete this?") && { |
| 549 | params: deleteAcademic, | 549 | params: deleteAcademic, |
| 550 | } | 550 | } |
| 551 | ) | 551 | ) |
| 552 | .then((response) => { | 552 | .then((response) => { |
| 553 | this.snackbar = true; | 553 | this.snackbar = true; |
| 554 | this.text = response.data.message; | 554 | this.text = response.data.message; |
| 555 | this.color = "green"; | 555 | this.color = "green"; |
| 556 | this.getAcademicYear(); | 556 | this.getAcademicYear(); |
| 557 | }) | 557 | }) |
| 558 | .catch((error) => { | 558 | .catch((error) => { |
| 559 | this.snackbar = true; | 559 | this.snackbar = true; |
| 560 | this.text = error.response.data.message; | 560 | this.text = error.response.data.message; |
| 561 | this.color = "error"; | 561 | this.color = "error"; |
| 562 | }); | 562 | }); |
| 563 | }, | 563 | }, |
| 564 | close() { | 564 | close() { |
| 565 | this.editAcademinYearDialog = false; | 565 | this.editAcademinYearDialog = false; |
| 566 | }, | 566 | }, |
| 567 | closeAddAcademicYearModel() { | 567 | closeAddAcademicYearModel() { |
| 568 | this.addAcademicYearDialog = false; | 568 | this.addAcademicYearDialog = false; |
| 569 | this.addAcademicYear = []; | 569 | this.addAcademicYear = []; |
| 570 | }, | 570 | }, |
| 571 | submit() { | 571 | submit() { |
| 572 | if (this.$refs.form.validate()) { | 572 | if (this.$refs.form.validate()) { |
| 573 | this.loading = true; | 573 | this.loading = true; |
| 574 | http() | 574 | http() |
| 575 | .post("/createAcademic", this.addAcademicYear) | 575 | .post("/createAcademic", this.addAcademicYear) |
| 576 | .then((response) => { | 576 | .then((response) => { |
| 577 | this.snackbar = true; | 577 | this.snackbar = true; |
| 578 | this.text = response.data.message; | 578 | this.text = response.data.message; |
| 579 | this.color = "green"; | 579 | this.color = "green"; |
| 580 | this.getAcademicYear(); | 580 | this.getAcademicYear(); |
| 581 | this.clear(); | 581 | this.clear(); |
| 582 | this.loading = false; | 582 | this.loading = false; |
| 583 | this.addAcademicYearDialog = false; | 583 | this.addAcademicYearDialog = false; |
| 584 | }) | 584 | }) |
| 585 | .catch((error) => { | 585 | .catch((error) => { |
| 586 | this.snackbar = true; | 586 | this.snackbar = true; |
| 587 | this.text = error.response.data.message; | 587 | this.text = error.response.data.message; |
| 588 | this.color = "error"; | 588 | this.color = "error"; |
| 589 | this.loading = false; | 589 | this.loading = false; |
| 590 | }); | 590 | }); |
| 591 | } | 591 | } |
| 592 | }, | 592 | }, |
| 593 | clear() { | 593 | clear() { |
| 594 | this.$refs.form.reset(); | 594 | this.$refs.form.reset(); |
| 595 | }, | 595 | }, |
| 596 | save() { | 596 | save() { |
| 597 | this.editedItem.academicId = this.editedItem._id; | 597 | this.editedItem.academicId = this.editedItem._id; |
| 598 | http() | 598 | http() |
| 599 | .put("/updateAcademic", this.editedItem, { | 599 | .put("/updateAcademic", this.editedItem, { |
| 600 | headers: { Authorization: "Bearer " + this.token }, | 600 | headers: { Authorization: "Bearer " + this.token }, |
| 601 | }) | 601 | }) |
| 602 | .then((response) => { | 602 | .then((response) => { |
| 603 | this.snackbar = true; | 603 | this.snackbar = true; |
| 604 | this.text = response.data.message; | 604 | this.text = response.data.message; |
| 605 | this.color = "green"; | 605 | this.color = "green"; |
| 606 | this.getAcademicYear(); | 606 | this.getAcademicYear(); |
| 607 | this.close(); | 607 | this.close(); |
| 608 | }) | 608 | }) |
| 609 | .catch((error) => { | 609 | .catch((error) => { |
| 610 | this.snackbar = true; | 610 | this.snackbar = true; |
| 611 | this.text = error.response.data.message; | 611 | this.text = error.response.data.message; |
| 612 | this.color = "error"; | 612 | this.color = "error"; |
| 613 | }); | 613 | }); |
| 614 | }, | 614 | }, |
| 615 | displaySearch() { | 615 | displaySearch() { |
| 616 | (this.show = false), (this.showSearch = true); | 616 | (this.show = false), (this.showSearch = true); |
| 617 | }, | 617 | }, |
| 618 | closeSearch() { | 618 | closeSearch() { |
| 619 | this.showSearch = false; | 619 | this.showSearch = false; |
| 620 | this.show = true; | 620 | this.show = true; |
| 621 | this.search = ""; | 621 | this.search = ""; |
| 622 | }, | 622 | }, |
| 623 | }, | 623 | }, |
| 624 | mounted() { | 624 | mounted() { |
| 625 | this.token = this.$store.state.token; | 625 | this.token = this.$store.state.token; |
| 626 | this.getAcademicYear(); | 626 | this.getAcademicYear(); |
| 627 | }, | 627 | }, |
| 628 | }; | 628 | }; |
| 629 | </script> | 629 | </script> |
src/pages/Administrator/role.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS Role Distribution ****** --> | 3 | <!-- ****** EDITS Role Distribution ****** --> |
| 4 | <v-dialog v-model="editRoleDialog" max-width="400px"> | 4 | <v-dialog v-model="editRoleDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Role</label> | 8 | <label class="title text-xs-center">Edit Role</label> |
| 9 | <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Role:</label> | 17 | <label class="right">Role:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> | 20 | <v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field> |
| 21 | </v-flex> | 21 | </v-flex> |
| 22 | </v-layout> | 22 | </v-layout> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs12> | 25 | <v-flex xs12> |
| 26 | <v-layout> | 26 | <v-layout> |
| 27 | <v-spacer></v-spacer> | 27 | <v-spacer></v-spacer> |
| 28 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 28 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 29 | <v-spacer></v-spacer> | 29 | <v-spacer></v-spacer> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-layout> | 32 | </v-layout> |
| 33 | </v-container> | 33 | </v-container> |
| 34 | </v-form> | 34 | </v-form> |
| 35 | </v-card> | 35 | </v-card> |
| 36 | </v-dialog> | 36 | </v-dialog> |
| 37 | <!-- ****** ROLE TABLE ****** --> | 37 | <!-- ****** ROLE TABLE ****** --> |
| 38 | 38 | ||
| 39 | <v-toolbar color="transparent" flat> | 39 | <v-toolbar color="transparent" flat> |
| 40 | <!-- <v-btn | 40 | <!-- <v-btn |
| 41 | fab | 41 | fab |
| 42 | dark | 42 | dark |
| 43 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 43 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 44 | small | 44 | small |
| 45 | @click="addRoleDialog = true" | 45 | @click="addRoleDialog = true" |
| 46 | > | 46 | > |
| 47 | <v-icon dark>add</v-icon> | 47 | <v-icon dark>add</v-icon> |
| 48 | </v-btn> | 48 | </v-btn> |
| 49 | <v-btn | 49 | <v-btn |
| 50 | round | 50 | round |
| 51 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 51 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 52 | dark | 52 | dark |
| 53 | @click="addRoleDialog = true" | 53 | @click="addRoleDialog = true" |
| 54 | > | 54 | > |
| 55 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role | 55 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Role |
| 56 | </v-btn> --> | 56 | </v-btn> --> |
| 57 | <v-spacer></v-spacer> | 57 | <v-spacer></v-spacer> |
| 58 | <v-card-title class="body-1" v-show="show"> | 58 | <v-card-title class="body-1" v-show="show"> |
| 59 | <v-btn icon large flat @click="displaySearch"> | 59 | <v-btn icon large flat @click="displaySearch"> |
| 60 | <v-avatar size="27"> | 60 | <v-avatar size="27"> |
| 61 | <img src="/static/icon/search.png" alt="icon" /> | 61 | <img src="/static/icon/search.png" alt="icon" /> |
| 62 | </v-avatar> | 62 | </v-avatar> |
| 63 | </v-btn> | 63 | </v-btn> |
| 64 | </v-card-title> | 64 | </v-card-title> |
| 65 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 65 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 67 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 68 | <v-icon @click="closeSearch" color="error">close</v-icon> | 68 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-toolbar> | 71 | </v-toolbar> |
| 72 | <v-data-table | 72 | <v-data-table |
| 73 | :headers="headers" | 73 | :headers="headers" |
| 74 | :items="getRoles" | 74 | :items="getRoles" |
| 75 | :pagination.sync="pagination" | 75 | :pagination.sync="pagination" |
| 76 | :search="search" | 76 | :search="search" |
| 77 | > | 77 | > |
| 78 | <template slot="items" slot-scope="props"> | 78 | <template slot="items" slot-scope="props"> |
| 79 | <tr class="tr"> | 79 | <tr class="tr"> |
| 80 | <td class="td td-row">{{ props.index + 1}}</td> | 80 | <td class="td td-row">{{ props.index + 1}}</td> |
| 81 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 81 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 82 | <!-- <td class="td td-row text-xs-center"> | 82 | <!-- <td class="td td-row text-xs-center"> |
| 83 | <span> | 83 | <span> |
| 84 | <v-tooltip top> | 84 | <v-tooltip top> |
| 85 | <img | 85 | <img |
| 86 | slot="activator" | 86 | slot="activator" |
| 87 | style="cursor:pointer; width:20px; height:18px; " | 87 | style="cursor:pointer; width:20px; height:18px; " |
| 88 | class="mr-3" | 88 | class="mr-3" |
| 89 | @click="editItem(props.item)" | 89 | @click="editItem(props.item)" |
| 90 | src="/static/icon/edit.png" | 90 | src="/static/icon/edit.png" |
| 91 | /> | 91 | /> |
| 92 | <span>Edit</span> | 92 | <span>Edit</span> |
| 93 | </v-tooltip> | 93 | </v-tooltip> |
| 94 | <v-tooltip top> | 94 | <v-tooltip top> |
| 95 | <img | 95 | <img |
| 96 | slot="activator" | 96 | slot="activator" |
| 97 | style="cursor:pointer; width:20px; height:20px; " | 97 | style="cursor:pointer; width:20px; height:20px; " |
| 98 | @click="deleteItem(props.item)" | 98 | @click="deleteItem(props.item)" |
| 99 | src="/static/icon/delete.png" | 99 | src="/static/icon/delete.png" |
| 100 | /> | 100 | /> |
| 101 | <span>Delete</span> | 101 | <span>Delete</span> |
| 102 | </v-tooltip> | 102 | </v-tooltip> |
| 103 | </span> | 103 | </span> |
| 104 | </td> --> | 104 | </td> --> |
| 105 | </tr> | 105 | </tr> |
| 106 | </template> | 106 | </template> |
| 107 | <v-alert | 107 | <v-alert |
| 108 | slot="no-results" | 108 | slot="no-results" |
| 109 | :value="true" | 109 | :value="true" |
| 110 | color="error" | 110 | color="error" |
| 111 | icon="warning" | 111 | icon="warning" |
| 112 | >Your search for "{{ search }}" found no results.</v-alert> | 112 | >Your search for "{{ search }}" found no results.</v-alert> |
| 113 | </v-data-table> | 113 | </v-data-table> |
| 114 | 114 | ||
| 115 | <!-- ****** ADD ROLE ****** --> | 115 | <!-- ****** ADD ROLE ****** --> |
| 116 | 116 | ||
| 117 | <v-dialog v-model="addRoleDialog" max-width="400px"> | 117 | <v-dialog v-model="addRoleDialog" max-width="400px" persistent> |
| 118 | <v-card flat class="card-style pa-2" dark> | 118 | <v-card flat class="card-style pa-2" dark> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs12> | 120 | <v-flex xs12> |
| 121 | <label class="title text-xs-center">Add Role</label> | 121 | <label class="title text-xs-center">Add Role</label> |
| 122 | <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon> | 122 | <v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | </v-layout> | 124 | </v-layout> |
| 125 | <v-form ref="form" v-model="valid" lazy-validation> | 125 | <v-form ref="form" v-model="valid" lazy-validation> |
| 126 | <v-container fluid> | 126 | <v-container fluid> |
| 127 | <v-flex xs12> | 127 | <v-flex xs12> |
| 128 | <v-layout> | 128 | <v-layout> |
| 129 | <v-flex xs3 class="pt-4 subheading"> | 129 | <v-flex xs3 class="pt-4 subheading"> |
| 130 | <label class="right">Role:</label> | 130 | <label class="right">Role:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-flex xs8 sm7 class="ml-3"> | 132 | <v-flex xs8 sm7 class="ml-3"> |
| 133 | <v-text-field | 133 | <v-text-field |
| 134 | v-model="addrole.name" | 134 | v-model="addrole.name" |
| 135 | placeholder="fill your Role" | 135 | placeholder="fill your Role" |
| 136 | :rules="roleRules" | 136 | :rules="roleRules" |
| 137 | ></v-text-field> | 137 | ></v-text-field> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs12 sm12> | 142 | <v-flex xs12 sm12> |
| 143 | <v-layout> | 143 | <v-layout> |
| 144 | <v-spacer></v-spacer> | 144 | <v-spacer></v-spacer> |
| 145 | <v-btn @click="clear" round class="add-button" dark>clear</v-btn> | 145 | <v-btn @click="clear" round class="add-button" dark>clear</v-btn> |
| 146 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 146 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 147 | <v-spacer></v-spacer> | 147 | <v-spacer></v-spacer> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-layout> | 150 | </v-layout> |
| 151 | </v-container> | 151 | </v-container> |
| 152 | </v-form> | 152 | </v-form> |
| 153 | </v-card> | 153 | </v-card> |
| 154 | </v-dialog> | 154 | </v-dialog> |
| 155 | <div class="loader" v-if="showLoader"> | 155 | <div class="loader" v-if="showLoader"> |
| 156 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 156 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 157 | </div> | 157 | </div> |
| 158 | </v-container> | 158 | </v-container> |
| 159 | </template> | 159 | </template> |
| 160 | 160 | ||
| 161 | <script> | 161 | <script> |
| 162 | import http from "@/Services/http.js"; | 162 | import http from "@/Services/http.js"; |
| 163 | 163 | ||
| 164 | export default { | 164 | export default { |
| 165 | data: () => ({ | 165 | data: () => ({ |
| 166 | snackbar: false, | 166 | snackbar: false, |
| 167 | y: "top", | 167 | y: "top", |
| 168 | x: "right", | 168 | x: "right", |
| 169 | mode: "", | 169 | mode: "", |
| 170 | timeout: 5000, | 170 | timeout: 5000, |
| 171 | text: "", | 171 | text: "", |
| 172 | loading: false, | 172 | loading: false, |
| 173 | search: "", | 173 | search: "", |
| 174 | show: true, | 174 | show: true, |
| 175 | showSearch: false, | 175 | showSearch: false, |
| 176 | showLoader: false, | 176 | showLoader: false, |
| 177 | editRoleDialog: false, | 177 | editRoleDialog: false, |
| 178 | valid: true, | 178 | valid: true, |
| 179 | addRoleDialog: false, | 179 | addRoleDialog: false, |
| 180 | pagination: { | 180 | pagination: { |
| 181 | rowsPerPage: 10 | 181 | rowsPerPage: 10 |
| 182 | }, | 182 | }, |
| 183 | roleRules: [v => !!v || "Role is required"], | 183 | roleRules: [v => !!v || "Role is required"], |
| 184 | headers: [ | 184 | headers: [ |
| 185 | { | 185 | { |
| 186 | text: "No", | 186 | text: "No", |
| 187 | align: "", | 187 | align: "", |
| 188 | sortable: false, | 188 | sortable: false, |
| 189 | value: "No" | 189 | value: "No" |
| 190 | }, | 190 | }, |
| 191 | { text: "Role", value: "role", sortable: false, align: "center" }, | 191 | { text: "Role", value: "role", sortable: false, align: "center" }, |
| 192 | // { text: "Action", value: "", sortable: false, align: "center" } | 192 | // { text: "Action", value: "", sortable: false, align: "center" } |
| 193 | ], | 193 | ], |
| 194 | getRoles: [], | 194 | getRoles: [], |
| 195 | editedIndex: -1, | 195 | editedIndex: -1, |
| 196 | token: "", | 196 | token: "", |
| 197 | addrole: {}, | 197 | addrole: {}, |
| 198 | editedItem: {} | 198 | editedItem: {} |
| 199 | }), | 199 | }), |
| 200 | methods: { | 200 | methods: { |
| 201 | getRole() { | 201 | getRole() { |
| 202 | this.showLoader = true; | 202 | this.showLoader = true; |
| 203 | http() | 203 | http() |
| 204 | .get("/getRolesList", { | 204 | .get("/getRolesList", { |
| 205 | headers: { Authorization: "Bearer " + this.token } | 205 | headers: { Authorization: "Bearer " + this.token } |
| 206 | }) | 206 | }) |
| 207 | .then(response => { | 207 | .then(response => { |
| 208 | this.getRoles = response.data.data; | 208 | this.getRoles = response.data.data; |
| 209 | this.showLoader = false; | 209 | this.showLoader = false; |
| 210 | }) | 210 | }) |
| 211 | .catch(error => { | 211 | .catch(error => { |
| 212 | this.showLoader = false; | 212 | this.showLoader = false; |
| 213 | if (error.response.status === 401) { | 213 | if (error.response.status === 401) { |
| 214 | this.$router.replace({ path: "/" }); | 214 | this.$router.replace({ path: "/" }); |
| 215 | this.$store.dispatch("setToken", null); | 215 | this.$store.dispatch("setToken", null); |
| 216 | this.$store.dispatch("Id", null); | 216 | this.$store.dispatch("Id", null); |
| 217 | this.$store.dispatch("Role", null); | 217 | this.$store.dispatch("Role", null); |
| 218 | } | 218 | } |
| 219 | }); | 219 | }); |
| 220 | }, | 220 | }, |
| 221 | editItem(item) { | 221 | editItem(item) { |
| 222 | this.editedIndex = this.getRoles.indexOf(item); | 222 | this.editedIndex = this.getRoles.indexOf(item); |
| 223 | this.editedItem = Object.assign({}, item); | 223 | this.editedItem = Object.assign({}, item); |
| 224 | this.editRoleDialog = true; | 224 | this.editRoleDialog = true; |
| 225 | }, | 225 | }, |
| 226 | deleteItem(item) { | 226 | deleteItem(item) { |
| 227 | let deleteRoleId = { | 227 | let deleteRoleId = { |
| 228 | roleId: item._id | 228 | roleId: item._id |
| 229 | }; | 229 | }; |
| 230 | http() | 230 | http() |
| 231 | .delete( | 231 | .delete( |
| 232 | "/deleteRole", | 232 | "/deleteRole", |
| 233 | confirm("Are you sure you want to delete this?") && { | 233 | confirm("Are you sure you want to delete this?") && { |
| 234 | params: deleteRoleId | 234 | params: deleteRoleId |
| 235 | }, | 235 | }, |
| 236 | { | 236 | { |
| 237 | headers: { | 237 | headers: { |
| 238 | Authorization: "Bearer " + this.token | 238 | Authorization: "Bearer " + this.token |
| 239 | } | 239 | } |
| 240 | } | 240 | } |
| 241 | ) | 241 | ) |
| 242 | .then(response => { | 242 | .then(response => { |
| 243 | this.text = response.data.message; | 243 | this.text = response.data.message; |
| 244 | this.getRole(); | 244 | this.getRole(); |
| 245 | }) | 245 | }) |
| 246 | .catch(error => { | 246 | .catch(error => { |
| 247 | console.log(error); | 247 | console.log(error); |
| 248 | }); | 248 | }); |
| 249 | }, | 249 | }, |
| 250 | close() { | 250 | close() { |
| 251 | this.editRoleDialog = false; | 251 | this.editRoleDialog = false; |
| 252 | }, | 252 | }, |
| 253 | submit() { | 253 | submit() { |
| 254 | if (this.$refs.form.validate()) { | 254 | if (this.$refs.form.validate()) { |
| 255 | this.loading = true; | 255 | this.loading = true; |
| 256 | http() | 256 | http() |
| 257 | .post("/createRole", this.addrole) | 257 | .post("/createRole", this.addrole) |
| 258 | .then(response => { | 258 | .then(response => { |
| 259 | this.snackbar = true; | 259 | this.snackbar = true; |
| 260 | this.addRoleDialog = false; | 260 | this.addRoleDialog = false; |
| 261 | this.text = response.data.message; | 261 | this.text = response.data.message; |
| 262 | this.getRole(); | 262 | this.getRole(); |
| 263 | this.clear(); | 263 | this.clear(); |
| 264 | this.loading = false; | 264 | this.loading = false; |
| 265 | }) | 265 | }) |
| 266 | .catch(error => { | 266 | .catch(error => { |
| 267 | this.snackbar = true; | 267 | this.snackbar = true; |
| 268 | this.text = error.response.data.message; | 268 | this.text = error.response.data.message; |
| 269 | this.loading = false; | 269 | this.loading = false; |
| 270 | }); | 270 | }); |
| 271 | } | 271 | } |
| 272 | }, | 272 | }, |
| 273 | clear() { | 273 | clear() { |
| 274 | this.$refs.form.reset(); | 274 | this.$refs.form.reset(); |
| 275 | }, | 275 | }, |
| 276 | save() { | 276 | save() { |
| 277 | (this.editedItem.roleId = this.editedItem._id), | 277 | (this.editedItem.roleId = this.editedItem._id), |
| 278 | http() | 278 | http() |
| 279 | .put("/updateRole", this.editedItem, { | 279 | .put("/updateRole", this.editedItem, { |
| 280 | headers: { | 280 | headers: { |
| 281 | Authorization: "Bearer " + this.token | 281 | Authorization: "Bearer " + this.token |
| 282 | } | 282 | } |
| 283 | }) | 283 | }) |
| 284 | .then(response => { | 284 | .then(response => { |
| 285 | this.text = "Successfully Edit Notification"; | 285 | this.text = "Successfully Edit Notification"; |
| 286 | this.getRole(); | 286 | this.getRole(); |
| 287 | this.close(); | 287 | this.close(); |
| 288 | }) | 288 | }) |
| 289 | .catch(error => { | 289 | .catch(error => { |
| 290 | console.log(error); | 290 | console.log(error); |
| 291 | }); | 291 | }); |
| 292 | }, | 292 | }, |
| 293 | displaySearch() { | 293 | displaySearch() { |
| 294 | (this.show = false), (this.showSearch = true); | 294 | (this.show = false), (this.showSearch = true); |
| 295 | }, | 295 | }, |
| 296 | closeSearch() { | 296 | closeSearch() { |
| 297 | this.showSearch = false; | 297 | this.showSearch = false; |
| 298 | this.show = true; | 298 | this.show = true; |
| 299 | this.search = ""; | 299 | this.search = ""; |
| 300 | } | 300 | } |
| 301 | }, | 301 | }, |
| 302 | mounted() { | 302 | mounted() { |
| 303 | this.token = this.$store.state.token; | 303 | this.token = this.$store.state.token; |
| 304 | this.getRole(); | 304 | this.getRole(); |
| 305 | } | 305 | } |
| 306 | }; | 306 | }; |
| 307 | </script> | 307 | </script> |
src/pages/Administrator/systemAdmin.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <v-tabs grow slider-color="gray"> | 3 | <v-tabs grow slider-color="gray"> |
| 4 | <v-tab | 4 | <v-tab |
| 5 | ripple | 5 | ripple |
| 6 | @click="activeTab('existing')" | 6 | @click="activeTab('existing')" |
| 7 | v-bind:class="{ active: isActive }" | 7 | v-bind:class="{ active: isActive }" |
| 8 | id="tab" | 8 | id="tab" |
| 9 | class="subheading" | 9 | class="subheading" |
| 10 | >Existing System Admin</v-tab> | 10 | >Existing System Admin</v-tab> |
| 11 | <v-tab | 11 | <v-tab |
| 12 | ripple | 12 | ripple |
| 13 | @click="activeTab('new')" | 13 | @click="activeTab('new')" |
| 14 | v-bind:class="{ active: newActive }" | 14 | v-bind:class="{ active: newActive }" |
| 15 | id="tab1" | 15 | id="tab1" |
| 16 | User | 16 | User |
| 17 | class="subheading" | 17 | class="subheading" |
| 18 | >Add New System Admin</v-tab> | 18 | >Add New System Admin</v-tab> |
| 19 | <!-- ****** EDIT System Admin DETAILS ****** --> | 19 | <!-- ****** EDIT System Admin DETAILS ****** --> |
| 20 | <v-tab-item> | 20 | <v-tab-item> |
| 21 | <v-snackbar | 21 | <v-snackbar |
| 22 | :timeout="timeout" | 22 | :timeout="timeout" |
| 23 | :top="y === 'top'" | 23 | :top="y === 'top'" |
| 24 | :right="x === 'right'" | 24 | :right="x === 'right'" |
| 25 | :vertical="mode === 'vertical'" | 25 | :vertical="mode === 'vertical'" |
| 26 | v-model="snackbar" | 26 | v-model="snackbar" |
| 27 | color="success" | 27 | color="success" |
| 28 | >{{ text }}</v-snackbar> | 28 | >{{ text }}</v-snackbar> |
| 29 | <v-dialog v-model="dialog" max-width="1100px" scrollable> | 29 | <v-dialog v-model="dialog" max-width="1100px" scrollable persistent> |
| 30 | <v-card flat> | 30 | <v-card flat> |
| 31 | <v-toolbar color="grey lighten-2" flat> | 31 | <v-toolbar color="grey lighten-2" flat> |
| 32 | <v-spacer></v-spacer> | 32 | <v-spacer></v-spacer> |
| 33 | <v-toolbar-title>Edit System Admin Profile</v-toolbar-title> | 33 | <v-toolbar-title>Edit System Admin Profile</v-toolbar-title> |
| 34 | <v-spacer></v-spacer> | 34 | <v-spacer></v-spacer> |
| 35 | </v-toolbar> | 35 | </v-toolbar> |
| 36 | <v-card-text style="height: 800px;"> | 36 | <v-card-text style="height: 800px;"> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex | 38 | <v-flex |
| 39 | xs12 | 39 | xs12 |
| 40 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4" | 40 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4" |
| 41 | > | 41 | > |
| 42 | <v-avatar size="160px"> | 42 | <v-avatar size="160px"> |
| 43 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 43 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 44 | <img | 44 | <img |
| 45 | :src="editedItem.profilePicUrl" | 45 | :src="editedItem.profilePicUrl" |
| 46 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 46 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 47 | /> | 47 | /> |
| 48 | <img | 48 | <img |
| 49 | v-if="imageUrl" | 49 | v-if="imageUrl" |
| 50 | :src="imageUrl" | 50 | :src="imageUrl" |
| 51 | height="150" | 51 | height="150" |
| 52 | style="border-radius:50%; width:200px" | 52 | style="border-radius:50%; width:200px" |
| 53 | /> | 53 | /> |
| 54 | </v-avatar> | 54 | </v-avatar> |
| 55 | <input | 55 | <input |
| 56 | type="file" | 56 | type="file" |
| 57 | style="display:none" | 57 | style="display:none" |
| 58 | ref="image" | 58 | ref="image" |
| 59 | accept="image/*" | 59 | accept="image/*" |
| 60 | @change="onFilePicked" | 60 | @change="onFilePicked" |
| 61 | /> | 61 | /> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-layout wrap> | 64 | <v-layout wrap> |
| 65 | <v-flex xs12 sm6> | 65 | <v-flex xs12 sm6> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-flex xs4 sm4 class="pt-4 subheading"> | 67 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 68 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 68 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 69 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 69 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-flex xs8 sm6 class="ml-3"> | 71 | <v-flex xs8 sm6 class="ml-3"> |
| 72 | <v-text-field | 72 | <v-text-field |
| 73 | v-model="editedItem.name" | 73 | v-model="editedItem.name" |
| 74 | placeholder="fill your full Name" | 74 | placeholder="fill your full Name" |
| 75 | type="text" | 75 | type="text" |
| 76 | required | 76 | required |
| 77 | ></v-text-field> | 77 | ></v-text-field> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | <v-flex xs12 sm6> | 81 | <v-flex xs12 sm6> |
| 82 | <v-layout> | 82 | <v-layout> |
| 83 | <v-flex xs4 sm4 class="pt-4 subheading"> | 83 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 84 | <label class="right">Email ID:</label> | 84 | <label class="right">Email ID:</label> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex xs8 sm6 class="ml-3"> | 86 | <v-flex xs8 sm6 class="ml-3"> |
| 87 | <v-text-field | 87 | <v-text-field |
| 88 | placeholder="fill your email" | 88 | placeholder="fill your email" |
| 89 | v-model="editedItem.email" | 89 | v-model="editedItem.email" |
| 90 | type="text" | 90 | type="text" |
| 91 | required | 91 | required |
| 92 | ></v-text-field> | 92 | ></v-text-field> |
| 93 | </v-flex> | 93 | </v-flex> |
| 94 | </v-layout> | 94 | </v-layout> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | <v-layout wrap> | 97 | <v-layout wrap> |
| 98 | <v-flex xs12 sm6> | 98 | <v-flex xs12 sm6> |
| 99 | <v-layout> | 99 | <v-layout> |
| 100 | <v-flex xs4 sm4 class="pt-4 subheading"> | 100 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 101 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 101 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 102 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 102 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 103 | </v-flex> | 103 | </v-flex> |
| 104 | <v-flex xs8 sm6 class="ml-3"> | 104 | <v-flex xs8 sm6 class="ml-3"> |
| 105 | <v-menu | 105 | <v-menu |
| 106 | ref="menu" | 106 | ref="menu" |
| 107 | :close-on-content-click="false" | 107 | :close-on-content-click="false" |
| 108 | v-model="menu2" | 108 | v-model="menu2" |
| 109 | :nudge-right="40" | 109 | :nudge-right="40" |
| 110 | lazy | 110 | lazy |
| 111 | transition="scale-transition" | 111 | transition="scale-transition" |
| 112 | offset-y | 112 | offset-y |
| 113 | full-width | 113 | full-width |
| 114 | min-width="290px" | 114 | min-width="290px" |
| 115 | > | 115 | > |
| 116 | <v-text-field | 116 | <v-text-field |
| 117 | slot="activator" | 117 | slot="activator" |
| 118 | v-model="editedItem.dob" | 118 | v-model="editedItem.dob" |
| 119 | placeholder="Select date" | 119 | placeholder="Select date" |
| 120 | ></v-text-field> | 120 | ></v-text-field> |
| 121 | <v-date-picker | 121 | <v-date-picker |
| 122 | ref="picker" | 122 | ref="picker" |
| 123 | v-model="editedItem.dob" | 123 | v-model="editedItem.dob" |
| 124 | :max="new Date().toISOString().substr(0, 10)" | 124 | :max="new Date().toISOString().substr(0, 10)" |
| 125 | min="1950-01-01" | 125 | min="1950-01-01" |
| 126 | @input="menu2 = false" | 126 | @input="menu2 = false" |
| 127 | ></v-date-picker> | 127 | ></v-date-picker> |
| 128 | </v-menu> | 128 | </v-menu> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | </v-layout> | 130 | </v-layout> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-flex xs12 sm6> | 132 | <v-flex xs12 sm6> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs4 class="pt-4 subheading"> | 134 | <v-flex xs4 class="pt-4 subheading"> |
| 135 | <label class="right">City:</label> | 135 | <label class="right">City:</label> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | <v-flex xs8 sm6 class="ml-3"> | 137 | <v-flex xs8 sm6 class="ml-3"> |
| 138 | <v-text-field | 138 | <v-text-field |
| 139 | v-model="editedItem.city" | 139 | v-model="editedItem.city" |
| 140 | placeholder="fill your City Name" | 140 | placeholder="fill your City Name" |
| 141 | type="text" | 141 | type="text" |
| 142 | required | 142 | required |
| 143 | ></v-text-field> | 143 | ></v-text-field> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-layout> | 145 | </v-layout> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout wrap> | 148 | <v-layout wrap> |
| 149 | <v-flex xs12 sm6> | 149 | <v-flex xs12 sm6> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs4 class="pt-4 subheading"> | 151 | <v-flex xs4 class="pt-4 subheading"> |
| 152 | <label class="right">State:</label> | 152 | <label class="right">State:</label> |
| 153 | </v-flex> | 153 | </v-flex> |
| 154 | <v-flex xs8 sm6 class="ml-3"> | 154 | <v-flex xs8 sm6 class="ml-3"> |
| 155 | <v-text-field | 155 | <v-text-field |
| 156 | v-model="editedItem.state" | 156 | v-model="editedItem.state" |
| 157 | placeholder="fill your State Name" | 157 | placeholder="fill your State Name" |
| 158 | type="text" | 158 | type="text" |
| 159 | required | 159 | required |
| 160 | ></v-text-field> | 160 | ></v-text-field> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | <v-flex xs12 sm6> | 164 | <v-flex xs12 sm6> |
| 165 | <v-layout> | 165 | <v-layout> |
| 166 | <v-flex xs4 class="pt-4 subheading"> | 166 | <v-flex xs4 class="pt-4 subheading"> |
| 167 | <label class="right">PinCode:</label> | 167 | <label class="right">PinCode:</label> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | <v-flex xs8 sm6 class="ml-3"> | 169 | <v-flex xs8 sm6 class="ml-3"> |
| 170 | <v-text-field | 170 | <v-text-field |
| 171 | v-model="editedItem.pincode" | 171 | v-model="editedItem.pincode" |
| 172 | placeholder="fill your pincode" | 172 | placeholder="fill your pincode" |
| 173 | type="number" | 173 | type="number" |
| 174 | required | 174 | required |
| 175 | ></v-text-field> | 175 | ></v-text-field> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | </v-layout> | 179 | </v-layout> |
| 180 | <v-layout wrap> | 180 | <v-layout wrap> |
| 181 | <v-flex xs12 sm6> | 181 | <v-flex xs12 sm6> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-flex xs4 class="pt-4 subheading"> | 183 | <v-flex xs4 class="pt-4 subheading"> |
| 184 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 184 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 185 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 185 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex xs8 sm6 class="ml-3"> | 187 | <v-flex xs8 sm6 class="ml-3"> |
| 188 | <v-text-field | 188 | <v-text-field |
| 189 | v-model="editedItem.mobileNo" | 189 | v-model="editedItem.mobileNo" |
| 190 | placeholder="fill your MobileNo" | 190 | placeholder="fill your MobileNo" |
| 191 | type="number" | 191 | type="number" |
| 192 | required | 192 | required |
| 193 | ></v-text-field> | 193 | ></v-text-field> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | <v-flex xs12 sm6> | 197 | <v-flex xs12 sm6> |
| 198 | <v-layout> | 198 | <v-layout> |
| 199 | <v-flex xs4 class="pt-4 subheading"> | 199 | <v-flex xs4 class="pt-4 subheading"> |
| 200 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 200 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 201 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 201 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | <v-flex xs8 sm6 class="ml-3"> | 203 | <v-flex xs8 sm6 class="ml-3"> |
| 204 | <v-autocomplete | 204 | <v-autocomplete |
| 205 | v-model="editedItem.country" | 205 | v-model="editedItem.country" |
| 206 | :items="countries" | 206 | :items="countries" |
| 207 | placeholder="Select Country Name" | 207 | placeholder="Select Country Name" |
| 208 | required | 208 | required |
| 209 | ></v-autocomplete> | 209 | ></v-autocomplete> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | </v-layout> | 211 | </v-layout> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-layout> | 213 | </v-layout> |
| 214 | <v-layout wrap> | 214 | <v-layout wrap> |
| 215 | <v-flex xs12 sm6> | 215 | <v-flex xs12 sm6> |
| 216 | <v-layout> | 216 | <v-layout> |
| 217 | <v-flex xs4 class="pt-4 subheading"> | 217 | <v-flex xs4 class="pt-4 subheading"> |
| 218 | <label class="right">Join Date:</label> | 218 | <label class="right">Join Date:</label> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | <v-flex xs8 sm6 class="ml-3"> | 220 | <v-flex xs8 sm6 class="ml-3"> |
| 221 | <v-menu | 221 | <v-menu |
| 222 | ref="menu" | 222 | ref="menu" |
| 223 | :close-on-content-click="false" | 223 | :close-on-content-click="false" |
| 224 | v-model="menu3" | 224 | v-model="menu3" |
| 225 | :nudge-right="40" | 225 | :nudge-right="40" |
| 226 | lazy | 226 | lazy |
| 227 | transition="scale-transition" | 227 | transition="scale-transition" |
| 228 | offset-y | 228 | offset-y |
| 229 | full-width | 229 | full-width |
| 230 | min-width="290px" | 230 | min-width="290px" |
| 231 | > | 231 | > |
| 232 | <v-text-field | 232 | <v-text-field |
| 233 | slot="activator" | 233 | slot="activator" |
| 234 | v-model="editedItem.joinDate" | 234 | v-model="editedItem.joinDate" |
| 235 | placeholder="Select date" | 235 | placeholder="Select date" |
| 236 | ></v-text-field> | 236 | ></v-text-field> |
| 237 | <v-date-picker | 237 | <v-date-picker |
| 238 | ref="picker" | 238 | ref="picker" |
| 239 | v-model="editedItem.joinDate" | 239 | v-model="editedItem.joinDate" |
| 240 | :max="new Date().toISOString().substr(0, 10)" | 240 | :max="new Date().toISOString().substr(0, 10)" |
| 241 | min="1950-01-01" | 241 | min="1950-01-01" |
| 242 | @input="menu3 = false" | 242 | @input="menu3 = false" |
| 243 | ></v-date-picker> | 243 | ></v-date-picker> |
| 244 | </v-menu> | 244 | </v-menu> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | </v-layout> | 246 | </v-layout> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | <v-flex xs12 sm6> | 248 | <v-flex xs12 sm6> |
| 249 | <v-layout> | 249 | <v-layout> |
| 250 | <v-flex xs4 class="pt-4 subheading"> | 250 | <v-flex xs4 class="pt-4 subheading"> |
| 251 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 251 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 252 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 252 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | <v-flex xs8 sm6 class="ml-3"> | 254 | <v-flex xs8 sm6 class="ml-3"> |
| 255 | <v-text-field | 255 | <v-text-field |
| 256 | label="Select Image" | 256 | label="Select Image" |
| 257 | @click="pickFile" | 257 | @click="pickFile" |
| 258 | v-model="imageName" | 258 | v-model="imageName" |
| 259 | append-icon="attach_file" | 259 | append-icon="attach_file" |
| 260 | ></v-text-field> | 260 | ></v-text-field> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | </v-layout> | 262 | </v-layout> |
| 263 | </v-flex> | 263 | </v-flex> |
| 264 | </v-layout> | 264 | </v-layout> |
| 265 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> | 265 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> |
| 266 | <v-flex xs12 sm12> | 266 | <v-flex xs12 sm12> |
| 267 | <v-layout> | 267 | <v-layout> |
| 268 | <v-flex xs4 sm2 class="pt-4 subheading ml-5"> | 268 | <v-flex xs4 sm2 class="pt-4 subheading ml-5"> |
| 269 | <label class="right pr-2">Present Address:</label> | 269 | <label class="right pr-2">Present Address:</label> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | <v-flex xs8 sm10> | 271 | <v-flex xs8 sm10> |
| 272 | <v-text-field | 272 | <v-text-field |
| 273 | name="input-4-3" | 273 | name="input-4-3" |
| 274 | v-model="editedItem.presentAddress" | 274 | v-model="editedItem.presentAddress" |
| 275 | placeholder="fill Your present Address" | 275 | placeholder="fill Your present Address" |
| 276 | required | 276 | required |
| 277 | ></v-text-field> | 277 | ></v-text-field> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs12 sm12> | 281 | <v-flex xs12 sm12> |
| 282 | <v-layout> | 282 | <v-layout> |
| 283 | <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> | 283 | <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm"> |
| 284 | <label class="pr-2">Permanent Address:</label> | 284 | <label class="pr-2">Permanent Address:</label> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | <v-flex xs12 sm10> | 286 | <v-flex xs12 sm10> |
| 287 | <v-text-field | 287 | <v-text-field |
| 288 | name="input-4-3" | 288 | name="input-4-3" |
| 289 | v-model="editedItem.permanentAddress" | 289 | v-model="editedItem.permanentAddress" |
| 290 | placeholder="fill Your Permanent Address" | 290 | placeholder="fill Your Permanent Address" |
| 291 | required | 291 | required |
| 292 | ></v-text-field> | 292 | ></v-text-field> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | </v-layout> | 294 | </v-layout> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | </v-layout> | 296 | </v-layout> |
| 297 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 297 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 298 | <v-flex xs12 sm12> | 298 | <v-flex xs12 sm12> |
| 299 | <v-layout> | 299 | <v-layout> |
| 300 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 300 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 301 | <label class>Present Address:</label> | 301 | <label class>Present Address:</label> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-flex xs12 sm12> | 305 | <v-flex xs12 sm12> |
| 306 | <v-textarea | 306 | <v-textarea |
| 307 | name="input-4-3" | 307 | name="input-4-3" |
| 308 | v-model="editedItem.presentAddress" | 308 | v-model="editedItem.presentAddress" |
| 309 | placeholder="fill Your present Address" | 309 | placeholder="fill Your present Address" |
| 310 | required | 310 | required |
| 311 | ></v-textarea> | 311 | ></v-textarea> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | <v-flex xs12 sm12> | 315 | <v-flex xs12 sm12> |
| 316 | <v-layout> | 316 | <v-layout> |
| 317 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 317 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 318 | <label>Permanent Address:</label> | 318 | <label>Permanent Address:</label> |
| 319 | </v-flex> | 319 | </v-flex> |
| 320 | </v-layout> | 320 | </v-layout> |
| 321 | <v-layout> | 321 | <v-layout> |
| 322 | <v-flex xs12 sm12> | 322 | <v-flex xs12 sm12> |
| 323 | <v-textarea | 323 | <v-textarea |
| 324 | name="input-4-3" | 324 | name="input-4-3" |
| 325 | v-model="editedItem.permanentAddress" | 325 | v-model="editedItem.permanentAddress" |
| 326 | placeholder="fill Your Permanent Address" | 326 | placeholder="fill Your Permanent Address" |
| 327 | required | 327 | required |
| 328 | ></v-textarea> | 328 | ></v-textarea> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-layout> | 332 | </v-layout> |
| 333 | <v-layout> | 333 | <v-layout> |
| 334 | <v-flex xs12 sm12> | 334 | <v-flex xs12 sm12> |
| 335 | <v-layout> | 335 | <v-layout> |
| 336 | <v-flex xs6> | 336 | <v-flex xs6> |
| 337 | <v-btn round dark @click.native="close">Cancel</v-btn> | 337 | <v-btn round dark @click.native="close">Cancel</v-btn> |
| 338 | </v-flex> | 338 | </v-flex> |
| 339 | <v-flex xs6> | 339 | <v-flex xs6> |
| 340 | <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> | 340 | <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | </v-layout> | 342 | </v-layout> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | </v-layout> | 344 | </v-layout> |
| 345 | </v-card-text> | 345 | </v-card-text> |
| 346 | </v-card> | 346 | </v-card> |
| 347 | </v-dialog> | 347 | </v-dialog> |
| 348 | 348 | ||
| 349 | <!-- ****** PROFILE VIEW System Admin DETAILS ****** --> | 349 | <!-- ****** PROFILE VIEW System Admin DETAILS ****** --> |
| 350 | 350 | ||
| 351 | <v-dialog v-model="dialog1" max-width="600px" scrollable> | 351 | <v-dialog v-model="dialog1" max-width="600px" scrollable persistent> |
| 352 | <v-card> | 352 | <v-card> |
| 353 | <v-toolbar color="grey lighten-2" flat> | 353 | <v-toolbar color="grey lighten-2" flat> |
| 354 | <v-spacer></v-spacer> | 354 | <v-spacer></v-spacer> |
| 355 | <v-toolbar-title> | 355 | <v-toolbar-title> |
| 356 | <h3> System Admin</h3> | 356 | <h3> System Admin</h3> |
| 357 | </v-toolbar-title> | 357 | </v-toolbar-title> |
| 358 | <v-spacer></v-spacer> | 358 | <v-spacer></v-spacer> |
| 359 | <v-icon @click="close1">close</v-icon> | 359 | <v-icon @click="close1">close</v-icon> |
| 360 | </v-toolbar> | 360 | </v-toolbar> |
| 361 | <v-card-text style="height: 700px;"> | 361 | <v-card-text style="height: 700px;"> |
| 362 | <v-container grid-list-md> | 362 | <v-container grid-list-md> |
| 363 | <v-layout wrap> | 363 | <v-layout wrap> |
| 364 | <v-flex> | 364 | <v-flex> |
| 365 | <v-flex align-center justify-center layout text-xs-center> | 365 | <v-flex align-center justify-center layout text-xs-center> |
| 366 | <v-avatar size="160px"> | 366 | <v-avatar size="160px"> |
| 367 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 367 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 368 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 368 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 369 | </v-avatar> | 369 | </v-avatar> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <v-flex xs5 sm6> | 372 | <v-flex xs5 sm6> |
| 373 | <h5 class="right my-1"> | 373 | <h5 class="right my-1"> |
| 374 | <b>Full Name:</b> | 374 | <b>Full Name:</b> |
| 375 | </h5> | 375 | </h5> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | <v-flex sm6 xs8> | 377 | <v-flex sm6 xs8> |
| 378 | <h5 class="my-1">{{ editedItem.name }}</h5> | 378 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 379 | </v-flex> | 379 | </v-flex> |
| 380 | </v-layout> | 380 | </v-layout> |
| 381 | <v-layout> | 381 | <v-layout> |
| 382 | <v-flex xs5 sm6> | 382 | <v-flex xs5 sm6> |
| 383 | <h5 class="right my-1"> | 383 | <h5 class="right my-1"> |
| 384 | <b>Email:</b> | 384 | <b>Email:</b> |
| 385 | </h5> | 385 | </h5> |
| 386 | </v-flex> | 386 | </v-flex> |
| 387 | <v-flex sm6 xs8> | 387 | <v-flex sm6 xs8> |
| 388 | <h5 class="my-1">{{ editedItem.email }}</h5> | 388 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-layout> | 391 | <v-layout> |
| 392 | <v-flex xs5 sm6> | 392 | <v-flex xs5 sm6> |
| 393 | <h5 class="right my-1"> | 393 | <h5 class="right my-1"> |
| 394 | <b>City:</b> | 394 | <b>City:</b> |
| 395 | </h5> | 395 | </h5> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | <v-flex sm6 xs8> | 397 | <v-flex sm6 xs8> |
| 398 | <h5 class="my-1">{{ editedItem.city }}</h5> | 398 | <h5 class="my-1">{{ editedItem.city }}</h5> |
| 399 | </v-flex> | 399 | </v-flex> |
| 400 | </v-layout> | 400 | </v-layout> |
| 401 | <v-layout> | 401 | <v-layout> |
| 402 | <v-flex xs5 sm6> | 402 | <v-flex xs5 sm6> |
| 403 | <h5 class="right my-1"> | 403 | <h5 class="right my-1"> |
| 404 | <b>State:</b> | 404 | <b>State:</b> |
| 405 | </h5> | 405 | </h5> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | <v-flex sm6 xs8> | 407 | <v-flex sm6 xs8> |
| 408 | <h5 class="my-1">{{ editedItem.state }}</h5> | 408 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | </v-layout> | 410 | </v-layout> |
| 411 | <v-layout> | 411 | <v-layout> |
| 412 | <v-flex xs5 sm6> | 412 | <v-flex xs5 sm6> |
| 413 | <h5 class="right my-1"> | 413 | <h5 class="right my-1"> |
| 414 | <b>Country:</b> | 414 | <b>Country:</b> |
| 415 | </h5> | 415 | </h5> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | <v-flex sm6 xs8> | 417 | <v-flex sm6 xs8> |
| 418 | <h5 class="my-1">{{ editedItem.country }}</h5> | 418 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | </v-layout> | 420 | </v-layout> |
| 421 | <v-layout> | 421 | <v-layout> |
| 422 | <v-flex xs5 sm6> | 422 | <v-flex xs5 sm6> |
| 423 | <h5 class="right my-1"> | 423 | <h5 class="right my-1"> |
| 424 | <b>Pincode:</b> | 424 | <b>Pincode:</b> |
| 425 | </h5> | 425 | </h5> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | <v-flex sm6 xs8> | 427 | <v-flex sm6 xs8> |
| 428 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 428 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 429 | </v-flex> | 429 | </v-flex> |
| 430 | </v-layout> | 430 | </v-layout> |
| 431 | <v-layout> | 431 | <v-layout> |
| 432 | <v-flex xs5 sm6> | 432 | <v-flex xs5 sm6> |
| 433 | <h5 class="right my-1"> | 433 | <h5 class="right my-1"> |
| 434 | <b>Mobile No:</b> | 434 | <b>Mobile No:</b> |
| 435 | </h5> | 435 | </h5> |
| 436 | </v-flex> | 436 | </v-flex> |
| 437 | <v-flex sm6 xs8> | 437 | <v-flex sm6 xs8> |
| 438 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> | 438 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | <v-layout> | 441 | <v-layout> |
| 442 | <v-flex xs5 sm6> | 442 | <v-flex xs5 sm6> |
| 443 | <h5 class="right my-1"> | 443 | <h5 class="right my-1"> |
| 444 | <b>Join Date:</b> | 444 | <b>Join Date:</b> |
| 445 | </h5> | 445 | </h5> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | <v-flex sm6 xs8> | 447 | <v-flex sm6 xs8> |
| 448 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> | 448 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | </v-layout> | 450 | </v-layout> |
| 451 | <v-layout> | 451 | <v-layout> |
| 452 | <v-flex xs5 sm6> | 452 | <v-flex xs5 sm6> |
| 453 | <h5 class="right my-1"> | 453 | <h5 class="right my-1"> |
| 454 | <b>D.O.B :</b> | 454 | <b>D.O.B :</b> |
| 455 | </h5> | 455 | </h5> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | <v-flex sm6 xs8> | 457 | <v-flex sm6 xs8> |
| 458 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 458 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | </v-layout> | 460 | </v-layout> |
| 461 | <v-layout> | 461 | <v-layout> |
| 462 | <v-flex xs6 sm6> | 462 | <v-flex xs6 sm6> |
| 463 | <h5 class="right my-1"> | 463 | <h5 class="right my-1"> |
| 464 | <b>Permanent Address:</b> | 464 | <b>Permanent Address:</b> |
| 465 | </h5> | 465 | </h5> |
| 466 | </v-flex> | 466 | </v-flex> |
| 467 | <v-flex sm6 xs8> | 467 | <v-flex sm6 xs8> |
| 468 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 468 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | </v-layout> | 470 | </v-layout> |
| 471 | <v-layout> | 471 | <v-layout> |
| 472 | <v-flex xs6 sm6> | 472 | <v-flex xs6 sm6> |
| 473 | <h5 class="right my-1"> | 473 | <h5 class="right my-1"> |
| 474 | <b>present Address:</b> | 474 | <b>present Address:</b> |
| 475 | </h5> | 475 | </h5> |
| 476 | </v-flex> | 476 | </v-flex> |
| 477 | <v-flex sm6 xs8> | 477 | <v-flex sm6 xs8> |
| 478 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 478 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 479 | </v-flex> | 479 | </v-flex> |
| 480 | </v-layout> | 480 | </v-layout> |
| 481 | </v-flex> | 481 | </v-flex> |
| 482 | </v-layout> | 482 | </v-layout> |
| 483 | </v-container> | 483 | </v-container> |
| 484 | </v-card-text> | 484 | </v-card-text> |
| 485 | </v-card> | 485 | </v-card> |
| 486 | </v-dialog> | 486 | </v-dialog> |
| 487 | <v-snackbar | 487 | <v-snackbar |
| 488 | :timeout="timeout" | 488 | :timeout="timeout" |
| 489 | :top="y === 'top'" | 489 | :top="y === 'top'" |
| 490 | :right="x === 'right'" | 490 | :right="x === 'right'" |
| 491 | :vertical="mode === 'vertical'" | 491 | :vertical="mode === 'vertical'" |
| 492 | v-model="snackbar" | 492 | v-model="snackbar" |
| 493 | color="success" | 493 | color="success" |
| 494 | >{{ text }}</v-snackbar> | 494 | >{{ text }}</v-snackbar> |
| 495 | 495 | ||
| 496 | <!-- ****** EXISTING System Admin TABLE ****** --> | 496 | <!-- ****** EXISTING System Admin TABLE ****** --> |
| 497 | 497 | ||
| 498 | <v-data-table | 498 | <v-data-table |
| 499 | :headers="headers" | 499 | :headers="headers" |
| 500 | :items="desserts" | 500 | :items="desserts" |
| 501 | :pagination.sync="pagination" | 501 | :pagination.sync="pagination" |
| 502 | :search="search" | 502 | :search="search" |
| 503 | > | 503 | > |
| 504 | <template slot="items" slot-scope="props"> | 504 | <template slot="items" slot-scope="props"> |
| 505 | <td id="td" class="text-xs-center">{{ props.index + 1}}</td> | 505 | <td id="td" class="text-xs-center">{{ props.index + 1}}</td> |
| 506 | <td id="td" class="text-xs-center"> | 506 | <td id="td" class="text-xs-center"> |
| 507 | <v-avatar> | 507 | <v-avatar> |
| 508 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 508 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 509 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 509 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 510 | </v-avatar> | 510 | </v-avatar> |
| 511 | </td> | 511 | </td> |
| 512 | <td id="td" class="text-xs-center">{{ props.item.name}}</td> | 512 | <td id="td" class="text-xs-center">{{ props.item.name}}</td> |
| 513 | <td id="td" class="text-xs-center">{{ props.item.email }}</td> | 513 | <td id="td" class="text-xs-center">{{ props.item.email }}</td> |
| 514 | <td id="td" class="text-xs-center">{{ props.item.role }}</td> | 514 | <td id="td" class="text-xs-center">{{ props.item.role }}</td> |
| 515 | <td id="td" class="text-xs-center">{{ props.item.status }}</td> | 515 | <td id="td" class="text-xs-center">{{ props.item.status }}</td> |
| 516 | <!-- <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> --> | 516 | <!-- <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> --> |
| 517 | <td class="text-xs-center"> | 517 | <td class="text-xs-center"> |
| 518 | <span> | 518 | <span> |
| 519 | <v-tooltip top> | 519 | <v-tooltip top> |
| 520 | <img | 520 | <img |
| 521 | slot="activator" | 521 | slot="activator" |
| 522 | style="cursor:pointer; width:25px; height:18px; " | 522 | style="cursor:pointer; width:25px; height:18px; " |
| 523 | class="mr5" | 523 | class="mr5" |
| 524 | @click="profile(props.item)" | 524 | @click="profile(props.item)" |
| 525 | src="/static/icon/eye1.png" | 525 | src="/static/icon/eye1.png" |
| 526 | /> | 526 | /> |
| 527 | <span>View</span> | 527 | <span>View</span> |
| 528 | </v-tooltip> | 528 | </v-tooltip> |
| 529 | <v-tooltip top> | 529 | <v-tooltip top> |
| 530 | <img | 530 | <img |
| 531 | slot="activator" | 531 | slot="activator" |
| 532 | style="cursor:pointer; width:20px; height:18px; " | 532 | style="cursor:pointer; width:20px; height:18px; " |
| 533 | class="mr5" | 533 | class="mr5" |
| 534 | @click="editItem(props.item)" | 534 | @click="editItem(props.item)" |
| 535 | src="/static/icon/edit1.png" | 535 | src="/static/icon/edit1.png" |
| 536 | /> | 536 | /> |
| 537 | <span>Edit</span> | 537 | <span>Edit</span> |
| 538 | </v-tooltip> | 538 | </v-tooltip> |
| 539 | <v-tooltip top> | 539 | <v-tooltip top> |
| 540 | <img | 540 | <img |
| 541 | slot="activator" | 541 | slot="activator" |
| 542 | style="cursor:pointer; width:20px; height:20px; " | 542 | style="cursor:pointer; width:20px; height:20px; " |
| 543 | class="mr5" | 543 | class="mr5" |
| 544 | @click="deleteItem(props.item)" | 544 | @click="deleteItem(props.item)" |
| 545 | src="/static/icon/delete1.png" | 545 | src="/static/icon/delete1.png" |
| 546 | /> | 546 | /> |
| 547 | <span>Delete</span> | 547 | <span>Delete</span> |
| 548 | </v-tooltip> | 548 | </v-tooltip> |
| 549 | </span> | 549 | </span> |
| 550 | </td> | 550 | </td> |
| 551 | </template> | 551 | </template> |
| 552 | <v-alert | 552 | <v-alert |
| 553 | slot="no-results" | 553 | slot="no-results" |
| 554 | :value="true" | 554 | :value="true" |
| 555 | color="error" | 555 | color="error" |
| 556 | icon="warning" | 556 | icon="warning" |
| 557 | >Your search for "{{ search }}" found no results.</v-alert> | 557 | >Your search for "{{ search }}" found no results.</v-alert> |
| 558 | </v-data-table> | 558 | </v-data-table> |
| 559 | </v-tab-item> | 559 | </v-tab-item> |
| 560 | 560 | ||
| 561 | <!-- ****** Add System Admin Data****** --> | 561 | <!-- ****** Add System Admin Data****** --> |
| 562 | <v-tab-item> | 562 | <v-tab-item> |
| 563 | <v-container fluid> | 563 | <v-container fluid> |
| 564 | <v-snackbar | 564 | <v-snackbar |
| 565 | :timeout="timeout" | 565 | :timeout="timeout" |
| 566 | :top="y === 'top'" | 566 | :top="y === 'top'" |
| 567 | :right="x === 'right'" | 567 | :right="x === 'right'" |
| 568 | :vertical="mode === 'vertical'" | 568 | :vertical="mode === 'vertical'" |
| 569 | v-model="snackbar" | 569 | v-model="snackbar" |
| 570 | color="success" | 570 | color="success" |
| 571 | >{{ text }}</v-snackbar> | 571 | >{{ text }}</v-snackbar> |
| 572 | <v-flex xs12 sm12 class="my-4"> | 572 | <v-flex xs12 sm12 class="my-4"> |
| 573 | <v-card flat> | 573 | <v-card flat> |
| 574 | <v-form ref="form" v-model="valid" lazy-validation> | 574 | <v-form ref="form" v-model="valid" lazy-validation> |
| 575 | <v-container fluid> | 575 | <v-container fluid> |
| 576 | <v-layout> | 576 | <v-layout> |
| 577 | <v-flex | 577 | <v-flex |
| 578 | xs12 | 578 | xs12 |
| 579 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4" | 579 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4" |
| 580 | > | 580 | > |
| 581 | <v-avatar size="100px"> | 581 | <v-avatar size="100px"> |
| 582 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 582 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 583 | </v-avatar> | 583 | </v-avatar> |
| 584 | <img | 584 | <img |
| 585 | :src="imageUrl" | 585 | :src="imageUrl" |
| 586 | height="150" | 586 | height="150" |
| 587 | v-if="imageUrl" | 587 | v-if="imageUrl" |
| 588 | style="border-radius:50%; width:200px" | 588 | style="border-radius:50%; width:200px" |
| 589 | /> | 589 | /> |
| 590 | </v-flex> | 590 | </v-flex> |
| 591 | </v-layout> | 591 | </v-layout> |
| 592 | <v-layout> | 592 | <v-layout> |
| 593 | <v-flex xs12 sm6> | 593 | <v-flex xs12 sm6> |
| 594 | <v-layout> | 594 | <v-layout> |
| 595 | <v-flex xs4 class="pt-4 subheading"> | 595 | <v-flex xs4 class="pt-4 subheading"> |
| 596 | <label class="right hidden-sm-only hidden-xs-only">Name:</label> | 596 | <label class="right hidden-sm-only hidden-xs-only">Name:</label> |
| 597 | <label | 597 | <label |
| 598 | class="right hidden-lg-only hidden-xl-only hidden-md-only" | 598 | class="right hidden-lg-only hidden-xl-only hidden-md-only" |
| 599 | >Name</label> | 599 | >Name</label> |
| 600 | </v-flex> | 600 | </v-flex> |
| 601 | <v-flex xs8 class="ml-3"> | 601 | <v-flex xs8 class="ml-3"> |
| 602 | <v-text-field | 602 | <v-text-field |
| 603 | v-model="addSystemAdmin.name" | 603 | v-model="addSystemAdmin.name" |
| 604 | placeholder="fill your full Name" | 604 | placeholder="fill your full Name" |
| 605 | name="name" | 605 | name="name" |
| 606 | type="text" | 606 | type="text" |
| 607 | :rules="nameRules" | 607 | :rules="nameRules" |
| 608 | required | 608 | required |
| 609 | ></v-text-field> | 609 | ></v-text-field> |
| 610 | </v-flex> | 610 | </v-flex> |
| 611 | </v-layout> | 611 | </v-layout> |
| 612 | </v-flex> | 612 | </v-flex> |
| 613 | <v-flex xs12 sm6> | 613 | <v-flex xs12 sm6> |
| 614 | <v-layout> | 614 | <v-layout> |
| 615 | <v-flex xs4 class="pt-4 subheading"> | 615 | <v-flex xs4 class="pt-4 subheading"> |
| 616 | <label class="right">Email ID:</label> | 616 | <label class="right">Email ID:</label> |
| 617 | </v-flex> | 617 | </v-flex> |
| 618 | <v-flex xs8 class="ml-3"> | 618 | <v-flex xs8 class="ml-3"> |
| 619 | <v-text-field | 619 | <v-text-field |
| 620 | placeholder="fill your email" | 620 | placeholder="fill your email" |
| 621 | :rules="emailRules" | 621 | :rules="emailRules" |
| 622 | v-model="addSystemAdmin.email" | 622 | v-model="addSystemAdmin.email" |
| 623 | type="text" | 623 | type="text" |
| 624 | name="email" | 624 | name="email" |
| 625 | required | 625 | required |
| 626 | ></v-text-field> | 626 | ></v-text-field> |
| 627 | </v-flex> | 627 | </v-flex> |
| 628 | </v-layout> | 628 | </v-layout> |
| 629 | </v-flex> | 629 | </v-flex> |
| 630 | </v-layout> | 630 | </v-layout> |
| 631 | <v-layout> | 631 | <v-layout> |
| 632 | <v-flex xs12 sm6> | 632 | <v-flex xs12 sm6> |
| 633 | <v-layout> | 633 | <v-layout> |
| 634 | <v-flex xs4 sm4 class="pt-4 subheading"> | 634 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 635 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 635 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 636 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 636 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 637 | </v-flex> | 637 | </v-flex> |
| 638 | <v-flex xs8 class="ml-3"> | 638 | <v-flex xs8 class="ml-3"> |
| 639 | <v-menu | 639 | <v-menu |
| 640 | ref="menu" | 640 | ref="menu" |
| 641 | :close-on-content-click="false" | 641 | :close-on-content-click="false" |
| 642 | v-model="menu" | 642 | v-model="menu" |
| 643 | :nudge-right="40" | 643 | :nudge-right="40" |
| 644 | lazy | 644 | lazy |
| 645 | transition="scale-transition" | 645 | transition="scale-transition" |
| 646 | offset-y | 646 | offset-y |
| 647 | full-width | 647 | full-width |
| 648 | min-width="290px" | 648 | min-width="290px" |
| 649 | > | 649 | > |
| 650 | <v-text-field | 650 | <v-text-field |
| 651 | slot="activator" | 651 | slot="activator" |
| 652 | :rules="dateRules" | 652 | :rules="dateRules" |
| 653 | v-model="addSystemAdmin.date" | 653 | v-model="addSystemAdmin.date" |
| 654 | placeholder="Select date" | 654 | placeholder="Select date" |
| 655 | ></v-text-field> | 655 | ></v-text-field> |
| 656 | <v-date-picker | 656 | <v-date-picker |
| 657 | ref="picker" | 657 | ref="picker" |
| 658 | v-model="addSystemAdmin.date" | 658 | v-model="addSystemAdmin.date" |
| 659 | :max="new Date().toISOString().substr(0, 10)" | 659 | :max="new Date().toISOString().substr(0, 10)" |
| 660 | min="1950-01-01" | 660 | min="1950-01-01" |
| 661 | @input="menu = false" | 661 | @input="menu = false" |
| 662 | ></v-date-picker> | 662 | ></v-date-picker> |
| 663 | </v-menu> | 663 | </v-menu> |
| 664 | </v-flex> | 664 | </v-flex> |
| 665 | </v-layout> | 665 | </v-layout> |
| 666 | </v-flex> | 666 | </v-flex> |
| 667 | <v-flex xs12 sm6> | 667 | <v-flex xs12 sm6> |
| 668 | <v-layout> | 668 | <v-layout> |
| 669 | <v-flex xs4 class="pt-4 subheading"> | 669 | <v-flex xs4 class="pt-4 subheading"> |
| 670 | <label class="right">Gender:</label> | 670 | <label class="right">Gender:</label> |
| 671 | </v-flex> | 671 | </v-flex> |
| 672 | <v-flex xs8 class="ml-3"> | 672 | <v-flex xs8 class="ml-3"> |
| 673 | <v-select | 673 | <v-select |
| 674 | v-model="addSystemAdmin.gender" | 674 | v-model="addSystemAdmin.gender" |
| 675 | :items="gender" | 675 | :items="gender" |
| 676 | label="Select your City Name" | 676 | label="Select your City Name" |
| 677 | :rules="cityRules" | 677 | :rules="cityRules" |
| 678 | required | 678 | required |
| 679 | ></v-select> | 679 | ></v-select> |
| 680 | </v-flex> | 680 | </v-flex> |
| 681 | </v-layout> | 681 | </v-layout> |
| 682 | </v-flex> | 682 | </v-flex> |
| 683 | </v-layout> | 683 | </v-layout> |
| 684 | <v-layout> | 684 | <v-layout> |
| 685 | <v-flex xs12 sm6> | 685 | <v-flex xs12 sm6> |
| 686 | <v-layout> | 686 | <v-layout> |
| 687 | <v-flex xs4 class="pt-4 subheading"> | 687 | <v-flex xs4 class="pt-4 subheading"> |
| 688 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 688 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 689 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 689 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 690 | </v-flex> | 690 | </v-flex> |
| 691 | <v-flex xs8 class="ml-3"> | 691 | <v-flex xs8 class="ml-3"> |
| 692 | <v-text-field | 692 | <v-text-field |
| 693 | v-model="addSystemAdmin.mobileNo" | 693 | v-model="addSystemAdmin.mobileNo" |
| 694 | placeholder="fill your Mobile No." | 694 | placeholder="fill your Mobile No." |
| 695 | name="mobileNo" | 695 | name="mobileNo" |
| 696 | type="number" | 696 | type="number" |
| 697 | :rules="mobileNoRules" | 697 | :rules="mobileNoRules" |
| 698 | required | 698 | required |
| 699 | ></v-text-field> | 699 | ></v-text-field> |
| 700 | </v-flex> | 700 | </v-flex> |
| 701 | </v-layout> | 701 | </v-layout> |
| 702 | </v-flex> | 702 | </v-flex> |
| 703 | <v-flex xs12 sm6> | 703 | <v-flex xs12 sm6> |
| 704 | <v-layout> | 704 | <v-layout> |
| 705 | <v-flex xs4 class="pt-4 subheading"> | 705 | <v-flex xs4 class="pt-4 subheading"> |
| 706 | <label class="right hidden-xs-only hidden-sm-only">Religion:</label> | 706 | <label class="right hidden-xs-only hidden-sm-only">Religion:</label> |
| 707 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label> | 707 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label> |
| 708 | </v-flex> | 708 | </v-flex> |
| 709 | <v-flex xs8 class="ml-3"> | 709 | <v-flex xs8 class="ml-3"> |
| 710 | <v-text-field | 710 | <v-text-field |
| 711 | v-model="addSystemAdmin.religion" | 711 | v-model="addSystemAdmin.religion" |
| 712 | :rules="religion" | 712 | :rules="religion" |
| 713 | placeholder="fill your Religion" | 713 | placeholder="fill your Religion" |
| 714 | required | 714 | required |
| 715 | ></v-text-field> | 715 | ></v-text-field> |
| 716 | </v-flex> | 716 | </v-flex> |
| 717 | </v-layout> | 717 | </v-layout> |
| 718 | </v-flex> | 718 | </v-flex> |
| 719 | </v-layout> | 719 | </v-layout> |
| 720 | <v-layout> | 720 | <v-layout> |
| 721 | <v-flex xs12 sm6> | 721 | <v-flex xs12 sm6> |
| 722 | <v-layout> | 722 | <v-layout> |
| 723 | <v-flex xs4 class="pt-4 subheading"> | 723 | <v-flex xs4 class="pt-4 subheading"> |
| 724 | <label class="right">Join Date:</label> | 724 | <label class="right">Join Date:</label> |
| 725 | </v-flex> | 725 | </v-flex> |
| 726 | <v-flex xs8 class="ml-3"> | 726 | <v-flex xs8 class="ml-3"> |
| 727 | <v-menu | 727 | <v-menu |
| 728 | ref="menu1" | 728 | ref="menu1" |
| 729 | :close-on-content-click="false" | 729 | :close-on-content-click="false" |
| 730 | v-model="menu1" | 730 | v-model="menu1" |
| 731 | :nudge-right="40" | 731 | :nudge-right="40" |
| 732 | lazy | 732 | lazy |
| 733 | transition="scale-transition" | 733 | transition="scale-transition" |
| 734 | offset-y | 734 | offset-y |
| 735 | full-width | 735 | full-width |
| 736 | min-width="290px" | 736 | min-width="290px" |
| 737 | > | 737 | > |
| 738 | <v-text-field | 738 | <v-text-field |
| 739 | slot="activator" | 739 | slot="activator" |
| 740 | :rules="joinDateRules" | 740 | :rules="joinDateRules" |
| 741 | v-model="addSystemAdmin.joinDate" | 741 | v-model="addSystemAdmin.joinDate" |
| 742 | placeholder="Select date" | 742 | placeholder="Select date" |
| 743 | ></v-text-field> | 743 | ></v-text-field> |
| 744 | <v-date-picker | 744 | <v-date-picker |
| 745 | ref="picker" | 745 | ref="picker" |
| 746 | v-model="addSystemAdmin.joinDate" | 746 | v-model="addSystemAdmin.joinDate" |
| 747 | :max="new Date().toISOString().substr(0, 10)" | 747 | :max="new Date().toISOString().substr(0, 10)" |
| 748 | min="1950-01-01" | 748 | min="1950-01-01" |
| 749 | @input="menu1 = false" | 749 | @input="menu1 = false" |
| 750 | ></v-date-picker> | 750 | ></v-date-picker> |
| 751 | </v-menu> | 751 | </v-menu> |
| 752 | </v-flex> | 752 | </v-flex> |
| 753 | </v-layout> | 753 | </v-layout> |
| 754 | </v-flex> | 754 | </v-flex> |
| 755 | <v-flex xs12 sm6> | 755 | <v-flex xs12 sm6> |
| 756 | <v-layout> | 756 | <v-layout> |
| 757 | <v-flex xs4 class="pt-4 subheading"> | 757 | <v-flex xs4 class="pt-4 subheading"> |
| 758 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 758 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 759 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 759 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 760 | </v-flex> | 760 | </v-flex> |
| 761 | <v-flex xs8 class="ml-3"> | 761 | <v-flex xs8 class="ml-3"> |
| 762 | <v-text-field | 762 | <v-text-field |
| 763 | label="Select Image" | 763 | label="Select Image" |
| 764 | @click="pickFile" | 764 | @click="pickFile" |
| 765 | v-model="imageName" | 765 | v-model="imageName" |
| 766 | append-icon="attach_file" | 766 | append-icon="attach_file" |
| 767 | ></v-text-field> | 767 | ></v-text-field> |
| 768 | <input | 768 | <input |
| 769 | type="file" | 769 | type="file" |
| 770 | style="display:none" | 770 | style="display:none" |
| 771 | ref="image" | 771 | ref="image" |
| 772 | accept="image/*" | 772 | accept="image/*" |
| 773 | @change="onFilePicked" | 773 | @change="onFilePicked" |
| 774 | /> | 774 | /> |
| 775 | </v-flex> | 775 | </v-flex> |
| 776 | </v-layout> | 776 | </v-layout> |
| 777 | </v-flex> | 777 | </v-flex> |
| 778 | </v-layout> | 778 | </v-layout> |
| 779 | <v-layout> | 779 | <v-layout> |
| 780 | <v-flex xs12 sm6> | 780 | <v-flex xs12 sm6> |
| 781 | <v-layout> | 781 | <v-layout> |
| 782 | <v-flex xs4 class="pt-4 subheading"> | 782 | <v-flex xs4 class="pt-4 subheading"> |
| 783 | <label class="right">Username:</label> | 783 | <label class="right">Username:</label> |
| 784 | </v-flex> | 784 | </v-flex> |
| 785 | <v-flex xs8 class="ml-3"> | 785 | <v-flex xs8 class="ml-3"> |
| 786 | <v-text-field | 786 | <v-text-field |
| 787 | v-model="addSystemAdmin.username" | 787 | v-model="addSystemAdmin.username" |
| 788 | placeholder="fill your Username" | 788 | placeholder="fill your Username" |
| 789 | name="state" | 789 | name="state" |
| 790 | :rules="userNameRules" | 790 | :rules="userNameRules" |
| 791 | required | 791 | required |
| 792 | ></v-text-field> | 792 | ></v-text-field> |
| 793 | </v-flex> | 793 | </v-flex> |
| 794 | </v-layout> | 794 | </v-layout> |
| 795 | </v-flex> | 795 | </v-flex> |
| 796 | <v-flex xs12 sm6> | 796 | <v-flex xs12 sm6> |
| 797 | <v-layout> | 797 | <v-layout> |
| 798 | <v-flex xs4 class="pt-4 subheading"> | 798 | <v-flex xs4 class="pt-4 subheading"> |
| 799 | <label class="right">Password:</label> | 799 | <label class="right">Password:</label> |
| 800 | </v-flex> | 800 | </v-flex> |
| 801 | <v-flex xs8 class="ml-3"> | 801 | <v-flex xs8 class="ml-3"> |
| 802 | <v-text-field | 802 | <v-text-field |
| 803 | v-model="addSystemAdmin.Password" | 803 | v-model="addSystemAdmin.Password" |
| 804 | placeholder="fill your Password" | 804 | placeholder="fill your Password" |
| 805 | :rules="password" | 805 | :rules="password" |
| 806 | required | 806 | required |
| 807 | ></v-text-field> | 807 | ></v-text-field> |
| 808 | </v-flex> | 808 | </v-flex> |
| 809 | </v-layout> | 809 | </v-layout> |
| 810 | </v-flex> | 810 | </v-flex> |
| 811 | </v-layout> | 811 | </v-layout> |
| 812 | <v-layout class="hidden-xs-only hidden-sm-only"> | 812 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 813 | <v-flex xs12 sm6> | 813 | <v-flex xs12 sm6> |
| 814 | <v-layout> | 814 | <v-layout> |
| 815 | <v-flex xs4 md4 class="pt-4 subheading"> | 815 | <v-flex xs4 md4 class="pt-4 subheading"> |
| 816 | <label class="right">Address:</label> | 816 | <label class="right">Address:</label> |
| 817 | </v-flex> | 817 | </v-flex> |
| 818 | <v-flex xs8 md8 class="ml-3"> | 818 | <v-flex xs8 md8 class="ml-3"> |
| 819 | <v-text-field | 819 | <v-text-field |
| 820 | name="input-4-3" | 820 | name="input-4-3" |
| 821 | v-model="addSystemAdmin.address" | 821 | v-model="addSystemAdmin.address" |
| 822 | :rules="address" | 822 | :rules="address" |
| 823 | placeholder="fill Your Address" | 823 | placeholder="fill Your Address" |
| 824 | required | 824 | required |
| 825 | ></v-text-field> | 825 | ></v-text-field> |
| 826 | </v-flex> | 826 | </v-flex> |
| 827 | </v-layout> | 827 | </v-layout> |
| 828 | </v-flex> | 828 | </v-flex> |
| 829 | </v-layout> | 829 | </v-layout> |
| 830 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> | 830 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only"> |
| 831 | <v-flex xs12 sm12> | 831 | <v-flex xs12 sm12> |
| 832 | <v-layout> | 832 | <v-layout> |
| 833 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 833 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 834 | <label class>Addres:</label> | 834 | <label class>Addres:</label> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | </v-layout> | 836 | </v-layout> |
| 837 | <v-layout> | 837 | <v-layout> |
| 838 | <v-flex xs12 sm12> | 838 | <v-flex xs12 sm12> |
| 839 | <v-textarea | 839 | <v-textarea |
| 840 | name="input-4-3" | 840 | name="input-4-3" |
| 841 | v-model="addSystemAdmin.address" | 841 | v-model="addSystemAdmin.address" |
| 842 | :rules="address" | 842 | :rules="address" |
| 843 | placeholder="fill Your present Address" | 843 | placeholder="fill Your present Address" |
| 844 | required | 844 | required |
| 845 | ></v-textarea> | 845 | ></v-textarea> |
| 846 | </v-flex> | 846 | </v-flex> |
| 847 | </v-layout> | 847 | </v-layout> |
| 848 | </v-flex> | 848 | </v-flex> |
| 849 | <!-- <v-flex xs12 sm12> | 849 | <!-- <v-flex xs12 sm12> |
| 850 | <v-layout> | 850 | <v-layout> |
| 851 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 851 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 852 | <label>Permanent Address:</label> | 852 | <label>Permanent Address:</label> |
| 853 | </v-flex> | 853 | </v-flex> |
| 854 | </v-layout> | 854 | </v-layout> |
| 855 | <v-layout> | 855 | <v-layout> |
| 856 | <v-flex xs12 sm12> | 856 | <v-flex xs12 sm12> |
| 857 | <v-textarea | 857 | <v-textarea |
| 858 | name="input-4-3" | 858 | name="input-4-3" |
| 859 | v-model="addSystemAdmin.permanentAddress" | 859 | v-model="addSystemAdmin.permanentAddress" |
| 860 | :rules="permanentAddress" | 860 | :rules="permanentAddress" |
| 861 | placeholder="fill Your Permanent Address" | 861 | placeholder="fill Your Permanent Address" |
| 862 | required | 862 | required |
| 863 | ></v-textarea> | 863 | ></v-textarea> |
| 864 | </v-flex> | 864 | </v-flex> |
| 865 | </v-layout> | 865 | </v-layout> |
| 866 | </v-flex> --> | 866 | </v-flex> --> |
| 867 | </v-layout> | 867 | </v-layout> |
| 868 | <v-layout class="mx-2"> | 868 | <v-layout class="mx-2"> |
| 869 | <v-flex xs12 sm12 offset-sm1> | 869 | <v-flex xs12 sm12 offset-sm1> |
| 870 | <v-layout> | 870 | <v-layout> |
| 871 | <v-flex xs6> | 871 | <v-flex xs6> |
| 872 | <v-btn @click="clear" round dark>clear</v-btn> | 872 | <v-btn @click="clear" round dark>clear</v-btn> |
| 873 | </v-flex> | 873 | </v-flex> |
| 874 | <v-flex xs6> | 874 | <v-flex xs6> |
| 875 | <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> | 875 | <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> |
| 876 | </v-flex> | 876 | </v-flex> |
| 877 | </v-layout> | 877 | </v-layout> |
| 878 | </v-flex> | 878 | </v-flex> |
| 879 | </v-layout> | 879 | </v-layout> |
| 880 | </v-container> | 880 | </v-container> |
| 881 | </v-form> | 881 | </v-form> |
| 882 | </v-card> | 882 | </v-card> |
| 883 | </v-flex> | 883 | </v-flex> |
| 884 | </v-container> | 884 | </v-container> |
| 885 | </v-tab-item> | 885 | </v-tab-item> |
| 886 | </v-tabs> | 886 | </v-tabs> |
| 887 | <div class="loader" v-if="showLoader"> | 887 | <div class="loader" v-if="showLoader"> |
| 888 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 888 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 889 | </div> | 889 | </div> |
| 890 | </v-app> | 890 | </v-app> |
| 891 | </template> | 891 | </template> |
| 892 | 892 | ||
| 893 | <script> | 893 | <script> |
| 894 | import http from "@/Services/http.js"; | 894 | import http from "@/Services/http.js"; |
| 895 | import moment from "moment"; | 895 | import moment from "moment"; |
| 896 | 896 | ||
| 897 | export default { | 897 | export default { |
| 898 | data: () => ({ | 898 | data: () => ({ |
| 899 | component: "report-generate", | 899 | component: "report-generate", |
| 900 | snackbar: false, | 900 | snackbar: false, |
| 901 | y: "top", | 901 | y: "top", |
| 902 | x: "right", | 902 | x: "right", |
| 903 | mode: "", | 903 | mode: "", |
| 904 | timeout: 3000, | 904 | timeout: 3000, |
| 905 | text: "", | 905 | text: "", |
| 906 | showLoader: false, | 906 | showLoader: false, |
| 907 | loading: false, | 907 | loading: false, |
| 908 | date: null, | 908 | date: null, |
| 909 | search: "", | 909 | search: "", |
| 910 | menu: false, | 910 | menu: false, |
| 911 | menu1: false, | 911 | menu1: false, |
| 912 | menu2: false, | 912 | menu2: false, |
| 913 | menu3: false, | 913 | menu3: false, |
| 914 | dialog: false, | 914 | dialog: false, |
| 915 | dialog1: false, | 915 | dialog1: false, |
| 916 | valid: true, | 916 | valid: true, |
| 917 | isActive: true, | 917 | isActive: true, |
| 918 | newActive: false, | 918 | newActive: false, |
| 919 | pagination: { | 919 | pagination: { |
| 920 | rowsPerPage: 15 | 920 | rowsPerPage: 15 |
| 921 | }, | 921 | }, |
| 922 | imageData: {}, | 922 | imageData: {}, |
| 923 | imageName: "", | 923 | imageName: "", |
| 924 | imageUrl: "", | 924 | imageUrl: "", |
| 925 | imageFile: "", | 925 | imageFile: "", |
| 926 | nameRules: [v => !!v || " Full Name is required"], | 926 | nameRules: [v => !!v || " Full Name is required"], |
| 927 | dateRules: [v => !!v || " DOB is required"], | 927 | dateRules: [v => !!v || " DOB is required"], |
| 928 | cityRules: [v => !!v || " City Name is required"], | 928 | cityRules: [v => !!v || " City Name is required"], |
| 929 | password: [v => !!v || " Password is required"], | 929 | password: [v => !!v || " Password is required"], |
| 930 | religion: [v => !!v || "Religion Name is required"], | 930 | religion: [v => !!v || "Religion Name is required"], |
| 931 | permanentAddress: [v => !!v || " Permanent Address is required"], | 931 | permanentAddress: [v => !!v || " Permanent Address is required"], |
| 932 | address: [v => !!v || "Address is required"], | 932 | address: [v => !!v || "Address is required"], |
| 933 | mobileNoRules: [v => !!v || "Mobile Number is required"], | 933 | mobileNoRules: [v => !!v || "Mobile Number is required"], |
| 934 | userNameRules: [v => !!v || "Username Name is required"], | 934 | userNameRules: [v => !!v || "Username Name is required"], |
| 935 | joinDateRules: [v => !!v || " Join Date is required"], | 935 | joinDateRules: [v => !!v || " Join Date is required"], |
| 936 | errorMessages: "", | 936 | errorMessages: "", |
| 937 | emailRules: [ | 937 | emailRules: [ |
| 938 | v => !!v || "E-mail is required", | 938 | v => !!v || "E-mail is required", |
| 939 | v => | 939 | v => |
| 940 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 940 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 941 | "E-mail must be valid" | 941 | "E-mail must be valid" |
| 942 | ], | 942 | ], |
| 943 | countries: [], | 943 | countries: [], |
| 944 | headers: [ | 944 | headers: [ |
| 945 | { | 945 | { |
| 946 | text: "No", | 946 | text: "No", |
| 947 | align: "center", | 947 | align: "center", |
| 948 | sortable: false, | 948 | sortable: false, |
| 949 | value: "No" | 949 | value: "No" |
| 950 | }, | 950 | }, |
| 951 | { | 951 | { |
| 952 | text: "Profile Pic", | 952 | text: "Profile Pic", |
| 953 | value: "profilePicUrl", | 953 | value: "profilePicUrl", |
| 954 | sortable: false, | 954 | sortable: false, |
| 955 | align: "center" | 955 | align: "center" |
| 956 | }, | 956 | }, |
| 957 | { text: "Name", value: "name", sortable: false, align: "center" }, | 957 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 958 | { text: "Email", value: "email", sortable: false, align: "center" }, | 958 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 959 | { text: "Role", value: "role", sortable: false, align: "center" }, | 959 | { text: "Role", value: "role", sortable: false, align: "center" }, |
| 960 | { | 960 | { |
| 961 | text: "Status", | 961 | text: "Status", |
| 962 | value: "status", | 962 | value: "status", |
| 963 | sortable: false, | 963 | sortable: false, |
| 964 | align: "center" | 964 | align: "center" |
| 965 | }, | 965 | }, |
| 966 | { text: "Action", value: "", sortable: false, align: "center" } | 966 | { text: "Action", value: "", sortable: false, align: "center" } |
| 967 | ], | 967 | ], |
| 968 | gender:['Male','Female'], | 968 | gender:['Male','Female'], |
| 969 | desserts: [], | 969 | desserts: [], |
| 970 | editedIndex: -1, | 970 | editedIndex: -1, |
| 971 | upload: "", | 971 | upload: "", |
| 972 | editedItem: {}, | 972 | editedItem: {}, |
| 973 | addSystemAdmin: {}, | 973 | addSystemAdmin: {}, |
| 974 | }), | 974 | }), |
| 975 | watch: { | 975 | watch: { |
| 976 | menu(val) { | 976 | menu(val) { |
| 977 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 977 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 978 | }, | 978 | }, |
| 979 | menu1(val) { | 979 | menu1(val) { |
| 980 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 980 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 981 | } | 981 | } |
| 982 | }, | 982 | }, |
| 983 | methods: { | 983 | methods: { |
| 984 | save(date) { | 984 | save(date) { |
| 985 | this.$refs.menu.save(date); | 985 | this.$refs.menu.save(date); |
| 986 | }, | 986 | }, |
| 987 | save(date) { | 987 | save(date) { |
| 988 | this.$refs.menu1.save(date); | 988 | this.$refs.menu1.save(date); |
| 989 | }, | 989 | }, |
| 990 | pickFile() { | 990 | pickFile() { |
| 991 | this.$refs.image.click(); | 991 | this.$refs.image.click(); |
| 992 | }, | 992 | }, |
| 993 | onFilePicked(e) { | 993 | onFilePicked(e) { |
| 994 | const files = e.target.files; | 994 | const files = e.target.files; |
| 995 | this.upload = e.target.files[0]; | 995 | this.upload = e.target.files[0]; |
| 996 | if (files[0] !== undefined) { | 996 | if (files[0] !== undefined) { |
| 997 | this.imageName = files[0].name; | 997 | this.imageName = files[0].name; |
| 998 | if (this.imageName.lastIndexOf(".") <= 0) { | 998 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 999 | return; | 999 | return; |
| 1000 | } | 1000 | } |
| 1001 | const fr = new FileReader(); | 1001 | const fr = new FileReader(); |
| 1002 | fr.readAsDataURL(files[0]); | 1002 | fr.readAsDataURL(files[0]); |
| 1003 | fr.addEventListener("load", () => { | 1003 | fr.addEventListener("load", () => { |
| 1004 | this.imageUrl = fr.result; | 1004 | this.imageUrl = fr.result; |
| 1005 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1005 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1006 | }); | 1006 | }); |
| 1007 | } else { | 1007 | } else { |
| 1008 | this.imageName = ""; | 1008 | this.imageName = ""; |
| 1009 | this.imageFile = ""; | 1009 | this.imageFile = ""; |
| 1010 | this.imageUrl = ""; | 1010 | this.imageUrl = ""; |
| 1011 | } | 1011 | } |
| 1012 | }, | 1012 | }, |
| 1013 | dates: function(date) { | 1013 | dates: function(date) { |
| 1014 | return moment(date).format("MMMM DD, YYYY"); | 1014 | return moment(date).format("MMMM DD, YYYY"); |
| 1015 | }, | 1015 | }, |
| 1016 | getSystemAdminList() { | 1016 | getSystemAdminList() { |
| 1017 | this.showLoader = true; | 1017 | this.showLoader = true; |
| 1018 | var token = this.$store.state.token; | 1018 | var token = this.$store.state.token; |
| 1019 | http() | 1019 | http() |
| 1020 | .get("/getTeachersList", { | 1020 | .get("/getTeachersList", { |
| 1021 | headers: { Authorization: "Bearer " + token } | 1021 | headers: { Authorization: "Bearer " + token } |
| 1022 | }) | 1022 | }) |
| 1023 | .then(response => { | 1023 | .then(response => { |
| 1024 | this.desserts = response.data.data; | 1024 | this.desserts = response.data.data; |
| 1025 | this.showLoader = false; | 1025 | this.showLoader = false; |
| 1026 | }) | 1026 | }) |
| 1027 | .catch(error => { | 1027 | .catch(error => { |
| 1028 | this.showLoader = false; | 1028 | this.showLoader = false; |
| 1029 | if (error.response.status === 401) { | 1029 | if (error.response.status === 401) { |
| 1030 | this.$router.replace({ path: "/" }); | 1030 | this.$router.replace({ path: "/" }); |
| 1031 | this.$store.dispatch("setToken", null); | 1031 | this.$store.dispatch("setToken", null); |
| 1032 | this.$store.dispatch("Id", null); | 1032 | this.$store.dispatch("Id", null); |
| 1033 | } | 1033 | } |
| 1034 | }); | 1034 | }); |
| 1035 | }, | 1035 | }, |
| 1036 | editItem(item) { | 1036 | editItem(item) { |
| 1037 | this.editedIndex = this.desserts.indexOf(item); | 1037 | this.editedIndex = this.desserts.indexOf(item); |
| 1038 | this.editedItem = Object.assign({}, item); | 1038 | this.editedItem = Object.assign({}, item); |
| 1039 | this.editedItem.dob = | 1039 | this.editedItem.dob = |
| 1040 | this.editedItem.dob != undefined | 1040 | this.editedItem.dob != undefined |
| 1041 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 1041 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 1042 | : (this.editedItem.dob = ""); | 1042 | : (this.editedItem.dob = ""); |
| 1043 | this.editedItem.joinDate = | 1043 | this.editedItem.joinDate = |
| 1044 | this.editedItem.joinDate != undefined | 1044 | this.editedItem.joinDate != undefined |
| 1045 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( | 1045 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( |
| 1046 | 0, | 1046 | 0, |
| 1047 | 10 | 1047 | 10 |
| 1048 | )) | 1048 | )) |
| 1049 | : (this.editedItem.joinDate = ""); | 1049 | : (this.editedItem.joinDate = ""); |
| 1050 | 1050 | ||
| 1051 | this.dialog = true; | 1051 | this.dialog = true; |
| 1052 | }, | 1052 | }, |
| 1053 | profile(item) { | 1053 | profile(item) { |
| 1054 | this.editedIndex = this.desserts.indexOf(item); | 1054 | this.editedIndex = this.desserts.indexOf(item); |
| 1055 | this.editedItem = Object.assign({}, item); | 1055 | this.editedItem = Object.assign({}, item); |
| 1056 | this.dialog1 = true; | 1056 | this.dialog1 = true; |
| 1057 | }, | 1057 | }, |
| 1058 | deleteItem(item) { | 1058 | deleteItem(item) { |
| 1059 | let deleteTeachers = { | 1059 | let deleteTeachers = { |
| 1060 | teacherId: item._id | 1060 | teacherId: item._id |
| 1061 | }; | 1061 | }; |
| 1062 | http() | 1062 | http() |
| 1063 | .delete( | 1063 | .delete( |
| 1064 | "/deleteTeacher", | 1064 | "/deleteTeacher", |
| 1065 | confirm("Are you sure you want to delete this?") && { | 1065 | confirm("Are you sure you want to delete this?") && { |
| 1066 | params: deleteTeachers | 1066 | params: deleteTeachers |
| 1067 | } | 1067 | } |
| 1068 | ) | 1068 | ) |
| 1069 | .then(response => { | 1069 | .then(response => { |
| 1070 | if ((this.snackbar = true)) { | 1070 | if ((this.snackbar = true)) { |
| 1071 | this.text = "Successfully delete Existing Teacher"; | 1071 | this.text = "Successfully delete Existing Teacher"; |
| 1072 | } | 1072 | } |
| 1073 | this.getSystemAdminList(); | 1073 | this.getSystemAdminList(); |
| 1074 | }) | 1074 | }) |
| 1075 | .catch(error => { | 1075 | .catch(error => { |
| 1076 | console.log(error); | 1076 | console.log(error); |
| 1077 | }); | 1077 | }); |
| 1078 | }, | 1078 | }, |
| 1079 | activeTab(type) { | 1079 | activeTab(type) { |
| 1080 | switch (type) { | 1080 | switch (type) { |
| 1081 | case "existing": | 1081 | case "existing": |
| 1082 | this.newActive = false; | 1082 | this.newActive = false; |
| 1083 | this.isActive = true; | 1083 | this.isActive = true; |
| 1084 | break; | 1084 | break; |
| 1085 | 1085 | ||
| 1086 | default: | 1086 | default: |
| 1087 | this.newActive = true; | 1087 | this.newActive = true; |
| 1088 | this.isActive = false; | 1088 | this.isActive = false; |
| 1089 | break; | 1089 | break; |
| 1090 | } | 1090 | } |
| 1091 | }, | 1091 | }, |
| 1092 | close() { | 1092 | close() { |
| 1093 | this.dialog = false; | 1093 | this.dialog = false; |
| 1094 | setTimeout(() => { | 1094 | setTimeout(() => { |
| 1095 | this.editedItem = Object.assign({}, this.defaultItem); | 1095 | this.editedItem = Object.assign({}, this.defaultItem); |
| 1096 | this.editedIndex = -1; | 1096 | this.editedIndex = -1; |
| 1097 | }, 300); | 1097 | }, 300); |
| 1098 | }, | 1098 | }, |
| 1099 | close1() { | 1099 | close1() { |
| 1100 | this.dialog1 = false; | 1100 | this.dialog1 = false; |
| 1101 | }, | 1101 | }, |
| 1102 | submit() { | 1102 | submit() { |
| 1103 | if (this.$refs.form.validate()) { | 1103 | if (this.$refs.form.validate()) { |
| 1104 | let addTeacher = { | 1104 | let addTeacher = { |
| 1105 | // name: this.addTeachers.name, | 1105 | // name: this.addTeachers.name, |
| 1106 | // email: this.addTeachers.email, | 1106 | // email: this.addTeachers.email, |
| 1107 | // role: this.addTeachers.role, | 1107 | // role: this.addTeachers.role, |
| 1108 | // dob: this.addTeachers.date, | 1108 | // dob: this.addTeachers.date, |
| 1109 | // city: this.addTeachers.city, | 1109 | // city: this.addTeachers.city, |
| 1110 | // pincode: this.addTeachers.pincode, | 1110 | // pincode: this.addTeachers.pincode, |
| 1111 | // country: this.addTeachers.country, | 1111 | // country: this.addTeachers.country, |
| 1112 | // permanentAddress: this.addTeachers.permanentAddress, | 1112 | // permanentAddress: this.addTeachers.permanentAddress, |
| 1113 | // presentAddress: this.addTeachers.presentAddress, | 1113 | // presentAddress: this.addTeachers.presentAddress, |
| 1114 | // mobileNo: this.addTeachers.mobileNo, | 1114 | // mobileNo: this.addTeachers.mobileNo, |
| 1115 | // state: this.addTeachers.state, | 1115 | // state: this.addTeachers.state, |
| 1116 | // joinDate: this.addTeachers.joinDate | 1116 | // joinDate: this.addTeachers.joinDate |
| 1117 | }; | 1117 | }; |
| 1118 | if (this.imageUrl) { | 1118 | if (this.imageUrl) { |
| 1119 | var str = this.imageUrl; | 1119 | var str = this.imageUrl; |
| 1120 | const [baseUrl, imageUrl] = str.split(/,/); | 1120 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1121 | addTeacher.upload = imageUrl; | 1121 | addTeacher.upload = imageUrl; |
| 1122 | } | 1122 | } |
| 1123 | this.loading = true; | 1123 | this.loading = true; |
| 1124 | http() | 1124 | http() |
| 1125 | .post("/createTeacher", addTeacher) | 1125 | .post("/createTeacher", addTeacher) |
| 1126 | .then(response => { | 1126 | .then(response => { |
| 1127 | this.imageUrl = ""; | 1127 | this.imageUrl = ""; |
| 1128 | this.getTeacherList(); | 1128 | this.getTeacherList(); |
| 1129 | this.snackbar = true; | 1129 | this.snackbar = true; |
| 1130 | this.text = "New Teacher added successfully"; | 1130 | this.text = "New Teacher added successfully"; |
| 1131 | this.clear(); | 1131 | this.clear(); |
| 1132 | this.loading = false; | 1132 | this.loading = false; |
| 1133 | }) | 1133 | }) |
| 1134 | .catch(error => { | 1134 | .catch(error => { |
| 1135 | // console.log(error); | 1135 | // console.log(error); |
| 1136 | if ((this.snackbar = true)) { | 1136 | if ((this.snackbar = true)) { |
| 1137 | this.text = error.response.data.message; | 1137 | this.text = error.response.data.message; |
| 1138 | } | 1138 | } |
| 1139 | this.loading = false; | 1139 | this.loading = false; |
| 1140 | }); | 1140 | }); |
| 1141 | } | 1141 | } |
| 1142 | }, | 1142 | }, |
| 1143 | clear() { | 1143 | clear() { |
| 1144 | this.$refs.form.reset(); | 1144 | this.$refs.form.reset(); |
| 1145 | this.imageUrl = ""; | 1145 | this.imageUrl = ""; |
| 1146 | }, | 1146 | }, |
| 1147 | save() { | 1147 | save() { |
| 1148 | this.loading = true; | 1148 | this.loading = true; |
| 1149 | let editTeacher = {}; | 1149 | let editTeacher = {}; |
| 1150 | if (this.imageUrl) { | 1150 | if (this.imageUrl) { |
| 1151 | var str = this.imageUrl; | 1151 | var str = this.imageUrl; |
| 1152 | const [baseUrl, imageUrl] = str.split(/,/); | 1152 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1153 | editTeacher.upload = imageUrl; | 1153 | editTeacher.upload = imageUrl; |
| 1154 | } | 1154 | } |
| 1155 | http() | 1155 | http() |
| 1156 | .put("/updateTeacher", editTeacher) | 1156 | .put("/updateTeacher", editTeacher) |
| 1157 | .then(response => { | 1157 | .then(response => { |
| 1158 | console.log("editTeacher", editTeacher); | 1158 | console.log("editTeacher", editTeacher); |
| 1159 | this.snackbar = true; | 1159 | this.snackbar = true; |
| 1160 | this.text = "Successfully Edit Existing Teacher"; | 1160 | this.text = "Successfully Edit Existing Teacher"; |
| 1161 | this.loading = false; | 1161 | this.loading = false; |
| 1162 | this.getTeacherList(); | 1162 | this.getTeacherList(); |
| 1163 | this.close(); | 1163 | this.close(); |
| 1164 | }) | 1164 | }) |
| 1165 | .catch(error => { | 1165 | .catch(error => { |
| 1166 | console.log(error); | 1166 | console.log(error); |
| 1167 | this.loading = false; | 1167 | this.loading = false; |
| 1168 | }); | 1168 | }); |
| 1169 | } | 1169 | } |
| 1170 | }, | 1170 | }, |
| 1171 | mounted() { | 1171 | mounted() { |
| 1172 | // this.getSystemAdminList(); | 1172 | // this.getSystemAdminList(); |
| 1173 | }, | 1173 | }, |
| 1174 | created() { | 1174 | created() { |
| 1175 | this.$root.$on("app:search", search => { | 1175 | this.$root.$on("app:search", search => { |
| 1176 | this.search = search; | 1176 | this.search = search; |
| 1177 | }); | 1177 | }); |
| 1178 | }, | 1178 | }, |
| 1179 | beforeDestroy() { | 1179 | beforeDestroy() { |
| 1180 | // dont forget to remove the listener | 1180 | // dont forget to remove the listener |
| 1181 | this.$root.$off("app:search"); | 1181 | this.$root.$off("app:search"); |
| 1182 | } | 1182 | } |
| 1183 | }; | 1183 | }; |
| 1184 | </script> | 1184 | </script> |
| 1185 | <style scoped> | 1185 | <style scoped> |
| 1186 | .active { | 1186 | .active { |
| 1187 | background-color: gray; | 1187 | background-color: gray; |
| 1188 | color: white !important; | 1188 | color: white !important; |
| 1189 | } | 1189 | } |
| 1190 | .activebtn { | 1190 | .activebtn { |
| 1191 | color: black !important; | 1191 | color: black !important; |
| 1192 | } | 1192 | } |
| 1193 | </style> | 1193 | </style> |
src/pages/Annoucement/annoucement.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS COURSES DETAILS ****** --> | 3 | <!-- ****** EDITS COURSES DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Annoucement</label> | 8 | <label class="title text-xs-center">Edit Annoucement</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.attachementUrl" | 21 | :src="editedItem.attachementUrl" |
| 22 | v-else-if="editedItem.attachementUrl && !editImageUrl" | 22 | v-else-if="editedItem.attachementUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 sm5 class="pt-4 subheading"> | 43 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 sm7 class="ml-3"> | 47 | <v-flex xs8 sm7 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 sm5 class="pt-4 subheading"> | 60 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-select | 65 | <v-select |
| 66 | :items="courseData" | 66 | :items="courseData" |
| 67 | item-text="courseName" | 67 | item-text="courseName" |
| 68 | item-value="_id" | 68 | item-value="_id" |
| 69 | v-model="editedItem.courseName" | 69 | v-model="editedItem.courseName" |
| 70 | placeholder="fill your Course name" | 70 | placeholder="fill your Course name" |
| 71 | type="text" | 71 | type="text" |
| 72 | :rules="courseRules" | 72 | :rules="courseRules" |
| 73 | required | 73 | required |
| 74 | ></v-select> | 74 | ></v-select> |
| 75 | </v-flex> | 75 | </v-flex> |
| 76 | </v-layout> | 76 | </v-layout> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-flex xs4 sm5 class="pt-4 subheading"> | 78 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 79 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> | 79 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> |
| 80 | <label | 80 | <label |
| 81 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 81 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 82 | >DiscussionType:</label> | 82 | >DiscussionType:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs8 sm7 class="ml-3"> | 84 | <v-flex xs8 sm7 class="ml-3"> |
| 85 | <v-text-field | 85 | <v-text-field |
| 86 | v-model="editedItem.discussionType" | 86 | v-model="editedItem.discussionType" |
| 87 | placeholder="fill your Course Name" | 87 | placeholder="fill your Course Name" |
| 88 | type="text" | 88 | type="text" |
| 89 | required | 89 | required |
| 90 | ></v-text-field> | 90 | ></v-text-field> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | </v-layout> | 92 | </v-layout> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs4 sm5 class="pt-4 subheading"> | 94 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 95 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 95 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 96 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 96 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex xs8 sm7 class="ml-3"> | 98 | <v-flex xs8 sm7 class="ml-3"> |
| 99 | <v-text-field | 99 | <v-text-field |
| 100 | label="Select Image" | 100 | label="Select Image" |
| 101 | @click="pickEditFile" | 101 | @click="pickEditFile" |
| 102 | v-model="editImageName" | 102 | v-model="editImageName" |
| 103 | append-icon="attach_file" | 103 | append-icon="attach_file" |
| 104 | ></v-text-field> | 104 | ></v-text-field> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12 sm12 class="px-0 mx-0"> | 110 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 111 | <v-layout class="right"> | 111 | <v-layout class="right"> |
| 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-form> | 117 | </v-form> |
| 118 | </v-card-text> | 118 | </v-card-text> |
| 119 | </v-card> | 119 | </v-card> |
| 120 | </v-dialog> | 120 | </v-dialog> |
| 121 | 121 | ||
| 122 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 122 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 123 | 123 | ||
| 124 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable> | 124 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> |
| 125 | <v-card flat class="card-style pa-3" dark> | 125 | <v-card flat class="card-style pa-3" dark> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs12> | 127 | <v-flex xs12> |
| 128 | <label class="title text-xs-center">View Annoucement</label> | 128 | <label class="title text-xs-center">View Annoucement</label> |
| 129 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 129 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-card-text> | 132 | <v-card-text> |
| 133 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 133 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 134 | <v-avatar size="100px"> | 134 | <v-avatar size="100px"> |
| 135 | <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> | 135 | <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> |
| 136 | <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> | 136 | <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> |
| 137 | </v-avatar> | 137 | </v-avatar> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-container grid-list-md> | 139 | <v-container grid-list-md> |
| 140 | <v-layout wrap> | 140 | <v-layout wrap> |
| 141 | <v-flex xs12> | 141 | <v-flex xs12> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs6 sm6> | 143 | <v-flex xs6 sm6> |
| 144 | <h5 class="right my-1"> | 144 | <h5 class="right my-1"> |
| 145 | <b>Discussion Type :</b> | 145 | <b>Discussion Type :</b> |
| 146 | </h5> | 146 | </h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex sm6 xs6> | 148 | <v-flex sm6 xs6> |
| 149 | <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> | 149 | <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-container> | 154 | </v-container> |
| 155 | </v-card-text> | 155 | </v-card-text> |
| 156 | </v-card> | 156 | </v-card> |
| 157 | </v-dialog> | 157 | </v-dialog> |
| 158 | 158 | ||
| 159 | <!-- ****** Annoucement TABLE ****** --> | 159 | <!-- ****** Annoucement TABLE ****** --> |
| 160 | <v-toolbar color="transparent" flat> | 160 | <v-toolbar color="transparent" flat> |
| 161 | <v-btn | 161 | <v-btn |
| 162 | fab | 162 | fab |
| 163 | dark | 163 | dark |
| 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 165 | small | 165 | small |
| 166 | @click="addAnnoucementDialog = true" | 166 | @click="addAnnoucementDialog = true" |
| 167 | > | 167 | > |
| 168 | <v-icon dark>add</v-icon> | 168 | <v-icon dark>add</v-icon> |
| 169 | </v-btn> | 169 | </v-btn> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 173 | dark | 173 | dark |
| 174 | @click="addAnnoucementDialog = true" | 174 | @click="addAnnoucementDialog = true" |
| 175 | > | 175 | > |
| 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement | 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement |
| 177 | </v-btn> | 177 | </v-btn> |
| 178 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 178 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 179 | <v-flex md13 lg12> | 179 | <v-flex md13 lg12> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex lg6 md12> | 181 | <v-flex lg6 md12> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-select | 183 | <v-select |
| 184 | :items="addclass" | 184 | :items="addclass" |
| 185 | label="Select Class" | 185 | label="Select Class" |
| 186 | v-model="selectAnnoucement.classId" | 186 | v-model="selectAnnoucement.classId" |
| 187 | item-text="classNum" | 187 | item-text="classNum" |
| 188 | item-value="_id" | 188 | item-value="_id" |
| 189 | name="Select Class" | 189 | name="Select Class" |
| 190 | :rules="classRules" | 190 | :rules="classRules" |
| 191 | required | 191 | required |
| 192 | class="ml-2" | 192 | class="ml-2" |
| 193 | @change="getCourses(selectAnnoucement.classId)" | 193 | @change="getCourses(selectAnnoucement.classId)" |
| 194 | ></v-select> | 194 | ></v-select> |
| 195 | <v-select | 195 | <v-select |
| 196 | :items="courseData" | 196 | :items="courseData" |
| 197 | label="Select Course" | 197 | label="Select Course" |
| 198 | v-model="selectAnnoucement.courseId" | 198 | v-model="selectAnnoucement.courseId" |
| 199 | item-text="courseName" | 199 | item-text="courseName" |
| 200 | item-value="_id" | 200 | item-value="_id" |
| 201 | :rules="courseRules" | 201 | :rules="courseRules" |
| 202 | required | 202 | required |
| 203 | class="ml-4" | 203 | class="ml-4" |
| 204 | ></v-select> | 204 | ></v-select> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | </v-card-actions> | 209 | </v-card-actions> |
| 210 | <v-spacer></v-spacer> | 210 | <v-spacer></v-spacer> |
| 211 | <v-btn | 211 | <v-btn |
| 212 | @click="getAnnoucementes()" | 212 | @click="getAnnoucementes()" |
| 213 | round | 213 | round |
| 214 | dark | 214 | dark |
| 215 | :loading="loading" | 215 | :loading="loading" |
| 216 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 216 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 217 | >Find</v-btn> | 217 | >Find</v-btn> |
| 218 | <v-card-title class="body-1" v-show="show"> | 218 | <v-card-title class="body-1" v-show="show"> |
| 219 | <v-btn icon large flat @click="displaySearch"> | 219 | <v-btn icon large flat @click="displaySearch"> |
| 220 | <v-avatar size="27"> | 220 | <v-avatar size="27"> |
| 221 | <img src="/static/icon/search.png" alt="icon" /> | 221 | <img src="/static/icon/search.png" alt="icon" /> |
| 222 | </v-avatar> | 222 | </v-avatar> |
| 223 | </v-btn> | 223 | </v-btn> |
| 224 | </v-card-title> | 224 | </v-card-title> |
| 225 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 225 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-text-field | 227 | <v-text-field |
| 228 | autofocus | 228 | autofocus |
| 229 | v-model="search" | 229 | v-model="search" |
| 230 | label="Search" | 230 | label="Search" |
| 231 | prepend-inner-icon="search" | 231 | prepend-inner-icon="search" |
| 232 | color="primary" | 232 | color="primary" |
| 233 | ></v-text-field> | 233 | ></v-text-field> |
| 234 | <v-icon @click="closeSearch" color="error">close</v-icon> | 234 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | </v-toolbar> | 237 | </v-toolbar> |
| 238 | <v-card flat class="elevation-0 transparent"> | 238 | <v-card flat class="elevation-0 transparent"> |
| 239 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 239 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <v-select | 242 | <v-select |
| 243 | :items="addclass" | 243 | :items="addclass" |
| 244 | label="Select Class" | 244 | label="Select Class" |
| 245 | v-model="selectAnnoucement.select" | 245 | v-model="selectAnnoucement.select" |
| 246 | item-text="classNum" | 246 | item-text="classNum" |
| 247 | item-value="_id" | 247 | item-value="_id" |
| 248 | name="Select Class" | 248 | name="Select Class" |
| 249 | :rules="classRules" | 249 | :rules="classRules" |
| 250 | class="px-2" | 250 | class="px-2" |
| 251 | ></v-select> | 251 | ></v-select> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | </v-layout> | 253 | </v-layout> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs5 class="mx-auto mb-2"> | 255 | <v-flex xs5 class="mx-auto mb-2"> |
| 256 | <v-btn | 256 | <v-btn |
| 257 | @click="getAnnoucementes()" | 257 | @click="getAnnoucementes()" |
| 258 | block | 258 | block |
| 259 | round | 259 | round |
| 260 | dark | 260 | dark |
| 261 | :loading="loading" | 261 | :loading="loading" |
| 262 | class="add-button" | 262 | class="add-button" |
| 263 | >Find</v-btn> | 263 | >Find</v-btn> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | </v-layout> | 265 | </v-layout> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-card> | 267 | </v-card> |
| 268 | <v-data-table | 268 | <v-data-table |
| 269 | :headers="headers" | 269 | :headers="headers" |
| 270 | :items="annoucementData" | 270 | :items="annoucementData" |
| 271 | :pagination.sync="pagination" | 271 | :pagination.sync="pagination" |
| 272 | :search="search" | 272 | :search="search" |
| 273 | > | 273 | > |
| 274 | <template slot="items" slot-scope="props"> | 274 | <template slot="items" slot-scope="props"> |
| 275 | <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> | 275 | <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> |
| 276 | <td class="text-xs-center td td-row"> | 276 | <td class="text-xs-center td td-row"> |
| 277 | <v-avatar size="40"> | 277 | <v-avatar size="40"> |
| 278 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> | 278 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> |
| 279 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> | 279 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> |
| 280 | </v-avatar> | 280 | </v-avatar> |
| 281 | </td> | 281 | </td> |
| 282 | <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> | 282 | <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> |
| 283 | <td class="text-xs-center td td-row"> | 283 | <td class="text-xs-center td td-row"> |
| 284 | <span> | 284 | <span> |
| 285 | <v-tooltip top> | 285 | <v-tooltip top> |
| 286 | <img | 286 | <img |
| 287 | slot="activator" | 287 | slot="activator" |
| 288 | style="cursor:pointer; width:25px; height:25px; " | 288 | style="cursor:pointer; width:25px; height:25px; " |
| 289 | class="mr-3" | 289 | class="mr-3" |
| 290 | @click="profile(props.item)" | 290 | @click="profile(props.item)" |
| 291 | src="/static/icon/view.png" | 291 | src="/static/icon/view.png" |
| 292 | /> | 292 | /> |
| 293 | <span>View</span> | 293 | <span>View</span> |
| 294 | </v-tooltip> | 294 | </v-tooltip> |
| 295 | <v-tooltip top> | 295 | <v-tooltip top> |
| 296 | <img | 296 | <img |
| 297 | slot="activator" | 297 | slot="activator" |
| 298 | style="cursor:pointer; width:20px; height:18px; " | 298 | style="cursor:pointer; width:20px; height:18px; " |
| 299 | class="mr-3" | 299 | class="mr-3" |
| 300 | @click="editItem(props.item)" | 300 | @click="editItem(props.item)" |
| 301 | src="/static/icon/edit.png" | 301 | src="/static/icon/edit.png" |
| 302 | /> | 302 | /> |
| 303 | <span>Edit</span> | 303 | <span>Edit</span> |
| 304 | </v-tooltip> | 304 | </v-tooltip> |
| 305 | <v-tooltip top> | 305 | <v-tooltip top> |
| 306 | <img | 306 | <img |
| 307 | slot="activator" | 307 | slot="activator" |
| 308 | style="cursor:pointer; width:20px; height:20px; " | 308 | style="cursor:pointer; width:20px; height:20px; " |
| 309 | class="mr-3" | 309 | class="mr-3" |
| 310 | @click="deleteItem(props.item)" | 310 | @click="deleteItem(props.item)" |
| 311 | src="/static/icon/delete.png" | 311 | src="/static/icon/delete.png" |
| 312 | /> | 312 | /> |
| 313 | <span>Delete</span> | 313 | <span>Delete</span> |
| 314 | </v-tooltip> | 314 | </v-tooltip> |
| 315 | </span> | 315 | </span> |
| 316 | </td> | 316 | </td> |
| 317 | </tr> | 317 | </tr> |
| 318 | </template> | 318 | </template> |
| 319 | <v-alert | 319 | <v-alert |
| 320 | slot="no-results" | 320 | slot="no-results" |
| 321 | :value="true" | 321 | :value="true" |
| 322 | color="error" | 322 | color="error" |
| 323 | icon="warning" | 323 | icon="warning" |
| 324 | >Your search for "{{ search }}" found no results.</v-alert> | 324 | >Your search for "{{ search }}" found no results.</v-alert> |
| 325 | </v-data-table> | 325 | </v-data-table> |
| 326 | <!-- ****** Add Annoucement DETAILS******--> | 326 | <!-- ****** Add Annoucement DETAILS******--> |
| 327 | <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog"> | 327 | <v-dialog v-model="addAnnoucementDialog" max-width="500" v-if="addAnnoucementDialog" persistent> |
| 328 | <v-card flat class="card-style pa-2" dark> | 328 | <v-card flat class="card-style pa-2" dark> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <label class="title text-xs-center">Add Annoucement</label> | 331 | <label class="title text-xs-center">Add Annoucement</label> |
| 332 | <v-icon | 332 | <v-icon |
| 333 | size="24" | 333 | size="24" |
| 334 | class="right" | 334 | class="right" |
| 335 | @click="$refs.form.reset();addAnnoucementDialog = false" | 335 | @click="$refs.form.reset();addAnnoucementDialog = false" |
| 336 | >cancel</v-icon> | 336 | >cancel</v-icon> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | </v-layout> | 338 | </v-layout> |
| 339 | <v-container fluid> | 339 | <v-container fluid> |
| 340 | <v-layout align-center> | 340 | <v-layout align-center> |
| 341 | <v-flex xs12> | 341 | <v-flex xs12> |
| 342 | <v-flex xs12 sm12> | 342 | <v-flex xs12 sm12> |
| 343 | <v-form ref="form" v-model="valid" lazy-validation> | 343 | <v-form ref="form" v-model="valid" lazy-validation> |
| 344 | <v-layout> | 344 | <v-layout> |
| 345 | <v-flex | 345 | <v-flex |
| 346 | xs12 | 346 | xs12 |
| 347 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 347 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 348 | > | 348 | > |
| 349 | <v-avatar size="100px" v-if="!imageUrl"> | 349 | <v-avatar size="100px" v-if="!imageUrl"> |
| 350 | <img src="/static/icon/user.png" /> | 350 | <img src="/static/icon/user.png" /> |
| 351 | </v-avatar> | 351 | </v-avatar> |
| 352 | <input | 352 | <input |
| 353 | type="file" | 353 | type="file" |
| 354 | style="display: none" | 354 | style="display: none" |
| 355 | ref="image" | 355 | ref="image" |
| 356 | accept="image/*" | 356 | accept="image/*" |
| 357 | @change="onFilePicked" | 357 | @change="onFilePicked" |
| 358 | /> | 358 | /> |
| 359 | <img | 359 | <img |
| 360 | :src="imageData.imageUrl" | 360 | :src="imageData.imageUrl" |
| 361 | height="150" | 361 | height="150" |
| 362 | width="150" | 362 | width="150" |
| 363 | v-if="imageUrl" | 363 | v-if="imageUrl" |
| 364 | style="border-radius:50%; width:200px" | 364 | style="border-radius:50%; width:200px" |
| 365 | /> | 365 | /> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | <v-layout wrap> | 368 | <v-layout wrap> |
| 369 | <v-flex xs12 sm12> | 369 | <v-flex xs12 sm12> |
| 370 | <v-layout> | 370 | <v-layout> |
| 371 | <v-flex x4 sm4 class="pt-4 subheading"> | 371 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 372 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 372 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 373 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 373 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 374 | </v-flex> | 374 | </v-flex> |
| 375 | <v-flex xs8 sm8 class="ml-3"> | 375 | <v-flex xs8 sm8 class="ml-3"> |
| 376 | <v-select | 376 | <v-select |
| 377 | :items="addclass" | 377 | :items="addclass" |
| 378 | label="Select Class" | 378 | label="Select Class" |
| 379 | v-model="addAnnoucement.select" | 379 | v-model="addAnnoucement.select" |
| 380 | item-text="classNum" | 380 | item-text="classNum" |
| 381 | item-value="_id" | 381 | item-value="_id" |
| 382 | name="Select Class" | 382 | name="Select Class" |
| 383 | :rules="classRules" | 383 | :rules="classRules" |
| 384 | @change="getCourses(addAnnoucement.select)" | 384 | @change="getCourses(addAnnoucement.select)" |
| 385 | required | 385 | required |
| 386 | ></v-select> | 386 | ></v-select> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-layout wrap> | 391 | <v-layout wrap> |
| 392 | <v-flex xs12 sm12> | 392 | <v-flex xs12 sm12> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs4 sm4 class="pt-4 subheading"> | 394 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 395 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 395 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 396 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 396 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | <v-flex xs8 sm8 class="ml-3"> | 398 | <v-flex xs8 sm8 class="ml-3"> |
| 399 | <v-select | 399 | <v-select |
| 400 | :items="courseData" | 400 | :items="courseData" |
| 401 | item-text="courseName" | 401 | item-text="courseName" |
| 402 | item-value="_id" | 402 | item-value="_id" |
| 403 | v-model="addAnnoucement.courseName" | 403 | v-model="addAnnoucement.courseName" |
| 404 | placeholder="fill your Course name" | 404 | placeholder="fill your Course name" |
| 405 | type="text" | 405 | type="text" |
| 406 | :rules="courseRules" | 406 | :rules="courseRules" |
| 407 | required | 407 | required |
| 408 | ></v-select> | 408 | ></v-select> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | </v-layout> | 410 | </v-layout> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | <v-flex xs12 sm12> | 412 | <v-flex xs12 sm12> |
| 413 | <v-layout> | 413 | <v-layout> |
| 414 | <v-flex xs4 sm4 class="pt-4 subheading"> | 414 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 415 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> | 415 | <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> |
| 416 | <label | 416 | <label |
| 417 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 417 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 418 | >DiscussionType:</label> | 418 | >DiscussionType:</label> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-flex xs8 sm8 class="ml-3"> | 420 | <v-flex xs8 sm8 class="ml-3"> |
| 421 | <v-text-field | 421 | <v-text-field |
| 422 | v-model="addAnnoucement.discussionType" | 422 | v-model="addAnnoucement.discussionType" |
| 423 | placeholder="fill your Course name" | 423 | placeholder="fill your Course name" |
| 424 | type="text" | 424 | type="text" |
| 425 | :rules="courseRules" | 425 | :rules="courseRules" |
| 426 | required | 426 | required |
| 427 | ></v-text-field> | 427 | ></v-text-field> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | </v-layout> | 429 | </v-layout> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | <v-flex xs12 sm12> | 431 | <v-flex xs12 sm12> |
| 432 | <v-layout> | 432 | <v-layout> |
| 433 | <v-flex xs4 class="pt-4 subheading"> | 433 | <v-flex xs4 class="pt-4 subheading"> |
| 434 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 434 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 435 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> | 435 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> |
| 436 | </v-flex> | 436 | </v-flex> |
| 437 | <v-flex xs8 class="ml-3"> | 437 | <v-flex xs8 class="ml-3"> |
| 438 | <v-text-field | 438 | <v-text-field |
| 439 | label="Select Image" | 439 | label="Select Image" |
| 440 | @click="pickFile" | 440 | @click="pickFile" |
| 441 | v-model="imageName" | 441 | v-model="imageName" |
| 442 | append-icon="attach_file" | 442 | append-icon="attach_file" |
| 443 | ></v-text-field> | 443 | ></v-text-field> |
| 444 | </v-flex> | 444 | </v-flex> |
| 445 | </v-layout> | 445 | </v-layout> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | </v-layout> | 447 | </v-layout> |
| 448 | <v-layout> | 448 | <v-layout> |
| 449 | <v-flex xs12 sm12> | 449 | <v-flex xs12 sm12> |
| 450 | <v-layout class="right"> | 450 | <v-layout class="right"> |
| 451 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 451 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 452 | </v-layout> | 452 | </v-layout> |
| 453 | </v-flex> | 453 | </v-flex> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | </v-form> | 455 | </v-form> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-container> | 459 | </v-container> |
| 460 | </v-card> | 460 | </v-card> |
| 461 | </v-dialog> | 461 | </v-dialog> |
| 462 | <v-snackbar | 462 | <v-snackbar |
| 463 | :timeout="timeout" | 463 | :timeout="timeout" |
| 464 | :top="y === 'top'" | 464 | :top="y === 'top'" |
| 465 | :right="x === 'right'" | 465 | :right="x === 'right'" |
| 466 | :vertical="mode === 'vertical'" | 466 | :vertical="mode === 'vertical'" |
| 467 | v-model="snackbar" | 467 | v-model="snackbar" |
| 468 | :color="color" | 468 | :color="color" |
| 469 | >{{ text }}</v-snackbar> | 469 | >{{ text }}</v-snackbar> |
| 470 | <div class="loader" v-if="showLoader"> | 470 | <div class="loader" v-if="showLoader"> |
| 471 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 471 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 472 | </div> | 472 | </div> |
| 473 | </v-container> | 473 | </v-container> |
| 474 | </template> | 474 | </template> |
| 475 | 475 | ||
| 476 | <script> | 476 | <script> |
| 477 | import http from "@/Services/http.js"; | 477 | import http from "@/Services/http.js"; |
| 478 | import moment from "moment"; | 478 | import moment from "moment"; |
| 479 | import countryList from "@/script/country.js"; | 479 | import countryList from "@/script/country.js"; |
| 480 | import parent from "@/script/parents.js"; | 480 | import parent from "@/script/parents.js"; |
| 481 | 481 | ||
| 482 | export default { | 482 | export default { |
| 483 | data: () => ({ | 483 | data: () => ({ |
| 484 | showNext: false, | 484 | showNext: false, |
| 485 | snackbar: false, | 485 | snackbar: false, |
| 486 | y: "top", | 486 | y: "top", |
| 487 | x: "right", | 487 | x: "right", |
| 488 | role: "", | 488 | role: "", |
| 489 | mode: "", | 489 | mode: "", |
| 490 | append: "", | 490 | append: "", |
| 491 | timeout: 3000, | 491 | timeout: 3000, |
| 492 | text: "", | 492 | text: "", |
| 493 | show: true, | 493 | show: true, |
| 494 | color: "", | 494 | color: "", |
| 495 | showSearch: false, | 495 | showSearch: false, |
| 496 | showLoader: false, | 496 | showLoader: false, |
| 497 | loading: false, | 497 | loading: false, |
| 498 | editLoading: false, | 498 | editLoading: false, |
| 499 | date: null, | 499 | date: null, |
| 500 | search: "", | 500 | search: "", |
| 501 | menu: false, | 501 | menu: false, |
| 502 | menu1: false, | 502 | menu1: false, |
| 503 | editStudentDialog: false, | 503 | editStudentDialog: false, |
| 504 | profileStudentDialog: false, | 504 | profileStudentDialog: false, |
| 505 | addAnnoucementDialog: false, | 505 | addAnnoucementDialog: false, |
| 506 | valid: true, | 506 | valid: true, |
| 507 | addclass: [], | 507 | addclass: [], |
| 508 | addSection: [], | 508 | addSection: [], |
| 509 | pagination: { | 509 | pagination: { |
| 510 | rowsPerPage: 10, | 510 | rowsPerPage: 10, |
| 511 | }, | 511 | }, |
| 512 | imageData: {}, | 512 | imageData: {}, |
| 513 | imageName: "", | 513 | imageName: "", |
| 514 | imageUrl: "", | 514 | imageUrl: "", |
| 515 | imageFile: "", | 515 | imageFile: "", |
| 516 | editImageName: "", | 516 | editImageName: "", |
| 517 | editImageUrl: "", | 517 | editImageUrl: "", |
| 518 | courseRules: [(v) => !!v || " Course Name is required"], | 518 | courseRules: [(v) => !!v || " Course Name is required"], |
| 519 | classRules: [(v) => !!v || " Class Name is required"], | 519 | classRules: [(v) => !!v || " Class Name is required"], |
| 520 | sectionRules: [(v) => !!v || "Section Name is required"], | 520 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 521 | errorMessages: "", | 521 | errorMessages: "", |
| 522 | headers: [ | 522 | headers: [ |
| 523 | { | 523 | { |
| 524 | text: "Image", | 524 | text: "Image", |
| 525 | value: "attachementUrl", | 525 | value: "attachementUrl", |
| 526 | sortable: false, | 526 | sortable: false, |
| 527 | align: "center", | 527 | align: "center", |
| 528 | }, | 528 | }, |
| 529 | { | 529 | { |
| 530 | text: "Discussion Type", | 530 | text: "Discussion Type", |
| 531 | value: "discussionType", | 531 | value: "discussionType", |
| 532 | sortable: false, | 532 | sortable: false, |
| 533 | align: "center", | 533 | align: "center", |
| 534 | }, | 534 | }, |
| 535 | { text: "Action", value: "", sortable: false, align: "center" }, | 535 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 536 | ], | 536 | ], |
| 537 | courseData: [], | 537 | courseData: [], |
| 538 | editedIndex: -1, | 538 | editedIndex: -1, |
| 539 | addAnnoucement: { | 539 | addAnnoucement: { |
| 540 | select: "", | 540 | select: "", |
| 541 | }, | 541 | }, |
| 542 | selectAnnoucement: {}, | 542 | selectAnnoucement: {}, |
| 543 | editedItem: {}, | 543 | editedItem: {}, |
| 544 | annoucementData: [], | 544 | annoucementData: [], |
| 545 | }), | 545 | }), |
| 546 | watch: { | 546 | watch: { |
| 547 | addAnnoucementDialog: function (val) { | 547 | addAnnoucementDialog: function (val) { |
| 548 | if (!val) { | 548 | if (!val) { |
| 549 | this.addAnnoucement = []; | 549 | this.addAnnoucement = []; |
| 550 | this.imageName = ""; | 550 | this.imageName = ""; |
| 551 | this.imageFile = ""; | 551 | this.imageFile = ""; |
| 552 | this.imageUrl = ""; | 552 | this.imageUrl = ""; |
| 553 | } | 553 | } |
| 554 | }, | 554 | }, |
| 555 | }, | 555 | }, |
| 556 | methods: { | 556 | methods: { |
| 557 | getCourses(selectCourseId) { | 557 | getCourses(selectCourseId) { |
| 558 | this.showLoader = true; | 558 | this.showLoader = true; |
| 559 | http() | 559 | http() |
| 560 | .get("/getCourseesList", { | 560 | .get("/getCourseesList", { |
| 561 | params: { | 561 | params: { |
| 562 | classId: selectCourseId, | 562 | classId: selectCourseId, |
| 563 | }, | 563 | }, |
| 564 | }) | 564 | }) |
| 565 | .then((response) => { | 565 | .then((response) => { |
| 566 | this.courseData = response.data.data; | 566 | this.courseData = response.data.data; |
| 567 | this.showLoader = false; | 567 | this.showLoader = false; |
| 568 | }) | 568 | }) |
| 569 | .catch((err) => { | 569 | .catch((err) => { |
| 570 | console.log("err====>", err); | 570 | console.log("err====>", err); |
| 571 | this.showLoader = false; | 571 | this.showLoader = false; |
| 572 | }); | 572 | }); |
| 573 | }, | 573 | }, |
| 574 | getAnnoucementes() { | 574 | getAnnoucementes() { |
| 575 | this.showLoader = true; | 575 | this.showLoader = true; |
| 576 | http() | 576 | http() |
| 577 | .get("/getAnnoucementesList", { | 577 | .get("/getAnnoucementesList", { |
| 578 | params: { | 578 | params: { |
| 579 | courseId: this.selectAnnoucement.courseId, | 579 | courseId: this.selectAnnoucement.courseId, |
| 580 | classId: this.selectAnnoucement.classId, | 580 | classId: this.selectAnnoucement.classId, |
| 581 | }, | 581 | }, |
| 582 | }) | 582 | }) |
| 583 | .then((response) => { | 583 | .then((response) => { |
| 584 | this.annoucementData = response.data.data; | 584 | this.annoucementData = response.data.data; |
| 585 | this.showLoader = false; | 585 | this.showLoader = false; |
| 586 | }) | 586 | }) |
| 587 | .catch((err) => { | 587 | .catch((err) => { |
| 588 | console.log("err====>", err); | 588 | console.log("err====>", err); |
| 589 | this.showLoader = false; | 589 | this.showLoader = false; |
| 590 | }); | 590 | }); |
| 591 | }, | 591 | }, |
| 592 | // getSections(_id) { | 592 | // getSections(_id) { |
| 593 | // var token = this.$store.state.token; | 593 | // var token = this.$store.state.token; |
| 594 | // this.showLoader = true; | 594 | // this.showLoader = true; |
| 595 | // http() | 595 | // http() |
| 596 | // .get( | 596 | // .get( |
| 597 | // "/getSectionsList", | 597 | // "/getSectionsList", |
| 598 | // { params: { classId: _id } }, | 598 | // { params: { classId: _id } }, |
| 599 | // { | 599 | // { |
| 600 | // headers: { Authorization: "Bearer " + token } | 600 | // headers: { Authorization: "Bearer " + token } |
| 601 | // } | 601 | // } |
| 602 | // ) | 602 | // ) |
| 603 | // .then(response => { | 603 | // .then(response => { |
| 604 | // this.addSection = response.data.data; | 604 | // this.addSection = response.data.data; |
| 605 | // this.showLoader = false; | 605 | // this.showLoader = false; |
| 606 | // }) | 606 | // }) |
| 607 | // .catch(err => { | 607 | // .catch(err => { |
| 608 | // this.showLoader = false; | 608 | // this.showLoader = false; |
| 609 | // }); | 609 | // }); |
| 610 | // }, | 610 | // }, |
| 611 | pickFile() { | 611 | pickFile() { |
| 612 | this.$refs.image.click(); | 612 | this.$refs.image.click(); |
| 613 | }, | 613 | }, |
| 614 | pickEditFile() { | 614 | pickEditFile() { |
| 615 | this.$refs.editDataImage.click(); | 615 | this.$refs.editDataImage.click(); |
| 616 | }, | 616 | }, |
| 617 | dates: function (date) { | 617 | dates: function (date) { |
| 618 | return moment(date).format("MMMM DD, YYYY"); | 618 | return moment(date).format("MMMM DD, YYYY"); |
| 619 | return date; | 619 | return date; |
| 620 | }, | 620 | }, |
| 621 | onFilePicked(e) { | 621 | onFilePicked(e) { |
| 622 | // console.log(e) | 622 | // console.log(e) |
| 623 | const files = e.target.files; | 623 | const files = e.target.files; |
| 624 | this.imageData.upload = e.target.files[0]; | 624 | this.imageData.upload = e.target.files[0]; |
| 625 | if (files[0] !== undefined) { | 625 | if (files[0] !== undefined) { |
| 626 | this.imageName = files[0].name; | 626 | this.imageName = files[0].name; |
| 627 | if (this.imageName.lastIndexOf(".") <= 0) { | 627 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 628 | return; | 628 | return; |
| 629 | } | 629 | } |
| 630 | const fr = new FileReader(); | 630 | const fr = new FileReader(); |
| 631 | fr.readAsDataURL(files[0]); | 631 | fr.readAsDataURL(files[0]); |
| 632 | fr.addEventListener("load", () => { | 632 | fr.addEventListener("load", () => { |
| 633 | this.imageUrl = fr.result; | 633 | this.imageUrl = fr.result; |
| 634 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 634 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 635 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 635 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 636 | }); | 636 | }); |
| 637 | } else { | 637 | } else { |
| 638 | this.imageName = ""; | 638 | this.imageName = ""; |
| 639 | this.imageFile = ""; | 639 | this.imageFile = ""; |
| 640 | this.imageUrl = ""; | 640 | this.imageUrl = ""; |
| 641 | } | 641 | } |
| 642 | }, | 642 | }, |
| 643 | onEditFilePicked(e) { | 643 | onEditFilePicked(e) { |
| 644 | console.log(e); | 644 | console.log(e); |
| 645 | const files = e.target.files; | 645 | const files = e.target.files; |
| 646 | if (files[0] !== undefined) { | 646 | if (files[0] !== undefined) { |
| 647 | this.editImageName = files[0].name; | 647 | this.editImageName = files[0].name; |
| 648 | if (this.editImageName.lastIndexOf(".") <= 0) { | 648 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 649 | return; | 649 | return; |
| 650 | } | 650 | } |
| 651 | const fr = new FileReader(); | 651 | const fr = new FileReader(); |
| 652 | fr.readAsDataURL(files[0]); | 652 | fr.readAsDataURL(files[0]); |
| 653 | fr.addEventListener("load", () => { | 653 | fr.addEventListener("load", () => { |
| 654 | this.editImageUrl = fr.result; | 654 | this.editImageUrl = fr.result; |
| 655 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 655 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 656 | }); | 656 | }); |
| 657 | } else { | 657 | } else { |
| 658 | this.editImageName = ""; | 658 | this.editImageName = ""; |
| 659 | this.editiImageFile = ""; | 659 | this.editiImageFile = ""; |
| 660 | } | 660 | } |
| 661 | }, | 661 | }, |
| 662 | editItem(item) { | 662 | editItem(item) { |
| 663 | this.editedIndex = this.courseData.indexOf(item); | 663 | this.editedIndex = this.courseData.indexOf(item); |
| 664 | this.editedItem = Object.assign({}, item); | 664 | this.editedItem = Object.assign({}, item); |
| 665 | this.editStudentDialog = true; | 665 | this.editStudentDialog = true; |
| 666 | }, | 666 | }, |
| 667 | profile(item) { | 667 | profile(item) { |
| 668 | this.editedIndex = this.courseData.indexOf(item); | 668 | this.editedIndex = this.courseData.indexOf(item); |
| 669 | this.editedItem = Object.assign({}, item); | 669 | this.editedItem = Object.assign({}, item); |
| 670 | this.profileStudentDialog = true; | 670 | this.profileStudentDialog = true; |
| 671 | }, | 671 | }, |
| 672 | deleteItem(item) { | 672 | deleteItem(item) { |
| 673 | let deleteAnnoucement = { | 673 | let deleteAnnoucement = { |
| 674 | annoucementId: item._id, | 674 | annoucementId: item._id, |
| 675 | }; | 675 | }; |
| 676 | http() | 676 | http() |
| 677 | .delete( | 677 | .delete( |
| 678 | "/deleteAnnoucement", | 678 | "/deleteAnnoucement", |
| 679 | confirm("Are you sure you want to delete this?") && { | 679 | confirm("Are you sure you want to delete this?") && { |
| 680 | params: deleteAnnoucement, | 680 | params: deleteAnnoucement, |
| 681 | } | 681 | } |
| 682 | ) | 682 | ) |
| 683 | .then((response) => { | 683 | .then((response) => { |
| 684 | this.snackbar = true; | 684 | this.snackbar = true; |
| 685 | this.text = response.data.message; | 685 | this.text = response.data.message; |
| 686 | this.color = "green"; | 686 | this.color = "green"; |
| 687 | this.getAnnoucementes(); | 687 | this.getAnnoucementes(); |
| 688 | }) | 688 | }) |
| 689 | .catch((error) => { | 689 | .catch((error) => { |
| 690 | this.snackbar = true; | 690 | this.snackbar = true; |
| 691 | this.text = error.response.data.message; | 691 | this.text = error.response.data.message; |
| 692 | this.color = "error"; | 692 | this.color = "error"; |
| 693 | }); | 693 | }); |
| 694 | }, | 694 | }, |
| 695 | close() { | 695 | close() { |
| 696 | this.editStudentDialog = false; | 696 | this.editStudentDialog = false; |
| 697 | }, | 697 | }, |
| 698 | closeStudentProfile() { | 698 | closeStudentProfile() { |
| 699 | this.profileStudentDialog = false; | 699 | this.profileStudentDialog = false; |
| 700 | }, | 700 | }, |
| 701 | rowAnnoucement(id) { | 701 | rowAnnoucement(id) { |
| 702 | this.$router.push({ | 702 | this.$router.push({ |
| 703 | name: "Annoucement Forum", | 703 | name: "Annoucement Forum", |
| 704 | params: { annoucementId: id }, | 704 | params: { annoucementId: id }, |
| 705 | }); | 705 | }); |
| 706 | }, | 706 | }, |
| 707 | submit() { | 707 | submit() { |
| 708 | if (this.$refs.form.validate()) { | 708 | if (this.$refs.form.validate()) { |
| 709 | let addCourse = { | 709 | let addCourse = { |
| 710 | classId: this.addAnnoucement.select, | 710 | classId: this.addAnnoucement.select, |
| 711 | sectionId: this.addAnnoucement.selectSection, | 711 | sectionId: this.addAnnoucement.selectSection, |
| 712 | discussionType: this.addAnnoucement.discussionType, | 712 | discussionType: this.addAnnoucement.discussionType, |
| 713 | courseId: this.addAnnoucement.courseName, | 713 | courseId: this.addAnnoucement.courseName, |
| 714 | }; | 714 | }; |
| 715 | if (this.imageUrl) { | 715 | if (this.imageUrl) { |
| 716 | var str = this.imageUrl; | 716 | var str = this.imageUrl; |
| 717 | const [baseUrl, imageUrl] = str.split(/,/); | 717 | const [baseUrl, imageUrl] = str.split(/,/); |
| 718 | addCourse.upload = imageUrl; | 718 | addCourse.upload = imageUrl; |
| 719 | } | 719 | } |
| 720 | this.loading = true; | 720 | this.loading = true; |
| 721 | http() | 721 | http() |
| 722 | .post("/createAnnoucement", addCourse) | 722 | .post("/createAnnoucement", addCourse) |
| 723 | .then((response) => { | 723 | .then((response) => { |
| 724 | this.snackbar = true; | 724 | this.snackbar = true; |
| 725 | this.text = "New Annoucement added successfully"; | 725 | this.text = "New Annoucement added successfully"; |
| 726 | this.color = "green"; | 726 | this.color = "green"; |
| 727 | this.addAnnoucementDialog = false; | 727 | this.addAnnoucementDialog = false; |
| 728 | this.clear(); | 728 | this.clear(); |
| 729 | this.loading = false; | 729 | this.loading = false; |
| 730 | }) | 730 | }) |
| 731 | .catch((error) => { | 731 | .catch((error) => { |
| 732 | this.snackbar = true; | 732 | this.snackbar = true; |
| 733 | this.text = error.response.data.message; | 733 | this.text = error.response.data.message; |
| 734 | this.color = "error"; | 734 | this.color = "error"; |
| 735 | this.loading = false; | 735 | this.loading = false; |
| 736 | }); | 736 | }); |
| 737 | } | 737 | } |
| 738 | }, | 738 | }, |
| 739 | clear() { | 739 | clear() { |
| 740 | this.$refs.form.reset(); | 740 | this.$refs.form.reset(); |
| 741 | this.imageUrl = ""; | 741 | this.imageUrl = ""; |
| 742 | }, | 742 | }, |
| 743 | save() { | 743 | save() { |
| 744 | let editAnnoucement = { | 744 | let editAnnoucement = { |
| 745 | annoucementId: this.editedItem._id, | 745 | annoucementId: this.editedItem._id, |
| 746 | discussionType: this.editedItem.discussionType, | 746 | discussionType: this.editedItem.discussionType, |
| 747 | classId: this.editedItem.select, | 747 | classId: this.editedItem.select, |
| 748 | courseId: this.editedItem.courseName, | 748 | courseId: this.editedItem.courseName, |
| 749 | }; | 749 | }; |
| 750 | if (this.editImageUrl) { | 750 | if (this.editImageUrl) { |
| 751 | var str = this.editImageUrl; | 751 | var str = this.editImageUrl; |
| 752 | const [baseUrl, editImageUrl] = str.split(/,/); | 752 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 753 | editAnnoucement.upload = editImageUrl; | 753 | editAnnoucement.upload = editImageUrl; |
| 754 | } | 754 | } |
| 755 | this.editLoading = true; | 755 | this.editLoading = true; |
| 756 | http() | 756 | http() |
| 757 | .put("/updateAnnoucement", editAnnoucement) | 757 | .put("/updateAnnoucement", editAnnoucement) |
| 758 | .then((response) => { | 758 | .then((response) => { |
| 759 | this.snackbar = true; | 759 | this.snackbar = true; |
| 760 | this.text = response.data.message; | 760 | this.text = response.data.message; |
| 761 | this.color = "green"; | 761 | this.color = "green"; |
| 762 | this.imageUrl = ""; | 762 | this.imageUrl = ""; |
| 763 | this.getAnnoucementes(); | 763 | this.getAnnoucementes(); |
| 764 | this.close(); | 764 | this.close(); |
| 765 | this.editLoading = false; | 765 | this.editLoading = false; |
| 766 | }) | 766 | }) |
| 767 | .catch((error) => { | 767 | .catch((error) => { |
| 768 | this.snackbar = true; | 768 | this.snackbar = true; |
| 769 | this.text = error.response.data.statusText; | 769 | this.text = error.response.data.statusText; |
| 770 | this.color = "error"; | 770 | this.color = "error"; |
| 771 | this.editLoading = false; | 771 | this.editLoading = false; |
| 772 | }); | 772 | }); |
| 773 | }, | 773 | }, |
| 774 | displaySearch() { | 774 | displaySearch() { |
| 775 | this.show = false; | 775 | this.show = false; |
| 776 | this.showSearch = true; | 776 | this.showSearch = true; |
| 777 | }, | 777 | }, |
| 778 | closeSearch() { | 778 | closeSearch() { |
| 779 | this.showSearch = false; | 779 | this.showSearch = false; |
| 780 | this.show = true; | 780 | this.show = true; |
| 781 | this.search = ""; | 781 | this.search = ""; |
| 782 | }, | 782 | }, |
| 783 | }, | 783 | }, |
| 784 | mounted() { | 784 | mounted() { |
| 785 | var token = this.$store.state.token; | 785 | var token = this.$store.state.token; |
| 786 | http() | 786 | http() |
| 787 | .get("/getClassesList", { | 787 | .get("/getClassesList", { |
| 788 | headers: { Authorization: "Bearer " + token }, | 788 | headers: { Authorization: "Bearer " + token }, |
| 789 | }) | 789 | }) |
| 790 | .then((response) => { | 790 | .then((response) => { |
| 791 | this.addclass = response.data.data; | 791 | this.addclass = response.data.data; |
| 792 | }) | 792 | }) |
| 793 | .catch((error) => { | 793 | .catch((error) => { |
| 794 | this.showLoader = false; | 794 | this.showLoader = false; |
| 795 | if (error.response.status === 401) { | 795 | if (error.response.status === 401) { |
| 796 | this.$router.replace({ path: "/" }); | 796 | this.$router.replace({ path: "/" }); |
| 797 | this.$store.dispatch("setToken", null); | 797 | this.$store.dispatch("setToken", null); |
| 798 | this.$store.dispatch("Id", null); | 798 | this.$store.dispatch("Id", null); |
| 799 | this.$store.dispatch("Role", null); | 799 | this.$store.dispatch("Role", null); |
| 800 | } | 800 | } |
| 801 | }); | 801 | }); |
| 802 | }, | 802 | }, |
| 803 | }; | 803 | }; |
| 804 | </script> | 804 | </script> |
| 805 | <style> | 805 | <style> |
| 806 | .row-click { | 806 | .row-click { |
| 807 | cursor: pointer; | 807 | cursor: pointer; |
| 808 | } | 808 | } |
| 809 | </style> | 809 | </style> |
src/pages/AssignTeachers.vue
| File was created | 1 | <template> | |
| 2 | <v-container fluid class="body-color"> | ||
| 3 | <!-- LOADER --> | ||
| 4 | <div class="loader" v-if="showLoader"> | ||
| 5 | <v-progress-circular indeterminate color="white"></v-progress-circular> | ||
| 6 | </div> | ||
| 7 | |||
| 8 | <!-- SNACKBAR --> | ||
| 9 | <v-snackbar | ||
| 10 | :timeout="timeout" | ||
| 11 | :top="y === 'top'" | ||
| 12 | :right="x === 'right'" | ||
| 13 | :vertical="mode === 'vertical'" | ||
| 14 | v-model="snackbar" | ||
| 15 | :color="snackbarColor" | ||
| 16 | > | ||
| 17 | {{ text }} | ||
| 18 | <v-spacer></v-spacer> | ||
| 19 | <v-btn flat text @click="snackbar = false">X</v-btn> | ||
| 20 | </v-snackbar> | ||
| 21 | |||
| 22 | <!-- DIALOG ENROLL TEACHER --> | ||
| 23 | <v-dialog v-model="dialogEnrollTeacher" max-width="600px" scrollable persistent> | ||
| 24 | <v-card flat class="card-style pa-3" dark> | ||
| 25 | <v-layout> | ||
| 26 | <v-flex xs12> | ||
| 27 | <label class="title text-xs-center">View Course</label> | ||
| 28 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | ||
| 29 | </v-flex> | ||
| 30 | </v-layout> | ||
| 31 | <v-card-text> | ||
| 32 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | ||
| 33 | <v-avatar size="100px"> | ||
| 34 | <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> | ||
| 35 | <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> | ||
| 36 | </v-avatar> | ||
| 37 | </v-flex> | ||
| 38 | <v-container grid-list-md> | ||
| 39 | <v-layout wrap> | ||
| 40 | <v-flex xs12> | ||
| 41 | <v-layout> | ||
| 42 | <v-flex xs6 sm6> | ||
| 43 | <h5 class="right my-1"> | ||
| 44 | <b>Course :</b> | ||
| 45 | </h5> | ||
| 46 | </v-flex> | ||
| 47 | <v-flex sm6 xs6> | ||
| 48 | <h5 class="my-1 left">{{ editedItem.courseName }}</h5> | ||
| 49 | </v-flex> | ||
| 50 | </v-layout> | ||
| 51 | </v-flex> | ||
| 52 | </v-layout> | ||
| 53 | </v-container> | ||
| 54 | </v-card-text> | ||
| 55 | </v-card> | ||
| 56 | </v-dialog> | ||
| 57 | |||
| 58 | <v-toolbar color="transparent" flat> | ||
| 59 | <v-card-actions> | ||
| 60 | <v-layout row wrap> | ||
| 61 | <!-- SELECT CLASS --> | ||
| 62 | <v-flex xs12 sm6> | ||
| 63 | <v-select | ||
| 64 | :items="classesList" | ||
| 65 | label="Select Class" | ||
| 66 | v-model="classId" | ||
| 67 | item-text="classNum" | ||
| 68 | item-value="_id" | ||
| 69 | name="Select Class" | ||
| 70 | :rules="classRules" | ||
| 71 | required | ||
| 72 | @change="populateCourses(classId)" | ||
| 73 | class="ml-2" | ||
| 74 | ></v-select> | ||
| 75 | </v-flex> | ||
| 76 | <!-- SELECT COURSE --> | ||
| 77 | <v-flex xs12 sm6> | ||
| 78 | <v-select | ||
| 79 | :items="courseData" | ||
| 80 | label="Select Course" | ||
| 81 | v-model="courseId" | ||
| 82 | item-text="courseName" | ||
| 83 | item-value="_id" | ||
| 84 | required | ||
| 85 | class="ml-2" | ||
| 86 | @change="getTeachersList()" | ||
| 87 | ></v-select> | ||
| 88 | </v-flex> | ||
| 89 | </v-layout> | ||
| 90 | </v-card-actions> | ||
| 91 | </v-toolbar> | ||
| 92 | |||
| 93 | <!-- LIST OF TEACHERS --> | ||
| 94 | <v-data-table | ||
| 95 | :headers="headers" | ||
| 96 | :items="teachersList" | ||
| 97 | :pagination.sync="pagination" | ||
| 98 | :search="search" | ||
| 99 | select-all | ||
| 100 | v-model="selected" | ||
| 101 | item-key="_id" | ||
| 102 | > | ||
| 103 | <template slot="items" slot-scope="props"> | ||
| 104 | <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> | ||
| 105 | <td class="text-xs-center td td-row"> | ||
| 106 | <v-checkbox | ||
| 107 | v-model="props.item.enroll" | ||
| 108 | @change="enrollTeacher(props.item)" | ||
| 109 | primary | ||
| 110 | hide-details | ||
| 111 | ></v-checkbox> | ||
| 112 | </td> | ||
| 113 | |||
| 114 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | ||
| 115 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | ||
| 116 | </tr> | ||
| 117 | </template> | ||
| 118 | <template slot="headers" slot-scope="props"> | ||
| 119 | <tr> | ||
| 120 | <th> | ||
| 121 | <v-checkbox | ||
| 122 | :input-value="props.all" | ||
| 123 | :indeterminate="props.indeterminate" | ||
| 124 | primary | ||
| 125 | hide-details | ||
| 126 | @click.native="toggleAll" | ||
| 127 | ></v-checkbox> | ||
| 128 | </th> | ||
| 129 | <th | ||
| 130 | v-for="header in props.headers" | ||
| 131 | :key="header.text" | ||
| 132 | :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" | ||
| 133 | @click="changeSort(header.value)" | ||
| 134 | > | ||
| 135 | <v-icon small>arrow_upward</v-icon> | ||
| 136 | {{ header.text }} | ||
| 137 | </th> | ||
| 138 | </tr> | ||
| 139 | </template> | ||
| 140 | <v-alert | ||
| 141 | slot="no-results" | ||
| 142 | :value="true" | ||
| 143 | color="error" | ||
| 144 | icon="warning" | ||
| 145 | >Your search for "{{ search }}" found no results.</v-alert> | ||
| 146 | </v-data-table> | ||
| 147 | |||
| 148 | <v-snackbar | ||
| 149 | :timeout="timeout" | ||
| 150 | :top="y === 'top'" | ||
| 151 | :right="x === 'right'" | ||
| 152 | :vertical="mode === 'vertical'" | ||
| 153 | v-model="snackbar" | ||
| 154 | :color="color" | ||
| 155 | >{{ text }}</v-snackbar> | ||
| 156 | <div class="loader" v-if="showLoader"> | ||
| 157 | <v-progress-circular indeterminate color="white"></v-progress-circular> | ||
| 158 | </div> | ||
| 159 | </v-container> | ||
| 160 | </template> | ||
| 161 | |||
| 162 | <script> | ||
| 163 | import http from "@/Services/http.js"; | ||
| 164 | import moment from "moment"; | ||
| 165 | import countryList from "@/script/country.js"; | ||
| 166 | import parent from "@/script/parents.js"; | ||
| 167 | import AllApicalls from "@/Services/AllApiCalls.js"; | ||
| 168 | |||
| 169 | export default { | ||
| 170 | mixins: [AllApicalls], | ||
| 171 | data: () => ({ | ||
| 172 | showNext: false, | ||
| 173 | snackbar: false, | ||
| 174 | y: "top", | ||
| 175 | x: "right", | ||
| 176 | role: "", | ||
| 177 | mode: "", | ||
| 178 | append: "", | ||
| 179 | timeout: 3000, | ||
| 180 | text: "", | ||
| 181 | show: true, | ||
| 182 | color: "", | ||
| 183 | showSearch: false, | ||
| 184 | showLoader: false, | ||
| 185 | loading: false, | ||
| 186 | editLoading: false, | ||
| 187 | date: null, | ||
| 188 | search: "", | ||
| 189 | menu: false, | ||
| 190 | menu1: false, | ||
| 191 | editStudentDialog: false, | ||
| 192 | profileStudentDialog: false, | ||
| 193 | addCourseDialog: false, | ||
| 194 | valid: true, | ||
| 195 | |||
| 196 | addSection: [], | ||
| 197 | pagination: { | ||
| 198 | rowsPerPage: 10, | ||
| 199 | }, | ||
| 200 | imageData: {}, | ||
| 201 | imageName: "", | ||
| 202 | imageUrl: "", | ||
| 203 | imageFile: "", | ||
| 204 | editImageName: "", | ||
| 205 | editImageUrl: "", | ||
| 206 | courseRules: [(v) => !!v || " Course Name is required"], | ||
| 207 | classRules: [(v) => !!v || " Class Name is required"], | ||
| 208 | sectionRules: [(v) => !!v || " Section Name is required"], | ||
| 209 | errorMessages: "", | ||
| 210 | /* LIST OF TEACHERS */ | ||
| 211 | headers: [ | ||
| 212 | { | ||
| 213 | text: "Teacher Name", | ||
| 214 | value: "name", | ||
| 215 | sortable: false, | ||
| 216 | align: "center", | ||
| 217 | }, | ||
| 218 | { | ||
| 219 | text: "Email", | ||
| 220 | value: "email", | ||
| 221 | sortable: false, | ||
| 222 | align: "center", | ||
| 223 | }, | ||
| 224 | ], | ||
| 225 | selected: [], | ||
| 226 | teachers: [], | ||
| 227 | // courseData: [], | ||
| 228 | editedIndex: -1, | ||
| 229 | addCourses: {}, | ||
| 230 | selectStudents: { | ||
| 231 | select: "", | ||
| 232 | selectSection: "", | ||
| 233 | }, | ||
| 234 | editedItem: {}, | ||
| 235 | /* DIALOG ENROLL TEACHER */ | ||
| 236 | dialogEnrollTeacher: false, | ||
| 237 | /* SELECT CLASS*/ | ||
| 238 | classesList: [], | ||
| 239 | classId: "", | ||
| 240 | /* SELECT COURSE */ | ||
| 241 | courseId: "", | ||
| 242 | }), | ||
| 243 | |||
| 244 | methods: { | ||
| 245 | async populateCourses() { | ||
| 246 | let response = await this.getCourseesList({ classId: this.classId }); | ||
| 247 | }, | ||
| 248 | enrollTeacher(selected) { | ||
| 249 | let selectedTeachersArray = []; | ||
| 250 | selectedTeachersArray.push({ teacherId: selected._id }); | ||
| 251 | |||
| 252 | let isExists = false; | ||
| 253 | for (let item of this.selected) { | ||
| 254 | if (item._id === selected._id) { | ||
| 255 | isExists = true; | ||
| 256 | break; | ||
| 257 | } | ||
| 258 | } | ||
| 259 | |||
| 260 | if (selected.enroll === true) { | ||
| 261 | if (!isExists) this.selected.push(selected); | ||
| 262 | var payload = { | ||
| 263 | courseId: this.courseId, | ||
| 264 | teacherId: selectedTeachersArray, | ||
| 265 | }; | ||
| 266 | http() | ||
| 267 | .put("/assignTeacherToCourse", payload) | ||
| 268 | .then((response) => { | ||
| 269 | this.snackbar = true; | ||
| 270 | this.text = response.data.message; | ||
| 271 | this.getParticularCourse("noSnackbar"); | ||
| 272 | }) | ||
| 273 | .catch((error) => { | ||
| 274 | this.snackbar = true; | ||
| 275 | this.text = error.response.data.message; | ||
| 276 | }); | ||
| 277 | } | ||
| 278 | if ( | ||
| 279 | selected.enroll == false && | ||
| 280 | selected.enroll != undefined && | ||
| 281 | selected.enroll != null | ||
| 282 | ) { | ||
| 283 | var payloadDeleteStudents = { | ||
| 284 | courseId: this.courseId, | ||
| 285 | teacherId: selected.enrollId, | ||
| 286 | }; | ||
| 287 | http() | ||
| 288 | .put("/deleteStudents", payloadDeleteStudents) | ||
| 289 | .then((response) => { | ||
| 290 | this.snackbar = true; | ||
| 291 | this.text = response.data.message; | ||
| 292 | this.getParticularCourse(); | ||
| 293 | }) | ||
| 294 | .catch((error) => { | ||
| 295 | this.snackbar = true; | ||
| 296 | this.text = error.response.data.message; | ||
| 297 | }); | ||
| 298 | } | ||
| 299 | }, | ||
| 300 | |||
| 301 | toggleAll() { | ||
| 302 | let withdraw = false; | ||
| 303 | if (this.selected.length === this.studentsData.length) withdraw = true; | ||
| 304 | |||
| 305 | if (withdraw) { | ||
| 306 | var payload = { | ||
| 307 | courseId: this.courseId, | ||
| 308 | teacherId: [], | ||
| 309 | }; | ||
| 310 | http() | ||
| 311 | .put("/assignTeacherToCourse", payload) | ||
| 312 | .then((response) => { | ||
| 313 | this.snackbar = true; | ||
| 314 | this.text = response.data.message; | ||
| 315 | this.selected = []; | ||
| 316 | for (let i = 0; i < this.studentsData.length; i++) { | ||
| 317 | this.studentsData[i].enroll = false; | ||
| 318 | } | ||
| 319 | this.getParticularCourse(); | ||
| 320 | }) | ||
| 321 | .catch((error) => { | ||
| 322 | this.snackbar = true; | ||
| 323 | this.text = error.response.data.message; | ||
| 324 | }); | ||
| 325 | } else { | ||
| 326 | let selectedTeachersArray = []; | ||
| 327 | for (let item of this.studentsData) { | ||
| 328 | if (item.enroll === false || !item.enroll) { | ||
| 329 | selectedTeachersArray.push({ teacherId: item._id }); | ||
| 330 | } | ||
| 331 | } | ||
| 332 | |||
| 333 | var payload = { | ||
| 334 | courseId: this.courseId, | ||
| 335 | teacherId: selectedTeachersArray, | ||
| 336 | }; | ||
| 337 | http() | ||
| 338 | .put("/assignTeacherToCourse", payload) | ||
| 339 | .then((response) => { | ||
| 340 | this.snackbar = true; | ||
| 341 | this.text = response.data.message; | ||
| 342 | for (let i = 0; i < this.studentsData.length; i++) { | ||
| 343 | this.studentsData[i].enroll = true; | ||
| 344 | } | ||
| 345 | this.getParticularCourse(); | ||
| 346 | }) | ||
| 347 | .catch((error) => { | ||
| 348 | this.snackbar = true; | ||
| 349 | this.text = error.response.data.message; | ||
| 350 | }); | ||
| 351 | } | ||
| 352 | }, | ||
| 353 | // getCourses() { | ||
| 354 | // this.showLoader = true; | ||
| 355 | // http() | ||
| 356 | // .get("/getCourseesList", { | ||
| 357 | // params: { | ||
| 358 | // classId: this.selectStudents.select, | ||
| 359 | // }, | ||
| 360 | // }) | ||
| 361 | // .then((response) => { | ||
| 362 | // this.courseData = response.data.data; | ||
| 363 | // this.showLoader = false; | ||
| 364 | // }) | ||
| 365 | // .catch((err) => { | ||
| 366 | // console.log("err====>", err); | ||
| 367 | // this.showLoader = false; | ||
| 368 | // }); | ||
| 369 | // }, | ||
| 370 | // getSections(_id) { | ||
| 371 | // var token = this.$store.state.token; | ||
| 372 | // this.showLoader = true; | ||
| 373 | // http() | ||
| 374 | // .get( | ||
| 375 | // "/getSectionsList", | ||
| 376 | // { params: { classId: _id } }, | ||
| 377 | // { | ||
| 378 | // headers: { Authorization: "Bearer " + token }, | ||
| 379 | // } | ||
| 380 | // ) | ||
| 381 | // .then((response) => { | ||
| 382 | // this.addSection = response.data.data; | ||
| 383 | // this.showLoader = false; | ||
| 384 | // }) | ||
| 385 | // .catch((err) => { | ||
| 386 | // this.showLoader = false; | ||
| 387 | // }); | ||
| 388 | // }, | ||
| 389 | }, | ||
| 390 | mounted() { | ||
| 391 | var token = this.$store.state.token; | ||
| 392 | http() | ||
| 393 | .get("/getClassesList", { | ||
| 394 | headers: { Authorization: "Bearer " + token }, | ||
| 395 | }) | ||
| 396 | .then((response) => { | ||
| 397 | this.classesList = response.data.data; | ||
| 398 | }) | ||
| 399 | .catch((error) => { | ||
| 400 | this.showLoader = false; | ||
| 401 | if (error.response.status === 401) { | ||
| 402 | this.$router.replace({ path: "/" }); | ||
| 403 | this.$store.dispatch("setToken", null); | ||
| 404 | this.$store.dispatch("Id", null); | ||
| 405 | this.$store.dispatch("Role", null); | ||
| 406 | } | ||
| 407 | }); | ||
| 408 | }, | ||
| 409 | }; | ||
| 410 | </script> | ||
| 411 | <style scoped> | ||
| 412 | .active { | ||
| 413 | background-color: gray; | ||
| 414 | color: white !important; | ||
| 415 | } | ||
| 416 | .activebtn { | ||
| 417 | color: black !important; | ||
| 418 | } | ||
| 419 | </style> |
src/pages/Attendence/studentAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-snackbar | 3 | <v-snackbar |
| 4 | :timeout="timeout" | 4 | :timeout="timeout" |
| 5 | :top="y === 'top'" | 5 | :top="y === 'top'" |
| 6 | :right="x === 'right'" | 6 | :right="x === 'right'" |
| 7 | :vertical="mode === 'vertical'" | 7 | :vertical="mode === 'vertical'" |
| 8 | v-model="snackbar" | 8 | v-model="snackbar" |
| 9 | color="success" | 9 | color="success" |
| 10 | >{{ text }}</v-snackbar> | 10 | >{{ text }}</v-snackbar> |
| 11 | <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> | 11 | <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> |
| 12 | <!-- <download-csv :data="json_data"> | 12 | <!-- <download-csv :data="json_data"> |
| 13 | <v-btn>Download Data</v-btn> | 13 | <v-btn>Download Data</v-btn> |
| 14 | </download-csv>--> | 14 | </download-csv>--> |
| 15 | <v-toolbar color="transparent" flat> | 15 | <v-toolbar color="transparent" flat> |
| 16 | <v-btn | 16 | <v-btn |
| 17 | fab | 17 | fab |
| 18 | dark | 18 | dark |
| 19 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 19 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 20 | small | 20 | small |
| 21 | @click="addStudentAttendenceDialog = true" | 21 | @click="addStudentAttendenceDialog = true" |
| 22 | > | 22 | > |
| 23 | <v-icon dark>add</v-icon> | 23 | <v-icon dark>add</v-icon> |
| 24 | </v-btn> | 24 | </v-btn> |
| 25 | <v-btn | 25 | <v-btn |
| 26 | v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' " | 26 | v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' " |
| 27 | round | 27 | round |
| 28 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 28 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 29 | dark | 29 | dark |
| 30 | @click="addStudentAttendenceDialog = true" | 30 | @click="addStudentAttendenceDialog = true" |
| 31 | > | 31 | > |
| 32 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence | 32 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence |
| 33 | </v-btn> | 33 | </v-btn> |
| 34 | 34 | ||
| 35 | <v-spacer></v-spacer> | 35 | <v-spacer></v-spacer> |
| 36 | <v-flex xs12 sm4 md2> | 36 | <v-flex xs12 sm4 md2> |
| 37 | <v-select | 37 | <v-select |
| 38 | small | 38 | small |
| 39 | :items="addclass" | 39 | :items="addclass" |
| 40 | label="Select Class" | 40 | label="Select Class" |
| 41 | v-model="getAttendence.classId" | 41 | v-model="getAttendence.classId" |
| 42 | item-text="classNum" | 42 | item-text="classNum" |
| 43 | item-value="_id" | 43 | item-value="_id" |
| 44 | name="Select Class" | 44 | name="Select Class" |
| 45 | @change="getSection(getAttendence.classId)" | 45 | @change="getSection(getAttendence.classId)" |
| 46 | class="px-2" | 46 | class="px-2" |
| 47 | required | 47 | required |
| 48 | ></v-select> | 48 | ></v-select> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs12 sm4 md2> | 50 | <v-flex xs12 sm4 md2> |
| 51 | <v-select | 51 | <v-select |
| 52 | small | 52 | small |
| 53 | :items="addSection" | 53 | :items="addSection" |
| 54 | label="Select Section" | 54 | label="Select Section" |
| 55 | v-model="getAttendence.sectionId" | 55 | v-model="getAttendence.sectionId" |
| 56 | item-text="name" | 56 | item-text="name" |
| 57 | item-value="_id" | 57 | item-value="_id" |
| 58 | name="Select Section" | 58 | name="Select Section" |
| 59 | @change="getStudentsDetail(getAttendence.sectionId)" | 59 | @change="getStudentsDetail(getAttendence.sectionId)" |
| 60 | class="px-2" | 60 | class="px-2" |
| 61 | required | 61 | required |
| 62 | ></v-select> | 62 | ></v-select> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-card-title class="body-1" v-show="show"> | 64 | <v-card-title class="body-1" v-show="show"> |
| 65 | <v-btn icon large flat @click="displaySearch"> | 65 | <v-btn icon large flat @click="displaySearch"> |
| 66 | <v-avatar size="27"> | 66 | <v-avatar size="27"> |
| 67 | <img src="/static/icon/search.png" alt="icon" /> | 67 | <img src="/static/icon/search.png" alt="icon" /> |
| 68 | </v-avatar> | 68 | </v-avatar> |
| 69 | </v-btn> | 69 | </v-btn> |
| 70 | </v-card-title> | 70 | </v-card-title> |
| 71 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 71 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 72 | <v-layout> | 72 | <v-layout> |
| 73 | <v-text-field | 73 | <v-text-field |
| 74 | autofocus | 74 | autofocus |
| 75 | v-model="search" | 75 | v-model="search" |
| 76 | label="Search" | 76 | label="Search" |
| 77 | prepend-inner-icon="search" | 77 | prepend-inner-icon="search" |
| 78 | color="primary" | 78 | color="primary" |
| 79 | ></v-text-field> | 79 | ></v-text-field> |
| 80 | <v-icon @click="closeSearch" color="error">close</v-icon> | 80 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 81 | </v-layout> | 81 | </v-layout> |
| 82 | </v-flex> | 82 | </v-flex> |
| 83 | </v-toolbar> | 83 | </v-toolbar> |
| 84 | <v-data-table | 84 | <v-data-table |
| 85 | :headers="headers" | 85 | :headers="headers" |
| 86 | :items="studentsData" | 86 | :items="studentsData" |
| 87 | :pagination.sync="pagination" | 87 | :pagination.sync="pagination" |
| 88 | :search="search" | 88 | :search="search" |
| 89 | > | 89 | > |
| 90 | <template slot="items" slot-scope="props"> | 90 | <template slot="items" slot-scope="props"> |
| 91 | <tr class="tr"> | 91 | <tr class="tr"> |
| 92 | <td class="td td-row">{{ props.index + 1}}</td> | 92 | <td class="td td-row">{{ props.index + 1}}</td> |
| 93 | <td class="text-xs-center td td-row"> | 93 | <td class="text-xs-center td td-row"> |
| 94 | <v-avatar size="40"> | 94 | <v-avatar size="40"> |
| 95 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 95 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 96 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 96 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 97 | </v-avatar> | 97 | </v-avatar> |
| 98 | </td> | 98 | </td> |
| 99 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 99 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 100 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> | 100 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> |
| 101 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 101 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 102 | <td class="text-xs-center td td-row"> | 102 | <td class="text-xs-center td td-row"> |
| 103 | <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> | 103 | <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> |
| 104 | <v-tooltip top> | 104 | <v-tooltip top> |
| 105 | <img | 105 | <img |
| 106 | slot="activator" | 106 | slot="activator" |
| 107 | style="cursor:pointer; width:20px; height:25px; " | 107 | style="cursor:pointer; width:20px; height:25px; " |
| 108 | class="mr-3" | 108 | class="mr-3" |
| 109 | src="/static/icon/view.png" | 109 | src="/static/icon/view.png" |
| 110 | /> | 110 | /> |
| 111 | <span>View</span> | 111 | <span>View</span> |
| 112 | </v-tooltip> | 112 | </v-tooltip> |
| 113 | </router-link> | 113 | </router-link> |
| 114 | </td> | 114 | </td> |
| 115 | </tr> | 115 | </tr> |
| 116 | </template> | 116 | </template> |
| 117 | <v-alert | 117 | <v-alert |
| 118 | slot="no-results" | 118 | slot="no-results" |
| 119 | :value="true" | 119 | :value="true" |
| 120 | color="error" | 120 | color="error" |
| 121 | icon="warning" | 121 | icon="warning" |
| 122 | >Your search for "{{ search }}" found no results.</v-alert> | 122 | >Your search for "{{ search }}" found no results.</v-alert> |
| 123 | </v-data-table> | 123 | </v-data-table> |
| 124 | <!-- ****** Add Students Attendece****** --> | 124 | <!-- ****** Add Students Attendece****** --> |
| 125 | <v-dialog v-model="addStudentAttendenceDialog" width="1600" v-if="addStudentAttendenceDialog"> | 125 | <v-dialog v-model="addStudentAttendenceDialog" width="1600" v-if="addStudentAttendenceDialog" persistent> |
| 126 | <v-card flat class="pa-2"> | 126 | <v-card flat class="pa-2"> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs12> | 128 | <v-flex xs12> |
| 129 | <label class="title text-xs-center">Add Student Attendence</label> | 129 | <label class="title text-xs-center">Add Student Attendence</label> |
| 130 | <v-icon | 130 | <v-icon |
| 131 | size="24" | 131 | size="24" |
| 132 | class="right" | 132 | class="right" |
| 133 | @click="$refs.form.reset();addStudentAttendenceDialog = false" | 133 | @click="$refs.form.reset();addStudentAttendenceDialog = false" |
| 134 | >cancel</v-icon> | 134 | >cancel</v-icon> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-layout> | 136 | </v-layout> |
| 137 | <v-flex xs12 class="mt-4"> | 137 | <v-flex xs12 class="mt-4"> |
| 138 | <v-form ref="form" v-model="valid" lazy-validation> | 138 | <v-form ref="form" v-model="valid" lazy-validation> |
| 139 | <v-flex xs12 sm12 lg12> | 139 | <v-flex xs12 sm12 lg12> |
| 140 | <v-layout wrap> | 140 | <v-layout wrap> |
| 141 | <v-flex xs6 sm6 lg3 md4> | 141 | <v-flex xs6 sm6 lg3 md4> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 143 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 144 | <label class="right">Class:</label> | 144 | <label class="right">Class:</label> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | <v-flex xs9 sm6 lg8 class="ml-2"> | 146 | <v-flex xs9 sm6 lg8 class="ml-2"> |
| 147 | <v-select | 147 | <v-select |
| 148 | v-model="getReport.classId" | 148 | v-model="getReport.classId" |
| 149 | label="Select your class" | 149 | label="Select your class" |
| 150 | type="text" | 150 | type="text" |
| 151 | :items="addclass" | 151 | :items="addclass" |
| 152 | item-text="classNum" | 152 | item-text="classNum" |
| 153 | item-value="_id" | 153 | item-value="_id" |
| 154 | :rules="classRules" | 154 | :rules="classRules" |
| 155 | @change="getSection(getReport.classId)" | 155 | @change="getSection(getReport.classId)" |
| 156 | required | 156 | required |
| 157 | ></v-select> | 157 | ></v-select> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs6 sm6 lg3 md8> | 161 | <v-flex xs6 sm6 lg3 md8> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 163 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 164 | <label class="right">Section:</label> | 164 | <label class="right">Section:</label> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs9 sm6 lg8 class="ml-2"> | 166 | <v-flex xs9 sm6 lg8 class="ml-2"> |
| 167 | <v-select | 167 | <v-select |
| 168 | :items="addSection" | 168 | :items="addSection" |
| 169 | label="Select your Section" | 169 | label="Select your Section" |
| 170 | v-model="getReport.sectionId" | 170 | v-model="getReport.sectionId" |
| 171 | item-text="name" | 171 | item-text="name" |
| 172 | item-value="_id" | 172 | item-value="_id" |
| 173 | name="Select Section" | 173 | name="Select Section" |
| 174 | :rules="sectionRules" | 174 | :rules="sectionRules" |
| 175 | required | 175 | required |
| 176 | ></v-select> | 176 | ></v-select> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex xs6 sm6 lg3 md4> | 180 | <v-flex xs6 sm6 lg3 md4> |
| 181 | <v-menu | 181 | <v-menu |
| 182 | ref="menu" | 182 | ref="menu" |
| 183 | :close-on-content-click="false" | 183 | :close-on-content-click="false" |
| 184 | v-model="menu" | 184 | v-model="menu" |
| 185 | :nudge-right="40" | 185 | :nudge-right="40" |
| 186 | lazy | 186 | lazy |
| 187 | transition="scale-transition" | 187 | transition="scale-transition" |
| 188 | offset-y | 188 | offset-y |
| 189 | full-width | 189 | full-width |
| 190 | min-width="290px" | 190 | min-width="290px" |
| 191 | > | 191 | > |
| 192 | <v-text-field | 192 | <v-text-field |
| 193 | slot="activator" | 193 | slot="activator" |
| 194 | v-model="date" | 194 | v-model="date" |
| 195 | label="Select Date" | 195 | label="Select Date" |
| 196 | append-icon="event" | 196 | append-icon="event" |
| 197 | :rules="dataValid" | 197 | :rules="dataValid" |
| 198 | readonly | 198 | readonly |
| 199 | ></v-text-field> | 199 | ></v-text-field> |
| 200 | <v-date-picker | 200 | <v-date-picker |
| 201 | ref="picker" | 201 | ref="picker" |
| 202 | v-model="date" | 202 | v-model="date" |
| 203 | :max="new Date().toISOString().substr(0, 10)" | 203 | :max="new Date().toISOString().substr(0, 10)" |
| 204 | min="1950-01-01" | 204 | min="1950-01-01" |
| 205 | @change="save" | 205 | @change="save" |
| 206 | ></v-date-picker> | 206 | ></v-date-picker> |
| 207 | </v-menu> | 207 | </v-menu> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-flex xs6 sm6 lg9 md8> | 209 | <v-flex xs6 sm6 lg9 md8> |
| 210 | <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn> | 210 | <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-form> | 214 | </v-form> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | <v-flex xs12 v-show="attendeceTable" class> | 216 | <v-flex xs12 v-show="attendeceTable" class> |
| 217 | <v-data-table | 217 | <v-data-table |
| 218 | :headers="headers" | 218 | :headers="headers" |
| 219 | :items="studentsData" | 219 | :items="studentsData" |
| 220 | :pagination.sync="pagination" | 220 | :pagination.sync="pagination" |
| 221 | :search="search" | 221 | :search="search" |
| 222 | > | 222 | > |
| 223 | <template slot="items" slot-scope="props"> | 223 | <template slot="items" slot-scope="props"> |
| 224 | <tr class="tr"> | 224 | <tr class="tr"> |
| 225 | <td class="td td-row">{{ props.index + 1}}</td> | 225 | <td class="td td-row">{{ props.index + 1}}</td> |
| 226 | <td class="text-xs-center td td-row"> | 226 | <td class="text-xs-center td td-row"> |
| 227 | <v-avatar size="40"> | 227 | <v-avatar size="40"> |
| 228 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 228 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 229 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 229 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 230 | </v-avatar> | 230 | </v-avatar> |
| 231 | </td> | 231 | </td> |
| 232 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 232 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 233 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> | 233 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> |
| 234 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 234 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 235 | <td class="text-xs-center td td-row"> | 235 | <td class="text-xs-center td td-row"> |
| 236 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 236 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 237 | <v-radio | 237 | <v-radio |
| 238 | v-for="attendences in attendenceType" | 238 | v-for="attendences in attendenceType" |
| 239 | :key="attendences.value" | 239 | :key="attendences.value" |
| 240 | :label="`${attendences.label}`" | 240 | :label="`${attendences.label}`" |
| 241 | :value="attendences.value" | 241 | :value="attendences.value" |
| 242 | ></v-radio> | 242 | ></v-radio> |
| 243 | </v-radio-group> | 243 | </v-radio-group> |
| 244 | </td> | 244 | </td> |
| 245 | </tr> | 245 | </tr> |
| 246 | </template> | 246 | </template> |
| 247 | </v-data-table> | 247 | </v-data-table> |
| 248 | <v-flex xs12> | 248 | <v-flex xs12> |
| 249 | <v-card-actions> | 249 | <v-card-actions> |
| 250 | <v-spacer></v-spacer> | 250 | <v-spacer></v-spacer> |
| 251 | <v-btn @click="update()" class="add-button" round dark>Submit</v-btn> | 251 | <v-btn @click="update()" class="add-button" round dark>Submit</v-btn> |
| 252 | </v-card-actions> | 252 | </v-card-actions> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-card> | 255 | </v-card> |
| 256 | </v-dialog> | 256 | </v-dialog> |
| 257 | <v-snackbar | 257 | <v-snackbar |
| 258 | :timeout="timeout" | 258 | :timeout="timeout" |
| 259 | :top="y === 'top'" | 259 | :top="y === 'top'" |
| 260 | :right="x === 'right'" | 260 | :right="x === 'right'" |
| 261 | :vertical="mode === 'vertical'" | 261 | :vertical="mode === 'vertical'" |
| 262 | v-model="snackbar" | 262 | v-model="snackbar" |
| 263 | color="success" | 263 | color="success" |
| 264 | >{{ text }}</v-snackbar> | 264 | >{{ text }}</v-snackbar> |
| 265 | <div class="loader" v-if="showLoader"> | 265 | <div class="loader" v-if="showLoader"> |
| 266 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 266 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 267 | </div> | 267 | </div> |
| 268 | </v-container> | 268 | </v-container> |
| 269 | </template> | 269 | </template> |
| 270 | 270 | ||
| 271 | <script> | 271 | <script> |
| 272 | import http from "@/Services/http.js"; | 272 | import http from "@/Services/http.js"; |
| 273 | import moment from "moment"; | 273 | import moment from "moment"; |
| 274 | 274 | ||
| 275 | export default { | 275 | export default { |
| 276 | data: () => ({ | 276 | data: () => ({ |
| 277 | snackbar: false, | 277 | snackbar: false, |
| 278 | y: "top", | 278 | y: "top", |
| 279 | x: "right", | 279 | x: "right", |
| 280 | mode: "", | 280 | mode: "", |
| 281 | timeout: 3000, | 281 | timeout: 3000, |
| 282 | text: "", | 282 | text: "", |
| 283 | show: true, | 283 | show: true, |
| 284 | showSearch: false, | 284 | showSearch: false, |
| 285 | showLoader: false, | 285 | showLoader: false, |
| 286 | loading: false, | 286 | loading: false, |
| 287 | date: null, | 287 | date: null, |
| 288 | search: "", | 288 | search: "", |
| 289 | addclass: [], | 289 | addclass: [], |
| 290 | pagination: { | 290 | pagination: { |
| 291 | rowsPerPage: 10, | 291 | rowsPerPage: 10, |
| 292 | }, | 292 | }, |
| 293 | imageData: {}, | 293 | imageData: {}, |
| 294 | imageName: "", | 294 | imageName: "", |
| 295 | imageUrl: "", | 295 | imageUrl: "", |
| 296 | imageFile: "", | 296 | imageFile: "", |
| 297 | headers: [ | 297 | headers: [ |
| 298 | { | 298 | { |
| 299 | text: "No", | 299 | text: "No", |
| 300 | align: "", | 300 | align: "", |
| 301 | sortable: false, | 301 | sortable: false, |
| 302 | value: "index", | 302 | value: "index", |
| 303 | }, | 303 | }, |
| 304 | { | 304 | { |
| 305 | text: "Profile Pic", | 305 | text: "Profile Pic", |
| 306 | value: "profilprofilePicUrlePicUrl", | 306 | value: "profilprofilePicUrlePicUrl", |
| 307 | sortable: false, | 307 | sortable: false, |
| 308 | align: "center", | 308 | align: "center", |
| 309 | }, | 309 | }, |
| 310 | { text: "Name", value: "name", sortable: false, align: "center" }, | 310 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 311 | { | 311 | { |
| 312 | text: "Mobile No", | 312 | text: "Mobile No", |
| 313 | value: "fatherCellNo", | 313 | value: "fatherCellNo", |
| 314 | sortable: false, | 314 | sortable: false, |
| 315 | align: "center", | 315 | align: "center", |
| 316 | }, | 316 | }, |
| 317 | { text: "Email", value: "email", sortable: false, align: "center" }, | 317 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 318 | { text: "Attendance", value: "", sortable: false, align: "center" }, | 318 | { text: "Attendance", value: "", sortable: false, align: "center" }, |
| 319 | ], | 319 | ], |
| 320 | // json_data: [], | 320 | // json_data: [], |
| 321 | parentId: "", | 321 | parentId: "", |
| 322 | token: "", | 322 | token: "", |
| 323 | selectStudents: { | 323 | selectStudents: { |
| 324 | select: "", | 324 | select: "", |
| 325 | selectSection: "", | 325 | selectSection: "", |
| 326 | }, | 326 | }, |
| 327 | 327 | ||
| 328 | role: "", | 328 | role: "", |
| 329 | schoolRole: "", | 329 | schoolRole: "", |
| 330 | addStudentAttendenceDialog: false, | 330 | addStudentAttendenceDialog: false, |
| 331 | attendeceTable: false, | 331 | attendeceTable: false, |
| 332 | menu: false, | 332 | menu: false, |
| 333 | valid: true, | 333 | valid: true, |
| 334 | 334 | ||
| 335 | getReport: {}, | 335 | getReport: {}, |
| 336 | getAttendence: {}, | 336 | getAttendence: {}, |
| 337 | studentsList: [], | 337 | studentsList: [], |
| 338 | studentsData: [], | 338 | studentsData: [], |
| 339 | addSection: [], | 339 | addSection: [], |
| 340 | 340 | ||
| 341 | SectionName: ["A", "B", "C", "D", "E", "F"], | 341 | SectionName: ["A", "B", "C", "D", "E", "F"], |
| 342 | classRules: [(v) => !!v || "Class is required"], | 342 | classRules: [(v) => !!v || "Class is required"], |
| 343 | sectionRules: [(v) => !!v || "Class is required"], | 343 | sectionRules: [(v) => !!v || "Class is required"], |
| 344 | studentRules: [(v) => !!v || "Student is required"], | 344 | studentRules: [(v) => !!v || "Student is required"], |
| 345 | dataValid: [(v) => !!v || "Date is required"], | 345 | dataValid: [(v) => !!v || "Date is required"], |
| 346 | 346 | ||
| 347 | attendenceType: [ | 347 | attendenceType: [ |
| 348 | { | 348 | { |
| 349 | label: "Present", | 349 | label: "Present", |
| 350 | value: true, | 350 | value: true, |
| 351 | }, | 351 | }, |
| 352 | { | 352 | { |
| 353 | label: "Absent", | 353 | label: "Absent", |
| 354 | value: false, | 354 | value: false, |
| 355 | }, | 355 | }, |
| 356 | ], | 356 | ], |
| 357 | }), | 357 | }), |
| 358 | watch: { | 358 | watch: { |
| 359 | addStudentAttendenceDialog: function (val) { | 359 | addStudentAttendenceDialog: function (val) { |
| 360 | if (!val) { | 360 | if (!val) { |
| 361 | this.getReport = []; | 361 | this.getReport = []; |
| 362 | // this.studentsData = []; | 362 | // this.studentsData = []; |
| 363 | } | 363 | } |
| 364 | }, | 364 | }, |
| 365 | }, | 365 | }, |
| 366 | methods: { | 366 | methods: { |
| 367 | save(date) { | 367 | save(date) { |
| 368 | this.$refs.menu.save(date); | 368 | this.$refs.menu.save(date); |
| 369 | }, | 369 | }, |
| 370 | showTable() { | 370 | showTable() { |
| 371 | this.attendeceTable = true; | 371 | this.attendeceTable = true; |
| 372 | this.getStudents(); | 372 | this.getStudents(); |
| 373 | }, | 373 | }, |
| 374 | getAllClass() { | 374 | getAllClass() { |
| 375 | http() | 375 | http() |
| 376 | .get("/getClassesList", { | 376 | .get("/getClassesList", { |
| 377 | headers: { Authorization: "Bearer " + this.token }, | 377 | headers: { Authorization: "Bearer " + this.token }, |
| 378 | }) | 378 | }) |
| 379 | .then((response) => { | 379 | .then((response) => { |
| 380 | this.addclass = response.data.data; | 380 | this.addclass = response.data.data; |
| 381 | }) | 381 | }) |
| 382 | .catch((error) => { | 382 | .catch((error) => { |
| 383 | // console.log("err====>", err); | 383 | // console.log("err====>", err); |
| 384 | // this.$router.replace({ path: "/" }); | 384 | // this.$router.replace({ path: "/" }); |
| 385 | }); | 385 | }); |
| 386 | }, | 386 | }, |
| 387 | getSection(_id) { | 387 | getSection(_id) { |
| 388 | this.showLoader = true; | 388 | this.showLoader = true; |
| 389 | http() | 389 | http() |
| 390 | .get( | 390 | .get( |
| 391 | "/getSectionsList", | 391 | "/getSectionsList", |
| 392 | { params: { classId: _id } }, | 392 | { params: { classId: _id } }, |
| 393 | { | 393 | { |
| 394 | headers: { Authorization: "Bearer " + this.token }, | 394 | headers: { Authorization: "Bearer " + this.token }, |
| 395 | } | 395 | } |
| 396 | ) | 396 | ) |
| 397 | .then((response) => { | 397 | .then((response) => { |
| 398 | this.addSection = response.data.data; | 398 | this.addSection = response.data.data; |
| 399 | this.showLoader = false; | 399 | this.showLoader = false; |
| 400 | }) | 400 | }) |
| 401 | .catch((err) => { | 401 | .catch((err) => { |
| 402 | this.showLoader = false; | 402 | this.showLoader = false; |
| 403 | // console.log("err====>", err); | 403 | // console.log("err====>", err); |
| 404 | }); | 404 | }); |
| 405 | }, | 405 | }, |
| 406 | getStudents(_id) { | 406 | getStudents(_id) { |
| 407 | this.showLoader = true; | 407 | this.showLoader = true; |
| 408 | http() | 408 | http() |
| 409 | .get("/getStudentWithClass", { | 409 | .get("/getStudentWithClass", { |
| 410 | params: { | 410 | params: { |
| 411 | classId: this.getReport.classId, | 411 | classId: this.getReport.classId, |
| 412 | sectionId: this.getReport.sectionId, | 412 | sectionId: this.getReport.sectionId, |
| 413 | }, | 413 | }, |
| 414 | }) | 414 | }) |
| 415 | .then((response) => { | 415 | .then((response) => { |
| 416 | this.studentsData = response.data.data; | 416 | this.studentsData = response.data.data; |
| 417 | this.showLoader = false; | 417 | this.showLoader = false; |
| 418 | // this.addStudentAttendenceDialog = false; | 418 | // this.addStudentAttendenceDialog = false; |
| 419 | var attendence = ""; | 419 | var attendence = ""; |
| 420 | for (let i = 0; i < this.studentsData.length; i++) { | 420 | for (let i = 0; i < this.studentsData.length; i++) { |
| 421 | this.studentsData[i].attendence = true; | 421 | this.studentsData[i].attendence = true; |
| 422 | } | 422 | } |
| 423 | }) | 423 | }) |
| 424 | .catch((error) => { | 424 | .catch((error) => { |
| 425 | console.log("err====>", error); | 425 | console.log("err====>", error); |
| 426 | this.showLoader = false; | 426 | this.showLoader = false; |
| 427 | }); | 427 | }); |
| 428 | }, | 428 | }, |
| 429 | getStudentsDetail(_id) { | 429 | getStudentsDetail(_id) { |
| 430 | this.showLoader = true; | 430 | this.showLoader = true; |
| 431 | http() | 431 | http() |
| 432 | .get("/getStudentWithClass", { | 432 | .get("/getStudentWithClass", { |
| 433 | params: { | 433 | params: { |
| 434 | classId: this.getAttendence.classId, | 434 | classId: this.getAttendence.classId, |
| 435 | sectionId: this.getAttendence.sectionId, | 435 | sectionId: this.getAttendence.sectionId, |
| 436 | }, | 436 | }, |
| 437 | }) | 437 | }) |
| 438 | .then((response) => { | 438 | .then((response) => { |
| 439 | this.studentsData = response.data.data; | 439 | this.studentsData = response.data.data; |
| 440 | this.showLoader = false; | 440 | this.showLoader = false; |
| 441 | // this.addStudentAttendenceDialog = false; | 441 | // this.addStudentAttendenceDialog = false; |
| 442 | var attendence = ""; | 442 | var attendence = ""; |
| 443 | for (let i = 0; i < this.studentsData.length; i++) { | 443 | for (let i = 0; i < this.studentsData.length; i++) { |
| 444 | this.studentsData[i].attendence = true; | 444 | this.studentsData[i].attendence = true; |
| 445 | } | 445 | } |
| 446 | }) | 446 | }) |
| 447 | .catch((error) => { | 447 | .catch((error) => { |
| 448 | console.log("err====>", error); | 448 | console.log("err====>", error); |
| 449 | this.showLoader = false; | 449 | this.showLoader = false; |
| 450 | }); | 450 | }); |
| 451 | }, | 451 | }, |
| 452 | update() { | 452 | update() { |
| 453 | var studentsAttendence = []; | 453 | var studentsAttendence = []; |
| 454 | for (var j = 0; j < this.studentsData.length; j++) { | 454 | for (var j = 0; j < this.studentsData.length; j++) { |
| 455 | studentsAttendence.push({ | 455 | studentsAttendence.push({ |
| 456 | studentId: this.studentsData[j]._id, | 456 | studentId: this.studentsData[j]._id, |
| 457 | isPresent: this.studentsData[j].attendence, | 457 | isPresent: this.studentsData[j].attendence, |
| 458 | }); | 458 | }); |
| 459 | } | 459 | } |
| 460 | if (this.$refs.form.validate()) { | 460 | if (this.$refs.form.validate()) { |
| 461 | let attendanceData = { | 461 | let attendanceData = { |
| 462 | sectionId: this.getReport.sectionId, | 462 | sectionId: this.getReport.sectionId, |
| 463 | date: this.date, | 463 | date: this.date, |
| 464 | students: studentsAttendence, | 464 | students: studentsAttendence, |
| 465 | }; | 465 | }; |
| 466 | http() | 466 | http() |
| 467 | .put("/updateAttendance", attendanceData) | 467 | .put("/updateAttendance", attendanceData) |
| 468 | .then((response) => { | 468 | .then((response) => { |
| 469 | this.snackbar = true; | 469 | this.snackbar = true; |
| 470 | this.text = response.data.message; | 470 | this.text = response.data.message; |
| 471 | this.addStudentAttendenceDialog = false; | 471 | this.addStudentAttendenceDialog = false; |
| 472 | }) | 472 | }) |
| 473 | .catch((error) => { | 473 | .catch((error) => { |
| 474 | this.snackbar = true; | 474 | this.snackbar = true; |
| 475 | this.text = error.response.data.message; | 475 | this.text = error.response.data.message; |
| 476 | }); | 476 | }); |
| 477 | } | 477 | } |
| 478 | }, | 478 | }, |
| 479 | 479 | ||
| 480 | displaySearch() { | 480 | displaySearch() { |
| 481 | this.show = false; | 481 | this.show = false; |
| 482 | this.showSearch = true; | 482 | this.showSearch = true; |
| 483 | }, | 483 | }, |
| 484 | closeSearch() { | 484 | closeSearch() { |
| 485 | this.showSearch = false; | 485 | this.showSearch = false; |
| 486 | this.show = true; | 486 | this.show = true; |
| 487 | this.search = ""; | 487 | this.search = ""; |
| 488 | }, | 488 | }, |
| 489 | }, | 489 | }, |
| 490 | mounted() { | 490 | mounted() { |
| 491 | // this.getStudentList(); | 491 | // this.getStudentList(); |
| 492 | this.token = this.$store.state.token; | 492 | this.token = this.$store.state.token; |
| 493 | this.getAllClass(); | 493 | this.getAllClass(); |
| 494 | this.role = this.$store.state.role; | 494 | this.role = this.$store.state.role; |
| 495 | }, | 495 | }, |
| 496 | }; | 496 | }; |
| 497 | </script> | 497 | </script> |
src/pages/Attendence/teacherAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> | 3 | <!-- ****** ATTENDENCE TACHERS TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addTeacherAttendenceDialog = true" | 10 | @click="addTeacherAttendenceDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | v-if="role != 'TEACHER' " | 15 | v-if="role != 'TEACHER' " |
| 16 | round | 16 | round |
| 17 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 17 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 18 | dark | 18 | dark |
| 19 | @click="addTeacherAttendenceDialog = true" | 19 | @click="addTeacherAttendenceDialog = true" |
| 20 | > | 20 | > |
| 21 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence | 21 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence |
| 22 | </v-btn> | 22 | </v-btn> |
| 23 | <v-spacer></v-spacer> | 23 | <v-spacer></v-spacer> |
| 24 | <v-card-title class="body-1" v-show="show"> | 24 | <v-card-title class="body-1" v-show="show"> |
| 25 | <v-btn icon large flat @click="displaySearch"> | 25 | <v-btn icon large flat @click="displaySearch"> |
| 26 | <v-avatar size="27"> | 26 | <v-avatar size="27"> |
| 27 | <img src="/static/icon/search.png" alt="icon" /> | 27 | <img src="/static/icon/search.png" alt="icon" /> |
| 28 | </v-avatar> | 28 | </v-avatar> |
| 29 | </v-btn> | 29 | </v-btn> |
| 30 | </v-card-title> | 30 | </v-card-title> |
| 31 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 31 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 32 | <v-layout> | 32 | <v-layout> |
| 33 | <v-text-field | 33 | <v-text-field |
| 34 | autofocus | 34 | autofocus |
| 35 | v-model="search" | 35 | v-model="search" |
| 36 | label="Search" | 36 | label="Search" |
| 37 | prepend-inner-icon="search" | 37 | prepend-inner-icon="search" |
| 38 | color="primary" | 38 | color="primary" |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | <v-icon @click="closeSearch" color="error">close</v-icon> | 40 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-toolbar> | 43 | </v-toolbar> |
| 44 | <v-data-table | 44 | <v-data-table |
| 45 | :headers="headers" | 45 | :headers="headers" |
| 46 | :items="teachersData" | 46 | :items="teachersData" |
| 47 | :pagination.sync="pagination" | 47 | :pagination.sync="pagination" |
| 48 | :search="search" | 48 | :search="search" |
| 49 | > | 49 | > |
| 50 | <template slot="items" slot-scope="props"> | 50 | <template slot="items" slot-scope="props"> |
| 51 | <tr class="tr"> | 51 | <tr class="tr"> |
| 52 | <td class="td td-row">{{ props.index + 1}}</td> | 52 | <td class="td td-row">{{ props.index + 1}}</td> |
| 53 | <td class="text-xs-center td td-row"> | 53 | <td class="text-xs-center td td-row"> |
| 54 | <v-avatar size="40"> | 54 | <v-avatar size="40"> |
| 55 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 55 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 56 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 56 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 57 | </v-avatar> | 57 | </v-avatar> |
| 58 | </td> | 58 | </td> |
| 59 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 59 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 60 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 60 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 61 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 61 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 62 | <td class="text-xs-center td td-row"> | 62 | <td class="text-xs-center td td-row"> |
| 63 | <router-link | 63 | <router-link |
| 64 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" | 64 | :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }" |
| 65 | > | 65 | > |
| 66 | <span> | 66 | <span> |
| 67 | <v-tooltip top> | 67 | <v-tooltip top> |
| 68 | <img | 68 | <img |
| 69 | slot="activator" | 69 | slot="activator" |
| 70 | style="cursor:pointer; width:25px; height:25px; " | 70 | style="cursor:pointer; width:25px; height:25px; " |
| 71 | src="/static/icon/view.png" | 71 | src="/static/icon/view.png" |
| 72 | /> | 72 | /> |
| 73 | <span>View</span> | 73 | <span>View</span> |
| 74 | </v-tooltip> | 74 | </v-tooltip> |
| 75 | </span> | 75 | </span> |
| 76 | </router-link> | 76 | </router-link> |
| 77 | </td> | 77 | </td> |
| 78 | </tr> | 78 | </tr> |
| 79 | </template> | 79 | </template> |
| 80 | <v-alert | 80 | <v-alert |
| 81 | slot="no-results" | 81 | slot="no-results" |
| 82 | :value="true" | 82 | :value="true" |
| 83 | color="error" | 83 | color="error" |
| 84 | icon="warning" | 84 | icon="warning" |
| 85 | >Your search for "{{ search }}" found no results.</v-alert> | 85 | >Your search for "{{ search }}" found no results.</v-alert> |
| 86 | </v-data-table> | 86 | </v-data-table> |
| 87 | <!-- ****** Add Teachers Attendece****** --> | 87 | <!-- ****** Add Teachers Attendece****** --> |
| 88 | <v-dialog v-model="addTeacherAttendenceDialog" width="1600" v-if="addTeacherAttendenceDialog"> | 88 | <v-dialog v-model="addTeacherAttendenceDialog" width="1600" v-if="addTeacherAttendenceDialog" persistent> |
| 89 | <v-card flat class="pa-2"> | 89 | <v-card flat class="pa-2"> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs12> | 91 | <v-flex xs12> |
| 92 | <label class="title text-xs-center">Add Teacher Attendence</label> | 92 | <label class="title text-xs-center">Add Teacher Attendence</label> |
| 93 | <v-icon | 93 | <v-icon |
| 94 | size="24" | 94 | size="24" |
| 95 | class="right" | 95 | class="right" |
| 96 | @click="$refs.form.reset();addTeacherAttendenceDialog = false" | 96 | @click="$refs.form.reset();addTeacherAttendenceDialog = false" |
| 97 | >cancel</v-icon> | 97 | >cancel</v-icon> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | <v-flex xs12 class="mt-4"> | 100 | <v-flex xs12 class="mt-4"> |
| 101 | <v-form ref="form" v-model="valid" lazy-validation> | 101 | <v-form ref="form" v-model="valid" lazy-validation> |
| 102 | <v-layout wrap> | 102 | <v-layout wrap> |
| 103 | <v-flex xs12 class="px-4"> | 103 | <v-flex xs12 class="px-4"> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs6 sm6 lg3 md4> | 105 | <v-flex xs6 sm6 lg3 md4> |
| 106 | <v-menu | 106 | <v-menu |
| 107 | ref="menu" | 107 | ref="menu" |
| 108 | :close-on-content-click="false" | 108 | :close-on-content-click="false" |
| 109 | v-model="menu" | 109 | v-model="menu" |
| 110 | :nudge-right="40" | 110 | :nudge-right="40" |
| 111 | lazy | 111 | lazy |
| 112 | transition="scale-transition" | 112 | transition="scale-transition" |
| 113 | offset-y | 113 | offset-y |
| 114 | full-width | 114 | full-width |
| 115 | min-width="290px" | 115 | min-width="290px" |
| 116 | > | 116 | > |
| 117 | <v-text-field | 117 | <v-text-field |
| 118 | slot="activator" | 118 | slot="activator" |
| 119 | v-model="date" | 119 | v-model="date" |
| 120 | label="Select Date" | 120 | label="Select Date" |
| 121 | append-icon="event" | 121 | append-icon="event" |
| 122 | :rules="dataValid" | 122 | :rules="dataValid" |
| 123 | readonly | 123 | readonly |
| 124 | ></v-text-field> | 124 | ></v-text-field> |
| 125 | <v-date-picker | 125 | <v-date-picker |
| 126 | ref="picker" | 126 | ref="picker" |
| 127 | v-model="date" | 127 | v-model="date" |
| 128 | :max="new Date().toISOString().substr(0, 10)" | 128 | :max="new Date().toISOString().substr(0, 10)" |
| 129 | min="1950-01-01" | 129 | min="1950-01-01" |
| 130 | @change="save" | 130 | @change="save" |
| 131 | ></v-date-picker> | 131 | ></v-date-picker> |
| 132 | </v-menu> | 132 | </v-menu> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | <v-flex xs6 sm6 lg9 md8> | 134 | <v-flex xs6 sm6 lg9 md8> |
| 135 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> | 135 | <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-form> | 140 | </v-form> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | <v-flex xs12 v-show="attendeceTable" class> | 142 | <v-flex xs12 v-show="attendeceTable" class> |
| 143 | <v-data-table | 143 | <v-data-table |
| 144 | :headers="headers" | 144 | :headers="headers" |
| 145 | :items="teachersData" | 145 | :items="teachersData" |
| 146 | :pagination.sync="pagination" | 146 | :pagination.sync="pagination" |
| 147 | :search="search" | 147 | :search="search" |
| 148 | > | 148 | > |
| 149 | <template slot="items" slot-scope="props"> | 149 | <template slot="items" slot-scope="props"> |
| 150 | <tr class="tr"> | 150 | <tr class="tr"> |
| 151 | <td class="td td-row">{{ props.index + 1}}</td> | 151 | <td class="td td-row">{{ props.index + 1}}</td> |
| 152 | <td class="text-xs-center td td-row"> | 152 | <td class="text-xs-center td td-row"> |
| 153 | <v-avatar size="40"> | 153 | <v-avatar size="40"> |
| 154 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 154 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 155 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 155 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 156 | </v-avatar> | 156 | </v-avatar> |
| 157 | </td> | 157 | </td> |
| 158 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 158 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 159 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 159 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 160 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> | 160 | <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td> |
| 161 | <td class="text-xs-center td td-row"> | 161 | <td class="text-xs-center td td-row"> |
| 162 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 162 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 163 | <v-radio | 163 | <v-radio |
| 164 | v-for="attendences in attendenceType" | 164 | v-for="attendences in attendenceType" |
| 165 | :key="attendences.value" | 165 | :key="attendences.value" |
| 166 | :label="`${attendences.label}`" | 166 | :label="`${attendences.label}`" |
| 167 | :value="attendences.value" | 167 | :value="attendences.value" |
| 168 | ></v-radio> | 168 | ></v-radio> |
| 169 | </v-radio-group> | 169 | </v-radio-group> |
| 170 | </td> | 170 | </td> |
| 171 | </tr> | 171 | </tr> |
| 172 | </template> | 172 | </template> |
| 173 | </v-data-table> | 173 | </v-data-table> |
| 174 | <v-flex xs12> | 174 | <v-flex xs12> |
| 175 | <v-card-actions> | 175 | <v-card-actions> |
| 176 | <v-spacer></v-spacer> | 176 | <v-spacer></v-spacer> |
| 177 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> | 177 | <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn> |
| 178 | </v-card-actions> | 178 | </v-card-actions> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | </v-card> | 181 | </v-card> |
| 182 | </v-dialog> | 182 | </v-dialog> |
| 183 | <v-snackbar | 183 | <v-snackbar |
| 184 | :timeout="timeout" | 184 | :timeout="timeout" |
| 185 | :top="y === 'top'" | 185 | :top="y === 'top'" |
| 186 | :right="x === 'right'" | 186 | :right="x === 'right'" |
| 187 | :vertical="mode === 'vertical'" | 187 | :vertical="mode === 'vertical'" |
| 188 | v-model="snackbar" | 188 | v-model="snackbar" |
| 189 | color="success" | 189 | color="success" |
| 190 | >{{ text }}</v-snackbar> | 190 | >{{ text }}</v-snackbar> |
| 191 | <div class="loader" v-if="showLoader"> | 191 | <div class="loader" v-if="showLoader"> |
| 192 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 192 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 193 | </div> | 193 | </div> |
| 194 | </v-container> | 194 | </v-container> |
| 195 | </template> | 195 | </template> |
| 196 | 196 | ||
| 197 | <script> | 197 | <script> |
| 198 | import http from "@/Services/http.js"; | 198 | import http from "@/Services/http.js"; |
| 199 | import moment from "moment"; | 199 | import moment from "moment"; |
| 200 | 200 | ||
| 201 | export default { | 201 | export default { |
| 202 | data: () => ({ | 202 | data: () => ({ |
| 203 | snackbar: false, | 203 | snackbar: false, |
| 204 | y: "top", | 204 | y: "top", |
| 205 | x: "right", | 205 | x: "right", |
| 206 | role: "", | 206 | role: "", |
| 207 | mode: "", | 207 | mode: "", |
| 208 | timeout: 5000, | 208 | timeout: 5000, |
| 209 | text: "", | 209 | text: "", |
| 210 | date: null, | 210 | date: null, |
| 211 | menu: false, | 211 | menu: false, |
| 212 | show: true, | 212 | show: true, |
| 213 | showSearch: false, | 213 | showSearch: false, |
| 214 | addTeacherAttendenceDialog: false, | 214 | addTeacherAttendenceDialog: false, |
| 215 | attendeceTable: false, | 215 | attendeceTable: false, |
| 216 | showLoader: false, | 216 | showLoader: false, |
| 217 | loading: false, | 217 | loading: false, |
| 218 | search: "", | 218 | search: "", |
| 219 | valid: true, | 219 | valid: true, |
| 220 | isActive: true, | 220 | isActive: true, |
| 221 | newActive: false, | 221 | newActive: false, |
| 222 | dataValid: [(v) => !!v || "Date is required"], | 222 | dataValid: [(v) => !!v || "Date is required"], |
| 223 | attendenceType: [ | 223 | attendenceType: [ |
| 224 | { | 224 | { |
| 225 | label: "Present", | 225 | label: "Present", |
| 226 | value: "present", | 226 | value: "present", |
| 227 | }, | 227 | }, |
| 228 | { | 228 | { |
| 229 | label: "Late Present With Excuset", | 229 | label: "Late Present With Excuset", |
| 230 | value: "latePresentWithExcuse", | 230 | value: "latePresentWithExcuse", |
| 231 | }, | 231 | }, |
| 232 | { | 232 | { |
| 233 | label: "Late Present", | 233 | label: "Late Present", |
| 234 | value: "latePresent", | 234 | value: "latePresent", |
| 235 | }, | 235 | }, |
| 236 | { | 236 | { |
| 237 | label: "Absent", | 237 | label: "Absent", |
| 238 | value: "absent", | 238 | value: "absent", |
| 239 | }, | 239 | }, |
| 240 | ], | 240 | ], |
| 241 | pagination: { | 241 | pagination: { |
| 242 | rowsPerPage: 8, | 242 | rowsPerPage: 8, |
| 243 | }, | 243 | }, |
| 244 | headers: [ | 244 | headers: [ |
| 245 | { | 245 | { |
| 246 | text: "No", | 246 | text: "No", |
| 247 | align: "", | 247 | align: "", |
| 248 | sortable: false, | 248 | sortable: false, |
| 249 | value: "No", | 249 | value: "No", |
| 250 | }, | 250 | }, |
| 251 | { | 251 | { |
| 252 | text: "Profile Pic", | 252 | text: "Profile Pic", |
| 253 | value: "profilePicUrl", | 253 | value: "profilePicUrl", |
| 254 | sortable: false, | 254 | sortable: false, |
| 255 | align: "center", | 255 | align: "center", |
| 256 | }, | 256 | }, |
| 257 | { text: "Name", value: "name", sortable: false, align: "center" }, | 257 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 258 | { text: "Email", value: "email", sortable: false, align: "center" }, | 258 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 259 | { | 259 | { |
| 260 | text: "Mobile No", | 260 | text: "Mobile No", |
| 261 | value: "mobileNo", | 261 | value: "mobileNo", |
| 262 | sortable: false, | 262 | sortable: false, |
| 263 | align: "center", | 263 | align: "center", |
| 264 | }, | 264 | }, |
| 265 | { text: "Attendance", value: "", sortable: false, align: "center" }, | 265 | { text: "Attendance", value: "", sortable: false, align: "center" }, |
| 266 | ], | 266 | ], |
| 267 | desserts: [], | 267 | desserts: [], |
| 268 | teachersData: [], | 268 | teachersData: [], |
| 269 | addTeachers: {}, | 269 | addTeachers: {}, |
| 270 | }), | 270 | }), |
| 271 | watch: { | 271 | watch: { |
| 272 | menu(val) { | 272 | menu(val) { |
| 273 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); | 273 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY")); |
| 274 | }, | 274 | }, |
| 275 | addTeacherAttendenceDialog: function (val) { | 275 | addTeacherAttendenceDialog: function (val) { |
| 276 | if (!val) { | 276 | if (!val) { |
| 277 | // this.teachersData = []; | 277 | // this.teachersData = []; |
| 278 | this.date = null; | 278 | this.date = null; |
| 279 | this.menu = false; | 279 | this.menu = false; |
| 280 | } | 280 | } |
| 281 | }, | 281 | }, |
| 282 | }, | 282 | }, |
| 283 | methods: { | 283 | methods: { |
| 284 | save(date) { | 284 | save(date) { |
| 285 | this.$refs.menu.save(date); | 285 | this.$refs.menu.save(date); |
| 286 | }, | 286 | }, |
| 287 | showTable() { | 287 | showTable() { |
| 288 | this.attendeceTable = true; | 288 | this.attendeceTable = true; |
| 289 | this.getTeacherList(); | 289 | this.getTeacherList(); |
| 290 | }, | 290 | }, |
| 291 | getTeacherList() { | 291 | getTeacherList() { |
| 292 | this.showLoader = true; | 292 | this.showLoader = true; |
| 293 | var token = this.$store.state.token; | 293 | var token = this.$store.state.token; |
| 294 | http() | 294 | http() |
| 295 | .get("/getTeachersList", { | 295 | .get("/getTeachersList", { |
| 296 | headers: { Authorization: "Bearer " + token }, | 296 | headers: { Authorization: "Bearer " + token }, |
| 297 | }) | 297 | }) |
| 298 | .then((response) => { | 298 | .then((response) => { |
| 299 | this.teachersData = response.data.data; | 299 | this.teachersData = response.data.data; |
| 300 | // this.desserts = response.data.data; | 300 | // this.desserts = response.data.data; |
| 301 | var attendence = ""; | 301 | var attendence = ""; |
| 302 | for (let i = 0; i < this.teachersData.length; i++) { | 302 | for (let i = 0; i < this.teachersData.length; i++) { |
| 303 | this.teachersData[i].attendence = "present"; | 303 | this.teachersData[i].attendence = "present"; |
| 304 | } | 304 | } |
| 305 | this.showLoader = false; | 305 | this.showLoader = false; |
| 306 | // console.log("getTeacherList=====>",this.desserts) | 306 | // console.log("getTeacherList=====>",this.desserts) |
| 307 | // console.log("getTeacherList=====>",this.teachersData) | 307 | // console.log("getTeacherList=====>",this.teachersData) |
| 308 | }) | 308 | }) |
| 309 | .catch((error) => { | 309 | .catch((error) => { |
| 310 | this.showLoader = false; | 310 | this.showLoader = false; |
| 311 | if (error.response.status === 401) { | 311 | if (error.response.status === 401) { |
| 312 | this.$router.replace({ path: "/" }); | 312 | this.$router.replace({ path: "/" }); |
| 313 | this.$store.dispatch("setToken", null); | 313 | this.$store.dispatch("setToken", null); |
| 314 | this.$store.dispatch("Id", null); | 314 | this.$store.dispatch("Id", null); |
| 315 | } | 315 | } |
| 316 | }); | 316 | }); |
| 317 | }, | 317 | }, |
| 318 | submit() { | 318 | submit() { |
| 319 | var teachersAttendence = []; | 319 | var teachersAttendence = []; |
| 320 | for (var j = 0; j < this.teachersData.length; j++) { | 320 | for (var j = 0; j < this.teachersData.length; j++) { |
| 321 | teachersAttendence.push({ | 321 | teachersAttendence.push({ |
| 322 | teacherId: this.teachersData[j]._id, | 322 | teacherId: this.teachersData[j]._id, |
| 323 | attendanceType: this.teachersData[j].attendence, | 323 | attendanceType: this.teachersData[j].attendence, |
| 324 | }); | 324 | }); |
| 325 | } | 325 | } |
| 326 | if (this.$refs.form.validate()) { | 326 | if (this.$refs.form.validate()) { |
| 327 | let attendanceData = { | 327 | let attendanceData = { |
| 328 | date: this.date, | 328 | date: this.date, |
| 329 | teachers: teachersAttendence, | 329 | teachers: teachersAttendence, |
| 330 | }; | 330 | }; |
| 331 | http() | 331 | http() |
| 332 | .post("/createTeacherAttendance", attendanceData) | 332 | .post("/createTeacherAttendance", attendanceData) |
| 333 | .then((response) => { | 333 | .then((response) => { |
| 334 | this.snackbar = true; | 334 | this.snackbar = true; |
| 335 | this.text = response.data.message; | 335 | this.text = response.data.message; |
| 336 | this.addTeacherAttendenceDialog = false; | 336 | this.addTeacherAttendenceDialog = false; |
| 337 | this.clear(); | 337 | this.clear(); |
| 338 | }) | 338 | }) |
| 339 | .catch((error) => { | 339 | .catch((error) => { |
| 340 | this.snackbar = true; | 340 | this.snackbar = true; |
| 341 | this.text = error.response.data.message; | 341 | this.text = error.response.data.message; |
| 342 | }); | 342 | }); |
| 343 | } | 343 | } |
| 344 | }, | 344 | }, |
| 345 | clear() { | 345 | clear() { |
| 346 | this.$refs.form.reset(); | 346 | this.$refs.form.reset(); |
| 347 | this.imageUrl = ""; | 347 | this.imageUrl = ""; |
| 348 | }, | 348 | }, |
| 349 | 349 | ||
| 350 | displaySearch() { | 350 | displaySearch() { |
| 351 | (this.show = false), (this.showSearch = true); | 351 | (this.show = false), (this.showSearch = true); |
| 352 | }, | 352 | }, |
| 353 | closeSearch() { | 353 | closeSearch() { |
| 354 | this.showSearch = false; | 354 | this.showSearch = false; |
| 355 | this.show = true; | 355 | this.show = true; |
| 356 | this.search = ""; | 356 | this.search = ""; |
| 357 | }, | 357 | }, |
| 358 | }, | 358 | }, |
| 359 | mounted() { | 359 | mounted() { |
| 360 | this.getTeacherList(); | 360 | this.getTeacherList(); |
| 361 | this.role = this.$store.state.role; | 361 | this.role = this.$store.state.role; |
| 362 | }, | 362 | }, |
| 363 | }; | 363 | }; |
| 364 | </script> | 364 | </script> |
src/pages/Attendence/viewStudentsAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid grid-list-md class="body-color"> | 2 | <v-container fluid grid-list-md class="body-color"> |
| 3 | <div v-show="hideData"> | 3 | <div v-show="hideData"> |
| 4 | <v-layout row> | 4 | <v-layout row> |
| 5 | <v-btn @click="exportPdf" round class="right open-dialog-button" dark> | 5 | <v-btn @click="exportPdf" round class="right open-dialog-button" dark> |
| 6 | Export Pdf | 6 | Export Pdf |
| 7 | <v-icon dark right size="20">save_alt</v-icon> | 7 | <v-icon dark right size="20">save_alt</v-icon> |
| 8 | </v-btn> | 8 | </v-btn> |
| 9 | <v-dialog v-model="dialogExport" max-width="500px"> | 9 | <v-dialog v-model="dialogExport" max-width="500px" persistent> |
| 10 | <v-btn round slot="activator" class="right open-dialog-button" dark> | 10 | <v-btn round slot="activator" class="right open-dialog-button" dark> |
| 11 | Export csv | 11 | Export csv |
| 12 | <v-icon dark right size="20">save_alt</v-icon> | 12 | <v-icon dark right size="20">save_alt</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-card flat class="card-style pa-2" dark> | 14 | <v-card flat class="card-style pa-2" dark> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12> | 16 | <v-flex xs12> |
| 17 | <label class="title text-xs-center">Export</label> | 17 | <label class="title text-xs-center">Export</label> |
| 18 | <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon> | 18 | <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | </v-layout> | 20 | </v-layout> |
| 21 | <v-card-text> | 21 | <v-card-text> |
| 22 | <v-container grid-list-md> | 22 | <v-container grid-list-md> |
| 23 | <v-layout wrap> | 23 | <v-layout wrap> |
| 24 | <v-flex xs12> | 24 | <v-flex xs12> |
| 25 | <v-menu | 25 | <v-menu |
| 26 | ref="menuStartDate" | 26 | ref="menuStartDate" |
| 27 | :close-on-content-click="false" | 27 | :close-on-content-click="false" |
| 28 | v-model="menuStartDate" | 28 | v-model="menuStartDate" |
| 29 | :nudge-right="40" | 29 | :nudge-right="40" |
| 30 | :return-value.sync="startDate" | 30 | :return-value.sync="startDate" |
| 31 | lazy | 31 | lazy |
| 32 | transition="scale-transition" | 32 | transition="scale-transition" |
| 33 | offset-y | 33 | offset-y |
| 34 | full-width | 34 | full-width |
| 35 | min-width="290px" | 35 | min-width="290px" |
| 36 | > | 36 | > |
| 37 | <v-text-field | 37 | <v-text-field |
| 38 | slot="activator" | 38 | slot="activator" |
| 39 | v-model="startDate" | 39 | v-model="startDate" |
| 40 | label="Select Start Date" | 40 | label="Select Start Date" |
| 41 | prepend-icon="event" | 41 | prepend-icon="event" |
| 42 | readonly | 42 | readonly |
| 43 | ></v-text-field> | 43 | ></v-text-field> |
| 44 | <v-date-picker | 44 | <v-date-picker |
| 45 | v-model="startDate" | 45 | v-model="startDate" |
| 46 | @input="$refs.menuStartDate.save(startDate)" | 46 | @input="$refs.menuStartDate.save(startDate)" |
| 47 | ></v-date-picker> | 47 | ></v-date-picker> |
| 48 | </v-menu> | 48 | </v-menu> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs12> | 50 | <v-flex xs12> |
| 51 | <v-menu | 51 | <v-menu |
| 52 | ref="menuEndDate" | 52 | ref="menuEndDate" |
| 53 | :close-on-content-click="false" | 53 | :close-on-content-click="false" |
| 54 | v-model="menuEndDate" | 54 | v-model="menuEndDate" |
| 55 | :nudge-right="40" | 55 | :nudge-right="40" |
| 56 | :return-value.sync="endDate" | 56 | :return-value.sync="endDate" |
| 57 | lazy | 57 | lazy |
| 58 | transition="scale-transition" | 58 | transition="scale-transition" |
| 59 | offset-y | 59 | offset-y |
| 60 | full-width | 60 | full-width |
| 61 | min-width="290px" | 61 | min-width="290px" |
| 62 | > | 62 | > |
| 63 | <v-text-field | 63 | <v-text-field |
| 64 | slot="activator" | 64 | slot="activator" |
| 65 | v-model="endDate" | 65 | v-model="endDate" |
| 66 | label="Select End Date" | 66 | label="Select End Date" |
| 67 | prepend-icon="event" | 67 | prepend-icon="event" |
| 68 | readonly | 68 | readonly |
| 69 | ></v-text-field> | 69 | ></v-text-field> |
| 70 | <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> | 70 | <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> |
| 71 | </v-menu> | 71 | </v-menu> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs12> | 73 | <v-flex xs12> |
| 74 | <v-card-actions> | 74 | <v-card-actions> |
| 75 | <v-spacer></v-spacer> | 75 | <v-spacer></v-spacer> |
| 76 | 76 | ||
| 77 | <v-btn class="add-button" round @click="exportData">Export</v-btn> | 77 | <v-btn class="add-button" round @click="exportData">Export</v-btn> |
| 78 | </v-card-actions> | 78 | </v-card-actions> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | </v-container> | 81 | </v-container> |
| 82 | </v-card-text> | 82 | </v-card-text> |
| 83 | </v-card> | 83 | </v-card> |
| 84 | </v-dialog> | 84 | </v-dialog> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | <v-layout wrap> | 86 | <v-layout wrap> |
| 87 | <v-flex xs12 sm12 md4> | 87 | <v-flex xs12 sm12 md4> |
| 88 | <v-card flat> | 88 | <v-card flat> |
| 89 | <!-- <v-layout> | 89 | <!-- <v-layout> |
| 90 | <v-flex xs12> | 90 | <v-flex xs12> |
| 91 | <label class="title card-style text-xs-center">Profile</label> | 91 | <label class="title card-style text-xs-center">Profile</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-layout>--> | 93 | </v-layout>--> |
| 94 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> | 94 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> |
| 95 | <v-card-text> | 95 | <v-card-text> |
| 96 | <v-container> | 96 | <v-container> |
| 97 | <v-layout wrap> | 97 | <v-layout wrap> |
| 98 | <v-flex xs12> | 98 | <v-flex xs12> |
| 99 | <v-layout> | 99 | <v-layout> |
| 100 | <v-flex | 100 | <v-flex |
| 101 | xs12 | 101 | xs12 |
| 102 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 102 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 103 | > | 103 | > |
| 104 | <v-avatar size="80px"> | 104 | <v-avatar size="80px"> |
| 105 | <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> | 105 | <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> |
| 106 | <img | 106 | <img |
| 107 | :src="studentData.profilePicUrl" | 107 | :src="studentData.profilePicUrl" |
| 108 | v-else-if="studentData.profilePicUrl" | 108 | v-else-if="studentData.profilePicUrl" |
| 109 | /> | 109 | /> |
| 110 | </v-avatar> | 110 | </v-avatar> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs12 sm12> | 114 | <v-flex xs12 sm12> |
| 115 | <h3 class="text-xs-center"> | 115 | <h3 class="text-xs-center"> |
| 116 | <b>{{ studentData.name }}</b> | 116 | <b>{{ studentData.name }}</b> |
| 117 | </h3> | 117 | </h3> |
| 118 | <p class="text-xs-center grey--text">Student</p> | 118 | <p class="text-xs-center grey--text">Student</p> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | <v-layout style="border: 1px solid lightgrey;"> | 121 | <v-layout style="border: 1px solid lightgrey;"> |
| 122 | <v-flex xs6 sm6 class="pa-0"> | 122 | <v-flex xs6 sm6 class="pa-0"> |
| 123 | <h4 class="right"> | 123 | <h4 class="right"> |
| 124 | <b>Roll No :</b> | 124 | <b>Roll No :</b> |
| 125 | </h4> | 125 | </h4> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | <v-flex sm6 xs6 class="pa-0"> | 127 | <v-flex sm6 xs6 class="pa-0"> |
| 128 | <h4>{{ studentData.rollNo }}</h4> | 128 | <h4>{{ studentData.rollNo }}</h4> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | </v-layout> | 130 | </v-layout> |
| 131 | <v-layout style="border: 1px solid lightgrey;"> | 131 | <v-layout style="border: 1px solid lightgrey;"> |
| 132 | <v-flex xs6 sm6 class="pa-0"> | 132 | <v-flex xs6 sm6 class="pa-0"> |
| 133 | <h4 class="right"> | 133 | <h4 class="right"> |
| 134 | <b>Class :</b> | 134 | <b>Class :</b> |
| 135 | </h4> | 135 | </h4> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | <v-flex sm6 xs6 class="right pa-0"> | 137 | <v-flex sm6 xs6 class="right pa-0"> |
| 138 | <h4>{{ studentData.classId.classNum }}</h4> | 138 | <h4>{{ studentData.classId.classNum }}</h4> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | <v-layout style="border: 1px solid lightgrey;"> | 141 | <v-layout style="border: 1px solid lightgrey;"> |
| 142 | <v-flex xs6 sm6 class="right pa-0"> | 142 | <v-flex xs6 sm6 class="right pa-0"> |
| 143 | <h4 class="right"> | 143 | <h4 class="right"> |
| 144 | <b>Section :</b> | 144 | <b>Section :</b> |
| 145 | </h4> | 145 | </h4> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | <v-flex sm6 xs6 class="right pa-0"> | 147 | <v-flex sm6 xs6 class="right pa-0"> |
| 148 | <h4>{{ studentData.sectionId.name}}</h4> | 148 | <h4>{{ studentData.sectionId.name}}</h4> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-layout> | 150 | </v-layout> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-container> | 153 | </v-container> |
| 154 | </v-card-text> | 154 | </v-card-text> |
| 155 | </v-card> | 155 | </v-card> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | <v-flex xs12 sm12 md8> | 157 | <v-flex xs12 sm12 md8> |
| 158 | <v-card flat> | 158 | <v-card flat> |
| 159 | <h3 class="py-2 text-xs-center card-style white--text"> | 159 | <h3 class="py-2 text-xs-center card-style white--text"> |
| 160 | Attendence | 160 | Attendence |
| 161 | <span class="ml-4"> | 161 | <span class="ml-4"> |
| 162 | <v-avatar class="green caption" size="12"></v-avatar> | 162 | <v-avatar class="green caption" size="12"></v-avatar> |
| 163 | <span class="subheading">Present</span> | 163 | <span class="subheading">Present</span> |
| 164 | </span> | 164 | </span> |
| 165 | <span class="ml-4"> | 165 | <span class="ml-4"> |
| 166 | <v-avatar color="red caption" size="12" class></v-avatar> | 166 | <v-avatar color="red caption" size="12" class></v-avatar> |
| 167 | <span class="subheading">Absent</span> | 167 | <span class="subheading">Absent</span> |
| 168 | </span> | 168 | </span> |
| 169 | </h3> | 169 | </h3> |
| 170 | <YearCalendar | 170 | <YearCalendar |
| 171 | v-model="year" | 171 | v-model="year" |
| 172 | :activeDates="activeDates" | 172 | :activeDates="activeDates" |
| 173 | prefixClass="your_customized_wrapper_class" | 173 | prefixClass="your_customized_wrapper_class" |
| 174 | :activeClass="activeClass" | 174 | :activeClass="activeClass" |
| 175 | ></YearCalendar> | 175 | ></YearCalendar> |
| 176 | </v-card> | 176 | </v-card> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </div> | 179 | </div> |
| 180 | <v-layout v-show="showPdfData"> | 180 | <v-layout v-show="showPdfData"> |
| 181 | <v-container> | 181 | <v-container> |
| 182 | <v-flex xs12 sm12 md8 offset-sm2> | 182 | <v-flex xs12 sm12 md8 offset-sm2> |
| 183 | <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> | 183 | <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> |
| 184 | Download | 184 | Download |
| 185 | <v-icon dark right size="20">save_alt</v-icon> | 185 | <v-icon dark right size="20">save_alt</v-icon> |
| 186 | </v-btn> | 186 | </v-btn> |
| 187 | </v-flex> | 187 | </v-flex> |
| 188 | </v-container> | 188 | </v-container> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | <v-layout v-show="showPdfData"> | 190 | <v-layout v-show="showPdfData"> |
| 191 | <v-container> | 191 | <v-container> |
| 192 | <v-layout v-show="showPdfData"> | 192 | <v-layout v-show="showPdfData"> |
| 193 | <v-flex xs12 sm12 md8 offset-sm2> | 193 | <v-flex xs12 sm12 md8 offset-sm2> |
| 194 | <div ref="printMe"> | 194 | <div ref="printMe"> |
| 195 | <v-flex xs12 class="pl-3"> | 195 | <v-flex xs12 class="pl-3"> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 197 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 198 | <h4> | 198 | <h4> |
| 199 | <b>Name</b> | 199 | <b>Name</b> |
| 200 | </h4> | 200 | </h4> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex sm10 xs6 class="pa-0"> | 202 | <v-flex sm10 xs6 class="pa-0"> |
| 203 | <h4>: {{ studentData.name }}</h4> | 203 | <h4>: {{ studentData.name }}</h4> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | <v-layout> | 206 | <v-layout> |
| 207 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 207 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 208 | <h4> | 208 | <h4> |
| 209 | <b>Type</b> | 209 | <b>Type</b> |
| 210 | </h4> | 210 | </h4> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | <v-flex sm10 xs6 class="pa-0 mb-1"> | 212 | <v-flex sm10 xs6 class="pa-0 mb-1"> |
| 213 | <h4>: Student</h4> | 213 | <h4>: Student</h4> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | <v-layout> | 216 | <v-layout> |
| 217 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 217 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 218 | <h4> | 218 | <h4> |
| 219 | <b>Roll No</b> | 219 | <b>Roll No</b> |
| 220 | </h4> | 220 | </h4> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | <v-flex sm10 xs6 class="pa-0 mb-1"> | 222 | <v-flex sm10 xs6 class="pa-0 mb-1"> |
| 223 | <h4>: {{ studentData.rollNo }}</h4> | 223 | <h4>: {{ studentData.rollNo }}</h4> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | </v-layout> | 225 | </v-layout> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 227 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 228 | <h4> | 228 | <h4> |
| 229 | <b>Class</b> | 229 | <b>Class</b> |
| 230 | </h4> | 230 | </h4> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex sm10 xs6 class="pa-0 mb-1"> | 232 | <v-flex sm10 xs6 class="pa-0 mb-1"> |
| 233 | <h4>: {{ studentData.classId.classNum }}</h4> | 233 | <h4>: {{ studentData.classId.classNum }}</h4> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | <v-layout> | 236 | <v-layout> |
| 237 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 237 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 238 | <h4> | 238 | <h4> |
| 239 | <b>Section</b> | 239 | <b>Section</b> |
| 240 | </h4> | 240 | </h4> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | <v-flex sm10 xs6 class="pa-0 mb-3"> | 242 | <v-flex sm10 xs6 class="pa-0 mb-3"> |
| 243 | <h4>: {{ studentData.sectionId.name}}</h4> | 243 | <h4>: {{ studentData.sectionId.name}}</h4> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-card flat> | 247 | <v-card flat> |
| 248 | <h3 class="py-2 text-xs-center grey lighten-1 white--text"> | 248 | <h3 class="py-2 text-xs-center grey lighten-1 white--text"> |
| 249 | Attendence | 249 | Attendence |
| 250 | <span class="ml-4"> | 250 | <span class="ml-4"> |
| 251 | <v-avatar class="green caption" size="12"></v-avatar> | 251 | <v-avatar class="green caption" size="12"></v-avatar> |
| 252 | <span class="subheading">Present</span> | 252 | <span class="subheading">Present</span> |
| 253 | </span> | 253 | </span> |
| 254 | <span class="ml-4"> | 254 | <span class="ml-4"> |
| 255 | <v-avatar color="red caption" size="12" class></v-avatar> | 255 | <v-avatar color="red caption" size="12" class></v-avatar> |
| 256 | <span class="subheading">Absent</span> | 256 | <span class="subheading">Absent</span> |
| 257 | </span> | 257 | </span> |
| 258 | </h3> | 258 | </h3> |
| 259 | <YearCalendar | 259 | <YearCalendar |
| 260 | v-model="year" | 260 | v-model="year" |
| 261 | :activeDates="activeDates" | 261 | :activeDates="activeDates" |
| 262 | prefixClass="your_customized_wrapper_class" | 262 | prefixClass="your_customized_wrapper_class" |
| 263 | :activeClass="activeClass" | 263 | :activeClass="activeClass" |
| 264 | ></YearCalendar> | 264 | ></YearCalendar> |
| 265 | </v-card> | 265 | </v-card> |
| 266 | </div> | 266 | </div> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | </v-container> | 269 | </v-container> |
| 270 | </v-layout> | 270 | </v-layout> |
| 271 | <img :src="output" v-show="false" /> | 271 | <img :src="output" v-show="false" /> |
| 272 | <div class="loader" v-if="showLoader"> | 272 | <div class="loader" v-if="showLoader"> |
| 273 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 273 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 274 | </div> | 274 | </div> |
| 275 | </v-container> | 275 | </v-container> |
| 276 | </template> | 276 | </template> |
| 277 | 277 | ||
| 278 | <script lang="js"> | 278 | <script lang="js"> |
| 279 | import moment from "moment"; | 279 | import moment from "moment"; |
| 280 | import http from "@/Services/http.js"; | 280 | import http from "@/Services/http.js"; |
| 281 | import YearCalendar from "vue-material-year-calendar"; | 281 | import YearCalendar from "vue-material-year-calendar"; |
| 282 | import jsPDF from 'jspdf'; | 282 | import jsPDF from 'jspdf'; |
| 283 | // eslint-disable-next-line | 283 | // eslint-disable-next-line |
| 284 | import autoTable from 'jspdf-autotable'; | 284 | import autoTable from 'jspdf-autotable'; |
| 285 | 285 | ||
| 286 | export default { | 286 | export default { |
| 287 | components: { YearCalendar }, | 287 | components: { YearCalendar }, |
| 288 | data() { | 288 | data() { |
| 289 | return { | 289 | return { |
| 290 | showPdfData:false, | 290 | showPdfData:false, |
| 291 | hideData:true, | 291 | hideData:true, |
| 292 | loadingPdf:false, | 292 | loadingPdf:false, |
| 293 | output:null, | 293 | output:null, |
| 294 | studentsList: [], | 294 | studentsList: [], |
| 295 | json_data: [], | 295 | json_data: [], |
| 296 | dialogExport: false, | 296 | dialogExport: false, |
| 297 | startDate: "", | 297 | startDate: "", |
| 298 | endDate: "", | 298 | endDate: "", |
| 299 | menuEndDate: false, | 299 | menuEndDate: false, |
| 300 | menuStartDate: false, | 300 | menuStartDate: false, |
| 301 | showLoader: false, | 301 | showLoader: false, |
| 302 | token: "", | 302 | token: "", |
| 303 | year: new Date().getFullYear(), | 303 | year: new Date().getFullYear(), |
| 304 | activeDates: [], | 304 | activeDates: [], |
| 305 | activeClass: "", | 305 | activeClass: "", |
| 306 | studentData: { | 306 | studentData: { |
| 307 | classId: { | 307 | classId: { |
| 308 | classNum: "" | 308 | classNum: "" |
| 309 | }, | 309 | }, |
| 310 | sectionId: { | 310 | sectionId: { |
| 311 | name: "" | 311 | name: "" |
| 312 | }, | 312 | }, |
| 313 | }, | 313 | }, |
| 314 | }; | 314 | }; |
| 315 | }, | 315 | }, |
| 316 | mounted() { | 316 | mounted() { |
| 317 | this.token = this.$store.state.token; | 317 | this.token = this.$store.state.token; |
| 318 | this.getStudentAttendence(); | 318 | this.getStudentAttendence(); |
| 319 | this.getStudentData(); | 319 | this.getStudentData(); |
| 320 | }, | 320 | }, |
| 321 | methods: { | 321 | methods: { |
| 322 | dates: function(date) { | 322 | dates: function(date) { |
| 323 | return moment(date).format("MMMM DD, YYYY"); | 323 | return moment(date).format("MMMM DD, YYYY"); |
| 324 | }, | 324 | }, |
| 325 | getStudentAttendence() { | 325 | getStudentAttendence() { |
| 326 | this.showLoader = true; | 326 | this.showLoader = true; |
| 327 | http() | 327 | http() |
| 328 | .get( | 328 | .get( |
| 329 | "/studentAttendance", | 329 | "/studentAttendance", |
| 330 | { params: { studentId: this.$route.params.id } }, | 330 | { params: { studentId: this.$route.params.id } }, |
| 331 | { | 331 | { |
| 332 | headers: { Authorization: "Bearer " + this.token } | 332 | headers: { Authorization: "Bearer " + this.token } |
| 333 | } | 333 | } |
| 334 | ) | 334 | ) |
| 335 | .then(response => { | 335 | .then(response => { |
| 336 | this.showLoader = false; | 336 | this.showLoader = false; |
| 337 | let array = []; | 337 | let array = []; |
| 338 | for (let i = 0; i < response.data.data.length; i++) { | 338 | for (let i = 0; i < response.data.data.length; i++) { |
| 339 | if (response.data.data[i].students[0].isPresent == true) { | 339 | if (response.data.data[i].students[0].isPresent == true) { |
| 340 | array.push({ | 340 | array.push({ |
| 341 | date: response.data.data[i].date, | 341 | date: response.data.data[i].date, |
| 342 | className: "green" | 342 | className: "green" |
| 343 | }); | 343 | }); |
| 344 | } else if (response.data.data[i].students[0].isPresent == false) { | 344 | } else if (response.data.data[i].students[0].isPresent == false) { |
| 345 | array.push({ | 345 | array.push({ |
| 346 | date: response.data.data[i].date, | 346 | date: response.data.data[i].date, |
| 347 | className: "red" | 347 | className: "red" |
| 348 | }); | 348 | }); |
| 349 | } | 349 | } |
| 350 | } | 350 | } |
| 351 | this.activeDates = array; | 351 | this.activeDates = array; |
| 352 | }) | 352 | }) |
| 353 | .catch(error => { | 353 | .catch(error => { |
| 354 | this.showLoader = false; | 354 | this.showLoader = false; |
| 355 | if (error.response.status === 401) { | 355 | if (error.response.status === 401) { |
| 356 | this.$router.replace({ path: "/" }); | 356 | this.$router.replace({ path: "/" }); |
| 357 | this.$store.dispatch("setToken", null); | 357 | this.$store.dispatch("setToken", null); |
| 358 | this.$store.dispatch("Id", null); | 358 | this.$store.dispatch("Id", null); |
| 359 | this.$store.dispatch("Role", null); | 359 | this.$store.dispatch("Role", null); |
| 360 | } | 360 | } |
| 361 | }); | 361 | }); |
| 362 | }, | 362 | }, |
| 363 | getStudentData() { | 363 | getStudentData() { |
| 364 | http() | 364 | http() |
| 365 | .get( | 365 | .get( |
| 366 | "/getParticularStudentDetail", | 366 | "/getParticularStudentDetail", |
| 367 | { params: { studentId: this.$route.params.id } }, | 367 | { params: { studentId: this.$route.params.id } }, |
| 368 | { | 368 | { |
| 369 | headers: { Authorization: "Bearer " + this.token } | 369 | headers: { Authorization: "Bearer " + this.token } |
| 370 | } | 370 | } |
| 371 | ) | 371 | ) |
| 372 | .then(response => { | 372 | .then(response => { |
| 373 | this.studentData = response.data.data; | 373 | this.studentData = response.data.data; |
| 374 | }) | 374 | }) |
| 375 | .catch(err => { | 375 | .catch(err => { |
| 376 | console.log("err====>", err); | 376 | console.log("err====>", err); |
| 377 | // this.$router.replace({ path: '/' }); | 377 | // this.$router.replace({ path: '/' }); |
| 378 | }); | 378 | }); |
| 379 | }, | 379 | }, |
| 380 | convertToCSV(objArray) { | 380 | convertToCSV(objArray) { |
| 381 | var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; | 381 | var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; |
| 382 | var str = ''; | 382 | var str = ''; |
| 383 | 383 | ||
| 384 | for (var i = 0; i < array.length; i++) { | 384 | for (var i = 0; i < array.length; i++) { |
| 385 | var line = ''; | 385 | var line = ''; |
| 386 | for (var index in array[i]) { | 386 | for (var index in array[i]) { |
| 387 | if (line != '') line += ',' | 387 | if (line != '') line += ',' |
| 388 | 388 | ||
| 389 | line += array[i][index]; | 389 | line += array[i][index]; |
| 390 | } | 390 | } |
| 391 | 391 | ||
| 392 | str += line + '\r\n'; | 392 | str += line + '\r\n'; |
| 393 | } | 393 | } |
| 394 | 394 | ||
| 395 | return str; | 395 | return str; |
| 396 | }, | 396 | }, |
| 397 | exportData() { | 397 | exportData() { |
| 398 | http() | 398 | http() |
| 399 | .get( | 399 | .get( |
| 400 | "/studentAttendanceByMonth", | 400 | "/studentAttendanceByMonth", |
| 401 | { | 401 | { |
| 402 | params: { | 402 | params: { |
| 403 | studentId: this.$route.params.id, | 403 | studentId: this.$route.params.id, |
| 404 | startDate: this.startDate, | 404 | startDate: this.startDate, |
| 405 | endDate: this.endDate | 405 | endDate: this.endDate |
| 406 | } | 406 | } |
| 407 | }, | 407 | }, |
| 408 | { | 408 | { |
| 409 | headers: { Authorization: "Bearer " + this.token } | 409 | headers: { Authorization: "Bearer " + this.token } |
| 410 | } | 410 | } |
| 411 | ) | 411 | ) |
| 412 | .then(response => { | 412 | .then(response => { |
| 413 | this.json_data = response.data.data; | 413 | this.json_data = response.data.data; |
| 414 | this.dialogExport = false; | 414 | this.dialogExport = false; |
| 415 | console.log("hh",this.json_data) | 415 | console.log("hh",this.json_data) |
| 416 | var jsonObject = JSON.stringify(this.json_data); | 416 | var jsonObject = JSON.stringify(this.json_data); |
| 417 | 417 | ||
| 418 | var csv = this.convertToCSV(jsonObject); | 418 | var csv = this.convertToCSV(jsonObject); |
| 419 | 419 | ||
| 420 | var exportedFilenmae = "studentAttendance" + '.csv'; | 420 | var exportedFilenmae = "studentAttendance" + '.csv'; |
| 421 | var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); | 421 | var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); |
| 422 | if (navigator.msSaveBlob) { // IE 10+ | 422 | if (navigator.msSaveBlob) { // IE 10+ |
| 423 | navigator.msSaveBlob(blob, exportedFilenmae); | 423 | navigator.msSaveBlob(blob, exportedFilenmae); |
| 424 | } else { | 424 | } else { |
| 425 | var link = document.createElement("a"); | 425 | var link = document.createElement("a"); |
| 426 | if (link.download !== undefined) { // feature detection | 426 | if (link.download !== undefined) { // feature detection |
| 427 | // Browsers that support HTML5 download attribute | 427 | // Browsers that support HTML5 download attribute |
| 428 | var url = URL.createObjectURL(blob); | 428 | var url = URL.createObjectURL(blob); |
| 429 | link.setAttribute("href", url); | 429 | link.setAttribute("href", url); |
| 430 | link.setAttribute("download", exportedFilenmae); | 430 | link.setAttribute("download", exportedFilenmae); |
| 431 | link.style.visibility = 'hidden'; | 431 | link.style.visibility = 'hidden'; |
| 432 | document.body.appendChild(link); | 432 | document.body.appendChild(link); |
| 433 | link.click(); | 433 | link.click(); |
| 434 | document.body.removeChild(link); | 434 | document.body.removeChild(link); |
| 435 | } | 435 | } |
| 436 | } | 436 | } |
| 437 | }) | 437 | }) |
| 438 | .catch(err => { | 438 | .catch(err => { |
| 439 | console.log("err====>", err); | 439 | console.log("err====>", err); |
| 440 | // this.$router.replace({ path: '/' }); | 440 | // this.$router.replace({ path: '/' }); |
| 441 | }); | 441 | }); |
| 442 | }, | 442 | }, |
| 443 | exportPdf(){ | 443 | exportPdf(){ |
| 444 | this.hideData = false; | 444 | this.hideData = false; |
| 445 | this.showPdfData = true | 445 | this.showPdfData = true |
| 446 | }, | 446 | }, |
| 447 | async generatePDF2Canvas(){ | 447 | async generatePDF2Canvas(){ |
| 448 | this.loadingPdf = true | 448 | this.loadingPdf = true |
| 449 | const el = this.$refs.printMe; | 449 | const el = this.$refs.printMe; |
| 450 | // add option type to get the image version | 450 | // add option type to get the image version |
| 451 | // if not provided the promise will return | 451 | // if not provided the promise will return |
| 452 | // the canvas. | 452 | // the canvas. |
| 453 | const options = { | 453 | const options = { |
| 454 | type: 'dataURL' | 454 | type: 'dataURL' |
| 455 | } | 455 | } |
| 456 | this.output = await this.$html2canvas(el, options); | 456 | this.output = await this.$html2canvas(el, options); |
| 457 | if(this.output) { | 457 | if(this.output) { |
| 458 | this.loadingPdf = false | 458 | this.loadingPdf = false |
| 459 | } | 459 | } |
| 460 | let doc = new jsPDF(); | 460 | let doc = new jsPDF(); |
| 461 | doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); | 461 | doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); |
| 462 | doc.save("Attendance.pdf"); | 462 | doc.save("Attendance.pdf"); |
| 463 | } | 463 | } |
| 464 | } | 464 | } |
| 465 | }; | 465 | }; |
| 466 | </script> | 466 | </script> |
| 467 | 467 | ||
| 468 | <style lang="stylus"> | 468 | <style lang="stylus"> |
| 469 | .your_customized_wrapper_class { | 469 | .your_customized_wrapper_class { |
| 470 | background-color: #0aa; | 470 | background-color: #0aa; |
| 471 | color: white; | 471 | color: white; |
| 472 | 472 | ||
| 473 | &.red { | 473 | &.red { |
| 474 | background-color: red; | 474 | background-color: red; |
| 475 | color: white; | 475 | color: white; |
| 476 | 476 | ||
| 477 | &:after { | 477 | &:after { |
| 478 | background-size: 100% 100%; | 478 | background-size: 100% 100%; |
| 479 | } | 479 | } |
| 480 | } | 480 | } |
| 481 | 481 | ||
| 482 | &.blue { | 482 | &.blue { |
| 483 | background-color: #0000aa; | 483 | background-color: #0000aa; |
| 484 | color: white; | 484 | color: white; |
| 485 | } | 485 | } |
| 486 | 486 | ||
| 487 | &.your_customized_classname { | 487 | &.your_customized_classname { |
| 488 | background-color: yellow; | 488 | background-color: yellow; |
| 489 | color: black; | 489 | color: black; |
| 490 | } | 490 | } |
| 491 | } | 491 | } |
| 492 | </style> | 492 | </style> |
| 493 | <style scoped> | 493 | <style scoped> |
| 494 | .add-button { | 494 | .add-button { |
| 495 | background: #feb83c !important; | 495 | background: #feb83c !important; |
| 496 | border-color: #feb83c !important; | 496 | border-color: #feb83c !important; |
| 497 | text-transform: none !important; | 497 | text-transform: none !important; |
| 498 | -webkit-box-shadow: none !important; | 498 | -webkit-box-shadow: none !important; |
| 499 | box-shadow: none !important; | 499 | box-shadow: none !important; |
| 500 | } | 500 | } |
| 501 | .card-style { | 501 | .card-style { |
| 502 | background: #7f62f8 !important; | 502 | background: #7f62f8 !important; |
| 503 | border-color: #7f62f8 !important; | 503 | border-color: #7f62f8 !important; |
| 504 | border-radius: 12px; | 504 | border-radius: 12px; |
| 505 | } | 505 | } |
| 506 | .open-dialog-button { | 506 | .open-dialog-button { |
| 507 | background: #827bfa !important; | 507 | background: #827bfa !important; |
| 508 | border-color: #827bfa !important; | 508 | border-color: #827bfa !important; |
| 509 | text-transform: none !important; | 509 | text-transform: none !important; |
| 510 | } | 510 | } |
| 511 | </style> | 511 | </style> |
src/pages/Attendence/viewTeacherAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid grid-list-md> | 2 | <v-container fluid grid-list-md> |
| 3 | <div v-show="hideData"> | 3 | <div v-show="hideData"> |
| 4 | <v-layout row> | 4 | <v-layout row> |
| 5 | <v-btn @click="exportPdf" round class="right open-dialog-button" dark> | 5 | <v-btn @click="exportPdf" round class="right open-dialog-button" dark> |
| 6 | Export Pdf | 6 | Export Pdf |
| 7 | <v-icon dark right size="20">save_alt</v-icon> | 7 | <v-icon dark right size="20">save_alt</v-icon> |
| 8 | </v-btn> | 8 | </v-btn> |
| 9 | <v-dialog v-model="dialogExport" max-width="500px"> | 9 | <v-dialog v-model="dialogExport" max-width="500px" persistent> |
| 10 | <v-btn round slot="activator" class="right open-dialog-button" dark> | 10 | <v-btn round slot="activator" class="right open-dialog-button" dark> |
| 11 | Export csv | 11 | Export csv |
| 12 | <v-icon dark right size="20">save_alt</v-icon> | 12 | <v-icon dark right size="20">save_alt</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-card flat class="card-style pa-2" dark> | 14 | <v-card flat class="card-style pa-2" dark> |
| 15 | <h3 class="title text-xs-center">Export</h3> | 15 | <h3 class="title text-xs-center">Export</h3> |
| 16 | <v-card-text> | 16 | <v-card-text> |
| 17 | <v-container grid-list-md> | 17 | <v-container grid-list-md> |
| 18 | <v-layout wrap> | 18 | <v-layout wrap> |
| 19 | <v-flex xs12> | 19 | <v-flex xs12> |
| 20 | <v-menu | 20 | <v-menu |
| 21 | ref="menuStartDate" | 21 | ref="menuStartDate" |
| 22 | :close-on-content-click="false" | 22 | :close-on-content-click="false" |
| 23 | v-model="menuStartDate" | 23 | v-model="menuStartDate" |
| 24 | :nudge-right="40" | 24 | :nudge-right="40" |
| 25 | :return-value.sync="startDate" | 25 | :return-value.sync="startDate" |
| 26 | lazy | 26 | lazy |
| 27 | transition="scale-transition" | 27 | transition="scale-transition" |
| 28 | offset-y | 28 | offset-y |
| 29 | full-width | 29 | full-width |
| 30 | min-width="290px" | 30 | min-width="290px" |
| 31 | > | 31 | > |
| 32 | <v-text-field | 32 | <v-text-field |
| 33 | slot="activator" | 33 | slot="activator" |
| 34 | v-model="startDate" | 34 | v-model="startDate" |
| 35 | label="Select Start Date" | 35 | label="Select Start Date" |
| 36 | prepend-icon="event" | 36 | prepend-icon="event" |
| 37 | readonly | 37 | readonly |
| 38 | ></v-text-field> | 38 | ></v-text-field> |
| 39 | <v-date-picker | 39 | <v-date-picker |
| 40 | v-model="startDate" | 40 | v-model="startDate" |
| 41 | @input="$refs.menuStartDate.save(startDate)" | 41 | @input="$refs.menuStartDate.save(startDate)" |
| 42 | ></v-date-picker> | 42 | ></v-date-picker> |
| 43 | </v-menu> | 43 | </v-menu> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12> | 45 | <v-flex xs12> |
| 46 | <v-menu | 46 | <v-menu |
| 47 | ref="menuEndDate" | 47 | ref="menuEndDate" |
| 48 | :close-on-content-click="false" | 48 | :close-on-content-click="false" |
| 49 | v-model="menuEndDate" | 49 | v-model="menuEndDate" |
| 50 | :nudge-right="40" | 50 | :nudge-right="40" |
| 51 | :return-value.sync="endDate" | 51 | :return-value.sync="endDate" |
| 52 | lazy | 52 | lazy |
| 53 | transition="scale-transition" | 53 | transition="scale-transition" |
| 54 | offset-y | 54 | offset-y |
| 55 | full-width | 55 | full-width |
| 56 | min-width="290px" | 56 | min-width="290px" |
| 57 | > | 57 | > |
| 58 | <v-text-field | 58 | <v-text-field |
| 59 | slot="activator" | 59 | slot="activator" |
| 60 | v-model="endDate" | 60 | v-model="endDate" |
| 61 | label="Select End Date" | 61 | label="Select End Date" |
| 62 | prepend-icon="event" | 62 | prepend-icon="event" |
| 63 | readonly | 63 | readonly |
| 64 | ></v-text-field> | 64 | ></v-text-field> |
| 65 | <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> | 65 | <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> |
| 66 | </v-menu> | 66 | </v-menu> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-container> | 69 | </v-container> |
| 70 | </v-card-text> | 70 | </v-card-text> |
| 71 | <v-card-actions> | 71 | <v-card-actions> |
| 72 | <v-spacer></v-spacer> | 72 | <v-spacer></v-spacer> |
| 73 | <v-btn flat @click.native="dialogExport = false">Close</v-btn> | 73 | <v-btn flat @click.native="dialogExport = false">Close</v-btn> |
| 74 | 74 | ||
| 75 | <v-btn flat @click.native="exportData">Export</v-btn> | 75 | <v-btn flat @click.native="exportData">Export</v-btn> |
| 76 | </v-card-actions> | 76 | </v-card-actions> |
| 77 | </v-card> | 77 | </v-card> |
| 78 | </v-dialog> | 78 | </v-dialog> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | <v-layout wrap> | 80 | <v-layout wrap> |
| 81 | <v-flex xs12 sm12 md4> | 81 | <v-flex xs12 sm12 md4> |
| 82 | <v-card flat> | 82 | <v-card flat> |
| 83 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> | 83 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> |
| 84 | <v-card-text> | 84 | <v-card-text> |
| 85 | <v-container> | 85 | <v-container> |
| 86 | <v-layout wrap> | 86 | <v-layout wrap> |
| 87 | <v-flex xs12> | 87 | <v-flex xs12> |
| 88 | <v-layout> | 88 | <v-layout> |
| 89 | <v-flex | 89 | <v-flex |
| 90 | xs12 | 90 | xs12 |
| 91 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 91 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 92 | > | 92 | > |
| 93 | <v-avatar size="80px"> | 93 | <v-avatar size="80px"> |
| 94 | <img src="/static/icon/user.png" v-if="!teacherData.profilePicUrl" /> | 94 | <img src="/static/icon/user.png" v-if="!teacherData.profilePicUrl" /> |
| 95 | <img | 95 | <img |
| 96 | :src="teacherData.profilePicUrl" | 96 | :src="teacherData.profilePicUrl" |
| 97 | v-else-if="teacherData.profilePicUrl" | 97 | v-else-if="teacherData.profilePicUrl" |
| 98 | /> | 98 | /> |
| 99 | </v-avatar> | 99 | </v-avatar> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | </v-layout> | 101 | </v-layout> |
| 102 | <v-layout> | 102 | <v-layout> |
| 103 | <v-flex xs12 sm12> | 103 | <v-flex xs12 sm12> |
| 104 | <h3 class="text-xs-center"> | 104 | <h3 class="text-xs-center"> |
| 105 | <b>{{ teacherData.name }}</b> | 105 | <b>{{ teacherData.name }}</b> |
| 106 | </h3> | 106 | </h3> |
| 107 | <p class="text-xs-center grey--text">Teacher</p> | 107 | <p class="text-xs-center grey--text">Teacher</p> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | </v-layout> | 109 | </v-layout> |
| 110 | <!-- <v-layout style="border: 1px solid lightgrey;"> | 110 | <!-- <v-layout style="border: 1px solid lightgrey;"> |
| 111 | <v-flex xs6 sm6 class="pa-0"> | 111 | <v-flex xs6 sm6 class="pa-0"> |
| 112 | <h4 class="right"> | 112 | <h4 class="right"> |
| 113 | <b>Gender :</b> | 113 | <b>Gender :</b> |
| 114 | </h4> | 114 | </h4> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex sm6 xs6 class="pa-0"> | 116 | <v-flex sm6 xs6 class="pa-0"> |
| 117 | <h4>{{ teacherData.teacherData.gender }}</h4> | 117 | <h4>{{ teacherData.teacherData.gender }}</h4> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout>--> | 119 | </v-layout>--> |
| 120 | <v-layout style="border: 1px solid lightgrey;"> | 120 | <v-layout style="border: 1px solid lightgrey;"> |
| 121 | <v-flex xs6 sm6 class="pa-0"> | 121 | <v-flex xs6 sm6 class="pa-0"> |
| 122 | <h4 class="right"> | 122 | <h4 class="right"> |
| 123 | <b>D.O.B:</b> | 123 | <b>D.O.B:</b> |
| 124 | </h4> | 124 | </h4> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | <v-flex sm6 xs6 class="right pa-0"> | 126 | <v-flex sm6 xs6 class="right pa-0"> |
| 127 | <h4>{{ dates(teacherData.dob) }}</h4> | 127 | <h4>{{ dates(teacherData.dob) }}</h4> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | <v-layout style="border: 1px solid lightgrey;"> | 130 | <v-layout style="border: 1px solid lightgrey;"> |
| 131 | <v-flex xs6 sm6 class="right pa-0"> | 131 | <v-flex xs6 sm6 class="right pa-0"> |
| 132 | <h4 class="right"> | 132 | <h4 class="right"> |
| 133 | <b>Phone :</b> | 133 | <b>Phone :</b> |
| 134 | </h4> | 134 | </h4> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex sm6 xs6 class="right pa-0"> | 136 | <v-flex sm6 xs6 class="right pa-0"> |
| 137 | <h4>{{ teacherData.mobileNo}}</h4> | 137 | <h4>{{ teacherData.mobileNo}}</h4> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-layout> | 141 | </v-layout> |
| 142 | </v-container> | 142 | </v-container> |
| 143 | </v-card-text> | 143 | </v-card-text> |
| 144 | </v-card> | 144 | </v-card> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | <v-flex xs12 sm12 md8> | 146 | <v-flex xs12 sm12 md8> |
| 147 | <v-card flat> | 147 | <v-card flat> |
| 148 | <h3 class="py-2 text-xs-center card-style white--text"> | 148 | <h3 class="py-2 text-xs-center card-style white--text"> |
| 149 | Attendence | 149 | Attendence |
| 150 | <span class="ml-4"> | 150 | <span class="ml-4"> |
| 151 | <v-avatar class="green caption" size="12"></v-avatar> | 151 | <v-avatar class="green caption" size="12"></v-avatar> |
| 152 | <span class="subheading">Present</span> | 152 | <span class="subheading">Present</span> |
| 153 | </span> | 153 | </span> |
| 154 | <span class="ml-4"> | 154 | <span class="ml-4"> |
| 155 | <v-avatar color="red caption" size="12" class></v-avatar> | 155 | <v-avatar color="red caption" size="12" class></v-avatar> |
| 156 | <span class="subheading">Absent</span> | 156 | <span class="subheading">Absent</span> |
| 157 | </span> | 157 | </span> |
| 158 | </h3> | 158 | </h3> |
| 159 | <YearCalendar | 159 | <YearCalendar |
| 160 | v-model="year" | 160 | v-model="year" |
| 161 | :activeDates="activeDates" | 161 | :activeDates="activeDates" |
| 162 | prefixClass="your_customized_wrapper_class" | 162 | prefixClass="your_customized_wrapper_class" |
| 163 | :activeClass="activeClass" | 163 | :activeClass="activeClass" |
| 164 | ></YearCalendar> | 164 | ></YearCalendar> |
| 165 | </v-card> | 165 | </v-card> |
| 166 | </v-flex> | 166 | </v-flex> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | </div> | 168 | </div> |
| 169 | <v-layout v-show="showPdfData"> | 169 | <v-layout v-show="showPdfData"> |
| 170 | <v-container> | 170 | <v-container> |
| 171 | <v-flex xs12 sm12 md8 offset-sm2> | 171 | <v-flex xs12 sm12 md8 offset-sm2> |
| 172 | <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> | 172 | <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> |
| 173 | Download | 173 | Download |
| 174 | <v-icon dark right size="20">save_alt</v-icon> | 174 | <v-icon dark right size="20">save_alt</v-icon> |
| 175 | </v-btn> | 175 | </v-btn> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-container> | 177 | </v-container> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | <v-layout v-show="showPdfData"> | 179 | <v-layout v-show="showPdfData"> |
| 180 | <v-container> | 180 | <v-container> |
| 181 | <v-layout v-show="showPdfData"> | 181 | <v-layout v-show="showPdfData"> |
| 182 | <v-flex xs12 sm12 md8 offset-sm2> | 182 | <v-flex xs12 sm12 md8 offset-sm2> |
| 183 | <div ref="printMe"> | 183 | <div ref="printMe"> |
| 184 | <v-flex xs12 class="pl-3"> | 184 | <v-flex xs12 class="pl-3"> |
| 185 | <v-layout> | 185 | <v-layout> |
| 186 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 186 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 187 | <h4> | 187 | <h4> |
| 188 | <b>Name</b> | 188 | <b>Name</b> |
| 189 | </h4> | 189 | </h4> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | <v-flex sm10 xs6 class="pa-0"> | 191 | <v-flex sm10 xs6 class="pa-0"> |
| 192 | <h4>: {{ teacherData.name }}</h4> | 192 | <h4>: {{ teacherData.name }}</h4> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | </v-layout> | 194 | </v-layout> |
| 195 | <v-layout> | 195 | <v-layout> |
| 196 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 196 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 197 | <h4> | 197 | <h4> |
| 198 | <b>Email</b> | 198 | <b>Email</b> |
| 199 | </h4> | 199 | </h4> |
| 200 | </v-flex> | 200 | </v-flex> |
| 201 | <v-flex sm10 xs6 class="pa-0 mb-1"> | 201 | <v-flex sm10 xs6 class="pa-0 mb-1"> |
| 202 | <h4>: {{ teacherData.email }}</h4> | 202 | <h4>: {{ teacherData.email }}</h4> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-layout> | 204 | </v-layout> |
| 205 | <v-layout> | 205 | <v-layout> |
| 206 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 206 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 207 | <h4> | 207 | <h4> |
| 208 | <b>City</b> | 208 | <b>City</b> |
| 209 | </h4> | 209 | </h4> |
| 210 | </v-flex> | 210 | </v-flex> |
| 211 | <v-flex sm10 xs6 class="pa-0 mb-3"> | 211 | <v-flex sm10 xs6 class="pa-0 mb-3"> |
| 212 | <h4>: {{ teacherData.city}}</h4> | 212 | <h4>: {{ teacherData.city}}</h4> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | <v-layout> | 215 | <v-layout> |
| 216 | <v-flex xs6 sm2 class="pa-0 mb-1"> | 216 | <v-flex xs6 sm2 class="pa-0 mb-1"> |
| 217 | <h4> | 217 | <h4> |
| 218 | <b>Mobile No</b> | 218 | <b>Mobile No</b> |
| 219 | </h4> | 219 | </h4> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex sm10 xs6 class="pa-0 mb-3"> | 221 | <v-flex sm10 xs6 class="pa-0 mb-3"> |
| 222 | <h4>: {{ teacherData.mobileNo}}</h4> | 222 | <h4>: {{ teacherData.mobileNo}}</h4> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | </v-layout> | 224 | </v-layout> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | <v-card flat> | 226 | <v-card flat> |
| 227 | <h3 class="py-2 text-xs-center grey lighten-1 white--text"> | 227 | <h3 class="py-2 text-xs-center grey lighten-1 white--text"> |
| 228 | Attendence | 228 | Attendence |
| 229 | <span class="ml-4"> | 229 | <span class="ml-4"> |
| 230 | <v-avatar class="green caption" size="12"></v-avatar> | 230 | <v-avatar class="green caption" size="12"></v-avatar> |
| 231 | <span class="subheading">Present</span> | 231 | <span class="subheading">Present</span> |
| 232 | </span> | 232 | </span> |
| 233 | <span class="ml-4"> | 233 | <span class="ml-4"> |
| 234 | <v-avatar color="red caption" size="12" class></v-avatar> | 234 | <v-avatar color="red caption" size="12" class></v-avatar> |
| 235 | <span class="subheading">Absent</span> | 235 | <span class="subheading">Absent</span> |
| 236 | </span> | 236 | </span> |
| 237 | </h3> | 237 | </h3> |
| 238 | <YearCalendar | 238 | <YearCalendar |
| 239 | v-model="year" | 239 | v-model="year" |
| 240 | :activeDates="activeDates" | 240 | :activeDates="activeDates" |
| 241 | prefixClass="your_customized_wrapper_class" | 241 | prefixClass="your_customized_wrapper_class" |
| 242 | :activeClass="activeClass" | 242 | :activeClass="activeClass" |
| 243 | ></YearCalendar> | 243 | ></YearCalendar> |
| 244 | </v-card> | 244 | </v-card> |
| 245 | </div> | 245 | </div> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | </v-layout> | 247 | </v-layout> |
| 248 | </v-container> | 248 | </v-container> |
| 249 | </v-layout> | 249 | </v-layout> |
| 250 | <!-- <img :src="output" v-show="false"/> --> | 250 | <!-- <img :src="output" v-show="false"/> --> |
| 251 | <div class="loader" v-if="showLoader"> | 251 | <div class="loader" v-if="showLoader"> |
| 252 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 252 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 253 | </div> | 253 | </div> |
| 254 | </v-container> | 254 | </v-container> |
| 255 | </template> | 255 | </template> |
| 256 | 256 | ||
| 257 | <script lang="js"> | 257 | <script lang="js"> |
| 258 | import moment from "moment"; | 258 | import moment from "moment"; |
| 259 | import http from "@/Services/http.js"; | 259 | import http from "@/Services/http.js"; |
| 260 | import YearCalendar from "vue-material-year-calendar"; | 260 | import YearCalendar from "vue-material-year-calendar"; |
| 261 | import jsPDF from 'jspdf'; | 261 | import jsPDF from 'jspdf'; |
| 262 | // eslint-disable-next-line | 262 | // eslint-disable-next-line |
| 263 | import autoTable from 'jspdf-autotable'; | 263 | import autoTable from 'jspdf-autotable'; |
| 264 | 264 | ||
| 265 | export default { | 265 | export default { |
| 266 | components: { YearCalendar }, | 266 | components: { YearCalendar }, |
| 267 | data() { | 267 | data() { |
| 268 | return { | 268 | return { |
| 269 | showPdfData:false, | 269 | showPdfData:false, |
| 270 | hideData:true, | 270 | hideData:true, |
| 271 | loadingPdf:false, | 271 | loadingPdf:false, |
| 272 | output:null, | 272 | output:null, |
| 273 | studentsList: [], | 273 | studentsList: [], |
| 274 | json_data: [], | 274 | json_data: [], |
| 275 | dialogExport: false, | 275 | dialogExport: false, |
| 276 | startDate: "", | 276 | startDate: "", |
| 277 | endDate: "", | 277 | endDate: "", |
| 278 | menuEndDate: false, | 278 | menuEndDate: false, |
| 279 | menuStartDate: false, | 279 | menuStartDate: false, |
| 280 | showLoader: false, | 280 | showLoader: false, |
| 281 | token: "", | 281 | token: "", |
| 282 | year: new Date().getFullYear(), | 282 | year: new Date().getFullYear(), |
| 283 | activeDates: [], | 283 | activeDates: [], |
| 284 | activeClass: "", | 284 | activeClass: "", |
| 285 | teacherData: {} | 285 | teacherData: {} |
| 286 | }; | 286 | }; |
| 287 | }, | 287 | }, |
| 288 | mounted() { | 288 | mounted() { |
| 289 | this.token = this.$store.state.token; | 289 | this.token = this.$store.state.token; |
| 290 | this.getTeacherAttendence(); | 290 | this.getTeacherAttendence(); |
| 291 | // this.getStudentData(); | 291 | // this.getStudentData(); |
| 292 | }, | 292 | }, |
| 293 | methods: { | 293 | methods: { |
| 294 | dates: function(date) { | 294 | dates: function(date) { |
| 295 | return moment(date).format("MMMM DD, YYYY"); | 295 | return moment(date).format("MMMM DD, YYYY"); |
| 296 | }, | 296 | }, |
| 297 | getTeacherAttendence() { | 297 | getTeacherAttendence() { |
| 298 | this.showLoader = true; | 298 | this.showLoader = true; |
| 299 | http() | 299 | http() |
| 300 | .get( | 300 | .get( |
| 301 | "/teacherAttendance", | 301 | "/teacherAttendance", |
| 302 | { params: { teacherId: this.$route.params.teacherId } }, | 302 | { params: { teacherId: this.$route.params.teacherId } }, |
| 303 | { | 303 | { |
| 304 | headers: { Authorization: "Bearer " + this.token } | 304 | headers: { Authorization: "Bearer " + this.token } |
| 305 | } | 305 | } |
| 306 | ) | 306 | ) |
| 307 | .then(response => { | 307 | .then(response => { |
| 308 | this.showLoader = false; | 308 | this.showLoader = false; |
| 309 | this.teacherData = response.data.data.teacherData; | 309 | this.teacherData = response.data.data.teacherData; |
| 310 | let array = []; | 310 | let array = []; |
| 311 | for (let i = 0; i < response.data.data.attendanceData.length; i++) { | 311 | for (let i = 0; i < response.data.data.attendanceData.length; i++) { |
| 312 | for (let j = 0; j < response.data.data.attendanceData[i].teachers.length; j++) { | 312 | for (let j = 0; j < response.data.data.attendanceData[i].teachers.length; j++) { |
| 313 | if (response.data.data.attendanceData[i].teachers[j].attendanceType === "present") { | 313 | if (response.data.data.attendanceData[i].teachers[j].attendanceType === "present") { |
| 314 | array.push({ | 314 | array.push({ |
| 315 | date: response.data.data.attendanceData[i].date, | 315 | date: response.data.data.attendanceData[i].date, |
| 316 | className: "green" | 316 | className: "green" |
| 317 | }); | 317 | }); |
| 318 | } else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresentWithExcuse") { | 318 | } else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresentWithExcuse") { |
| 319 | array.push({ | 319 | array.push({ |
| 320 | date: response.data.data.attendanceData[i].date, | 320 | date: response.data.data.attendanceData[i].date, |
| 321 | className: "yellow" | 321 | className: "yellow" |
| 322 | }); | 322 | }); |
| 323 | } | 323 | } |
| 324 | else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresent") { | 324 | else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "latePresent") { |
| 325 | array.push({ | 325 | array.push({ |
| 326 | date: response.data.data.attendanceData[i].date, | 326 | date: response.data.data.attendanceData[i].date, |
| 327 | className: "black" | 327 | className: "black" |
| 328 | }); | 328 | }); |
| 329 | } | 329 | } |
| 330 | else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "absent") { | 330 | else if (response.data.data.attendanceData[i].teachers[j].attendanceType === "absent") { |
| 331 | array.push({ | 331 | array.push({ |
| 332 | date: response.data.data.attendanceData[i].date, | 332 | date: response.data.data.attendanceData[i].date, |
| 333 | className: "red" | 333 | className: "red" |
| 334 | }); | 334 | }); |
| 335 | } | 335 | } |
| 336 | } | 336 | } |
| 337 | this.activeDates = array; | 337 | this.activeDates = array; |
| 338 | } | 338 | } |
| 339 | }) | 339 | }) |
| 340 | .catch(error => { | 340 | .catch(error => { |
| 341 | this.showLoader = false; | 341 | this.showLoader = false; |
| 342 | if (error.response.status === 401) { | 342 | if (error.response.status === 401) { |
| 343 | this.$router.replace({ path: "/" }); | 343 | this.$router.replace({ path: "/" }); |
| 344 | this.$store.dispatch("setToken", null); | 344 | this.$store.dispatch("setToken", null); |
| 345 | this.$store.dispatch("Id", null); | 345 | this.$store.dispatch("Id", null); |
| 346 | this.$store.dispatch("Role", null); | 346 | this.$store.dispatch("Role", null); |
| 347 | } | 347 | } |
| 348 | }); | 348 | }); |
| 349 | }, | 349 | }, |
| 350 | // getStudentData() { | 350 | // getStudentData() { |
| 351 | // http() | 351 | // http() |
| 352 | // .get( | 352 | // .get( |
| 353 | // "/getParticularStudentDetail", | 353 | // "/getParticularStudentDetail", |
| 354 | // { params: { studentId: this.$route.params.id } }, | 354 | // { params: { studentId: this.$route.params.id } }, |
| 355 | // { | 355 | // { |
| 356 | // headers: { Authorization: "Bearer " + this.token } | 356 | // headers: { Authorization: "Bearer " + this.token } |
| 357 | // } | 357 | // } |
| 358 | // ) | 358 | // ) |
| 359 | // .then(response => { | 359 | // .then(response => { |
| 360 | // this.studentData = response.data.data; | 360 | // this.studentData = response.data.data; |
| 361 | // }) | 361 | // }) |
| 362 | // .catch(err => { | 362 | // .catch(err => { |
| 363 | // console.log("err====>", err); | 363 | // console.log("err====>", err); |
| 364 | // // this.$router.replace({ path: '/' }); | 364 | // // this.$router.replace({ path: '/' }); |
| 365 | // }); | 365 | // }); |
| 366 | // }, | 366 | // }, |
| 367 | convertToCSV(objArray) { | 367 | convertToCSV(objArray) { |
| 368 | var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; | 368 | var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; |
| 369 | var str = ''; | 369 | var str = ''; |
| 370 | 370 | ||
| 371 | for (var i = 0; i < array.length; i++) { | 371 | for (var i = 0; i < array.length; i++) { |
| 372 | var line = ''; | 372 | var line = ''; |
| 373 | for (var index in array[i]) { | 373 | for (var index in array[i]) { |
| 374 | if (line != '') line += ',' | 374 | if (line != '') line += ',' |
| 375 | 375 | ||
| 376 | line += array[i][index]; | 376 | line += array[i][index]; |
| 377 | } | 377 | } |
| 378 | 378 | ||
| 379 | str += line + '\r\n'; | 379 | str += line + '\r\n'; |
| 380 | } | 380 | } |
| 381 | 381 | ||
| 382 | return str; | 382 | return str; |
| 383 | }, | 383 | }, |
| 384 | exportData() { | 384 | exportData() { |
| 385 | // console.log("id",this.$route.params.teacherId); | 385 | // console.log("id",this.$route.params.teacherId); |
| 386 | http() | 386 | http() |
| 387 | .get( | 387 | .get( |
| 388 | "/teacherAttendanceByMonth", | 388 | "/teacherAttendanceByMonth", |
| 389 | { | 389 | { |
| 390 | params: { | 390 | params: { |
| 391 | teacherId: this.$route.params.teacherId, | 391 | teacherId: this.$route.params.teacherId, |
| 392 | startDate: this.startDate, | 392 | startDate: this.startDate, |
| 393 | endDate: this.endDate | 393 | endDate: this.endDate |
| 394 | } | 394 | } |
| 395 | }, | 395 | }, |
| 396 | { | 396 | { |
| 397 | headers: { Authorization: "Bearer " + this.token } | 397 | headers: { Authorization: "Bearer " + this.token } |
| 398 | } | 398 | } |
| 399 | ) | 399 | ) |
| 400 | .then(response => { | 400 | .then(response => { |
| 401 | this.json_data = response.data.data; | 401 | this.json_data = response.data.data; |
| 402 | this.dialogExport = false; | 402 | this.dialogExport = false; |
| 403 | var jsonObject = JSON.stringify(this.json_data); | 403 | var jsonObject = JSON.stringify(this.json_data); |
| 404 | var csv = this.convertToCSV(jsonObject); | 404 | var csv = this.convertToCSV(jsonObject); |
| 405 | var exportedFilenmae = "teacherAttendance" + '.csv'; | 405 | var exportedFilenmae = "teacherAttendance" + '.csv'; |
| 406 | var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); | 406 | var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); |
| 407 | if (navigator.msSaveBlob) { // IE 10+ | 407 | if (navigator.msSaveBlob) { // IE 10+ |
| 408 | navigator.msSaveBlob(blob, exportedFilenmae); | 408 | navigator.msSaveBlob(blob, exportedFilenmae); |
| 409 | } else { | 409 | } else { |
| 410 | var link = document.createElement("a"); | 410 | var link = document.createElement("a"); |
| 411 | if (link.download !== undefined) { // feature detection | 411 | if (link.download !== undefined) { // feature detection |
| 412 | // Browsers that support HTML5 download attribute | 412 | // Browsers that support HTML5 download attribute |
| 413 | var url = URL.createObjectURL(blob); | 413 | var url = URL.createObjectURL(blob); |
| 414 | link.setAttribute("href", url); | 414 | link.setAttribute("href", url); |
| 415 | link.setAttribute("download", exportedFilenmae); | 415 | link.setAttribute("download", exportedFilenmae); |
| 416 | link.style.visibility = 'hidden'; | 416 | link.style.visibility = 'hidden'; |
| 417 | document.body.appendChild(link); | 417 | document.body.appendChild(link); |
| 418 | link.click(); | 418 | link.click(); |
| 419 | document.body.removeChild(link); | 419 | document.body.removeChild(link); |
| 420 | } | 420 | } |
| 421 | } | 421 | } |
| 422 | 422 | ||
| 423 | 423 | ||
| 424 | }) | 424 | }) |
| 425 | .catch(err => { | 425 | .catch(err => { |
| 426 | console.log("err====>", err); | 426 | console.log("err====>", err); |
| 427 | // this.$router.replace({ path: '/' }); | 427 | // this.$router.replace({ path: '/' }); |
| 428 | }); | 428 | }); |
| 429 | }, | 429 | }, |
| 430 | exportPdf(){ | 430 | exportPdf(){ |
| 431 | this.hideData = false; | 431 | this.hideData = false; |
| 432 | this.showPdfData = true | 432 | this.showPdfData = true |
| 433 | }, | 433 | }, |
| 434 | async generatePDF2Canvas(){ | 434 | async generatePDF2Canvas(){ |
| 435 | this.loadingPdf = true | 435 | this.loadingPdf = true |
| 436 | const el = this.$refs.printMe; | 436 | const el = this.$refs.printMe; |
| 437 | // add option type to get the image version | 437 | // add option type to get the image version |
| 438 | // if not provided the promise will return | 438 | // if not provided the promise will return |
| 439 | // the canvas. | 439 | // the canvas. |
| 440 | const options = { | 440 | const options = { |
| 441 | type: 'dataURL' | 441 | type: 'dataURL' |
| 442 | } | 442 | } |
| 443 | this.output = await this.$html2canvas(el, options); | 443 | this.output = await this.$html2canvas(el, options); |
| 444 | if(this.output) { | 444 | if(this.output) { |
| 445 | this.loadingPdf = false | 445 | this.loadingPdf = false |
| 446 | } | 446 | } |
| 447 | let doc = new jsPDF(); | 447 | let doc = new jsPDF(); |
| 448 | doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); | 448 | doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); |
| 449 | doc.save("Attendance.pdf"); | 449 | doc.save("Attendance.pdf"); |
| 450 | } | 450 | } |
| 451 | } | 451 | } |
| 452 | }; | 452 | }; |
| 453 | </script> | 453 | </script> |
| 454 | <style scoped> | 454 | <style scoped> |
| 455 | .add-button { | 455 | .add-button { |
| 456 | background: #feb83c !important; | 456 | background: #feb83c !important; |
| 457 | border-color: #feb83c !important; | 457 | border-color: #feb83c !important; |
| 458 | text-transform: none !important; | 458 | text-transform: none !important; |
| 459 | -webkit-box-shadow: none !important; | 459 | -webkit-box-shadow: none !important; |
| 460 | box-shadow: none !important; | 460 | box-shadow: none !important; |
| 461 | } | 461 | } |
| 462 | .card-style { | 462 | .card-style { |
| 463 | background: #7f62f8 !important; | 463 | background: #7f62f8 !important; |
| 464 | border-color: #7f62f8 !important; | 464 | border-color: #7f62f8 !important; |
| 465 | border-radius: 12px; | 465 | border-radius: 12px; |
| 466 | } | 466 | } |
| 467 | .open-dialog-button { | 467 | .open-dialog-button { |
| 468 | background: #827bfa !important; | 468 | background: #827bfa !important; |
| 469 | border-color: #827bfa !important; | 469 | border-color: #827bfa !important; |
| 470 | text-transform: none !important; | 470 | text-transform: none !important; |
| 471 | } | 471 | } |
| 472 | </style> | 472 | </style> |
| 473 | 473 |
src/pages/Class/addclass.vue
| 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" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit 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" persistent> |
| 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-if="showSearch"> | 83 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-text-field | 85 | <v-text-field |
| 86 | autofocus | 86 | autofocus |
| 87 | v-model="search" | 87 | v-model="search" |
| 88 | label="Search" | 88 | label="Search" |
| 89 | prepend-inner-icon="search" | 89 | prepend-inner-icon="search" |
| 90 | color="primary" | 90 | color="primary" |
| 91 | ></v-text-field> | 91 | ></v-text-field> |
| 92 | <v-icon @click="closeSearch" color="error">close</v-icon> | 92 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-toolbar> | 95 | </v-toolbar> |
| 96 | <v-data-table | 96 | <v-data-table |
| 97 | :headers="headers" | 97 | :headers="headers" |
| 98 | :items="classList" | 98 | :items="classList" |
| 99 | :pagination.sync="pagination" | 99 | :pagination.sync="pagination" |
| 100 | :search="search" | 100 | :search="search" |
| 101 | > | 101 | > |
| 102 | <template slot="items" slot-scope="props"> | 102 | <template slot="items" slot-scope="props"> |
| 103 | <tr class="tr"> | 103 | <tr class="tr"> |
| 104 | <td class="td td-row">{{ props.index + 1 }}</td> | 104 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 105 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> | 105 | <td class="text-xs-center td td-row">{{ props.item.classNum}}</td> |
| 106 | <td class="text-xs-center td td-row"> | 106 | <td class="text-xs-center td td-row"> |
| 107 | <span> | 107 | <span> |
| 108 | <v-tooltip top> | 108 | <v-tooltip top> |
| 109 | <img | 109 | <img |
| 110 | slot="activator" | 110 | slot="activator" |
| 111 | style="cursor:pointer; width:25px; height:25px; " | 111 | style="cursor:pointer; width:25px; height:25px; " |
| 112 | class="mr-3" | 112 | class="mr-3" |
| 113 | @click="profile(props.item)" | 113 | @click="profile(props.item)" |
| 114 | src="/static/icon/view.png" | 114 | src="/static/icon/view.png" |
| 115 | /> | 115 | /> |
| 116 | <span>View</span> | 116 | <span>View</span> |
| 117 | </v-tooltip> | 117 | </v-tooltip> |
| 118 | <v-tooltip top> | 118 | <v-tooltip top> |
| 119 | <img | 119 | <img |
| 120 | slot="activator" | 120 | slot="activator" |
| 121 | style="cursor:pointer; width:20px; height:18px; " | 121 | style="cursor:pointer; width:20px; height:18px; " |
| 122 | class="mr-3" | 122 | class="mr-3" |
| 123 | @click="editItem(props.item)" | 123 | @click="editItem(props.item)" |
| 124 | src="/static/icon/edit.png" | 124 | src="/static/icon/edit.png" |
| 125 | /> | 125 | /> |
| 126 | <span>Edit</span> | 126 | <span>Edit</span> |
| 127 | </v-tooltip> | 127 | </v-tooltip> |
| 128 | <!-- <v-tooltip top> | 128 | <!-- <v-tooltip top> |
| 129 | <img | 129 | <img |
| 130 | slot="activator" | 130 | slot="activator" |
| 131 | style="cursor:pointer; width:20px; height:20px; " | 131 | style="cursor:pointer; width:20px; height:20px; " |
| 132 | @click="deleteItem(props.item)" | 132 | @click="deleteItem(props.item)" |
| 133 | src="/static/icon/delete.png" | 133 | src="/static/icon/delete.png" |
| 134 | /> | 134 | /> |
| 135 | <span>Delete</span> | 135 | <span>Delete</span> |
| 136 | </v-tooltip>--> | 136 | </v-tooltip>--> |
| 137 | </span> | 137 | </span> |
| 138 | </td> | 138 | </td> |
| 139 | </tr> | 139 | </tr> |
| 140 | </template> | 140 | </template> |
| 141 | <v-alert | 141 | <v-alert |
| 142 | slot="no-results" | 142 | slot="no-results" |
| 143 | :value="true" | 143 | :value="true" |
| 144 | color="error" | 144 | color="error" |
| 145 | icon="warning" | 145 | icon="warning" |
| 146 | >Your search for "{{ search }}" found no results.</v-alert> | 146 | >Your search for "{{ search }}" found no results.</v-alert> |
| 147 | </v-data-table> | 147 | </v-data-table> |
| 148 | 148 | ||
| 149 | <!-- DIALOG BOX - ADD Class --> | 149 | <!-- DIALOG BOX - ADD Class --> |
| 150 | <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog"> | 150 | <v-dialog v-model="addClassDialog" max-width="400px" v-if="addClassDialog" persistent> |
| 151 | <v-card flat class="card-style pa-2" dark> | 151 | <v-card flat class="card-style pa-2" dark> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs12> | 153 | <v-flex xs12> |
| 154 | <label class="title text-xs-center">Add Class</label> | 154 | <label class="title text-xs-center">Add Class</label> |
| 155 | <v-icon | 155 | <v-icon |
| 156 | size="24" | 156 | size="24" |
| 157 | class="right" | 157 | class="right" |
| 158 | @click="$refs.form.reset();addClassDialog = false" | 158 | @click="$refs.form.reset();addClassDialog = false" |
| 159 | >cancel</v-icon> | 159 | >cancel</v-icon> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | <v-container fluid fill-height> | 162 | <v-container fluid fill-height> |
| 163 | <v-layout align-center> | 163 | <v-layout align-center> |
| 164 | <v-flex xs12> | 164 | <v-flex xs12> |
| 165 | <v-form ref="form" v-model="valid" lazy-validation> | 165 | <v-form ref="form" v-model="valid" lazy-validation> |
| 166 | <v-flex xs12 class="headline text-xs-center"> | 166 | <v-flex xs12 class="headline text-xs-center"> |
| 167 | <label>Class</label> | 167 | <label>Class</label> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | <v-flex xs12> | 169 | <v-flex xs12> |
| 170 | <v-text-field | 170 | <v-text-field |
| 171 | v-model="addclasses.classNum" | 171 | v-model="addclasses.classNum" |
| 172 | placeholder="fill your class Name" | 172 | placeholder="fill your class Name" |
| 173 | type="text" | 173 | type="text" |
| 174 | :rules="nameRules" | 174 | :rules="nameRules" |
| 175 | required | 175 | required |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | <v-layout> | 178 | <v-layout> |
| 179 | <v-flex xs12 sm12> | 179 | <v-flex xs12 sm12> |
| 180 | <v-card-actions> | 180 | <v-card-actions> |
| 181 | <v-spacer></v-spacer> | 181 | <v-spacer></v-spacer> |
| 182 | <v-btn | 182 | <v-btn |
| 183 | @click="submit" | 183 | @click="submit" |
| 184 | class="add-button" | 184 | class="add-button" |
| 185 | round | 185 | round |
| 186 | dark | 186 | dark |
| 187 | :loading="loading" | 187 | :loading="loading" |
| 188 | >Add Class</v-btn> | 188 | >Add Class</v-btn> |
| 189 | <v-spacer></v-spacer> | 189 | <v-spacer></v-spacer> |
| 190 | </v-card-actions> | 190 | </v-card-actions> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | </v-form> | 193 | </v-form> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-container> | 196 | </v-container> |
| 197 | </v-card> | 197 | </v-card> |
| 198 | </v-dialog> | 198 | </v-dialog> |
| 199 | <div class="loader" v-if="showLoader"> | 199 | <div class="loader" v-if="showLoader"> |
| 200 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 200 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 201 | </div> | 201 | </div> |
| 202 | <v-snackbar | 202 | <v-snackbar |
| 203 | :timeout="timeout" | 203 | :timeout="timeout" |
| 204 | :top="y === 'top'" | 204 | :top="y === 'top'" |
| 205 | :right="x === 'right'" | 205 | :right="x === 'right'" |
| 206 | :vertical="mode === 'vertical'" | 206 | :vertical="mode === 'vertical'" |
| 207 | v-model="snackbar" | 207 | v-model="snackbar" |
| 208 | :color="color" | 208 | :color="color" |
| 209 | >{{ text }}</v-snackbar> | 209 | >{{ text }}</v-snackbar> |
| 210 | </v-container> | 210 | </v-container> |
| 211 | </template> | 211 | </template> |
| 212 | 212 | ||
| 213 | <script> | 213 | <script> |
| 214 | import http from "@/Services/http.js"; | 214 | import http from "@/Services/http.js"; |
| 215 | 215 | ||
| 216 | export default { | 216 | export default { |
| 217 | data: () => ({ | 217 | data: () => ({ |
| 218 | snackbar: false, | 218 | snackbar: false, |
| 219 | y: "top", | 219 | y: "top", |
| 220 | x: "right", | 220 | x: "right", |
| 221 | mode: "", | 221 | mode: "", |
| 222 | timeout: 5000, | 222 | timeout: 5000, |
| 223 | text: "", | 223 | text: "", |
| 224 | color: "", | 224 | color: "", |
| 225 | show: true, | 225 | show: true, |
| 226 | showSearch: false, | 226 | showSearch: false, |
| 227 | showLoader: false, | 227 | showLoader: false, |
| 228 | loading: false, | 228 | loading: false, |
| 229 | addClassDialog: false, | 229 | addClassDialog: false, |
| 230 | search: "", | 230 | search: "", |
| 231 | editClassDialog: false, | 231 | editClassDialog: false, |
| 232 | profileClassDialog: false, | 232 | profileClassDialog: false, |
| 233 | valid: true, | 233 | valid: true, |
| 234 | pagination: { | 234 | pagination: { |
| 235 | rowsPerPage: 10, | 235 | rowsPerPage: 10, |
| 236 | }, | 236 | }, |
| 237 | nameRules: [(v) => !!v || " Class Name is required"], | 237 | nameRules: [(v) => !!v || " Class Name is required"], |
| 238 | headers: [ | 238 | headers: [ |
| 239 | { | 239 | { |
| 240 | text: "No", | 240 | text: "No", |
| 241 | align: "left", | 241 | align: "left", |
| 242 | sortable: false, | 242 | sortable: false, |
| 243 | value: "No", | 243 | value: "No", |
| 244 | }, | 244 | }, |
| 245 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, | 245 | { text: "Class No", value: "classNum", sortable: false, align: "center" }, |
| 246 | 246 | ||
| 247 | { text: "Action", value: "", sortable: false, align: "center" }, | 247 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 248 | ], | 248 | ], |
| 249 | classList: [], | 249 | classList: [], |
| 250 | editedIndex: -1, | 250 | editedIndex: -1, |
| 251 | editedItem: { | 251 | editedItem: { |
| 252 | classNum: "", | 252 | classNum: "", |
| 253 | }, | 253 | }, |
| 254 | addclasses: { | 254 | addclasses: { |
| 255 | classNum: "", | 255 | classNum: "", |
| 256 | }, | 256 | }, |
| 257 | }), | 257 | }), |
| 258 | watch: { | 258 | watch: { |
| 259 | addClassDialog: function (val) { | 259 | addClassDialog: function (val) { |
| 260 | if (!val) { | 260 | if (!val) { |
| 261 | this.addclasses = []; | 261 | this.addclasses = []; |
| 262 | } | 262 | } |
| 263 | }, | 263 | }, |
| 264 | }, | 264 | }, |
| 265 | methods: { | 265 | methods: { |
| 266 | getClassList() { | 266 | getClassList() { |
| 267 | this.showLoader = true; | 267 | this.showLoader = true; |
| 268 | var token = this.$store.state.token; | 268 | var token = this.$store.state.token; |
| 269 | http() | 269 | http() |
| 270 | .get("/getClassesList") | 270 | .get("/getClassesList") |
| 271 | .then((response) => { | 271 | .then((response) => { |
| 272 | this.classList = response.data.data; | 272 | this.classList = response.data.data; |
| 273 | this.showLoader = false; | 273 | this.showLoader = false; |
| 274 | }) | 274 | }) |
| 275 | .catch((error) => { | 275 | .catch((error) => { |
| 276 | this.showLoader = false; | 276 | this.showLoader = false; |
| 277 | if (error.response.status === 401) { | 277 | if (error.response.status === 401) { |
| 278 | this.$router.replace({ path: "/" }); | 278 | this.$router.replace({ path: "/" }); |
| 279 | this.$store.dispatch("setToken", null); | 279 | this.$store.dispatch("setToken", null); |
| 280 | this.$store.dispatch("Id", null); | 280 | this.$store.dispatch("Id", null); |
| 281 | } | 281 | } |
| 282 | }); | 282 | }); |
| 283 | }, | 283 | }, |
| 284 | editItem(item) { | 284 | editItem(item) { |
| 285 | this.editedIndex = this.classList.indexOf(item); | 285 | this.editedIndex = this.classList.indexOf(item); |
| 286 | this.editedItem = Object.assign({}, item); | 286 | this.editedItem = Object.assign({}, item); |
| 287 | this.editClassDialog = true; | 287 | this.editClassDialog = true; |
| 288 | }, | 288 | }, |
| 289 | profile(item) { | 289 | profile(item) { |
| 290 | this.editedIndex = this.classList.indexOf(item); | 290 | this.editedIndex = this.classList.indexOf(item); |
| 291 | this.editedItem = Object.assign({}, item); | 291 | this.editedItem = Object.assign({}, item); |
| 292 | this.profileClassDialog = true; | 292 | this.profileClassDialog = true; |
| 293 | }, | 293 | }, |
| 294 | deleteItem(item) { | 294 | deleteItem(item) { |
| 295 | let deleteStudent = { | 295 | let deleteStudent = { |
| 296 | classId: item._id, | 296 | classId: item._id, |
| 297 | }; | 297 | }; |
| 298 | http() | 298 | http() |
| 299 | .delete( | 299 | .delete( |
| 300 | "/deleteClass", | 300 | "/deleteClass", |
| 301 | confirm("Are you sure you want to delete this?") && { | 301 | confirm("Are you sure you want to delete this?") && { |
| 302 | params: deleteStudent, | 302 | params: deleteStudent, |
| 303 | } | 303 | } |
| 304 | ) | 304 | ) |
| 305 | .then((response) => { | 305 | .then((response) => { |
| 306 | this.snackbar = true; | 306 | this.snackbar = true; |
| 307 | this.text = response.data.message; | 307 | this.text = response.data.message; |
| 308 | this.color = "green"; | 308 | this.color = "green"; |
| 309 | this.getClassList(); | 309 | this.getClassList(); |
| 310 | }) | 310 | }) |
| 311 | .catch((error) => { | 311 | .catch((error) => { |
| 312 | this.snackbar = true; | 312 | this.snackbar = true; |
| 313 | this.color = "error"; | 313 | this.color = "error"; |
| 314 | this.text = error.response.data.message; | 314 | this.text = error.response.data.message; |
| 315 | }); | 315 | }); |
| 316 | }, | 316 | }, |
| 317 | close() { | 317 | close() { |
| 318 | this.editClassDialog = false; | 318 | this.editClassDialog = false; |
| 319 | }, | 319 | }, |
| 320 | closeProfile() { | 320 | closeProfile() { |
| 321 | this.profileClassDialog = false; | 321 | this.profileClassDialog = false; |
| 322 | }, | 322 | }, |
| 323 | submit() { | 323 | submit() { |
| 324 | if (this.$refs.form.validate()) { | 324 | if (this.$refs.form.validate()) { |
| 325 | let addClass = { | 325 | let addClass = { |
| 326 | classNum: this.addclasses.classNum, | 326 | classNum: this.addclasses.classNum, |
| 327 | }; | 327 | }; |
| 328 | this.loading = true; | 328 | this.loading = true; |
| 329 | http() | 329 | http() |
| 330 | .post("/createClass", addClass) | 330 | .post("/createClass", addClass) |
| 331 | .then((response) => { | 331 | .then((response) => { |
| 332 | this.getClassList(); | 332 | this.getClassList(); |
| 333 | this.snackbar = true; | 333 | this.snackbar = true; |
| 334 | this.text = response.data.message; | 334 | this.text = response.data.message; |
| 335 | this.color = "green"; | 335 | this.color = "green"; |
| 336 | // this.clear(); | 336 | // this.clear(); |
| 337 | this.loading = false; | 337 | this.loading = false; |
| 338 | this.$refs.form.reset(); | 338 | this.$refs.form.reset(); |
| 339 | this.addClassDialog = false; | 339 | this.addClassDialog = false; |
| 340 | }) | 340 | }) |
| 341 | .catch((error) => { | 341 | .catch((error) => { |
| 342 | this.loading = false; | 342 | this.loading = false; |
| 343 | this.snackbar = true; | 343 | this.snackbar = true; |
| 344 | this.color = "error"; | 344 | this.color = "error"; |
| 345 | this.text = error.response.data.message; | 345 | this.text = error.response.data.message; |
| 346 | }); | 346 | }); |
| 347 | } | 347 | } |
| 348 | }, | 348 | }, |
| 349 | clear() { | 349 | clear() { |
| 350 | this.$refs.form.reset(); | 350 | this.$refs.form.reset(); |
| 351 | }, | 351 | }, |
| 352 | save() { | 352 | save() { |
| 353 | let editClass = { | 353 | let editClass = { |
| 354 | classId: this.editedItem._id, | 354 | classId: this.editedItem._id, |
| 355 | classNum: this.editedItem.classNum, | 355 | classNum: this.editedItem.classNum, |
| 356 | }; | 356 | }; |
| 357 | http() | 357 | http() |
| 358 | .put("/updateClass", editClass) | 358 | .put("/updateClass", editClass) |
| 359 | .then((response) => { | 359 | .then((response) => { |
| 360 | this.snackbar = true; | 360 | this.snackbar = true; |
| 361 | this.text = response.data.message; | 361 | this.text = response.data.message; |
| 362 | this.color = "green"; | 362 | this.color = "green"; |
| 363 | this.getClassList(); | 363 | this.getClassList(); |
| 364 | this.close(); | 364 | this.close(); |
| 365 | }) | 365 | }) |
| 366 | .catch((error) => { | 366 | .catch((error) => { |
| 367 | this.snackbar = true; | 367 | this.snackbar = true; |
| 368 | this.text = error.response.data.message; | 368 | this.text = error.response.data.message; |
| 369 | this.color = "error"; | 369 | this.color = "error"; |
| 370 | // console.log(error); | 370 | // console.log(error); |
| 371 | }); | 371 | }); |
| 372 | }, | 372 | }, |
| 373 | displaySearch() { | 373 | displaySearch() { |
| 374 | (this.show = false), (this.showSearch = true); | 374 | (this.show = false), (this.showSearch = true); |
| 375 | }, | 375 | }, |
| 376 | closeSearch() { | 376 | closeSearch() { |
| 377 | this.showSearch = false; | 377 | this.showSearch = false; |
| 378 | this.show = true; | 378 | this.show = true; |
| 379 | this.search = ""; | 379 | this.search = ""; |
| 380 | }, | 380 | }, |
| 381 | }, | 381 | }, |
| 382 | mounted() { | 382 | mounted() { |
| 383 | this.getClassList(); | 383 | this.getClassList(); |
| 384 | }, | 384 | }, |
| 385 | // created() { | 385 | // created() { |
| 386 | // this.$root.$on("app:search", search => { | 386 | // this.$root.$on("app:search", search => { |
| 387 | // this.search = search; | 387 | // this.search = search; |
| 388 | // }); | 388 | // }); |
| 389 | // }, | 389 | // }, |
| 390 | // beforeDestroy() { | 390 | // beforeDestroy() { |
| 391 | // // dont forget to remove the listener | 391 | // // dont forget to remove the listener |
| 392 | // this.$root.$off("app:search"); | 392 | // this.$root.$off("app:search"); |
| 393 | // } | 393 | // } |
| 394 | }; | 394 | }; |
| 395 | </script> | 395 | </script> |
| 396 | <style> | 396 | <style> |
| 397 | </style> | 397 | </style> |
src/pages/Course/course.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS COURSES DETAILS ****** --> | 3 | <!-- ****** EDITS COURSES DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editStudentDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Course</label> | 8 | <label class="title text-xs-center">Edit Course</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.courseImageUrl" | 21 | :src="editedItem.courseImageUrl" |
| 22 | v-else-if="editedItem.courseImageUrl && !editImageUrl" | 22 | v-else-if="editedItem.courseImageUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 sm5 class="pt-4 subheading"> | 43 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 sm7 class="ml-3"> | 47 | <v-flex xs8 sm7 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 sm5 class="pt-4 subheading"> | 60 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 61 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 62 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | v-model="editedItem.courseName" | 66 | v-model="editedItem.courseName" |
| 67 | placeholder="fill your Course Name" | 67 | placeholder="fill your Course Name" |
| 68 | type="text" | 68 | type="text" |
| 69 | required | 69 | required |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 sm5 class="pt-4 subheading"> | 74 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 75 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 75 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 sm7 class="ml-3"> | 78 | <v-flex xs8 sm7 class="ml-3"> |
| 79 | <v-text-field | 79 | <v-text-field |
| 80 | label="Select Image" | 80 | label="Select Image" |
| 81 | @click="pickEditFile" | 81 | @click="pickEditFile" |
| 82 | v-model="editImageName" | 82 | v-model="editImageName" |
| 83 | append-icon="attach_file" | 83 | append-icon="attach_file" |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs12 sm12 class="px-0 mx-0"> | 90 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 91 | <v-layout class="right"> | 91 | <v-layout class="right"> |
| 92 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 92 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-container> | 96 | </v-container> |
| 97 | </v-form> | 97 | </v-form> |
| 98 | </v-card-text> | 98 | </v-card-text> |
| 99 | </v-card> | 99 | </v-card> |
| 100 | </v-dialog> | 100 | </v-dialog> |
| 101 | 101 | ||
| 102 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 102 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 103 | 103 | ||
| 104 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable> | 104 | <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable persistent> |
| 105 | <v-card flat class="card-style pa-3" dark> | 105 | <v-card flat class="card-style pa-3" dark> |
| 106 | <v-layout> | 106 | <v-layout> |
| 107 | <v-flex xs12> | 107 | <v-flex xs12> |
| 108 | <label class="title text-xs-center">View Course</label> | 108 | <label class="title text-xs-center">View Course</label> |
| 109 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 109 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | <v-card-text> | 112 | <v-card-text> |
| 113 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 113 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 114 | <v-avatar size="100px"> | 114 | <v-avatar size="100px"> |
| 115 | <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> | 115 | <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> |
| 116 | <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> | 116 | <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> |
| 117 | </v-avatar> | 117 | </v-avatar> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-container grid-list-md> | 119 | <v-container grid-list-md> |
| 120 | <v-layout wrap> | 120 | <v-layout wrap> |
| 121 | <v-flex xs12> | 121 | <v-flex xs12> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs6 sm6> | 123 | <v-flex xs6 sm6> |
| 124 | <h5 class="right my-1"> | 124 | <h5 class="right my-1"> |
| 125 | <b>Course :</b> | 125 | <b>Course :</b> |
| 126 | </h5> | 126 | </h5> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm6 xs6> | 128 | <v-flex sm6 xs6> |
| 129 | <h5 class="my-1 left">{{ editedItem.courseName }}</h5> | 129 | <h5 class="my-1 left">{{ editedItem.courseName }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-container> | 134 | </v-container> |
| 135 | </v-card-text> | 135 | </v-card-text> |
| 136 | </v-card> | 136 | </v-card> |
| 137 | </v-dialog> | 137 | </v-dialog> |
| 138 | 138 | ||
| 139 | <!-- ****** STUDENTS TABLE ****** --> | 139 | <!-- ****** STUDENTS TABLE ****** --> |
| 140 | <v-toolbar color="transparent" flat> | 140 | <v-toolbar color="transparent" flat> |
| 141 | <v-btn | 141 | <v-btn |
| 142 | fab | 142 | fab |
| 143 | dark | 143 | dark |
| 144 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 144 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 145 | small | 145 | small |
| 146 | @click="addCourseDialog = true" | 146 | @click="addCourseDialog = true" |
| 147 | > | 147 | > |
| 148 | <v-icon dark>add</v-icon> | 148 | <v-icon dark>add</v-icon> |
| 149 | </v-btn> | 149 | </v-btn> |
| 150 | <v-btn | 150 | <v-btn |
| 151 | round | 151 | round |
| 152 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 152 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 153 | dark | 153 | dark |
| 154 | @click="addCourseDialog = true" | 154 | @click="addCourseDialog = true" |
| 155 | > | 155 | > |
| 156 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course | 156 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course |
| 157 | </v-btn> | 157 | </v-btn> |
| 158 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 158 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 159 | <v-flex md13 lg12> | 159 | <v-flex md13 lg12> |
| 160 | <v-layout> | 160 | <v-layout> |
| 161 | <v-flex lg6 md6> | 161 | <v-flex lg6 md6> |
| 162 | <v-select | 162 | <v-select |
| 163 | :items="addclass" | 163 | :items="addclass" |
| 164 | label="Select Class" | 164 | label="Select Class" |
| 165 | v-model="selectStudents.select" | 165 | v-model="selectStudents.select" |
| 166 | item-text="classNum" | 166 | item-text="classNum" |
| 167 | item-value="_id" | 167 | item-value="_id" |
| 168 | name="Select Class" | 168 | name="Select Class" |
| 169 | :rules="classRules" | 169 | :rules="classRules" |
| 170 | required | 170 | required |
| 171 | class="ml-2" | 171 | class="ml-2" |
| 172 | ></v-select> | 172 | ></v-select> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | </v-layout> | 174 | </v-layout> |
| 175 | </v-flex> | 175 | </v-flex> |
| 176 | </v-card-actions> | 176 | </v-card-actions> |
| 177 | <v-spacer></v-spacer> | 177 | <v-spacer></v-spacer> |
| 178 | <v-btn | 178 | <v-btn |
| 179 | @click="getCourses()" | 179 | @click="getCourses()" |
| 180 | round | 180 | round |
| 181 | dark | 181 | dark |
| 182 | :loading="loading" | 182 | :loading="loading" |
| 183 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 183 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 184 | >Find</v-btn> | 184 | >Find</v-btn> |
| 185 | <v-card-title class="body-1" v-show="show"> | 185 | <v-card-title class="body-1" v-show="show"> |
| 186 | <v-btn icon large flat @click="displaySearch"> | 186 | <v-btn icon large flat @click="displaySearch"> |
| 187 | <v-avatar size="27"> | 187 | <v-avatar size="27"> |
| 188 | <img src="/static/icon/search.png" alt="icon" /> | 188 | <img src="/static/icon/search.png" alt="icon" /> |
| 189 | </v-avatar> | 189 | </v-avatar> |
| 190 | </v-btn> | 190 | </v-btn> |
| 191 | </v-card-title> | 191 | </v-card-title> |
| 192 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 192 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 193 | <v-layout> | 193 | <v-layout> |
| 194 | <v-text-field | 194 | <v-text-field |
| 195 | autofocus | 195 | autofocus |
| 196 | v-model="search" | 196 | v-model="search" |
| 197 | label="Search" | 197 | label="Search" |
| 198 | prepend-inner-icon="search" | 198 | prepend-inner-icon="search" |
| 199 | color="primary" | 199 | color="primary" |
| 200 | ></v-text-field> | 200 | ></v-text-field> |
| 201 | <v-icon @click="closeSearch" color="error">close</v-icon> | 201 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-toolbar> | 204 | </v-toolbar> |
| 205 | <v-card flat class="elevation-0 transparent"> | 205 | <v-card flat class="elevation-0 transparent"> |
| 206 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 206 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 207 | <v-layout> | 207 | <v-layout> |
| 208 | <!-- <v-flex xs4> | 208 | <!-- <v-flex xs4> |
| 209 | <label class="right mt-4">Select Class:</label> | 209 | <label class="right mt-4">Select Class:</label> |
| 210 | </v-flex>--> | 210 | </v-flex>--> |
| 211 | <v-flex xs12> | 211 | <v-flex xs12> |
| 212 | <v-select | 212 | <v-select |
| 213 | :items="addclass" | 213 | :items="addclass" |
| 214 | label="Select Class" | 214 | label="Select Class" |
| 215 | v-model="selectStudents.select" | 215 | v-model="selectStudents.select" |
| 216 | item-text="classNum" | 216 | item-text="classNum" |
| 217 | item-value="_id" | 217 | item-value="_id" |
| 218 | name="Select Class" | 218 | name="Select Class" |
| 219 | :rules="classRules" | 219 | :rules="classRules" |
| 220 | class="px-2" | 220 | class="px-2" |
| 221 | ></v-select> | 221 | ></v-select> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | </v-layout> | 223 | </v-layout> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs5 class="mx-auto mb-2"> | 225 | <v-flex xs5 class="mx-auto mb-2"> |
| 226 | <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> | 226 | <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-card> | 230 | </v-card> |
| 231 | <v-data-table | 231 | <v-data-table |
| 232 | :headers="headers" | 232 | :headers="headers" |
| 233 | :items="courseData" | 233 | :items="courseData" |
| 234 | :pagination.sync="pagination" | 234 | :pagination.sync="pagination" |
| 235 | :search="search" | 235 | :search="search" |
| 236 | > | 236 | > |
| 237 | <template slot="items" slot-scope="props"> | 237 | <template slot="items" slot-scope="props"> |
| 238 | <tr class="tr"> | 238 | <tr class="tr"> |
| 239 | <td class="text-xs-center td td-row"> | 239 | <td class="text-xs-center td td-row"> |
| 240 | <v-avatar size="40"> | 240 | <v-avatar size="40"> |
| 241 | <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> | 241 | <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> |
| 242 | <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> | 242 | <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> |
| 243 | </v-avatar> | 243 | </v-avatar> |
| 244 | </td> | 244 | </td> |
| 245 | <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> | 245 | <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> |
| 246 | <td class="text-xs-center td td-row"> | 246 | <td class="text-xs-center td td-row"> |
| 247 | <span> | 247 | <span> |
| 248 | <v-tooltip top> | 248 | <v-tooltip top> |
| 249 | <img | 249 | <img |
| 250 | slot="activator" | 250 | slot="activator" |
| 251 | style="cursor:pointer; width:25px; height:25px; " | 251 | style="cursor:pointer; width:25px; height:25px; " |
| 252 | class="mr-3" | 252 | class="mr-3" |
| 253 | @click="profile(props.item)" | 253 | @click="profile(props.item)" |
| 254 | src="/static/icon/view.png" | 254 | src="/static/icon/view.png" |
| 255 | /> | 255 | /> |
| 256 | <span>View</span> | 256 | <span>View</span> |
| 257 | </v-tooltip> | 257 | </v-tooltip> |
| 258 | <v-tooltip top> | 258 | <v-tooltip top> |
| 259 | <img | 259 | <img |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | style="cursor:pointer; width:20px; height:18px; " | 261 | style="cursor:pointer; width:20px; height:18px; " |
| 262 | class="mr-3" | 262 | class="mr-3" |
| 263 | @click="editItem(props.item)" | 263 | @click="editItem(props.item)" |
| 264 | src="/static/icon/edit.png" | 264 | src="/static/icon/edit.png" |
| 265 | /> | 265 | /> |
| 266 | <span>Edit</span> | 266 | <span>Edit</span> |
| 267 | </v-tooltip> | 267 | </v-tooltip> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:20px; height:20px; " | 271 | style="cursor:pointer; width:20px; height:20px; " |
| 272 | class="mr-3" | 272 | class="mr-3" |
| 273 | @click="deleteItem(props.item)" | 273 | @click="deleteItem(props.item)" |
| 274 | src="/static/icon/delete.png" | 274 | src="/static/icon/delete.png" |
| 275 | /> | 275 | /> |
| 276 | <span>Delete</span> | 276 | <span>Delete</span> |
| 277 | </v-tooltip> | 277 | </v-tooltip> |
| 278 | </span> | 278 | </span> |
| 279 | </td> | 279 | </td> |
| 280 | </tr> | 280 | </tr> |
| 281 | </template> | 281 | </template> |
| 282 | <v-alert | 282 | <v-alert |
| 283 | slot="no-results" | 283 | slot="no-results" |
| 284 | :value="true" | 284 | :value="true" |
| 285 | color="error" | 285 | color="error" |
| 286 | icon="warning" | 286 | icon="warning" |
| 287 | >Your search for "{{ search }}" found no results.</v-alert> | 287 | >Your search for "{{ search }}" found no results.</v-alert> |
| 288 | </v-data-table> | 288 | </v-data-table> |
| 289 | <!-- ****** Add CourseS DETAILS****** --> | 289 | <!-- ****** Add CourseS DETAILS****** --> |
| 290 | <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog"> | 290 | <v-dialog v-model="addCourseDialog" max-width="500" v-if="addCourseDialog" persistent> |
| 291 | <v-card flat class="card-style pa-2" dark> | 291 | <v-card flat class="card-style pa-2" dark> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs12> | 293 | <v-flex xs12> |
| 294 | <label class="title text-xs-center">Add Course</label> | 294 | <label class="title text-xs-center">Add Course</label> |
| 295 | <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon> | 295 | <v-icon size="24" class="right" @click="closeAddCourseModel">cancel</v-icon> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-container fluid> | 298 | <v-container fluid> |
| 299 | <v-layout align-center> | 299 | <v-layout align-center> |
| 300 | <v-flex xs12> | 300 | <v-flex xs12> |
| 301 | <v-flex xs12 sm12> | 301 | <v-flex xs12 sm12> |
| 302 | <v-form ref="form" v-model="valid" lazy-validation> | 302 | <v-form ref="form" v-model="valid" lazy-validation> |
| 303 | <v-layout> | 303 | <v-layout> |
| 304 | <v-flex | 304 | <v-flex |
| 305 | xs12 | 305 | xs12 |
| 306 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 306 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 307 | > | 307 | > |
| 308 | <v-avatar size="100px" v-if="!imageUrl"> | 308 | <v-avatar size="100px" v-if="!imageUrl"> |
| 309 | <img src="/static/icon/user.png" /> | 309 | <img src="/static/icon/user.png" /> |
| 310 | </v-avatar> | 310 | </v-avatar> |
| 311 | <input | 311 | <input |
| 312 | type="file" | 312 | type="file" |
| 313 | style="display: none" | 313 | style="display: none" |
| 314 | ref="image" | 314 | ref="image" |
| 315 | accept="image/*" | 315 | accept="image/*" |
| 316 | @change="onFilePicked" | 316 | @change="onFilePicked" |
| 317 | /> | 317 | /> |
| 318 | <img | 318 | <img |
| 319 | :src="imageData.imageUrl" | 319 | :src="imageData.imageUrl" |
| 320 | height="150" | 320 | height="150" |
| 321 | v-if="imageUrl" | 321 | v-if="imageUrl" |
| 322 | style="border-radius:50%; width:200px" | 322 | style="border-radius:50%; width:200px" |
| 323 | /> | 323 | /> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | <v-layout wrap> | 326 | <v-layout wrap> |
| 327 | <v-flex xs12 sm12> | 327 | <v-flex xs12 sm12> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex x4 sm4 class="pt-4 subheading"> | 329 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 330 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 330 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 331 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 331 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs8 sm8 class="ml-3"> | 333 | <v-flex xs8 sm8 class="ml-3"> |
| 334 | <v-select | 334 | <v-select |
| 335 | :items="addclass" | 335 | :items="addclass" |
| 336 | label="Select Class" | 336 | label="Select Class" |
| 337 | v-model="addCourses.select" | 337 | v-model="addCourses.select" |
| 338 | item-text="classNum" | 338 | item-text="classNum" |
| 339 | item-value="_id" | 339 | item-value="_id" |
| 340 | name="Select Class" | 340 | name="Select Class" |
| 341 | :rules="classRules" | 341 | :rules="classRules" |
| 342 | @change="getSections(addCourses.select)" | 342 | @change="getSections(addCourses.select)" |
| 343 | required | 343 | required |
| 344 | ></v-select> | 344 | ></v-select> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | </v-layout> | 348 | </v-layout> |
| 349 | <v-layout wrap> | 349 | <v-layout wrap> |
| 350 | <v-flex xs12 sm12> | 350 | <v-flex xs12 sm12> |
| 351 | <v-layout> | 351 | <v-layout> |
| 352 | <v-flex xs4 sm4 class="pt-4 subheading"> | 352 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 353 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> | 353 | <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> |
| 354 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 354 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | <v-flex xs8 sm8 class="ml-3"> | 356 | <v-flex xs8 sm8 class="ml-3"> |
| 357 | <v-text-field | 357 | <v-text-field |
| 358 | v-model="addCourses.courseName" | 358 | v-model="addCourses.courseName" |
| 359 | placeholder="fill your Course name" | 359 | placeholder="fill your Course name" |
| 360 | type="text" | 360 | type="text" |
| 361 | :rules="courseRules" | 361 | :rules="courseRules" |
| 362 | required | 362 | required |
| 363 | ></v-text-field> | 363 | ></v-text-field> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | </v-layout> | 365 | </v-layout> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex xs12 sm12> | 367 | <v-flex xs12 sm12> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs4 class="pt-4 subheading"> | 369 | <v-flex xs4 class="pt-4 subheading"> |
| 370 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 370 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 371 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> | 371 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | <v-flex xs8 class="ml-3"> | 373 | <v-flex xs8 class="ml-3"> |
| 374 | <v-text-field | 374 | <v-text-field |
| 375 | label="Select Image" | 375 | label="Select Image" |
| 376 | @click="pickFile" | 376 | @click="pickFile" |
| 377 | v-model="imageName" | 377 | v-model="imageName" |
| 378 | append-icon="attach_file" | 378 | append-icon="attach_file" |
| 379 | ></v-text-field> | 379 | ></v-text-field> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | <v-layout> | 384 | <v-layout> |
| 385 | <v-flex xs12 sm12> | 385 | <v-flex xs12 sm12> |
| 386 | <v-layout class="right"> | 386 | <v-layout class="right"> |
| 387 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 387 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | </v-form> | 391 | </v-form> |
| 392 | </v-flex> | 392 | </v-flex> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | </v-layout> | 394 | </v-layout> |
| 395 | </v-container> | 395 | </v-container> |
| 396 | </v-card> | 396 | </v-card> |
| 397 | </v-dialog> | 397 | </v-dialog> |
| 398 | <v-snackbar | 398 | <v-snackbar |
| 399 | :timeout="timeout" | 399 | :timeout="timeout" |
| 400 | :top="y === 'top'" | 400 | :top="y === 'top'" |
| 401 | :right="x === 'right'" | 401 | :right="x === 'right'" |
| 402 | :vertical="mode === 'vertical'" | 402 | :vertical="mode === 'vertical'" |
| 403 | v-model="snackbar" | 403 | v-model="snackbar" |
| 404 | :color="color" | 404 | :color="color" |
| 405 | >{{ text }}</v-snackbar> | 405 | >{{ text }}</v-snackbar> |
| 406 | <div class="loader" v-if="showLoader"> | 406 | <div class="loader" v-if="showLoader"> |
| 407 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 407 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 408 | </div> | 408 | </div> |
| 409 | </v-container> | 409 | </v-container> |
| 410 | </template> | 410 | </template> |
| 411 | 411 | ||
| 412 | <script> | 412 | <script> |
| 413 | import http from "@/Services/http.js"; | 413 | import http from "@/Services/http.js"; |
| 414 | import moment from "moment"; | 414 | import moment from "moment"; |
| 415 | import countryList from "@/script/country.js"; | 415 | import countryList from "@/script/country.js"; |
| 416 | import parent from "@/script/parents.js"; | 416 | import parent from "@/script/parents.js"; |
| 417 | 417 | ||
| 418 | export default { | 418 | export default { |
| 419 | data: () => ({ | 419 | data: () => ({ |
| 420 | showNext: false, | 420 | showNext: false, |
| 421 | snackbar: false, | 421 | snackbar: false, |
| 422 | y: "top", | 422 | y: "top", |
| 423 | x: "right", | 423 | x: "right", |
| 424 | role: "", | 424 | role: "", |
| 425 | mode: "", | 425 | mode: "", |
| 426 | append: "", | 426 | append: "", |
| 427 | timeout: 3000, | 427 | timeout: 3000, |
| 428 | text: "", | 428 | text: "", |
| 429 | show: true, | 429 | show: true, |
| 430 | color: "", | 430 | color: "", |
| 431 | showSearch: false, | 431 | showSearch: false, |
| 432 | showLoader: false, | 432 | showLoader: false, |
| 433 | loading: false, | 433 | loading: false, |
| 434 | editLoading: false, | 434 | editLoading: false, |
| 435 | date: null, | 435 | date: null, |
| 436 | search: "", | 436 | search: "", |
| 437 | menu: false, | 437 | menu: false, |
| 438 | menu1: false, | 438 | menu1: false, |
| 439 | editStudentDialog: false, | 439 | editStudentDialog: false, |
| 440 | profileStudentDialog: false, | 440 | profileStudentDialog: false, |
| 441 | addCourseDialog: false, | 441 | addCourseDialog: false, |
| 442 | valid: true, | 442 | valid: true, |
| 443 | addclass: [], | 443 | addclass: [], |
| 444 | addSection: [], | 444 | addSection: [], |
| 445 | pagination: { | 445 | pagination: { |
| 446 | rowsPerPage: 10, | 446 | rowsPerPage: 10, |
| 447 | }, | 447 | }, |
| 448 | imageData: {}, | 448 | imageData: {}, |
| 449 | imageName: "", | 449 | imageName: "", |
| 450 | imageUrl: "", | 450 | imageUrl: "", |
| 451 | imageFile: "", | 451 | imageFile: "", |
| 452 | editImageName: "", | 452 | editImageName: "", |
| 453 | editImageUrl: "", | 453 | editImageUrl: "", |
| 454 | courseRules: [(v) => !!v || " Course Name is required"], | 454 | courseRules: [(v) => !!v || " Course Name is required"], |
| 455 | classRules: [(v) => !!v || " Class Name is required"], | 455 | classRules: [(v) => !!v || " Class Name is required"], |
| 456 | sectionRules: [(v) => !!v || " Section Name is required"], | 456 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 457 | errorMessages: "", | 457 | errorMessages: "", |
| 458 | headers: [ | 458 | headers: [ |
| 459 | { | 459 | { |
| 460 | text: "Image", | 460 | text: "Image", |
| 461 | value: "courseImageUrl", | 461 | value: "courseImageUrl", |
| 462 | sortable: false, | 462 | sortable: false, |
| 463 | align: "center", | 463 | align: "center", |
| 464 | }, | 464 | }, |
| 465 | { | 465 | { |
| 466 | text: "Course", | 466 | text: "Course", |
| 467 | value: "course", | 467 | value: "course", |
| 468 | sortable: false, | 468 | sortable: false, |
| 469 | align: "center", | 469 | align: "center", |
| 470 | }, | 470 | }, |
| 471 | { text: "Action", value: "", sortable: false, align: "center" }, | 471 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 472 | ], | 472 | ], |
| 473 | courseData: [], | 473 | courseData: [], |
| 474 | editedIndex: -1, | 474 | editedIndex: -1, |
| 475 | addCourses: {}, | 475 | addCourses: {}, |
| 476 | selectStudents: { | 476 | selectStudents: { |
| 477 | select: "", | 477 | select: "", |
| 478 | selectSection: "", | 478 | selectSection: "", |
| 479 | }, | 479 | }, |
| 480 | editedItem: {}, | 480 | editedItem: {}, |
| 481 | }), | 481 | }), |
| 482 | watch: { | 482 | watch: { |
| 483 | addCourseDialog: function (val) { | 483 | addCourseDialog: function (val) { |
| 484 | if (!val) { | 484 | if (!val) { |
| 485 | this.addCourses = []; | 485 | this.addCourses = []; |
| 486 | this.imageName = ""; | 486 | this.imageName = ""; |
| 487 | this.imageFile = ""; | 487 | this.imageFile = ""; |
| 488 | this.imageUrl = ""; | 488 | this.imageUrl = ""; |
| 489 | } | 489 | } |
| 490 | }, | 490 | }, |
| 491 | }, | 491 | }, |
| 492 | methods: { | 492 | methods: { |
| 493 | getCourses() { | 493 | getCourses() { |
| 494 | this.showLoader = true; | 494 | this.showLoader = true; |
| 495 | http() | 495 | http() |
| 496 | .get("/getCourseesList", { | 496 | .get("/getCourseesList", { |
| 497 | params: { | 497 | params: { |
| 498 | classId: this.selectStudents.select, | 498 | classId: this.selectStudents.select, |
| 499 | }, | 499 | }, |
| 500 | }) | 500 | }) |
| 501 | .then((response) => { | 501 | .then((response) => { |
| 502 | this.courseData = response.data.data; | 502 | this.courseData = response.data.data; |
| 503 | this.showLoader = false; | 503 | this.showLoader = false; |
| 504 | }) | 504 | }) |
| 505 | .catch((err) => { | 505 | .catch((err) => { |
| 506 | console.log("err====>", err); | 506 | console.log("err====>", err); |
| 507 | this.showLoader = false; | 507 | this.showLoader = false; |
| 508 | }); | 508 | }); |
| 509 | }, | 509 | }, |
| 510 | getSections(_id) { | 510 | getSections(_id) { |
| 511 | var token = this.$store.state.token; | 511 | var token = this.$store.state.token; |
| 512 | this.showLoader = true; | 512 | this.showLoader = true; |
| 513 | http() | 513 | http() |
| 514 | .get( | 514 | .get( |
| 515 | "/getSectionsList", | 515 | "/getSectionsList", |
| 516 | { params: { classId: _id } }, | 516 | { params: { classId: _id } }, |
| 517 | { | 517 | { |
| 518 | headers: { Authorization: "Bearer " + token }, | 518 | headers: { Authorization: "Bearer " + token }, |
| 519 | } | 519 | } |
| 520 | ) | 520 | ) |
| 521 | .then((response) => { | 521 | .then((response) => { |
| 522 | this.addSection = response.data.data; | 522 | this.addSection = response.data.data; |
| 523 | this.showLoader = false; | 523 | this.showLoader = false; |
| 524 | }) | 524 | }) |
| 525 | .catch((err) => { | 525 | .catch((err) => { |
| 526 | this.showLoader = false; | 526 | this.showLoader = false; |
| 527 | }); | 527 | }); |
| 528 | }, | 528 | }, |
| 529 | pickFile() { | 529 | pickFile() { |
| 530 | this.$refs.image.click(); | 530 | this.$refs.image.click(); |
| 531 | }, | 531 | }, |
| 532 | pickEditFile() { | 532 | pickEditFile() { |
| 533 | this.$refs.editDataImage.click(); | 533 | this.$refs.editDataImage.click(); |
| 534 | }, | 534 | }, |
| 535 | dates: function (date) { | 535 | dates: function (date) { |
| 536 | return moment(date).format("MMMM DD, YYYY"); | 536 | return moment(date).format("MMMM DD, YYYY"); |
| 537 | return date; | 537 | return date; |
| 538 | }, | 538 | }, |
| 539 | onFilePicked(e) { | 539 | onFilePicked(e) { |
| 540 | // console.log(e) | 540 | // console.log(e) |
| 541 | const files = e.target.files; | 541 | const files = e.target.files; |
| 542 | this.imageData.upload = e.target.files[0]; | 542 | this.imageData.upload = e.target.files[0]; |
| 543 | if (files[0] !== undefined) { | 543 | if (files[0] !== undefined) { |
| 544 | this.imageName = files[0].name; | 544 | this.imageName = files[0].name; |
| 545 | if (this.imageName.lastIndexOf(".") <= 0) { | 545 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 546 | return; | 546 | return; |
| 547 | } | 547 | } |
| 548 | const fr = new FileReader(); | 548 | const fr = new FileReader(); |
| 549 | fr.readAsDataURL(files[0]); | 549 | fr.readAsDataURL(files[0]); |
| 550 | fr.addEventListener("load", () => { | 550 | fr.addEventListener("load", () => { |
| 551 | this.imageUrl = fr.result; | 551 | this.imageUrl = fr.result; |
| 552 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 552 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 553 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 553 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 554 | }); | 554 | }); |
| 555 | } else { | 555 | } else { |
| 556 | this.imageName = ""; | 556 | this.imageName = ""; |
| 557 | this.imageFile = ""; | 557 | this.imageFile = ""; |
| 558 | this.imageUrl = ""; | 558 | this.imageUrl = ""; |
| 559 | } | 559 | } |
| 560 | }, | 560 | }, |
| 561 | onEditFilePicked(e) { | 561 | onEditFilePicked(e) { |
| 562 | console.log(e); | 562 | console.log(e); |
| 563 | const files = e.target.files; | 563 | const files = e.target.files; |
| 564 | if (files[0] !== undefined) { | 564 | if (files[0] !== undefined) { |
| 565 | this.editImageName = files[0].name; | 565 | this.editImageName = files[0].name; |
| 566 | console.log("this.editImageName", this.editImageName); | 566 | console.log("this.editImageName", this.editImageName); |
| 567 | 567 | ||
| 568 | if (this.editImageName.lastIndexOf(".") <= 0) { | 568 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 569 | return; | 569 | return; |
| 570 | } | 570 | } |
| 571 | const fr = new FileReader(); | 571 | const fr = new FileReader(); |
| 572 | fr.readAsDataURL(files[0]); | 572 | fr.readAsDataURL(files[0]); |
| 573 | fr.addEventListener("load", () => { | 573 | fr.addEventListener("load", () => { |
| 574 | this.editImageUrl = fr.result; | 574 | this.editImageUrl = fr.result; |
| 575 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 575 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 576 | }); | 576 | }); |
| 577 | } else { | 577 | } else { |
| 578 | this.editImageName = ""; | 578 | this.editImageName = ""; |
| 579 | this.editiImageFile = ""; | 579 | this.editiImageFile = ""; |
| 580 | } | 580 | } |
| 581 | }, | 581 | }, |
| 582 | editItem(item) { | 582 | editItem(item) { |
| 583 | this.editedIndex = this.courseData.indexOf(item); | 583 | this.editedIndex = this.courseData.indexOf(item); |
| 584 | this.editedItem = Object.assign({}, item); | 584 | this.editedItem = Object.assign({}, item); |
| 585 | this.editStudentDialog = true; | 585 | this.editStudentDialog = true; |
| 586 | }, | 586 | }, |
| 587 | profile(item) { | 587 | profile(item) { |
| 588 | this.editedIndex = this.courseData.indexOf(item); | 588 | this.editedIndex = this.courseData.indexOf(item); |
| 589 | this.editedItem = Object.assign({}, item); | 589 | this.editedItem = Object.assign({}, item); |
| 590 | this.profileStudentDialog = true; | 590 | this.profileStudentDialog = true; |
| 591 | }, | 591 | }, |
| 592 | deleteItem(item) { | 592 | deleteItem(item) { |
| 593 | let deleteCourse = { | 593 | let deleteCourse = { |
| 594 | courseId: item._id, | 594 | courseId: item._id, |
| 595 | }; | 595 | }; |
| 596 | http() | 596 | http() |
| 597 | .delete( | 597 | .delete( |
| 598 | "/deleteCourse", | 598 | "/deleteCourse", |
| 599 | confirm("Are you sure you want to delete this?") && { | 599 | confirm("Are you sure you want to delete this?") && { |
| 600 | params: deleteCourse, | 600 | params: deleteCourse, |
| 601 | } | 601 | } |
| 602 | ) | 602 | ) |
| 603 | .then((response) => { | 603 | .then((response) => { |
| 604 | this.snackbar = true; | 604 | this.snackbar = true; |
| 605 | this.text = response.data.message; | 605 | this.text = response.data.message; |
| 606 | this.color = "green"; | 606 | this.color = "green"; |
| 607 | this.getCourses(); | 607 | this.getCourses(); |
| 608 | }) | 608 | }) |
| 609 | .catch((error) => { | 609 | .catch((error) => { |
| 610 | this.snackbar = true; | 610 | this.snackbar = true; |
| 611 | this.text = error.response.data.message; | 611 | this.text = error.response.data.message; |
| 612 | this.color = "error"; | 612 | this.color = "error"; |
| 613 | }); | 613 | }); |
| 614 | }, | 614 | }, |
| 615 | close() { | 615 | close() { |
| 616 | this.editStudentDialog = false; | 616 | this.editStudentDialog = false; |
| 617 | }, | 617 | }, |
| 618 | closeStudentProfile() { | 618 | closeStudentProfile() { |
| 619 | this.profileStudentDialog = false; | 619 | this.profileStudentDialog = false; |
| 620 | }, | 620 | }, |
| 621 | closeAddCourseModel() { | 621 | closeAddCourseModel() { |
| 622 | this.addCourseDialog = false; | 622 | this.addCourseDialog = false; |
| 623 | // this.courseData = []; | 623 | // this.courseData = []; |
| 624 | this.addCourses = []; | 624 | this.addCourses = []; |
| 625 | this.imageName = ""; | 625 | this.imageName = ""; |
| 626 | this.imageFile = ""; | 626 | this.imageFile = ""; |
| 627 | this.imageUrl = ""; | 627 | this.imageUrl = ""; |
| 628 | }, | 628 | }, |
| 629 | submit() { | 629 | submit() { |
| 630 | if (this.$refs.form.validate()) { | 630 | if (this.$refs.form.validate()) { |
| 631 | let addCourse = { | 631 | let addCourse = { |
| 632 | classId: this.addCourses.select, | 632 | classId: this.addCourses.select, |
| 633 | sectionId: this.addCourses.selectSection, | 633 | sectionId: this.addCourses.selectSection, |
| 634 | courseName: this.addCourses.courseName, | 634 | courseName: this.addCourses.courseName, |
| 635 | }; | 635 | }; |
| 636 | if (this.imageUrl) { | 636 | if (this.imageUrl) { |
| 637 | var str = this.imageUrl; | 637 | var str = this.imageUrl; |
| 638 | const [baseUrl, imageUrl] = str.split(/,/); | 638 | const [baseUrl, imageUrl] = str.split(/,/); |
| 639 | addCourse.upload = imageUrl; | 639 | addCourse.upload = imageUrl; |
| 640 | } | 640 | } |
| 641 | this.loading = true; | 641 | this.loading = true; |
| 642 | http() | 642 | http() |
| 643 | .post("/createCourse", addCourse) | 643 | .post("/createCourse", addCourse) |
| 644 | .then((response) => { | 644 | .then((response) => { |
| 645 | this.snackbar = true; | 645 | this.snackbar = true; |
| 646 | this.text = "New Course added successfully"; | 646 | this.text = "New Course added successfully"; |
| 647 | this.color = "green"; | 647 | this.color = "green"; |
| 648 | this.addCourseDialog = false; | 648 | this.addCourseDialog = false; |
| 649 | this.clear(); | 649 | this.clear(); |
| 650 | this.loading = false; | 650 | this.loading = false; |
| 651 | }) | 651 | }) |
| 652 | .catch((error) => { | 652 | .catch((error) => { |
| 653 | this.snackbar = true; | 653 | this.snackbar = true; |
| 654 | this.text = error.response.data.message; | 654 | this.text = error.response.data.message; |
| 655 | this.color = "error"; | 655 | this.color = "error"; |
| 656 | this.loading = false; | 656 | this.loading = false; |
| 657 | }); | 657 | }); |
| 658 | } | 658 | } |
| 659 | }, | 659 | }, |
| 660 | clear() { | 660 | clear() { |
| 661 | this.$refs.form.reset(); | 661 | this.$refs.form.reset(); |
| 662 | this.imageUrl = ""; | 662 | this.imageUrl = ""; |
| 663 | }, | 663 | }, |
| 664 | save() { | 664 | save() { |
| 665 | let editCourse = { | 665 | let editCourse = { |
| 666 | courseId: this.editedItem._id, | 666 | courseId: this.editedItem._id, |
| 667 | courseName: this.editedItem.courseName, | 667 | courseName: this.editedItem.courseName, |
| 668 | classId: this.editedItem.select, | 668 | classId: this.editedItem.select, |
| 669 | }; | 669 | }; |
| 670 | if (this.editImageUrl) { | 670 | if (this.editImageUrl) { |
| 671 | var str = this.editImageUrl; | 671 | var str = this.editImageUrl; |
| 672 | const [baseUrl, editImageUrl] = str.split(/,/); | 672 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 673 | editCourse.upload = editImageUrl; | 673 | editCourse.upload = editImageUrl; |
| 674 | } | 674 | } |
| 675 | this.editLoading = true; | 675 | this.editLoading = true; |
| 676 | http() | 676 | http() |
| 677 | .put("/updateCourse", editCourse) | 677 | .put("/updateCourse", editCourse) |
| 678 | .then((response) => { | 678 | .then((response) => { |
| 679 | this.snackbar = true; | 679 | this.snackbar = true; |
| 680 | this.text = response.data.message; | 680 | this.text = response.data.message; |
| 681 | this.color = "green"; | 681 | this.color = "green"; |
| 682 | this.imageUrl = ""; | 682 | this.imageUrl = ""; |
| 683 | this.getCourses(); | 683 | this.getCourses(); |
| 684 | this.close(); | 684 | this.close(); |
| 685 | this.editLoading = false; | 685 | this.editLoading = false; |
| 686 | }) | 686 | }) |
| 687 | .catch((error) => { | 687 | .catch((error) => { |
| 688 | this.snackbar = true; | 688 | this.snackbar = true; |
| 689 | this.text = error.response.data.statusText; | 689 | this.text = error.response.data.statusText; |
| 690 | this.color = "error"; | 690 | this.color = "error"; |
| 691 | this.editLoading = false; | 691 | this.editLoading = false; |
| 692 | }); | 692 | }); |
| 693 | }, | 693 | }, |
| 694 | displaySearch() { | 694 | displaySearch() { |
| 695 | this.show = false; | 695 | this.show = false; |
| 696 | this.showSearch = true; | 696 | this.showSearch = true; |
| 697 | }, | 697 | }, |
| 698 | closeSearch() { | 698 | closeSearch() { |
| 699 | this.showSearch = false; | 699 | this.showSearch = false; |
| 700 | this.show = true; | 700 | this.show = true; |
| 701 | this.search = ""; | 701 | this.search = ""; |
| 702 | }, | 702 | }, |
| 703 | }, | 703 | }, |
| 704 | mounted() { | 704 | mounted() { |
| 705 | var token = this.$store.state.token; | 705 | var token = this.$store.state.token; |
| 706 | http() | 706 | http() |
| 707 | .get("/getClassesList", { | 707 | .get("/getClassesList", { |
| 708 | headers: { Authorization: "Bearer " + token }, | 708 | headers: { Authorization: "Bearer " + token }, |
| 709 | }) | 709 | }) |
| 710 | .then((response) => { | 710 | .then((response) => { |
| 711 | this.addclass = response.data.data; | 711 | this.addclass = response.data.data; |
| 712 | }) | 712 | }) |
| 713 | .catch((error) => { | 713 | .catch((error) => { |
| 714 | this.showLoader = false; | 714 | this.showLoader = false; |
| 715 | if (error.response.status === 401) { | 715 | if (error.response.status === 401) { |
| 716 | this.$router.replace({ path: "/" }); | 716 | this.$router.replace({ path: "/" }); |
| 717 | this.$store.dispatch("setToken", null); | 717 | this.$store.dispatch("setToken", null); |
| 718 | this.$store.dispatch("Id", null); | 718 | this.$store.dispatch("Id", null); |
| 719 | this.$store.dispatch("Role", null); | 719 | this.$store.dispatch("Role", null); |
| 720 | } | 720 | } |
| 721 | }); | 721 | }); |
| 722 | }, | 722 | }, |
| 723 | }; | 723 | }; |
| 724 | </script> | 724 | </script> |
| 725 | <style scoped> | 725 | <style scoped> |
| 726 | .active { | 726 | .active { |
| 727 | background-color: gray; | 727 | background-color: gray; |
| 728 | color: white !important; | 728 | color: white !important; |
| 729 | } | 729 | } |
| 730 | .activebtn { | 730 | .activebtn { |
| 731 | color: black !important; | 731 | color: black !important; |
| 732 | } | 732 | } |
| 733 | </style> | 733 | </style> |
src/pages/Course/courseDetail.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Chapter detail ****** --> | 3 | <!-- ****** Edit Chapter detail ****** --> |
| 4 | <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable> | 4 | <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent> |
| 5 | <v-card class="card-style pa-2" dark> | 5 | <v-card 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 Chapter</label> | 8 | <label class="title text-xs-center">Edit Chapter</label> |
| 9 | <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout wrap> | 13 | <v-layout wrap> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Select Class:</label> | 17 | <label class="right">Select Class:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm6 class="ml-3"> | 19 | <v-flex xs8 sm6 class="ml-3"> |
| 20 | <v-select | 20 | <v-select |
| 21 | small | 21 | small |
| 22 | :items="addclass" | 22 | :items="addclass" |
| 23 | label="Select Class" | 23 | label="Select Class" |
| 24 | v-model="editedCourse.classId" | 24 | v-model="editedCourse.classId" |
| 25 | item-text="classNum" | 25 | item-text="classNum" |
| 26 | item-value="_id" | 26 | item-value="_id" |
| 27 | name="Select Class" | 27 | name="Select Class" |
| 28 | @change="getCourses(editedCourse.classId)" | 28 | @change="getCourses(editedCourse.classId)" |
| 29 | class="mr-2" | 29 | class="mr-2" |
| 30 | required | 30 | required |
| 31 | ></v-select> | 31 | ></v-select> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs12 sm12> | 35 | <v-flex xs12 sm12> |
| 36 | <v-layout> | 36 | <v-layout> |
| 37 | <v-flex xs4 class="pt-4 subheading"> | 37 | <v-flex xs4 class="pt-4 subheading"> |
| 38 | <label class="right">Select Course:</label> | 38 | <label class="right">Select Course:</label> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex xs8 sm6 class="ml-3"> | 40 | <v-flex xs8 sm6 class="ml-3"> |
| 41 | <v-select | 41 | <v-select |
| 42 | :items="courseData" | 42 | :items="courseData" |
| 43 | label="Select Course" | 43 | label="Select Course" |
| 44 | v-model="editedCourse.courseId" | 44 | v-model="editedCourse.courseId" |
| 45 | item-text="courseName" | 45 | item-text="courseName" |
| 46 | item-value="_id" | 46 | item-value="_id" |
| 47 | required | 47 | required |
| 48 | class="ml-2" | 48 | class="ml-2" |
| 49 | ></v-select> | 49 | ></v-select> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | </v-layout> | 51 | </v-layout> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | <v-layout> | 54 | <v-layout> |
| 55 | <v-flex xs12 sm12 md11 lg11> | 55 | <v-flex xs12 sm12 md11 lg11> |
| 56 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 56 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 57 | <v-spacer></v-spacer> | 57 | <v-spacer></v-spacer> |
| 58 | <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> | 58 | <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> |
| 59 | </v-card-actions> | 59 | </v-card-actions> |
| 60 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 60 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 61 | <v-spacer></v-spacer> | 61 | <v-spacer></v-spacer> |
| 62 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 62 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | </v-card-actions> | 64 | </v-card-actions> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | </v-layout> | 66 | </v-layout> |
| 67 | </v-card-text> | 67 | </v-card-text> |
| 68 | </v-card> | 68 | </v-card> |
| 69 | </v-dialog> | 69 | </v-dialog> |
| 70 | <!-- DIALOG BOX - EDIT CHAPTER--> | 70 | <!-- DIALOG BOX - EDIT CHAPTER--> |
| 71 | <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable> | 71 | <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent> |
| 72 | <v-card class="card-style pa-2" dark> | 72 | <v-card class="card-style pa-2" dark> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs12> | 74 | <v-flex xs12> |
| 75 | <label class="title text-xs-center">Edit Chapter</label> | 75 | <label class="title text-xs-center">Edit Chapter</label> |
| 76 | <v-icon | 76 | <v-icon |
| 77 | size="24" | 77 | size="24" |
| 78 | class="right" | 78 | class="right" |
| 79 | @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " | 79 | @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " |
| 80 | >cancel</v-icon> | 80 | >cancel</v-icon> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | <v-card-text> | 83 | <v-card-text> |
| 84 | <v-layout wrap> | 84 | <v-layout wrap> |
| 85 | <!-- CHAPTER NAME --> | 85 | <!-- CHAPTER NAME --> |
| 86 | <v-flex xs12 sm12> | 86 | <v-flex xs12 sm12> |
| 87 | <v-layout> | 87 | <v-layout> |
| 88 | <v-flex xs4 class="pt-4 subheading"> | 88 | <v-flex xs4 class="pt-4 subheading"> |
| 89 | <label class="right">Chapter Name:</label> | 89 | <label class="right">Chapter Name:</label> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs8 sm6 class="ml-3"> | 91 | <v-flex xs8 sm6 class="ml-3"> |
| 92 | <v-text-field | 92 | <v-text-field |
| 93 | v-model="editChapter.chapterName" | 93 | v-model="editChapter.chapterName" |
| 94 | placeholder="fill your Title" | 94 | placeholder="fill your Title" |
| 95 | type="text" | 95 | type="text" |
| 96 | required | 96 | required |
| 97 | ></v-text-field> | 97 | ></v-text-field> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | <!-- DESCRIPTION --> | 101 | <!-- DESCRIPTION --> |
| 102 | <v-flex xs12 sm12> | 102 | <v-flex xs12 sm12> |
| 103 | <v-layout> | 103 | <v-layout> |
| 104 | <v-flex xs4 class="pt-4 subheading"> | 104 | <v-flex xs4 class="pt-4 subheading"> |
| 105 | <label class="right">Description:</label> | 105 | <label class="right">Description:</label> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs8 sm6 class="ml-3"> | 107 | <v-flex xs8 sm6 class="ml-3"> |
| 108 | <v-text-field | 108 | <v-text-field |
| 109 | placeholder="fill your Description" | 109 | placeholder="fill your Description" |
| 110 | v-model="editChapter.description" | 110 | v-model="editChapter.description" |
| 111 | type="text" | 111 | type="text" |
| 112 | required | 112 | required |
| 113 | ></v-text-field> | 113 | ></v-text-field> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | <!-- UPLOAD PPT --> | 117 | <!-- UPLOAD PPT --> |
| 118 | <!-- <v-flex xs12> | 118 | <!-- <v-flex xs12> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex xs4 class="pt-4 subheading"> | 120 | <v-flex xs4 class="pt-4 subheading"> |
| 121 | <label class="right">Upload PPT:</label> | 121 | <label class="right">Upload PPT:</label> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs8 sm6 class="ml-3"> | 123 | <v-flex xs8 sm6 class="ml-3"> |
| 124 | <UploadFiles | 124 | <UploadFiles |
| 125 | @fileSelected="fileSelected($event,'uploadPPT')" | 125 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 126 | label="Add PPT" | 126 | label="Add PPT" |
| 127 | reference="EditPpt" | 127 | reference="EditPpt" |
| 128 | id="editPptInput" | 128 | id="editPptInput" |
| 129 | :trigger="trigger" | 129 | :trigger="trigger" |
| 130 | ></UploadFiles> | 130 | ></UploadFiles> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex>--> | 133 | </v-flex>--> |
| 134 | <!-- UPLOAD PDF --> | 134 | <!-- UPLOAD PDF --> |
| 135 | <v-flex xs12> | 135 | <v-flex xs12> |
| 136 | <v-layout> | 136 | <v-layout> |
| 137 | <v-flex xs4 class="pt-4 subheading"> | 137 | <v-flex xs4 class="pt-4 subheading"> |
| 138 | <label class="right">Upload PDF:</label> | 138 | <label class="right">Upload PDF:</label> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs8 sm6 class="ml-3"> | 140 | <v-flex xs8 sm6 class="ml-3"> |
| 141 | <UploadPdf | 141 | <UploadPdf |
| 142 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 142 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 143 | label="Add PDF" | 143 | label="Add PDF" |
| 144 | reference="editPdf" | 144 | reference="editPdf" |
| 145 | id="editPdfInput" | 145 | id="editPdfInput" |
| 146 | :emptyPdf="emptyPdf" | 146 | :emptyPdf="emptyPdf" |
| 147 | ></UploadPdf> | 147 | ></UploadPdf> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> | 152 | <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> |
| 153 | <v-layout | 153 | <v-layout |
| 154 | wrap | 154 | wrap |
| 155 | v-for="(editChapterPoint,index) in editChapter.chapterPoints" | 155 | v-for="(editChapterPoint,index) in editChapter.chapterPoints" |
| 156 | :key="index" | 156 | :key="index" |
| 157 | > | 157 | > |
| 158 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 158 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 159 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> | 159 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> |
| 160 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> | 160 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> | 163 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> |
| 164 | <v-text-field :value="editChapterPoint" type="text" required></v-text-field> | 164 | <v-text-field :value="editChapterPoint" type="text" required></v-text-field> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs2 class="pt-4"> | 166 | <v-flex xs2 class="pt-4"> |
| 167 | <v-icon @click="deleteUrl(index)">cancel</v-icon> | 167 | <v-icon @click="deleteUrl(index)">cancel</v-icon> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-layout> | 169 | </v-layout> |
| 170 | </v-layout> | 170 | </v-layout> |
| 171 | </v-flex>--> | 171 | </v-flex>--> |
| 172 | <v-flex xs12> | 172 | <v-flex xs12> |
| 173 | <div v-for="(updateImage,index) in updates" :key="index"> | 173 | <div v-for="(updateImage,index) in updates" :key="index"> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 175 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 176 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> | 176 | <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> |
| 177 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> | 177 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-layout> | 179 | <v-layout> |
| 180 | <v-flex xs10 sm12 md9 class="ml-3"> | 180 | <v-flex xs10 sm12 md9 class="ml-3"> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="updateImage.value" | 182 | v-model="updateImage.value" |
| 183 | placeholder="Upload new Chapter Points" | 183 | placeholder="Upload new Chapter Points" |
| 184 | required | 184 | required |
| 185 | ></v-text-field> | 185 | ></v-text-field> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | <v-flex xs2 class="pt-4"> | 187 | <v-flex xs2 class="pt-4"> |
| 188 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> | 188 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> |
| 189 | <v-icon @click="update">add_circle</v-icon> | 189 | <v-icon @click="update">add_circle</v-icon> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | </v-layout> | 191 | </v-layout> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | </div> | 193 | </div> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | <v-layout> | 195 | <v-layout> |
| 196 | <v-flex xs12 sm12 md11 lg11> | 196 | <v-flex xs12 sm12 md11 lg11> |
| 197 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 197 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 198 | <v-spacer></v-spacer> | 198 | <v-spacer></v-spacer> |
| 199 | <v-btn | 199 | <v-btn |
| 200 | round | 200 | round |
| 201 | dark | 201 | dark |
| 202 | @click="saveChapter" | 202 | @click="saveChapter" |
| 203 | :loading="editLoading" | 203 | :loading="editLoading" |
| 204 | class="add-button mr-4" | 204 | class="add-button mr-4" |
| 205 | >Save</v-btn> | 205 | >Save</v-btn> |
| 206 | </v-card-actions> | 206 | </v-card-actions> |
| 207 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 207 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 208 | <v-spacer></v-spacer> | 208 | <v-spacer></v-spacer> |
| 209 | <v-btn | 209 | <v-btn |
| 210 | round | 210 | round |
| 211 | dark | 211 | dark |
| 212 | @click="saveChapter" | 212 | @click="saveChapter" |
| 213 | :loading="editLoading" | 213 | :loading="editLoading" |
| 214 | class="add-button" | 214 | class="add-button" |
| 215 | >Save</v-btn> | 215 | >Save</v-btn> |
| 216 | <v-spacer></v-spacer> | 216 | <v-spacer></v-spacer> |
| 217 | </v-card-actions> | 217 | </v-card-actions> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | </v-layout> | 219 | </v-layout> |
| 220 | </v-card-text> | 220 | </v-card-text> |
| 221 | </v-card> | 221 | </v-card> |
| 222 | </v-dialog> | 222 | </v-dialog> |
| 223 | <!-- ADD NEW CHAPTER--> | 223 | <!-- ADD NEW CHAPTER--> |
| 224 | <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable> | 224 | <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent> |
| 225 | <v-card class="card-style pa-2" dark> | 225 | <v-card class="card-style pa-2" dark> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs12> | 227 | <v-flex xs12> |
| 228 | <label class="title text-xs-center">Add Chapter Detail</label> | 228 | <label class="title text-xs-center">Add Chapter Detail</label> |
| 229 | <v-icon | 229 | <v-icon |
| 230 | size="24" | 230 | size="24" |
| 231 | class="right" | 231 | class="right" |
| 232 | @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " | 232 | @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " |
| 233 | >cancel</v-icon> | 233 | >cancel</v-icon> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | <v-card-text> | 236 | <v-card-text> |
| 237 | <v-layout wrap> | 237 | <v-layout wrap> |
| 238 | <v-flex xs12 sm12> | 238 | <v-flex xs12 sm12> |
| 239 | <v-layout> | 239 | <v-layout> |
| 240 | <v-flex xs4 class="pt-4 subheading"> | 240 | <v-flex xs4 class="pt-4 subheading"> |
| 241 | <label class="right">Chapter Name:</label> | 241 | <label class="right">Chapter Name:</label> |
| 242 | </v-flex> | 242 | </v-flex> |
| 243 | <v-flex xs8 sm6 class="ml-3"> | 243 | <v-flex xs8 sm6 class="ml-3"> |
| 244 | <v-text-field | 244 | <v-text-field |
| 245 | v-model="addChapterItem.chapterName" | 245 | v-model="addChapterItem.chapterName" |
| 246 | placeholder="fill your Title" | 246 | placeholder="fill your Title" |
| 247 | type="text" | 247 | type="text" |
| 248 | required | 248 | required |
| 249 | ></v-text-field> | 249 | ></v-text-field> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs12 sm12> | 253 | <v-flex xs12 sm12> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs4 class="pt-4 subheading"> | 255 | <v-flex xs4 class="pt-4 subheading"> |
| 256 | <label class="right">Description:</label> | 256 | <label class="right">Description:</label> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | <v-flex xs8 sm6 class="ml-3"> | 258 | <v-flex xs8 sm6 class="ml-3"> |
| 259 | <v-text-field | 259 | <v-text-field |
| 260 | placeholder="fill your Description" | 260 | placeholder="fill your Description" |
| 261 | v-model="addChapterItem.description" | 261 | v-model="addChapterItem.description" |
| 262 | type="text" | 262 | type="text" |
| 263 | required | 263 | required |
| 264 | ></v-text-field> | 264 | ></v-text-field> |
| 265 | </v-flex> | 265 | </v-flex> |
| 266 | </v-layout> | 266 | </v-layout> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | <!-- UPLOAD PPT --> | 268 | <!-- UPLOAD PPT --> |
| 269 | <!-- <v-flex xs12> | 269 | <!-- <v-flex xs12> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs4 class="pt-4 subheading"> | 271 | <v-flex xs4 class="pt-4 subheading"> |
| 272 | <label class="right">Upload PPT:</label> | 272 | <label class="right">Upload PPT:</label> |
| 273 | </v-flex> | 273 | </v-flex> |
| 274 | <v-flex xs8 sm6 class="ml-3"> | 274 | <v-flex xs8 sm6 class="ml-3"> |
| 275 | <UploadFiles | 275 | <UploadFiles |
| 276 | @fileSelected="fileSelected($event,'uploadPPT')" | 276 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 277 | label="Add PPT" | 277 | label="Add PPT" |
| 278 | reference="newChapterPpt" | 278 | reference="newChapterPpt" |
| 279 | id="newChapterPptInput" | 279 | id="newChapterPptInput" |
| 280 | :trigger="trigger" | 280 | :trigger="trigger" |
| 281 | ></UploadFiles> | 281 | ></UploadFiles> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | </v-flex>--> | 284 | </v-flex>--> |
| 285 | <!-- UPLOAD PDF --> | 285 | <!-- UPLOAD PDF --> |
| 286 | <v-flex xs12> | 286 | <v-flex xs12> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs4 class="pt-4 subheading"> | 288 | <v-flex xs4 class="pt-4 subheading"> |
| 289 | <label class="right">Upload PDF:</label> | 289 | <label class="right">Upload PDF:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs8 sm6 class="ml-3"> | 291 | <v-flex xs8 sm6 class="ml-3"> |
| 292 | <UploadPdf | 292 | <UploadPdf |
| 293 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 293 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 294 | label="Add PDF" | 294 | label="Add PDF" |
| 295 | reference="newChapterPdf" | 295 | reference="newChapterPdf" |
| 296 | id="newChapterPdfInput" | 296 | id="newChapterPdfInput" |
| 297 | :emptyPdf="emptyPdf" | 297 | :emptyPdf="emptyPdf" |
| 298 | ></UploadPdf> | 298 | ></UploadPdf> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> | 304 | <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> |
| 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">Chapter Points:</label> | 307 | <label class="right">Chapter Points:</label> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs8 sm8 md6 class="ml-3"> | 309 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 310 | <v-text-field | 310 | <v-text-field |
| 311 | placeholder="fill your Chapter Points" | 311 | placeholder="fill your Chapter Points" |
| 312 | v-model="chapterPoints.value" | 312 | v-model="chapterPoints.value" |
| 313 | type="text" | 313 | type="text" |
| 314 | name="link" | 314 | name="link" |
| 315 | required | 315 | required |
| 316 | ></v-text-field> | 316 | ></v-text-field> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | <v-flex xs2 class="pt-4"> | 318 | <v-flex xs2 class="pt-4"> |
| 319 | <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> | 319 | <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> |
| 320 | <v-icon @click="addChapterPoint()">add_circle</v-icon> | 320 | <v-icon @click="addChapterPoint()">add_circle</v-icon> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | </div> | 323 | </div> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | <v-layout> | 325 | <v-layout> |
| 326 | <v-flex xs12 sm12 md11 lg11> | 326 | <v-flex xs12 sm12 md11 lg11> |
| 327 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 327 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 328 | <v-spacer></v-spacer> | 328 | <v-spacer></v-spacer> |
| 329 | <v-btn | 329 | <v-btn |
| 330 | round | 330 | round |
| 331 | dark | 331 | dark |
| 332 | @click="submitChapter" | 332 | @click="submitChapter" |
| 333 | :loading="editLoading" | 333 | :loading="editLoading" |
| 334 | class="add-button mr-4" | 334 | class="add-button mr-4" |
| 335 | >Submit</v-btn> | 335 | >Submit</v-btn> |
| 336 | </v-card-actions> | 336 | </v-card-actions> |
| 337 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 337 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 338 | <v-spacer></v-spacer> | 338 | <v-spacer></v-spacer> |
| 339 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 339 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 340 | <v-spacer></v-spacer> | 340 | <v-spacer></v-spacer> |
| 341 | </v-card-actions> | 341 | </v-card-actions> |
| 342 | </v-flex> | 342 | </v-flex> |
| 343 | </v-layout> | 343 | </v-layout> |
| 344 | </v-card-text> | 344 | </v-card-text> |
| 345 | </v-card> | 345 | </v-card> |
| 346 | </v-dialog> | 346 | </v-dialog> |
| 347 | 347 | ||
| 348 | <!-- ****** PROFILE Gallery ****** --> | 348 | <!-- ****** PROFILE Gallery ****** --> |
| 349 | 349 | ||
| 350 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> | 350 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> |
| 351 | <v-card flat class="card-style pa-3" dark> | 351 | <v-card flat class="card-style pa-3" dark> |
| 352 | <v-layout> | 352 | <v-layout> |
| 353 | <v-flex xs12> | 353 | <v-flex xs12> |
| 354 | <label class="title text-xs-center">View Course Detail</label> | 354 | <label class="title text-xs-center">View Course Detail</label> |
| 355 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> | 355 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | </v-layout> | 357 | </v-layout> |
| 358 | <v-card-text> | 358 | <v-card-text> |
| 359 | <v-container grid-list-md> | 359 | <v-container grid-list-md> |
| 360 | <v-layout wrap> | 360 | <v-layout wrap> |
| 361 | <v-flex xs12> | 361 | <v-flex xs12> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs4 sm6> | 363 | <v-flex xs4 sm6> |
| 364 | <h5 class="right my-1"> | 364 | <h5 class="right my-1"> |
| 365 | <b>Chapter Name:</b> | 365 | <b>Chapter Name:</b> |
| 366 | </h5> | 366 | </h5> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | <v-flex sm6 xs8> | 368 | <v-flex sm6 xs8> |
| 369 | <h5 class="my-1">{{ editedItem.chapterName }}</h5> | 369 | <h5 class="my-1">{{ editedItem.chapterName }}</h5> |
| 370 | </v-flex> | 370 | </v-flex> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | <v-layout> | 372 | <v-layout> |
| 373 | <v-flex xs4 sm6> | 373 | <v-flex xs4 sm6> |
| 374 | <h5 class="right my-1"> | 374 | <h5 class="right my-1"> |
| 375 | <b>Description:</b> | 375 | <b>Description:</b> |
| 376 | </h5> | 376 | </h5> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex sm6 xs8> | 378 | <v-flex sm6 xs8> |
| 379 | <h5 class="my-1">{{ editedItem.description }}</h5> | 379 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | <v-layout> | 382 | <v-layout> |
| 383 | <v-flex xs5 sm6> | 383 | <v-flex xs5 sm6> |
| 384 | <h5 class="right my-1"> | 384 | <h5 class="right my-1"> |
| 385 | <b>Chapter Points:</b> | 385 | <b>Chapter Points:</b> |
| 386 | </h5> | 386 | </h5> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex sm6 xs8> | 388 | <v-flex sm6 xs8> |
| 389 | <h5 class="my-1"> | 389 | <h5 class="my-1"> |
| 390 | <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> | 390 | <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> |
| 391 | <li>{{ chapterPoint}}</li> | 391 | <li>{{ chapterPoint}}</li> |
| 392 | </ul> | 392 | </ul> |
| 393 | </h5> | 393 | </h5> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | </v-layout> | 395 | </v-layout> |
| 396 | <!-- LINK TO PDF --> | 396 | <!-- LINK TO PDF --> |
| 397 | <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> | 397 | <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> |
| 398 | <v-flex xs6> | 398 | <v-flex xs6> |
| 399 | <div style="width: 100%;"> | 399 | <div style="width: 100%;"> |
| 400 | <a | 400 | <a |
| 401 | :href="editedItem.pdfFileUrl" | 401 | :href="editedItem.pdfFileUrl" |
| 402 | target="_blank" | 402 | target="_blank" |
| 403 | style="text-decoration: none!important;" | 403 | style="text-decoration: none!important;" |
| 404 | > | 404 | > |
| 405 | <v-btn flat block> | 405 | <v-btn flat block> |
| 406 | <span> | 406 | <span> |
| 407 | <h5> | 407 | <h5> |
| 408 | <b>Open PDF</b> | 408 | <b>Open PDF</b> |
| 409 | </h5> | 409 | </h5> |
| 410 | </span> | 410 | </span> |
| 411 | </v-btn> | 411 | </v-btn> |
| 412 | </a> | 412 | </a> |
| 413 | </div> | 413 | </div> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout> | 415 | </v-layout> |
| 416 | </v-flex> | 416 | </v-flex> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | </v-container> | 418 | </v-container> |
| 419 | </v-card-text> | 419 | </v-card-text> |
| 420 | </v-card> | 420 | </v-card> |
| 421 | </v-dialog> | 421 | </v-dialog> |
| 422 | 422 | ||
| 423 | <!-- ****** Course Detail TABLE ****** --> | 423 | <!-- ****** Course Detail TABLE ****** --> |
| 424 | <v-toolbar color="transparent" flat> | 424 | <v-toolbar color="transparent" flat> |
| 425 | <!-- <v-flex xs1> | 425 | <!-- <v-flex xs1> |
| 426 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> | 426 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> |
| 427 | <v-icon size="20">add</v-icon> | 427 | <v-icon size="20">add</v-icon> |
| 428 | <span class="hidden-sm-and-down">Add Course Detail</span> | 428 | <span class="hidden-sm-and-down">Add Course Detail</span> |
| 429 | <span class="hidden-md-and-up">Add</span> | 429 | <span class="hidden-md-and-up">Add</span> |
| 430 | </v-btn> | 430 | </v-btn> |
| 431 | </v-flex>--> | 431 | </v-flex>--> |
| 432 | <v-btn | 432 | <v-btn |
| 433 | fab | 433 | fab |
| 434 | dark | 434 | dark |
| 435 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 435 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 436 | small | 436 | small |
| 437 | @click="addCourseDetailDialog = true" | 437 | @click="addCourseDetailDialog = true" |
| 438 | > | 438 | > |
| 439 | <v-icon dark>add</v-icon> | 439 | <v-icon dark>add</v-icon> |
| 440 | </v-btn> | 440 | </v-btn> |
| 441 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> | 441 | <v-flex xs1 class="hidden-sm-only hidden-xs-only"> |
| 442 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> | 442 | <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> |
| 443 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail | 443 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail |
| 444 | </v-btn> | 444 | </v-btn> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | <v-spacer></v-spacer> | 446 | <v-spacer></v-spacer> |
| 447 | <v-flex xs12 sm4 md2> | 447 | <v-flex xs12 sm4 md2> |
| 448 | <v-select | 448 | <v-select |
| 449 | :items="addclass" | 449 | :items="addclass" |
| 450 | label="Select Class" | 450 | label="Select Class" |
| 451 | v-model="getCourse.classId" | 451 | v-model="getCourse.classId" |
| 452 | item-text="classNum" | 452 | item-text="classNum" |
| 453 | item-value="_id" | 453 | item-value="_id" |
| 454 | name="Select Class" | 454 | name="Select Class" |
| 455 | @change="getCourses(getCourse.classId)" | 455 | @change="getCourses(getCourse.classId)" |
| 456 | required | 456 | required |
| 457 | ></v-select> | 457 | ></v-select> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | <v-flex xs12 sm4 md2 class="ml-2"> | 459 | <v-flex xs12 sm4 md2 class="ml-2"> |
| 460 | <v-select | 460 | <v-select |
| 461 | :items="courseData" | 461 | :items="courseData" |
| 462 | label="Select Course" | 462 | label="Select Course" |
| 463 | v-model="getCourse.courseId" | 463 | v-model="getCourse.courseId" |
| 464 | item-text="courseName" | 464 | item-text="courseName" |
| 465 | item-value="_id" | 465 | item-value="_id" |
| 466 | required | 466 | required |
| 467 | @change="getCourseDetailsList(getCourse.courseId)" | 467 | @change="getCourseDetailsList(getCourse.courseId)" |
| 468 | ></v-select> | 468 | ></v-select> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | 470 | ||
| 471 | <v-flex xs12 sm1 v-if="show"> | 471 | <v-flex xs12 sm1 v-if="show"> |
| 472 | <v-btn icon large flat @click="show = false;showSearch = true;"> | 472 | <v-btn icon large flat @click="show = false;showSearch = true;"> |
| 473 | <v-avatar size="27"> | 473 | <v-avatar size="27"> |
| 474 | <img src="/static/icon/search.png" alt="icon" /> | 474 | <img src="/static/icon/search.png" alt="icon" /> |
| 475 | </v-avatar> | 475 | </v-avatar> |
| 476 | </v-btn> | 476 | </v-btn> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | 478 | ||
| 479 | <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> | 479 | <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> |
| 480 | <div style="display: inline-block;width: 70%;"> | 480 | <div style="display: inline-block;width: 70%;"> |
| 481 | <v-text-field | 481 | <v-text-field |
| 482 | autofocus | 482 | autofocus |
| 483 | v-model="search" | 483 | v-model="search" |
| 484 | label="Search" | 484 | label="Search" |
| 485 | prepend-inner-icon="search" | 485 | prepend-inner-icon="search" |
| 486 | color="primary" | 486 | color="primary" |
| 487 | ></v-text-field> | 487 | ></v-text-field> |
| 488 | </div> | 488 | </div> |
| 489 | <div style="display: inline-block;"> | 489 | <div style="display: inline-block;"> |
| 490 | <v-icon @click="closeSearch" color="error">close</v-icon> | 490 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 491 | </div> | 491 | </div> |
| 492 | </v-flex> | 492 | </v-flex> |
| 493 | </v-toolbar> | 493 | </v-toolbar> |
| 494 | 494 | ||
| 495 | <v-data-table | 495 | <v-data-table |
| 496 | :headers="headers" | 496 | :headers="headers" |
| 497 | :items="CourseDetailsList" | 497 | :items="CourseDetailsList" |
| 498 | :pagination.sync="pagination" | 498 | :pagination.sync="pagination" |
| 499 | :search="search" | 499 | :search="search" |
| 500 | item-key="_id" | 500 | item-key="_id" |
| 501 | > | 501 | > |
| 502 | <template slot="items" slot-scope="props"> | 502 | <template slot="items" slot-scope="props"> |
| 503 | <tr class="tr" @click="courseTableRow(props.item._id)"> | 503 | <tr class="tr" @click="courseTableRow(props.item._id)"> |
| 504 | <td class="td td-row">{{ props.index + 1}}</td> | 504 | <td class="td td-row">{{ props.index + 1}}</td> |
| 505 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> | 505 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> |
| 506 | <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> | 506 | <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> |
| 507 | <td class="td td-row text-xs-center"> | 507 | <td class="td td-row text-xs-center"> |
| 508 | <div style="vertical-align: top;"> | 508 | <div style="vertical-align: top;"> |
| 509 | <v-tooltip top> | 509 | <v-tooltip top> |
| 510 | <v-icon | 510 | <v-icon |
| 511 | slot="activator" | 511 | slot="activator" |
| 512 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " | 512 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " |
| 513 | class="mr-3" | 513 | class="mr-3" |
| 514 | @click="addChapters(props.item)" | 514 | @click="addChapters(props.item)" |
| 515 | >add_circle_outline</v-icon> | 515 | >add_circle_outline</v-icon> |
| 516 | <span>Add</span> | 516 | <span>Add</span> |
| 517 | </v-tooltip> | 517 | </v-tooltip> |
| 518 | <v-tooltip top> | 518 | <v-tooltip top> |
| 519 | <img | 519 | <img |
| 520 | slot="activator" | 520 | slot="activator" |
| 521 | style="cursor:pointer; width:25px; height:25px; " | 521 | style="cursor:pointer; width:25px; height:25px; " |
| 522 | class="mr-3" | 522 | class="mr-3" |
| 523 | @click="props.expanded = !props.expanded" | 523 | @click="props.expanded = !props.expanded" |
| 524 | src="/static/icon/view.png" | 524 | src="/static/icon/view.png" |
| 525 | /> | 525 | /> |
| 526 | <span>View</span> | 526 | <span>View</span> |
| 527 | </v-tooltip> | 527 | </v-tooltip> |
| 528 | <v-tooltip top> | 528 | <v-tooltip top> |
| 529 | <img | 529 | <img |
| 530 | slot="activator" | 530 | slot="activator" |
| 531 | style="cursor:pointer; width:20px; height:18px; " | 531 | style="cursor:pointer; width:20px; height:18px; " |
| 532 | class="mr-3" | 532 | class="mr-3" |
| 533 | @click="editItem(props.item)" | 533 | @click="editItem(props.item)" |
| 534 | src="/static/icon/edit.png" | 534 | src="/static/icon/edit.png" |
| 535 | /> | 535 | /> |
| 536 | <span>Edit</span> | 536 | <span>Edit</span> |
| 537 | </v-tooltip> | 537 | </v-tooltip> |
| 538 | <v-tooltip top> | 538 | <v-tooltip top> |
| 539 | <img | 539 | <img |
| 540 | slot="activator" | 540 | slot="activator" |
| 541 | style="cursor:pointer; width:20px; height:20px; " | 541 | style="cursor:pointer; width:20px; height:20px; " |
| 542 | class="mr-3" | 542 | class="mr-3" |
| 543 | @click="deleteItem(props.item)" | 543 | @click="deleteItem(props.item)" |
| 544 | src="/static/icon/delete.png" | 544 | src="/static/icon/delete.png" |
| 545 | /> | 545 | /> |
| 546 | <span>Delete</span> | 546 | <span>Delete</span> |
| 547 | </v-tooltip> | 547 | </v-tooltip> |
| 548 | </div> | 548 | </div> |
| 549 | </td> | 549 | </td> |
| 550 | </tr> | 550 | </tr> |
| 551 | </template> | 551 | </template> |
| 552 | <!-- CHAPTERS IN A COURSE --> | 552 | <!-- CHAPTERS IN A COURSE --> |
| 553 | <template slot="expand"> | 553 | <template slot="expand"> |
| 554 | <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> | 554 | <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> |
| 555 | <template slot="items" slot-scope="props"> | 555 | <template slot="items" slot-scope="props"> |
| 556 | <tr class="tr" @click="props.expanded = !props.expanded"> | 556 | <tr class="tr" @click="props.expanded = !props.expanded"> |
| 557 | <td class="td td-row">{{ props.index + 1}}</td> | 557 | <td class="td td-row">{{ props.index + 1}}</td> |
| 558 | <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> | 558 | <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> |
| 559 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> | 559 | <td class="text-xs-center td td-row">{{ props.item.description }}</td> |
| 560 | <td class="text-xs-center td td-row"> | 560 | <td class="text-xs-center td td-row"> |
| 561 | <v-tooltip top> | 561 | <v-tooltip top> |
| 562 | <v-icon | 562 | <v-icon |
| 563 | slot="activator" | 563 | slot="activator" |
| 564 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " | 564 | style="cursor:pointer;font-size:22px;position: relative;top: -4px; " |
| 565 | class="mr-3" | 565 | class="mr-3" |
| 566 | @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" | 566 | @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" |
| 567 | >video_call</v-icon> | 567 | >video_call</v-icon> |
| 568 | <span>Live Session</span> | 568 | <span>Live Session</span> |
| 569 | </v-tooltip> | 569 | </v-tooltip> |
| 570 | <v-tooltip top> | 570 | <v-tooltip top> |
| 571 | <img | 571 | <img |
| 572 | slot="activator" | 572 | slot="activator" |
| 573 | style="cursor:pointer; width:25px; height:25px; " | 573 | style="cursor:pointer; width:25px; height:25px; " |
| 574 | class="mr-3" | 574 | class="mr-3" |
| 575 | @click="profile(props.item)" | 575 | @click="profile(props.item)" |
| 576 | src="/static/icon/view.png" | 576 | src="/static/icon/view.png" |
| 577 | /> | 577 | /> |
| 578 | <span>View</span> | 578 | <span>View</span> |
| 579 | </v-tooltip> | 579 | </v-tooltip> |
| 580 | <v-tooltip top> | 580 | <v-tooltip top> |
| 581 | <img | 581 | <img |
| 582 | slot="activator" | 582 | slot="activator" |
| 583 | style="cursor:pointer; width:20px; height:18px; " | 583 | style="cursor:pointer; width:20px; height:18px; " |
| 584 | class="mr-3" | 584 | class="mr-3" |
| 585 | @click="editChapterItem(props.item)" | 585 | @click="editChapterItem(props.item)" |
| 586 | src="/static/icon/edit.png" | 586 | src="/static/icon/edit.png" |
| 587 | /> | 587 | /> |
| 588 | <span>Edit</span> | 588 | <span>Edit</span> |
| 589 | </v-tooltip> | 589 | </v-tooltip> |
| 590 | <v-tooltip top> | 590 | <v-tooltip top> |
| 591 | <img | 591 | <img |
| 592 | slot="activator" | 592 | slot="activator" |
| 593 | style="cursor:pointer; width:20px; height:20px; " | 593 | style="cursor:pointer; width:20px; height:20px; " |
| 594 | class="mr-3" | 594 | class="mr-3" |
| 595 | @click="deleteChapters(props.item)" | 595 | @click="deleteChapters(props.item)" |
| 596 | src="/static/icon/delete.png" | 596 | src="/static/icon/delete.png" |
| 597 | /> | 597 | /> |
| 598 | <span>Delete Chapter</span> | 598 | <span>Delete Chapter</span> |
| 599 | </v-tooltip> | 599 | </v-tooltip> |
| 600 | </td> | 600 | </td> |
| 601 | </tr> | 601 | </tr> |
| 602 | </template> | 602 | </template> |
| 603 | </v-data-table> | 603 | </v-data-table> |
| 604 | </template> | 604 | </template> |
| 605 | 605 | ||
| 606 | <v-alert | 606 | <v-alert |
| 607 | slot="no-results" | 607 | slot="no-results" |
| 608 | :value="true" | 608 | :value="true" |
| 609 | color="error" | 609 | color="error" |
| 610 | icon="warning" | 610 | icon="warning" |
| 611 | >Your search for "{{ search }}" found no results.</v-alert> | 611 | >Your search for "{{ search }}" found no results.</v-alert> |
| 612 | </v-data-table> | 612 | </v-data-table> |
| 613 | <!-- ****** ADD Course Detail ****** --> | 613 | <!-- ****** ADD Course Detail ****** --> |
| 614 | <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> | 614 | <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> |
| 615 | <v-card flat class="card-style pa-2" dark> | 615 | <v-card flat class="card-style pa-2" dark> |
| 616 | <v-layout> | 616 | <v-layout> |
| 617 | <v-flex xs12> | 617 | <v-flex xs12> |
| 618 | <label class="title text-xs-center">Add Course Details</label> | 618 | <label class="title text-xs-center">Add Course Details</label> |
| 619 | <v-icon | 619 | <v-icon |
| 620 | size="24" | 620 | size="24" |
| 621 | class="right" | 621 | class="right" |
| 622 | @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " | 622 | @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " |
| 623 | >cancel</v-icon> | 623 | >cancel</v-icon> |
| 624 | </v-flex> | 624 | </v-flex> |
| 625 | </v-layout> | 625 | </v-layout> |
| 626 | <v-form ref="form" v-model="valid" lazy-validation> | 626 | <v-form ref="form" v-model="valid" lazy-validation> |
| 627 | <v-container fluid> | 627 | <v-container fluid> |
| 628 | <v-flex xs12> | 628 | <v-flex xs12> |
| 629 | <v-layout> | 629 | <v-layout> |
| 630 | <v-flex xs4 class="pt-4 subheading"> | 630 | <v-flex xs4 class="pt-4 subheading"> |
| 631 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 631 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 632 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 632 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 633 | </v-flex> | 633 | </v-flex> |
| 634 | <v-flex xs8 sm8 md7 class="ml-3"> | 634 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 635 | <v-select | 635 | <v-select |
| 636 | :items="addclass" | 636 | :items="addclass" |
| 637 | label="Select Class" | 637 | label="Select Class" |
| 638 | v-model="addCourseDetail.classId" | 638 | v-model="addCourseDetail.classId" |
| 639 | item-text="classNum" | 639 | item-text="classNum" |
| 640 | item-value="_id" | 640 | item-value="_id" |
| 641 | name="Select Class" | 641 | name="Select Class" |
| 642 | :rules="clsssRules" | 642 | :rules="clsssRules" |
| 643 | @change="getCourses(addCourseDetail.classId)" | 643 | @change="getCourses(addCourseDetail.classId)" |
| 644 | required | 644 | required |
| 645 | ></v-select> | 645 | ></v-select> |
| 646 | </v-flex> | 646 | </v-flex> |
| 647 | </v-layout> | 647 | </v-layout> |
| 648 | </v-flex> | 648 | </v-flex> |
| 649 | <v-flex xs12> | 649 | <v-flex xs12> |
| 650 | <v-layout> | 650 | <v-layout> |
| 651 | <v-flex xs4 class="pt-4 subheading"> | 651 | <v-flex xs4 class="pt-4 subheading"> |
| 652 | <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> | 652 | <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> |
| 653 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> | 653 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> |
| 654 | </v-flex> | 654 | </v-flex> |
| 655 | <v-flex xs8 sm8 md7 class="ml-3"> | 655 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 656 | <v-select | 656 | <v-select |
| 657 | :items="courseData" | 657 | :items="courseData" |
| 658 | label="Select Course" | 658 | label="Select Course" |
| 659 | v-model="addCourseDetail.courseId" | 659 | v-model="addCourseDetail.courseId" |
| 660 | item-text="courseName" | 660 | item-text="courseName" |
| 661 | item-value="_id" | 661 | item-value="_id" |
| 662 | :rules="courseRules" | 662 | :rules="courseRules" |
| 663 | required | 663 | required |
| 664 | ></v-select> | 664 | ></v-select> |
| 665 | </v-flex> | 665 | </v-flex> |
| 666 | </v-layout> | 666 | </v-layout> |
| 667 | </v-flex> | 667 | </v-flex> |
| 668 | <v-flex xs12> | 668 | <v-flex xs12> |
| 669 | <v-layout> | 669 | <v-layout> |
| 670 | <v-flex xs4 class="pt-4 subheading"> | 670 | <v-flex xs4 class="pt-4 subheading"> |
| 671 | <label class="right">Chapter Name:</label> | 671 | <label class="right">Chapter Name:</label> |
| 672 | </v-flex> | 672 | </v-flex> |
| 673 | <v-flex xs8 sm8 md7 class="ml-3"> | 673 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 674 | <v-text-field | 674 | <v-text-field |
| 675 | v-model="addCourseDetail.chapterName" | 675 | v-model="addCourseDetail.chapterName" |
| 676 | placeholder="fill your Title" | 676 | placeholder="fill your Title" |
| 677 | name="name" | 677 | name="name" |
| 678 | type="text" | 678 | type="text" |
| 679 | :rules="chapterNameRules" | 679 | :rules="chapterNameRules" |
| 680 | required | 680 | required |
| 681 | ></v-text-field> | 681 | ></v-text-field> |
| 682 | </v-flex> | 682 | </v-flex> |
| 683 | </v-layout> | 683 | </v-layout> |
| 684 | </v-flex> | 684 | </v-flex> |
| 685 | <!-- DESCRIPTION --> | 685 | <!-- DESCRIPTION --> |
| 686 | <v-flex xs12> | 686 | <v-flex xs12> |
| 687 | <v-layout> | 687 | <v-layout> |
| 688 | <v-flex xs4 class="pt-4 subheading"> | 688 | <v-flex xs4 class="pt-4 subheading"> |
| 689 | <label class="right">Description:</label> | 689 | <label class="right">Description:</label> |
| 690 | </v-flex> | 690 | </v-flex> |
| 691 | <v-flex xs8 sm8 md7 class="ml-3"> | 691 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 692 | <v-text-field | 692 | <v-text-field |
| 693 | placeholder="fill your Description" | 693 | placeholder="fill your Description" |
| 694 | :rules="descriptionRules" | 694 | :rules="descriptionRules" |
| 695 | v-model="addCourseDetail.description" | 695 | v-model="addCourseDetail.description" |
| 696 | type="text" | 696 | type="text" |
| 697 | name="email" | 697 | name="email" |
| 698 | required | 698 | required |
| 699 | ></v-text-field> | 699 | ></v-text-field> |
| 700 | </v-flex> | 700 | </v-flex> |
| 701 | </v-layout> | 701 | </v-layout> |
| 702 | </v-flex> | 702 | </v-flex> |
| 703 | <!-- UPLOAD PPT --> | 703 | <!-- UPLOAD PPT --> |
| 704 | <!-- <v-flex xs12> | 704 | <!-- <v-flex xs12> |
| 705 | <v-layout> | 705 | <v-layout> |
| 706 | <v-flex xs4 class="pt-4 subheading"> | 706 | <v-flex xs4 class="pt-4 subheading"> |
| 707 | <label class="right">Upload PPT:</label> | 707 | <label class="right">Upload PPT:</label> |
| 708 | </v-flex> | 708 | </v-flex> |
| 709 | <v-flex xs8 sm8 md7 class="ml-3"> | 709 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 710 | <UploadFiles | 710 | <UploadFiles |
| 711 | @fileSelected="fileSelected($event,'uploadPPT')" | 711 | @fileSelected="fileSelected($event,'uploadPPT')" |
| 712 | label="Add PPT" | 712 | label="Add PPT" |
| 713 | reference="newCoursePpt" | 713 | reference="newCoursePpt" |
| 714 | id="newCoursePptInput" | 714 | id="newCoursePptInput" |
| 715 | :trigger="trigger" | 715 | :trigger="trigger" |
| 716 | ></UploadFiles> | 716 | ></UploadFiles> |
| 717 | </v-flex> | 717 | </v-flex> |
| 718 | </v-layout> | 718 | </v-layout> |
| 719 | </v-flex>--> | 719 | </v-flex>--> |
| 720 | <!-- UPLOAD PDF --> | 720 | <!-- UPLOAD PDF --> |
| 721 | <v-flex xs12> | 721 | <v-flex xs12> |
| 722 | <v-layout> | 722 | <v-layout> |
| 723 | <v-flex xs4 class="pt-4 subheading"> | 723 | <v-flex xs4 class="pt-4 subheading"> |
| 724 | <label class="right">Upload PDF:</label> | 724 | <label class="right">Upload PDF:</label> |
| 725 | </v-flex> | 725 | </v-flex> |
| 726 | <v-flex xs8 sm8 md7 class="ml-3"> | 726 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 727 | <UploadPdf | 727 | <UploadPdf |
| 728 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" | 728 | @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" |
| 729 | label="Add PDF" | 729 | label="Add PDF" |
| 730 | reference="newCoursePdf" | 730 | reference="newCoursePdf" |
| 731 | id="newCoursePdfInput" | 731 | id="newCoursePdfInput" |
| 732 | :emptyPdf="emptyPdf" | 732 | :emptyPdf="emptyPdf" |
| 733 | ></UploadPdf> | 733 | ></UploadPdf> |
| 734 | </v-flex> | 734 | </v-flex> |
| 735 | </v-layout> | 735 | </v-layout> |
| 736 | </v-flex> | 736 | </v-flex> |
| 737 | <v-layout> | 737 | <v-layout> |
| 738 | <v-flex xs12> | 738 | <v-flex xs12> |
| 739 | <div v-for="(chapterPoints,index) in finds" :key="index"> | 739 | <div v-for="(chapterPoints,index) in finds" :key="index"> |
| 740 | <v-layout> | 740 | <v-layout> |
| 741 | <v-flex xs4 class="pt-4 subheading"> | 741 | <v-flex xs4 class="pt-4 subheading"> |
| 742 | <label class="right">Chapter Points:</label> | 742 | <label class="right">Chapter Points:</label> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | <v-flex xs8 sm8 md6 class="ml-3"> | 744 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 745 | <v-text-field | 745 | <v-text-field |
| 746 | placeholder="fill your Chapter Points" | 746 | placeholder="fill your Chapter Points" |
| 747 | v-model="chapterPoints.value" | 747 | v-model="chapterPoints.value" |
| 748 | type="text" | 748 | type="text" |
| 749 | required | 749 | required |
| 750 | ></v-text-field> | 750 | ></v-text-field> |
| 751 | </v-flex> | 751 | </v-flex> |
| 752 | <v-flex xs2 class="pt-4"> | 752 | <v-flex xs2 class="pt-4"> |
| 753 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> | 753 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> |
| 754 | <v-icon @click="addFind">add_circle</v-icon> | 754 | <v-icon @click="addFind">add_circle</v-icon> |
| 755 | </v-flex> | 755 | </v-flex> |
| 756 | </v-layout> | 756 | </v-layout> |
| 757 | </div> | 757 | </div> |
| 758 | </v-flex> | 758 | </v-flex> |
| 759 | </v-layout> | 759 | </v-layout> |
| 760 | <v-layout> | 760 | <v-layout> |
| 761 | <v-flex xs12 sm12> | 761 | <v-flex xs12 sm12> |
| 762 | <v-layout class="right"> | 762 | <v-layout class="right"> |
| 763 | <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> | 763 | <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> |
| 764 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 764 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 765 | </v-layout> | 765 | </v-layout> |
| 766 | </v-flex> | 766 | </v-flex> |
| 767 | </v-layout> | 767 | </v-layout> |
| 768 | </v-container> | 768 | </v-container> |
| 769 | </v-form> | 769 | </v-form> |
| 770 | </v-card> | 770 | </v-card> |
| 771 | </v-dialog> | 771 | </v-dialog> |
| 772 | <v-snackbar | 772 | <v-snackbar |
| 773 | :timeout="timeout" | 773 | :timeout="timeout" |
| 774 | :top="y === 'top'" | 774 | :top="y === 'top'" |
| 775 | :right="x === 'right'" | 775 | :right="x === 'right'" |
| 776 | :vertical="mode === 'vertical'" | 776 | :vertical="mode === 'vertical'" |
| 777 | v-model="snackbar" | 777 | v-model="snackbar" |
| 778 | :color="color" | 778 | :color="color" |
| 779 | >{{ text }}</v-snackbar> | 779 | >{{ text }}</v-snackbar> |
| 780 | <div class="loader" v-if="showLoader"> | 780 | <div class="loader" v-if="showLoader"> |
| 781 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 781 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 782 | </div> | 782 | </div> |
| 783 | </v-container> | 783 | </v-container> |
| 784 | </template> | 784 | </template> |
| 785 | 785 | ||
| 786 | <script> | 786 | <script> |
| 787 | import http from "@/Services/http.js"; | 787 | import http from "@/Services/http.js"; |
| 788 | import UploadFiles from "@/pages/Common/UploadFiles.vue"; | 788 | import UploadFiles from "@/pages/Common/UploadFiles.vue"; |
| 789 | import UploadPdf from "@/pages/Common/UploadPdf.vue"; | 789 | import UploadPdf from "@/pages/Common/UploadPdf.vue"; |
| 790 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 790 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
| 791 | 791 | ||
| 792 | export default { | 792 | export default { |
| 793 | mixins: [AllApiCalls], | 793 | mixins: [AllApiCalls], |
| 794 | components: { | 794 | components: { |
| 795 | UploadFiles, | 795 | UploadFiles, |
| 796 | UploadPdf, | 796 | UploadPdf, |
| 797 | }, | 797 | }, |
| 798 | data: () => ({ | 798 | data: () => ({ |
| 799 | snackbar: false, | 799 | snackbar: false, |
| 800 | y: "top", | 800 | y: "top", |
| 801 | x: "right", | 801 | x: "right", |
| 802 | mode: "", | 802 | mode: "", |
| 803 | timeout: 3000, | 803 | timeout: 3000, |
| 804 | text: "", | 804 | text: "", |
| 805 | loading: false, | 805 | loading: false, |
| 806 | color: "", | 806 | color: "", |
| 807 | date: null, | 807 | date: null, |
| 808 | search: "", | 808 | search: "", |
| 809 | show: true, | 809 | show: true, |
| 810 | addCourseDetailDialog: false, | 810 | addCourseDetailDialog: false, |
| 811 | showSearch: false, | 811 | showSearch: false, |
| 812 | showLoader: false, | 812 | showLoader: false, |
| 813 | editCourseDetailDialog: false, | 813 | editCourseDetailDialog: false, |
| 814 | editChapterDetailDialog: false, | 814 | editChapterDetailDialog: false, |
| 815 | viewProfileGallery: false, | 815 | viewProfileGallery: false, |
| 816 | valid: true, | 816 | valid: true, |
| 817 | editLoading: false, | 817 | editLoading: false, |
| 818 | addclass: [], | 818 | addclass: [], |
| 819 | courseData: [], | 819 | courseData: [], |
| 820 | addSection: [], | 820 | addSection: [], |
| 821 | getCourse: {}, | 821 | getCourse: {}, |
| 822 | finds: [{ value: "" }], | 822 | finds: [{ value: "" }], |
| 823 | findsChapterPoint: [{ value: "" }], | 823 | findsChapterPoint: [{ value: "" }], |
| 824 | updates: [], | 824 | updates: [], |
| 825 | youTubeLink: {}, | 825 | youTubeLink: {}, |
| 826 | addCourseDetail: { | 826 | addCourseDetail: { |
| 827 | chapters: [ | 827 | chapters: [ |
| 828 | { | 828 | { |
| 829 | chapterName: "", | 829 | chapterName: "", |
| 830 | description: "", | 830 | description: "", |
| 831 | chapterPoints: [], | 831 | chapterPoints: [], |
| 832 | }, | 832 | }, |
| 833 | ], | 833 | ], |
| 834 | }, | 834 | }, |
| 835 | chapters: [], | 835 | chapters: [], |
| 836 | pagination: { | 836 | pagination: { |
| 837 | rowsPerPage: 10, | 837 | rowsPerPage: 10, |
| 838 | }, | 838 | }, |
| 839 | editFiles: [], | 839 | editFiles: [], |
| 840 | files: [], | 840 | files: [], |
| 841 | courseData: [], | 841 | courseData: [], |
| 842 | token: "", | 842 | token: "", |
| 843 | courseId: "", | 843 | courseId: "", |
| 844 | clsssRules: [(v) => !!v || " Class is required"], | 844 | clsssRules: [(v) => !!v || " Class is required"], |
| 845 | courseRules: [(v) => !!v || " Course is required"], | 845 | courseRules: [(v) => !!v || " Course is required"], |
| 846 | chapterNameRules: [(v) => !!v || " Tilte is required"], | 846 | chapterNameRules: [(v) => !!v || " Tilte is required"], |
| 847 | descriptionRules: [(v) => !!v || " Description is required"], | 847 | descriptionRules: [(v) => !!v || " Description is required"], |
| 848 | headers: [ | 848 | headers: [ |
| 849 | { | 849 | { |
| 850 | align: "", | 850 | align: "", |
| 851 | text: "No", | 851 | text: "No", |
| 852 | sortable: false, | 852 | sortable: false, |
| 853 | value: "index", | 853 | value: "index", |
| 854 | }, | 854 | }, |
| 855 | { | 855 | { |
| 856 | text: "Class Name", | 856 | text: "Class Name", |
| 857 | value: "classNum", | 857 | value: "classNum", |
| 858 | sortable: false, | 858 | sortable: false, |
| 859 | align: "center", | 859 | align: "center", |
| 860 | }, | 860 | }, |
| 861 | { | 861 | { |
| 862 | text: "Course Name", | 862 | text: "Course Name", |
| 863 | value: "courseName", | 863 | value: "courseName", |
| 864 | sortable: false, | 864 | sortable: false, |
| 865 | align: "center", | 865 | align: "center", |
| 866 | }, | 866 | }, |
| 867 | { text: "Action", value: "", sortable: false, align: "center" }, | 867 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 868 | ], | 868 | ], |
| 869 | CourseDetailsList: [], | 869 | CourseDetailsList: [], |
| 870 | editedIndex: -1, | 870 | editedIndex: -1, |
| 871 | editedItem: {}, | 871 | editedItem: {}, |
| 872 | editedCourse: {}, | 872 | editedCourse: {}, |
| 873 | editChapter: { | 873 | editChapter: { |
| 874 | chapterPoints: [], | 874 | chapterPoints: [], |
| 875 | }, | 875 | }, |
| 876 | index: "", | 876 | index: "", |
| 877 | addChapterItem: {}, | 877 | addChapterItem: {}, |
| 878 | addChapterItemObj: {}, | 878 | addChapterItemObj: {}, |
| 879 | addChapterDialog: false, | 879 | addChapterDialog: false, |
| 880 | showData: false, | 880 | showData: false, |
| 881 | }), | 881 | }), |
| 882 | methods: { | 882 | methods: { |
| 883 | getCourses(classId) { | 883 | getCourses(classId) { |
| 884 | this.showLoader = true; | 884 | this.showLoader = true; |
| 885 | http() | 885 | http() |
| 886 | .get("/getCourseesList", { | 886 | .get("/getCourseesList", { |
| 887 | params: { | 887 | params: { |
| 888 | classId: classId, | 888 | classId: classId, |
| 889 | }, | 889 | }, |
| 890 | }) | 890 | }) |
| 891 | .then((response) => { | 891 | .then((response) => { |
| 892 | this.editChapter.courseId = ""; | 892 | this.editChapter.courseId = ""; |
| 893 | this.courseData = response.data.data; | 893 | this.courseData = response.data.data; |
| 894 | // console.log("this.courseData", this.courseData); | 894 | // console.log("this.courseData", this.courseData); |
| 895 | this.showLoader = false; | 895 | this.showLoader = false; |
| 896 | }) | 896 | }) |
| 897 | .catch((err) => { | 897 | .catch((err) => { |
| 898 | console.log("err====>", err); | 898 | console.log("err====>", err); |
| 899 | this.showLoader = false; | 899 | this.showLoader = false; |
| 900 | }); | 900 | }); |
| 901 | }, | 901 | }, |
| 902 | getCourseDetailsList() { | 902 | getCourseDetailsList() { |
| 903 | this.showLoader = true; | 903 | this.showLoader = true; |
| 904 | http() | 904 | http() |
| 905 | .get("/getParticularCourseDetail", { | 905 | .get("/getParticularCourseDetail", { |
| 906 | params: { | 906 | params: { |
| 907 | courseId: this.getCourse.courseId, | 907 | courseId: this.getCourse.courseId, |
| 908 | }, | 908 | }, |
| 909 | }) | 909 | }) |
| 910 | .then((response) => { | 910 | .then((response) => { |
| 911 | this.CourseDetailsList = response.data.data; | 911 | this.CourseDetailsList = response.data.data; |
| 912 | if (this.CourseDetailsList.length === 0) { | 912 | if (this.CourseDetailsList.length === 0) { |
| 913 | this.showLoader = false; | 913 | this.showLoader = false; |
| 914 | this.snackbar = true; | 914 | this.snackbar = true; |
| 915 | this.text = "Data not found!"; | 915 | this.text = "Data not found!"; |
| 916 | this.color = "error"; | 916 | this.color = "error"; |
| 917 | return; | 917 | return; |
| 918 | } | 918 | } |
| 919 | this.showData = true; | 919 | this.showData = true; |
| 920 | if (response.data.data[0]) { | 920 | if (response.data.data[0]) { |
| 921 | this.chapters = response.data.data[0].chapters; | 921 | this.chapters = response.data.data[0].chapters; |
| 922 | } | 922 | } |
| 923 | this.showLoader = false; | 923 | this.showLoader = false; |
| 924 | }) | 924 | }) |
| 925 | .catch((error) => { | 925 | .catch((error) => { |
| 926 | // console.log("err====>", err); | 926 | // console.log("err====>", err); |
| 927 | this.showLoader = false; | 927 | this.showLoader = false; |
| 928 | if (error.response.status === 401) { | 928 | if (error.response.status === 401) { |
| 929 | this.$router.replace({ path: "/" }); | 929 | this.$router.replace({ path: "/" }); |
| 930 | this.$store.dispatch("setToken", null); | 930 | this.$store.dispatch("setToken", null); |
| 931 | this.$store.dispatch("Id", null); | 931 | this.$store.dispatch("Id", null); |
| 932 | } | 932 | } |
| 933 | }); | 933 | }); |
| 934 | }, | 934 | }, |
| 935 | courseTableRow(id) { | 935 | courseTableRow(id) { |
| 936 | this.courseId = id; | 936 | this.courseId = id; |
| 937 | }, | 937 | }, |
| 938 | addChapters(item) { | 938 | addChapters(item) { |
| 939 | this.editedIndex = this.CourseDetailsList.indexOf(item); | 939 | this.editedIndex = this.CourseDetailsList.indexOf(item); |
| 940 | this.addChapterItemObj = Object.assign({}, item); | 940 | this.addChapterItemObj = Object.assign({}, item); |
| 941 | this.addChapterItem.courseDetailId = this.addChapterItemObj._id; | 941 | this.addChapterItem.courseDetailId = this.addChapterItemObj._id; |
| 942 | this.addChapterDialog = true; | 942 | this.addChapterDialog = true; |
| 943 | }, | 943 | }, |
| 944 | submitChapter() { | 944 | submitChapter() { |
| 945 | this.addChapterItem.chapterPoints = []; | 945 | this.addChapterItem.chapterPoints = []; |
| 946 | for (let i = 0; i < this.findsChapterPoint.length; i++) { | 946 | for (let i = 0; i < this.findsChapterPoint.length; i++) { |
| 947 | this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); | 947 | this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); |
| 948 | } | 948 | } |
| 949 | this.loading = true; | 949 | this.loading = true; |
| 950 | http() | 950 | http() |
| 951 | .put("/addChapters", this.addChapterItem) | 951 | .put("/addChapters", this.addChapterItem) |
| 952 | .then((response) => { | 952 | .then((response) => { |
| 953 | this.addChapterDialog = false; | 953 | this.addChapterDialog = false; |
| 954 | this.loading = false; | 954 | this.loading = false; |
| 955 | this.snackbar = true; | 955 | this.snackbar = true; |
| 956 | this.text = response.data.message; | 956 | this.text = response.data.message; |
| 957 | this.color = "green"; | 957 | this.color = "green"; |
| 958 | this.addChapterItem = {}; | 958 | this.addChapterItem = {}; |
| 959 | this.removeChapterPoint(); | 959 | this.removeChapterPoint(); |
| 960 | this.getCourseDetailsList(); | 960 | this.getCourseDetailsList(); |
| 961 | }) | 961 | }) |
| 962 | .catch((error) => { | 962 | .catch((error) => { |
| 963 | this.snackbar = true; | 963 | this.snackbar = true; |
| 964 | this.text = error.response.data.message; | 964 | this.text = error.response.data.message; |
| 965 | this.color = "error"; | 965 | this.color = "error"; |
| 966 | this.loading = false; | 966 | this.loading = false; |
| 967 | }); | 967 | }); |
| 968 | }, | 968 | }, |
| 969 | profile(item) { | 969 | profile(item) { |
| 970 | // console.log("chaper - ", item); | 970 | // console.log("chaper - ", item); |
| 971 | this.editedIndex = this.chapters.indexOf(item); | 971 | this.editedIndex = this.chapters.indexOf(item); |
| 972 | this.editedItem = Object.assign({}, item); | 972 | this.editedItem = Object.assign({}, item); |
| 973 | this.viewProfileGallery = true; | 973 | this.viewProfileGallery = true; |
| 974 | }, | 974 | }, |
| 975 | editItem(item) { | 975 | editItem(item) { |
| 976 | this.editedIndex = this.CourseDetailsList.indexOf(item); | 976 | this.editedIndex = this.CourseDetailsList.indexOf(item); |
| 977 | this.editedCourse = Object.assign({}, item); | 977 | this.editedCourse = Object.assign({}, item); |
| 978 | this.editCourseDetailDialog = true; | 978 | this.editCourseDetailDialog = true; |
| 979 | }, | 979 | }, |
| 980 | editChapterItem(item) { | 980 | editChapterItem(item) { |
| 981 | this.editedIndex = this.chapters.indexOf(item); | 981 | this.editedIndex = this.chapters.indexOf(item); |
| 982 | this.editChapter = Object.assign({}, item); | 982 | this.editChapter = Object.assign({}, item); |
| 983 | this.updates = []; | 983 | this.updates = []; |
| 984 | for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { | 984 | for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { |
| 985 | this.updates.push({ value: this.editChapter.chapterPoints[i] }); | 985 | this.updates.push({ value: this.editChapter.chapterPoints[i] }); |
| 986 | } | 986 | } |
| 987 | this.editChapterDetailDialog = true; | 987 | this.editChapterDetailDialog = true; |
| 988 | }, | 988 | }, |
| 989 | deleteItem(item) { | 989 | deleteItem(item) { |
| 990 | let deleteGallery = { | 990 | let deleteGallery = { |
| 991 | courseDetailId: item._id, | 991 | courseDetailId: item._id, |
| 992 | }; | 992 | }; |
| 993 | http() | 993 | http() |
| 994 | .delete( | 994 | .delete( |
| 995 | "/deleteCourseDetail", | 995 | "/deleteCourseDetail", |
| 996 | confirm("Are you sure you want to delete this?") && { | 996 | confirm("Are you sure you want to delete this?") && { |
| 997 | params: deleteGallery, | 997 | params: deleteGallery, |
| 998 | headers: { | 998 | headers: { |
| 999 | Authorization: "Bearer " + this.token, | 999 | Authorization: "Bearer " + this.token, |
| 1000 | }, | 1000 | }, |
| 1001 | } | 1001 | } |
| 1002 | ) | 1002 | ) |
| 1003 | .then((response) => { | 1003 | .then((response) => { |
| 1004 | this.snackbar = true; | 1004 | this.snackbar = true; |
| 1005 | this.text = "Successfully delete Course Details"; | 1005 | this.text = "Successfully delete Course Details"; |
| 1006 | this.color = "green"; | 1006 | this.color = "green"; |
| 1007 | this.getCourseDetailsList(); | 1007 | this.getCourseDetailsList(); |
| 1008 | }) | 1008 | }) |
| 1009 | .catch((error) => { | 1009 | .catch((error) => { |
| 1010 | // console.log(error); | 1010 | // console.log(error); |
| 1011 | this.snackbar = true; | 1011 | this.snackbar = true; |
| 1012 | this.text = error.response.data.message; | 1012 | this.text = error.response.data.message; |
| 1013 | this.color = "error"; | 1013 | this.color = "error"; |
| 1014 | }); | 1014 | }); |
| 1015 | }, | 1015 | }, |
| 1016 | deleteChapters(item) { | 1016 | deleteChapters(item) { |
| 1017 | // console.log("item", item); | 1017 | // console.log("item", item); |
| 1018 | let deleteChapters = { | 1018 | let deleteChapters = { |
| 1019 | courseDetailId: this.courseId, | 1019 | courseDetailId: this.courseId, |
| 1020 | chapterId: item._id, | 1020 | chapterId: item._id, |
| 1021 | }; | 1021 | }; |
| 1022 | http() | 1022 | http() |
| 1023 | .put( | 1023 | .put( |
| 1024 | "/deleteChapters", | 1024 | "/deleteChapters", |
| 1025 | confirm("Are you sure you want to delete this?") && deleteChapters | 1025 | confirm("Are you sure you want to delete this?") && deleteChapters |
| 1026 | ) | 1026 | ) |
| 1027 | .then((response) => { | 1027 | .then((response) => { |
| 1028 | this.snackbar = true; | 1028 | this.snackbar = true; |
| 1029 | this.text = "Successfully delete Chapters"; | 1029 | this.text = "Successfully delete Chapters"; |
| 1030 | this.color = "green"; | 1030 | this.color = "green"; |
| 1031 | this.getCourseDetailsList(); | 1031 | this.getCourseDetailsList(); |
| 1032 | }) | 1032 | }) |
| 1033 | .catch((error) => { | 1033 | .catch((error) => { |
| 1034 | // console.log(error); | 1034 | // console.log(error); |
| 1035 | this.snackbar = true; | 1035 | this.snackbar = true; |
| 1036 | this.text = error.response.data.message; | 1036 | this.text = error.response.data.message; |
| 1037 | this.color = "error"; | 1037 | this.color = "error"; |
| 1038 | }); | 1038 | }); |
| 1039 | }, | 1039 | }, |
| 1040 | close() { | 1040 | close() { |
| 1041 | this.editCourseDetailDialog = false; | 1041 | this.editCourseDetailDialog = false; |
| 1042 | }, | 1042 | }, |
| 1043 | closeProfileGallery() { | 1043 | closeProfileGallery() { |
| 1044 | this.viewProfileGallery = false; | 1044 | this.viewProfileGallery = false; |
| 1045 | }, | 1045 | }, |
| 1046 | submit() { | 1046 | submit() { |
| 1047 | let chapters = []; | 1047 | let chapters = []; |
| 1048 | var chapterPoints = []; | 1048 | var chapterPoints = []; |
| 1049 | for (let i = 0; i < this.finds.length; i++) { | 1049 | for (let i = 0; i < this.finds.length; i++) { |
| 1050 | chapterPoints.push(this.finds[i].value); | 1050 | chapterPoints.push(this.finds[i].value); |
| 1051 | // console.log("this.finds[i].value", this.finds[i].value); | 1051 | // console.log("this.finds[i].value", this.finds[i].value); |
| 1052 | chapters = [ | 1052 | chapters = [ |
| 1053 | { | 1053 | { |
| 1054 | chapterName: this.addCourseDetail.chapterName, | 1054 | chapterName: this.addCourseDetail.chapterName, |
| 1055 | description: this.addCourseDetail.description, | 1055 | description: this.addCourseDetail.description, |
| 1056 | chapterPoints: chapterPoints, | 1056 | chapterPoints: chapterPoints, |
| 1057 | uploadPdf: this.pdfFile, | 1057 | uploadPdf: this.pdfFile, |
| 1058 | uploadPpt: this.pptFile, | 1058 | uploadPpt: this.pptFile, |
| 1059 | }, | 1059 | }, |
| 1060 | ]; | 1060 | ]; |
| 1061 | } | 1061 | } |
| 1062 | if (this.$refs.form.validate()) { | 1062 | if (this.$refs.form.validate()) { |
| 1063 | // console.log("this.addCourseDetail", this.addCourseDetail); | 1063 | // console.log("this.addCourseDetail", this.addCourseDetail); |
| 1064 | var courseDetailsData = { | 1064 | var courseDetailsData = { |
| 1065 | classId: this.addCourseDetail.classId, | 1065 | classId: this.addCourseDetail.classId, |
| 1066 | courseId: this.addCourseDetail.courseId, | 1066 | courseId: this.addCourseDetail.courseId, |
| 1067 | chapters: chapters, | 1067 | chapters: chapters, |
| 1068 | }; | 1068 | }; |
| 1069 | this.loading = true; | 1069 | this.loading = true; |
| 1070 | http() | 1070 | http() |
| 1071 | .post("/createCourseDetail", courseDetailsData) | 1071 | .post("/createCourseDetail", courseDetailsData) |
| 1072 | .then((response) => { | 1072 | .then((response) => { |
| 1073 | this.addCourseDetailDialog = false; | 1073 | this.addCourseDetailDialog = false; |
| 1074 | this.loading = false; | 1074 | this.loading = false; |
| 1075 | this.snackbar = true; | 1075 | this.snackbar = true; |
| 1076 | this.text = response.data.message; | 1076 | this.text = response.data.message; |
| 1077 | this.color = "green"; | 1077 | this.color = "green"; |
| 1078 | // this.clear(); | 1078 | // this.clear(); |
| 1079 | this.trigger = "reset"; | 1079 | this.trigger = "reset"; |
| 1080 | this.emptyPdf = "reset"; | 1080 | this.emptyPdf = "reset"; |
| 1081 | http() | 1081 | http() |
| 1082 | .get("/getParticularCourseDetail", { | 1082 | .get("/getParticularCourseDetail", { |
| 1083 | params: { | 1083 | params: { |
| 1084 | courseId: this.addCourseDetail.courseId, | 1084 | courseId: this.addCourseDetail.courseId, |
| 1085 | }, | 1085 | }, |
| 1086 | }) | 1086 | }) |
| 1087 | .then((response) => { | 1087 | .then((response) => { |
| 1088 | this.CourseDetailsList = response.data.data; | 1088 | this.CourseDetailsList = response.data.data; |
| 1089 | if (this.CourseDetailsList.length === 0) { | 1089 | if (this.CourseDetailsList.length === 0) { |
| 1090 | this.showLoader = false; | 1090 | this.showLoader = false; |
| 1091 | this.snackbar = true; | 1091 | this.snackbar = true; |
| 1092 | this.text = "Data not found!"; | 1092 | this.text = "Data not found!"; |
| 1093 | this.color = "error"; | 1093 | this.color = "error"; |
| 1094 | return; | 1094 | return; |
| 1095 | } | 1095 | } |
| 1096 | this.showData = true; | 1096 | this.showData = true; |
| 1097 | if (response.data.data[0]) { | 1097 | if (response.data.data[0]) { |
| 1098 | this.chapters = response.data.data[0].chapters; | 1098 | this.chapters = response.data.data[0].chapters; |
| 1099 | } | 1099 | } |
| 1100 | this.showLoader = false; | 1100 | this.showLoader = false; |
| 1101 | }) | 1101 | }) |
| 1102 | .catch((error) => { | 1102 | .catch((error) => { |
| 1103 | // console.log("err====>", err); | 1103 | // console.log("err====>", err); |
| 1104 | this.showLoader = false; | 1104 | this.showLoader = false; |
| 1105 | if (error.response.status === 401) { | 1105 | if (error.response.status === 401) { |
| 1106 | this.$router.replace({ path: "/" }); | 1106 | this.$router.replace({ path: "/" }); |
| 1107 | this.$store.dispatch("setToken", null); | 1107 | this.$store.dispatch("setToken", null); |
| 1108 | this.$store.dispatch("Id", null); | 1108 | this.$store.dispatch("Id", null); |
| 1109 | } | 1109 | } |
| 1110 | }); | 1110 | }); |
| 1111 | this.removeAddFind(); | 1111 | this.removeAddFind(); |
| 1112 | }) | 1112 | }) |
| 1113 | .catch((error) => { | 1113 | .catch((error) => { |
| 1114 | this.snackbar = true; | 1114 | this.snackbar = true; |
| 1115 | this.text = error.response.data.message; | 1115 | this.text = error.response.data.message; |
| 1116 | this.color = "error"; | 1116 | this.color = "error"; |
| 1117 | this.loading = false; | 1117 | this.loading = false; |
| 1118 | }); | 1118 | }); |
| 1119 | } | 1119 | } |
| 1120 | }, | 1120 | }, |
| 1121 | clear() { | 1121 | clear() { |
| 1122 | this.$refs.form.reset(); | 1122 | this.$refs.form.reset(); |
| 1123 | }, | 1123 | }, |
| 1124 | saveChapter() { | 1124 | saveChapter() { |
| 1125 | this.editedItem.courseDetailId = this.editedItem._id; | 1125 | this.editedItem.courseDetailId = this.editedItem._id; |
| 1126 | // console.log("this.updates", this.updates); | 1126 | // console.log("this.updates", this.updates); |
| 1127 | var chapterPoints = []; | 1127 | var chapterPoints = []; |
| 1128 | for (let i = 0; i < this.updates.length; i++) { | 1128 | for (let i = 0; i < this.updates.length; i++) { |
| 1129 | chapterPoints.push(this.updates[i].value); | 1129 | chapterPoints.push(this.updates[i].value); |
| 1130 | } | 1130 | } |
| 1131 | var updateData = { | 1131 | var updateData = { |
| 1132 | courseDetailId: this.courseId, | 1132 | courseDetailId: this.courseId, |
| 1133 | chapterId: this.editChapter._id, | 1133 | chapterId: this.editChapter._id, |
| 1134 | chapterName: this.editChapter.chapterName, | 1134 | chapterName: this.editChapter.chapterName, |
| 1135 | description: this.editChapter.description, | 1135 | description: this.editChapter.description, |
| 1136 | chapterPoints: chapterPoints, | 1136 | chapterPoints: chapterPoints, |
| 1137 | uploadPdf: this.pdfFile, | 1137 | uploadPdf: this.pdfFile, |
| 1138 | uploadPpt: this.pptFile, | 1138 | uploadPpt: this.pptFile, |
| 1139 | }; | 1139 | }; |
| 1140 | this.editLoading = true; | 1140 | this.editLoading = true; |
| 1141 | http() | 1141 | http() |
| 1142 | .put("/updateChapters", updateData) | 1142 | .put("/updateChapters", updateData) |
| 1143 | .then((response) => { | 1143 | .then((response) => { |
| 1144 | this.editChapterDetailDialog = false; | 1144 | this.editChapterDetailDialog = false; |
| 1145 | this.snackbar = true; | 1145 | this.snackbar = true; |
| 1146 | this.text = response.data.message; | 1146 | this.text = response.data.message; |
| 1147 | this.color = "green"; | 1147 | this.color = "green"; |
| 1148 | this.editLoading = false; | 1148 | this.editLoading = false; |
| 1149 | // this.removeUpdatePoints(); | 1149 | // this.removeUpdatePoints(); |
| 1150 | this.trigger = "reset"; | 1150 | this.trigger = "reset"; |
| 1151 | this.emptyPdf = "reset"; | 1151 | this.emptyPdf = "reset"; |
| 1152 | http() | 1152 | http() |
| 1153 | .get("/getParticularCourseDetail", { | 1153 | .get("/getParticularCourseDetail", { |
| 1154 | params: { | 1154 | params: { |
| 1155 | courseId: this.getCourse.courseId, | 1155 | courseId: this.getCourse.courseId, |
| 1156 | }, | 1156 | }, |
| 1157 | }) | 1157 | }) |
| 1158 | .then((response) => { | 1158 | .then((response) => { |
| 1159 | this.CourseDetailsList = response.data.data; | 1159 | this.CourseDetailsList = response.data.data; |
| 1160 | if (this.CourseDetailsList.length === 0) { | 1160 | if (this.CourseDetailsList.length === 0) { |
| 1161 | this.showLoader = false; | 1161 | this.showLoader = false; |
| 1162 | this.snackbar = true; | 1162 | this.snackbar = true; |
| 1163 | this.text = "Data not found!"; | 1163 | this.text = "Data not found!"; |
| 1164 | this.color = "error"; | 1164 | this.color = "error"; |
| 1165 | return; | 1165 | return; |
| 1166 | } | 1166 | } |
| 1167 | this.showData = true; | 1167 | this.showData = true; |
| 1168 | if (response.data.data[0]) { | 1168 | if (response.data.data[0]) { |
| 1169 | this.chapters = response.data.data[0].chapters; | 1169 | this.chapters = response.data.data[0].chapters; |
| 1170 | } | 1170 | } |
| 1171 | this.showLoader = false; | 1171 | this.showLoader = false; |
| 1172 | }) | 1172 | }) |
| 1173 | .catch((error) => { | 1173 | .catch((error) => { |
| 1174 | // console.log("err====>", err); | 1174 | // console.log("err====>", err); |
| 1175 | this.showLoader = false; | 1175 | this.showLoader = false; |
| 1176 | if (error.response.status === 401) { | 1176 | if (error.response.status === 401) { |
| 1177 | this.$router.replace({ path: "/" }); | 1177 | this.$router.replace({ path: "/" }); |
| 1178 | this.$store.dispatch("setToken", null); | 1178 | this.$store.dispatch("setToken", null); |
| 1179 | this.$store.dispatch("Id", null); | 1179 | this.$store.dispatch("Id", null); |
| 1180 | } | 1180 | } |
| 1181 | }); | 1181 | }); |
| 1182 | }) | 1182 | }) |
| 1183 | .catch((error) => { | 1183 | .catch((error) => { |
| 1184 | this.editLoading = false; | 1184 | this.editLoading = false; |
| 1185 | this.snackbar = true; | 1185 | this.snackbar = true; |
| 1186 | this.text = error.response.data.message; | 1186 | this.text = error.response.data.message; |
| 1187 | this.color = "error"; | 1187 | this.color = "error"; |
| 1188 | }); | 1188 | }); |
| 1189 | }, | 1189 | }, |
| 1190 | save() { | 1190 | save() { |
| 1191 | var updateData = { | 1191 | var updateData = { |
| 1192 | courseDetailId: this.editedCourse._id, | 1192 | courseDetailId: this.editedCourse._id, |
| 1193 | courseId: this.editedCourse.courseId._id, | 1193 | courseId: this.editedCourse.courseId._id, |
| 1194 | classId: this.editedCourse.classId._id, | 1194 | classId: this.editedCourse.classId._id, |
| 1195 | }; | 1195 | }; |
| 1196 | this.editLoading = true; | 1196 | this.editLoading = true; |
| 1197 | http() | 1197 | http() |
| 1198 | .put("/updateCourseDetail", updateData) | 1198 | .put("/updateCourseDetail", updateData) |
| 1199 | .then((response) => { | 1199 | .then((response) => { |
| 1200 | this.getCourseDetailsList(); | 1200 | this.getCourseDetailsList(); |
| 1201 | this.editCourseDetailDialog = false; | 1201 | this.editCourseDetailDialog = false; |
| 1202 | this.snackbar = true; | 1202 | this.snackbar = true; |
| 1203 | this.text = response.data.message; | 1203 | this.text = response.data.message; |
| 1204 | this.color = "green"; | 1204 | this.color = "green"; |
| 1205 | this.editLoading = false; | 1205 | this.editLoading = false; |
| 1206 | // this.editChapterPointName = ""; | 1206 | // this.editChapterPointName = ""; |
| 1207 | this.editFiles = []; | 1207 | this.editFiles = []; |
| 1208 | }) | 1208 | }) |
| 1209 | .catch((error) => { | 1209 | .catch((error) => { |
| 1210 | this.editLoading = false; | 1210 | this.editLoading = false; |
| 1211 | this.snackbar = true; | 1211 | this.snackbar = true; |
| 1212 | this.text = error.response.data.message; | 1212 | this.text = error.response.data.message; |
| 1213 | this.color = "error"; | 1213 | this.color = "error"; |
| 1214 | }); | 1214 | }); |
| 1215 | }, | 1215 | }, |
| 1216 | getAllClasses() { | 1216 | getAllClasses() { |
| 1217 | http() | 1217 | http() |
| 1218 | .get("/getClassesList", { | 1218 | .get("/getClassesList", { |
| 1219 | headers: { Authorization: "Bearer " + this.token }, | 1219 | headers: { Authorization: "Bearer " + this.token }, |
| 1220 | }) | 1220 | }) |
| 1221 | .then((response) => { | 1221 | .then((response) => { |
| 1222 | this.addclass = response.data.data; | 1222 | this.addclass = response.data.data; |
| 1223 | }) | 1223 | }) |
| 1224 | .catch((err) => { | 1224 | .catch((err) => { |
| 1225 | // console.log("err====>", err); | 1225 | // console.log("err====>", err); |
| 1226 | }); | 1226 | }); |
| 1227 | }, | 1227 | }, |
| 1228 | removeChapterPoint: function () { | 1228 | removeChapterPoint: function () { |
| 1229 | this.findsChapterPoint = [{ value: "" }]; | 1229 | this.findsChapterPoint = [{ value: "" }]; |
| 1230 | }, | 1230 | }, |
| 1231 | removeAddFind: function () { | 1231 | removeAddFind: function () { |
| 1232 | this.finds = [{ value: "" }]; | 1232 | this.finds = [{ value: "" }]; |
| 1233 | }, | 1233 | }, |
| 1234 | addFind: function () { | 1234 | addFind: function () { |
| 1235 | this.finds.push({ value: "" }); | 1235 | this.finds.push({ value: "" }); |
| 1236 | }, | 1236 | }, |
| 1237 | addChapterPoint: function () { | 1237 | addChapterPoint: function () { |
| 1238 | this.findsChapterPoint.push({ value: "" }); | 1238 | this.findsChapterPoint.push({ value: "" }); |
| 1239 | }, | 1239 | }, |
| 1240 | update: function () { | 1240 | update: function () { |
| 1241 | this.updates.push({ value: "" }); | 1241 | this.updates.push({ value: "" }); |
| 1242 | }, | 1242 | }, |
| 1243 | // removeUpdatePoints: function() { | 1243 | // removeUpdatePoints: function() { |
| 1244 | // this.updates = [{ value: "" }]; | 1244 | // this.updates = [{ value: "" }]; |
| 1245 | // }, | 1245 | // }, |
| 1246 | deleteFind: function (index) { | 1246 | deleteFind: function (index) { |
| 1247 | this.finds.splice(index, 1); | 1247 | this.finds.splice(index, 1); |
| 1248 | if (index === 0) this.addFind(); | 1248 | if (index === 0) this.addFind(); |
| 1249 | }, | 1249 | }, |
| 1250 | deleteChapterPoint: function (index) { | 1250 | deleteChapterPoint: function (index) { |
| 1251 | this.findsChapterPoint.splice(index, 1); | 1251 | this.findsChapterPoint.splice(index, 1); |
| 1252 | if (index === 0) this.addChapterPoint(); | 1252 | if (index === 0) this.addChapterPoint(); |
| 1253 | }, | 1253 | }, |
| 1254 | deleteUpdate: function (index) { | 1254 | deleteUpdate: function (index) { |
| 1255 | this.updates.splice(index, 1); | 1255 | this.updates.splice(index, 1); |
| 1256 | if (index === 0) this.update(); | 1256 | if (index === 0) this.update(); |
| 1257 | }, | 1257 | }, |
| 1258 | deleteUrl: function (index, youTubelinkId, id) { | 1258 | deleteUrl: function (index, youTubelinkId, id) { |
| 1259 | this.editChapter.chapterPoints.splice(index, 1); | 1259 | this.editChapter.chapterPoints.splice(index, 1); |
| 1260 | if (index === 0) this.update(); | 1260 | if (index === 0) this.update(); |
| 1261 | }, | 1261 | }, |
| 1262 | displaySearch() { | 1262 | displaySearch() { |
| 1263 | this.show = false; | 1263 | this.show = false; |
| 1264 | this.showSearch = true; | 1264 | this.showSearch = true; |
| 1265 | }, | 1265 | }, |
| 1266 | closeSearch() { | 1266 | closeSearch() { |
| 1267 | this.showSearch = false; | 1267 | this.showSearch = false; |
| 1268 | this.show = true; | 1268 | this.show = true; |
| 1269 | this.search = ""; | 1269 | this.search = ""; |
| 1270 | }, | 1270 | }, |
| 1271 | }, | 1271 | }, |
| 1272 | mounted() { | 1272 | mounted() { |
| 1273 | this.token = this.$store.state.token; | 1273 | this.token = this.$store.state.token; |
| 1274 | this.getAllClasses(); | 1274 | this.getAllClasses(); |
| 1275 | }, | 1275 | }, |
| 1276 | }; | 1276 | }; |
| 1277 | </script> | 1277 | </script> |
src/pages/Course/courseDiscussion.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editDialog" max-width="600px" scrollable> | 3 | <v-dialog v-model="editDialog" max-width="600px" scrollable persistent> |
| 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 Course Discussion</label> | 7 | <label class="title text-xs-center">Edit Course Discussion</label> |
| 8 | <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-card-text> | 11 | <v-card-text> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 16 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> | 16 | <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> |
| 17 | <img src="/static/icon/user.png" /> | 17 | <img src="/static/icon/user.png" /> |
| 18 | </v-avatar> | 18 | </v-avatar> |
| 19 | <img | 19 | <img |
| 20 | :src="editedItem.attachementUrl" | 20 | :src="editedItem.attachementUrl" |
| 21 | v-else-if="editedItem.attachementUrl && !editImageUrl" | 21 | v-else-if="editedItem.attachementUrl && !editImageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | style="border-radius:50%; width:150px" | 23 | style="border-radius:50%; width:150px" |
| 24 | /> | 24 | /> |
| 25 | <img | 25 | <img |
| 26 | v-if="editImageUrl" | 26 | v-if="editImageUrl" |
| 27 | :src="editImageUrl" | 27 | :src="editImageUrl" |
| 28 | style="border-radius:50%; width:150px;height:150px" | 28 | style="border-radius:50%; width:150px;height:150px" |
| 29 | /> | 29 | /> |
| 30 | <input | 30 | <input |
| 31 | type="file" | 31 | type="file" |
| 32 | style="display: none" | 32 | style="display: none" |
| 33 | ref="editDataImage" | 33 | ref="editDataImage" |
| 34 | accept="image/*" | 34 | accept="image/*" |
| 35 | @change="onEditFilePicked" | 35 | @change="onEditFilePicked" |
| 36 | /> | 36 | /> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | <v-layout wrap> | 39 | <v-layout wrap> |
| 40 | <v-flex xs12 sm12> | 40 | <v-flex xs12 sm12> |
| 41 | <v-layout> | 41 | <v-layout> |
| 42 | <v-flex xs4 sm5 class="pt-4 subheading"> | 42 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 43 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 43 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 44 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 44 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs8 sm7 class="ml-3"> | 46 | <v-flex xs8 sm7 class="ml-3"> |
| 47 | <v-select | 47 | <v-select |
| 48 | :items="addclass" | 48 | :items="addclass" |
| 49 | v-model="editedItem.classId" | 49 | v-model="editedItem.classId" |
| 50 | item-text="classNum" | 50 | item-text="classNum" |
| 51 | item-value="_id" | 51 | item-value="_id" |
| 52 | name="Select Class" | 52 | name="Select Class" |
| 53 | required | 53 | required |
| 54 | @change="editGetCourses(editedItem.classId)" | 54 | @change="editGetCourses(editedItem.classId)" |
| 55 | ></v-select> | 55 | ></v-select> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs12 sm12> | 59 | <v-flex xs12 sm12> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs4 sm5 class="pt-4 subheading"> | 61 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 62 | <label class="right">Select Course:</label> | 62 | <label class="right">Select Course:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm7 class="ml-3"> | 64 | <v-flex xs8 sm7 class="ml-3"> |
| 65 | <v-select | 65 | <v-select |
| 66 | :items="editCourseData" | 66 | :items="editCourseData" |
| 67 | label="Select Course" | 67 | label="Select Course" |
| 68 | v-model="editedItem.courseId" | 68 | v-model="editedItem.courseId" |
| 69 | item-text="courseName" | 69 | item-text="courseName" |
| 70 | item-value="_id" | 70 | item-value="_id" |
| 71 | required | 71 | required |
| 72 | class="ml-2" | 72 | class="ml-2" |
| 73 | ></v-select> | 73 | ></v-select> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | </v-layout> | 77 | </v-layout> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 sm5 class="pt-4 subheading"> | 79 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 80 | <label class="right">Subject:</label> | 80 | <label class="right">Subject:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs8 sm7 class="ml-3"> | 82 | <v-flex xs8 sm7 class="ml-3"> |
| 83 | <v-text-field v-model="editedItem.subject" type="text" required></v-text-field> | 83 | <v-text-field v-model="editedItem.subject" type="text" required></v-text-field> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 sm5 class="pt-4 subheading"> | 87 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 88 | <label class="right">Description:</label> | 88 | <label class="right">Description:</label> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | <v-flex xs8 sm7 class="ml-3"> | 90 | <v-flex xs8 sm7 class="ml-3"> |
| 91 | <v-text-field v-model="editedItem.description" type="text" required></v-text-field> | 91 | <v-text-field v-model="editedItem.description" type="text" required></v-text-field> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-layout> | 93 | </v-layout> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 sm5 class="pt-4 subheading"> | 95 | <v-flex xs4 sm5 class="pt-4 subheading"> |
| 96 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> | 96 | <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> |
| 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex xs8 sm7 class="ml-3"> | 99 | <v-flex xs8 sm7 class="ml-3"> |
| 100 | <v-text-field | 100 | <v-text-field |
| 101 | @click="pickEditFile" | 101 | @click="pickEditFile" |
| 102 | v-model="editImageName" | 102 | v-model="editImageName" |
| 103 | append-icon="attach_file" | 103 | append-icon="attach_file" |
| 104 | ></v-text-field> | 104 | ></v-text-field> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs12 sm12 class="px-0 mx-0"> | 110 | <v-flex xs12 sm12 class="px-0 mx-0"> |
| 111 | <v-layout class="right"> | 111 | <v-layout class="right"> |
| 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 112 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-form> | 117 | </v-form> |
| 118 | </v-card-text> | 118 | </v-card-text> |
| 119 | </v-card> | 119 | </v-card> |
| 120 | </v-dialog> | 120 | </v-dialog> |
| 121 | <!-- ****** DIsCUSIION TABLE ****** --> | 121 | <!-- ****** DIsCUSIION TABLE ****** --> |
| 122 | <v-toolbar color="transparent" flat> | 122 | <v-toolbar color="transparent" flat> |
| 123 | <v-spacer></v-spacer> | 123 | <v-spacer></v-spacer> |
| 124 | <v-flex xs12 sm4 md2> | 124 | <v-flex xs12 sm4 md2> |
| 125 | <v-select | 125 | <v-select |
| 126 | small | 126 | small |
| 127 | :items="addclass" | 127 | :items="addclass" |
| 128 | label="Select Class" | 128 | label="Select Class" |
| 129 | v-model="getSelectedData.classId" | 129 | v-model="getSelectedData.classId" |
| 130 | item-text="classNum" | 130 | item-text="classNum" |
| 131 | item-value="_id" | 131 | item-value="_id" |
| 132 | name="Select Class" | 132 | name="Select Class" |
| 133 | @change="getCourses(getSelectedData.classId)" | 133 | @change="getCourses(getSelectedData.classId)" |
| 134 | class="mr-2" | 134 | class="mr-2" |
| 135 | required | 135 | required |
| 136 | ></v-select> | 136 | ></v-select> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <v-flex xs12 sm4 md2> | 138 | <v-flex xs12 sm4 md2> |
| 139 | <v-select | 139 | <v-select |
| 140 | :items="courseData" | 140 | :items="courseData" |
| 141 | label="Select Course" | 141 | label="Select Course" |
| 142 | v-model="getSelectedData.courseId" | 142 | v-model="getSelectedData.courseId" |
| 143 | item-text="courseName" | 143 | item-text="courseName" |
| 144 | item-value="_id" | 144 | item-value="_id" |
| 145 | required | 145 | required |
| 146 | class="ml-2" | 146 | class="ml-2" |
| 147 | @change="getCourseDiscussionTable(getSelectedData.courseId)" | 147 | @change="getCourseDiscussionTable(getSelectedData.courseId)" |
| 148 | ></v-select> | 148 | ></v-select> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-card-title class="body-1" v-show="show"> | 150 | <v-card-title class="body-1" v-show="show"> |
| 151 | <v-btn icon large flat @click="displaySearch"> | 151 | <v-btn icon large flat @click="displaySearch"> |
| 152 | <v-avatar size="27"> | 152 | <v-avatar size="27"> |
| 153 | <img src="/static/icon/search.png" alt="icon" /> | 153 | <img src="/static/icon/search.png" alt="icon" /> |
| 154 | </v-avatar> | 154 | </v-avatar> |
| 155 | </v-btn> | 155 | </v-btn> |
| 156 | </v-card-title> | 156 | </v-card-title> |
| 157 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 157 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 158 | <v-layout> | 158 | <v-layout> |
| 159 | <v-text-field | 159 | <v-text-field |
| 160 | autofocus | 160 | autofocus |
| 161 | v-model="search" | 161 | v-model="search" |
| 162 | label="Search" | 162 | label="Search" |
| 163 | prepend-inner-icon="search" | 163 | prepend-inner-icon="search" |
| 164 | color="primary" | 164 | color="primary" |
| 165 | ></v-text-field> | 165 | ></v-text-field> |
| 166 | <v-icon @click="closeSearch" color="error">close</v-icon> | 166 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-toolbar> | 169 | </v-toolbar> |
| 170 | <v-data-table | 170 | <v-data-table |
| 171 | :headers="headers" | 171 | :headers="headers" |
| 172 | :items="courseDiscussionData" | 172 | :items="courseDiscussionData" |
| 173 | :pagination.sync="pagination" | 173 | :pagination.sync="pagination" |
| 174 | :search="search" | 174 | :search="search" |
| 175 | > | 175 | > |
| 176 | <template slot="items" slot-scope="props"> | 176 | <template slot="items" slot-scope="props"> |
| 177 | <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)"> | 177 | <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)"> |
| 178 | <td class="text-xs-center td td-row"> | 178 | <td class="text-xs-center td td-row"> |
| 179 | <v-avatar size="40"> | 179 | <v-avatar size="40"> |
| 180 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> | 180 | <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> |
| 181 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> | 181 | <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> |
| 182 | </v-avatar> | 182 | </v-avatar> |
| 183 | </td> | 183 | </td> |
| 184 | <td class="text-xs-center td td-row">{{ props.item.subject }}</td> | 184 | <td class="text-xs-center td td-row">{{ props.item.subject }}</td> |
| 185 | <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td> | 185 | <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td> |
| 186 | <td class="text-xs-center td td-row">-</td> | 186 | <td class="text-xs-center td td-row">-</td> |
| 187 | <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td> | 187 | <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</td> |
| 188 | <td class="text-xs-center td td-row"> | 188 | <td class="text-xs-center td td-row"> |
| 189 | <span> | 189 | <span> |
| 190 | <v-tooltip top> | 190 | <v-tooltip top> |
| 191 | <img | 191 | <img |
| 192 | slot="activator" | 192 | slot="activator" |
| 193 | style="cursor:pointer; width:20px; height:18px; " | 193 | style="cursor:pointer; width:20px; height:18px; " |
| 194 | class="mr-3" | 194 | class="mr-3" |
| 195 | @click="editItem(props.item)" | 195 | @click="editItem(props.item)" |
| 196 | src="/static/icon/edit.png" | 196 | src="/static/icon/edit.png" |
| 197 | /> | 197 | /> |
| 198 | <span>Edit</span> | 198 | <span>Edit</span> |
| 199 | </v-tooltip> | 199 | </v-tooltip> |
| 200 | <v-tooltip top> | 200 | <v-tooltip top> |
| 201 | <img | 201 | <img |
| 202 | slot="activator" | 202 | slot="activator" |
| 203 | style="cursor:pointer; width:20px; height:20px; " | 203 | style="cursor:pointer; width:20px; height:20px; " |
| 204 | class="mr-3" | 204 | class="mr-3" |
| 205 | @click="deleteItem(props.item)" | 205 | @click="deleteItem(props.item)" |
| 206 | src="/static/icon/delete.png" | 206 | src="/static/icon/delete.png" |
| 207 | /> | 207 | /> |
| 208 | <span>Delete</span> | 208 | <span>Delete</span> |
| 209 | </v-tooltip> | 209 | </v-tooltip> |
| 210 | </span> | 210 | </span> |
| 211 | </td> | 211 | </td> |
| 212 | </tr> | 212 | </tr> |
| 213 | </template> | 213 | </template> |
| 214 | <v-alert | 214 | <v-alert |
| 215 | slot="no-results" | 215 | slot="no-results" |
| 216 | :value="true" | 216 | :value="true" |
| 217 | color="error" | 217 | color="error" |
| 218 | icon="warning" | 218 | icon="warning" |
| 219 | >Your search for "{{ search }}" found no results.</v-alert> | 219 | >Your search for "{{ search }}" found no results.</v-alert> |
| 220 | </v-data-table> | 220 | </v-data-table> |
| 221 | <v-snackbar | 221 | <v-snackbar |
| 222 | :timeout="timeout" | 222 | :timeout="timeout" |
| 223 | :top="y === 'top'" | 223 | :top="y === 'top'" |
| 224 | :right="x === 'right'" | 224 | :right="x === 'right'" |
| 225 | :vertical="mode === 'vertical'" | 225 | :vertical="mode === 'vertical'" |
| 226 | v-model="snackbar" | 226 | v-model="snackbar" |
| 227 | :color="color" | 227 | :color="color" |
| 228 | >{{ text }}</v-snackbar> | 228 | >{{ text }}</v-snackbar> |
| 229 | <div class="loader" v-if="showLoader"> | 229 | <div class="loader" v-if="showLoader"> |
| 230 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 230 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 231 | </div> | 231 | </div> |
| 232 | </v-container> | 232 | </v-container> |
| 233 | </template> | 233 | </template> |
| 234 | 234 | ||
| 235 | <script> | 235 | <script> |
| 236 | import http from "@/Services/http.js"; | 236 | import http from "@/Services/http.js"; |
| 237 | import moment from "moment"; | 237 | import moment from "moment"; |
| 238 | 238 | ||
| 239 | export default { | 239 | export default { |
| 240 | data: () => ({ | 240 | data: () => ({ |
| 241 | snackbar: false, | 241 | snackbar: false, |
| 242 | y: "top", | 242 | y: "top", |
| 243 | x: "right", | 243 | x: "right", |
| 244 | mode: "", | 244 | mode: "", |
| 245 | timeout: 3000, | 245 | timeout: 3000, |
| 246 | text: "", | 246 | text: "", |
| 247 | color: "", | 247 | color: "", |
| 248 | show: true, | 248 | show: true, |
| 249 | showSearch: false, | 249 | showSearch: false, |
| 250 | showLoader: false, | 250 | showLoader: false, |
| 251 | loading: false, | 251 | loading: false, |
| 252 | date: null, | 252 | date: null, |
| 253 | search: "", | 253 | search: "", |
| 254 | addclass: [], | 254 | addclass: [], |
| 255 | pagination: { | 255 | pagination: { |
| 256 | rowsPerPage: 10, | 256 | rowsPerPage: 10, |
| 257 | }, | 257 | }, |
| 258 | headers: [ | 258 | headers: [ |
| 259 | { | 259 | { |
| 260 | text: "Image", | 260 | text: "Image", |
| 261 | value: "subjattachementUrlect", | 261 | value: "subjattachementUrlect", |
| 262 | sortable: false, | 262 | sortable: false, |
| 263 | align: "center", | 263 | align: "center", |
| 264 | }, | 264 | }, |
| 265 | { | 265 | { |
| 266 | text: "Discussion", | 266 | text: "Discussion", |
| 267 | value: "subject", | 267 | value: "subject", |
| 268 | sortable: false, | 268 | sortable: false, |
| 269 | align: "center", | 269 | align: "center", |
| 270 | }, | 270 | }, |
| 271 | { text: "Started", value: "studentId", sortable: false, align: "center" }, | 271 | { text: "Started", value: "studentId", sortable: false, align: "center" }, |
| 272 | { | 272 | { |
| 273 | text: "Last Post", | 273 | text: "Last Post", |
| 274 | value: "forumThread", | 274 | value: "forumThread", |
| 275 | sortable: false, | 275 | sortable: false, |
| 276 | align: "center", | 276 | align: "center", |
| 277 | }, | 277 | }, |
| 278 | { text: "replies", value: "email", sortable: false, align: "center" }, | 278 | { text: "replies", value: "email", sortable: false, align: "center" }, |
| 279 | { text: "Action", value: "", sortable: false, align: "center" }, | 279 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 280 | ], | 280 | ], |
| 281 | token: "", | 281 | token: "", |
| 282 | selectStudents: { | 282 | selectStudents: { |
| 283 | select: "", | 283 | select: "", |
| 284 | selectSection: "", | 284 | selectSection: "", |
| 285 | }, | 285 | }, |
| 286 | 286 | ||
| 287 | role: "", | 287 | role: "", |
| 288 | schoolRole: "", | 288 | schoolRole: "", |
| 289 | menu: false, | 289 | menu: false, |
| 290 | valid: true, | 290 | valid: true, |
| 291 | 291 | ||
| 292 | getSelectedData: {}, | 292 | getSelectedData: {}, |
| 293 | courseDiscussionData: [], | 293 | courseDiscussionData: [], |
| 294 | courseData: [], | 294 | courseData: [], |
| 295 | editCourseData: [], | 295 | editCourseData: [], |
| 296 | addSection: [], | 296 | addSection: [], |
| 297 | editedItem: {}, | 297 | editedItem: {}, |
| 298 | editDialog: false, | 298 | editDialog: false, |
| 299 | editedIndex: -1, | 299 | editedIndex: -1, |
| 300 | editiImageFile: "", | 300 | editiImageFile: "", |
| 301 | editImageName: "", | 301 | editImageName: "", |
| 302 | editImageUrl: "", | 302 | editImageUrl: "", |
| 303 | editLoading: false, | 303 | editLoading: false, |
| 304 | showData: false, | 304 | showData: false, |
| 305 | }), | 305 | }), |
| 306 | methods: { | 306 | methods: { |
| 307 | // save(date) { | 307 | // save(date) { |
| 308 | // this.$refs.menu.save(date); | 308 | // this.$refs.menu.save(date); |
| 309 | // }, | 309 | // }, |
| 310 | pickEditFile() { | 310 | pickEditFile() { |
| 311 | this.$refs.editDataImage.click(); | 311 | this.$refs.editDataImage.click(); |
| 312 | }, | 312 | }, |
| 313 | onEditFilePicked(e) { | 313 | onEditFilePicked(e) { |
| 314 | console.log(e); | 314 | console.log(e); |
| 315 | const files = e.target.files; | 315 | const files = e.target.files; |
| 316 | if (files[0] !== undefined) { | 316 | if (files[0] !== undefined) { |
| 317 | this.editImageName = files[0].name; | 317 | this.editImageName = files[0].name; |
| 318 | console.log("this.editImageName", this.editImageName); | 318 | console.log("this.editImageName", this.editImageName); |
| 319 | 319 | ||
| 320 | if (this.editImageName.lastIndexOf(".") <= 0) { | 320 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 321 | return; | 321 | return; |
| 322 | } | 322 | } |
| 323 | const fr = new FileReader(); | 323 | const fr = new FileReader(); |
| 324 | fr.readAsDataURL(files[0]); | 324 | fr.readAsDataURL(files[0]); |
| 325 | fr.addEventListener("load", () => { | 325 | fr.addEventListener("load", () => { |
| 326 | this.editImageUrl = fr.result; | 326 | this.editImageUrl = fr.result; |
| 327 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 327 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 328 | }); | 328 | }); |
| 329 | } else { | 329 | } else { |
| 330 | this.editImageName = ""; | 330 | this.editImageName = ""; |
| 331 | this.editiImageFile = ""; | 331 | this.editiImageFile = ""; |
| 332 | } | 332 | } |
| 333 | }, | 333 | }, |
| 334 | getAllClass() { | 334 | getAllClass() { |
| 335 | http() | 335 | http() |
| 336 | .get("/getClassesList", { | 336 | .get("/getClassesList", { |
| 337 | headers: { Authorization: "Bearer " + this.token }, | 337 | headers: { Authorization: "Bearer " + this.token }, |
| 338 | }) | 338 | }) |
| 339 | .then((response) => { | 339 | .then((response) => { |
| 340 | this.addclass = response.data.data; | 340 | this.addclass = response.data.data; |
| 341 | }) | 341 | }) |
| 342 | .catch((error) => { | 342 | .catch((error) => { |
| 343 | // console.log("err====>", err); | 343 | // console.log("err====>", err); |
| 344 | // this.$router.replace({ path: "/" }); | 344 | // this.$router.replace({ path: "/" }); |
| 345 | }); | 345 | }); |
| 346 | }, | 346 | }, |
| 347 | getCourses(classId) { | 347 | getCourses(classId) { |
| 348 | this.showLoader = true; | 348 | this.showLoader = true; |
| 349 | http() | 349 | http() |
| 350 | .get("/getCourseesList", { | 350 | .get("/getCourseesList", { |
| 351 | params: { | 351 | params: { |
| 352 | classId: classId, | 352 | classId: classId, |
| 353 | }, | 353 | }, |
| 354 | }) | 354 | }) |
| 355 | .then((response) => { | 355 | .then((response) => { |
| 356 | this.courseData = response.data.data; | 356 | this.courseData = response.data.data; |
| 357 | this.showLoader = false; | 357 | this.showLoader = false; |
| 358 | }) | 358 | }) |
| 359 | .catch((err) => { | 359 | .catch((err) => { |
| 360 | console.log("err====>", err); | 360 | console.log("err====>", err); |
| 361 | this.showLoader = false; | 361 | this.showLoader = false; |
| 362 | }); | 362 | }); |
| 363 | }, | 363 | }, |
| 364 | editGetCourses(classId) { | 364 | editGetCourses(classId) { |
| 365 | this.showLoader = true; | 365 | this.showLoader = true; |
| 366 | http() | 366 | http() |
| 367 | .get("/getCourseesList", { | 367 | .get("/getCourseesList", { |
| 368 | params: { | 368 | params: { |
| 369 | classId: classId, | 369 | classId: classId, |
| 370 | }, | 370 | }, |
| 371 | }) | 371 | }) |
| 372 | .then((response) => { | 372 | .then((response) => { |
| 373 | this.editCourseData = response.data.data; | 373 | this.editCourseData = response.data.data; |
| 374 | this.showLoader = false; | 374 | this.showLoader = false; |
| 375 | }) | 375 | }) |
| 376 | .catch((err) => { | 376 | .catch((err) => { |
| 377 | console.log("err====>", err); | 377 | console.log("err====>", err); |
| 378 | this.showLoader = false; | 378 | this.showLoader = false; |
| 379 | }); | 379 | }); |
| 380 | }, | 380 | }, |
| 381 | getCourseDiscussionTable(id) { | 381 | getCourseDiscussionTable(id) { |
| 382 | // console.log("id", this.getSelectedData.courseId); | 382 | // console.log("id", this.getSelectedData.courseId); |
| 383 | this.showLoader = true; | 383 | this.showLoader = true; |
| 384 | http() | 384 | http() |
| 385 | .get("/getCourseDiscussionesList", { | 385 | .get("/getCourseDiscussionesList", { |
| 386 | params: { | 386 | params: { |
| 387 | classId: this.getSelectedData.classId, | 387 | classId: this.getSelectedData.classId, |
| 388 | courseId: id, | 388 | courseId: id, |
| 389 | }, | 389 | }, |
| 390 | }) | 390 | }) |
| 391 | .then((response) => { | 391 | .then((response) => { |
| 392 | // console.log("response", response.data.data); | 392 | // console.log("response", response.data.data); |
| 393 | this.courseDiscussionData = response.data.data; | 393 | this.courseDiscussionData = response.data.data; |
| 394 | if (this.courseDiscussionData.length === 0) { | 394 | if (this.courseDiscussionData.length === 0) { |
| 395 | this.showLoader = false; | 395 | this.showLoader = false; |
| 396 | this.snackbar = true; | 396 | this.snackbar = true; |
| 397 | this.text = "Data not found!"; | 397 | this.text = "Data not found!"; |
| 398 | this.color = "error"; | 398 | this.color = "error"; |
| 399 | return; | 399 | return; |
| 400 | } | 400 | } |
| 401 | this.showData = true; | 401 | this.showData = true; |
| 402 | this.showLoader = false; | 402 | this.showLoader = false; |
| 403 | }) | 403 | }) |
| 404 | .catch((error) => { | 404 | .catch((error) => { |
| 405 | console.log("err====>", error); | 405 | console.log("err====>", error); |
| 406 | this.showLoader = false; | 406 | this.showLoader = false; |
| 407 | }); | 407 | }); |
| 408 | }, | 408 | }, |
| 409 | rowCourseDiscussion(id) { | 409 | rowCourseDiscussion(id) { |
| 410 | this.$router.push({ | 410 | this.$router.push({ |
| 411 | name: "Course Discussiones Fourm", | 411 | name: "Course Discussiones Fourm", |
| 412 | params: { discussionId: id }, | 412 | params: { discussionId: id }, |
| 413 | }); | 413 | }); |
| 414 | }, | 414 | }, |
| 415 | editItem(item) { | 415 | editItem(item) { |
| 416 | this.editedIndex = this.courseDiscussionData.indexOf(item); | 416 | this.editedIndex = this.courseDiscussionData.indexOf(item); |
| 417 | this.editedItem = Object.assign({}, item); | 417 | this.editedItem = Object.assign({}, item); |
| 418 | this.editDialog = true; | 418 | this.editDialog = true; |
| 419 | }, | 419 | }, |
| 420 | save() { | 420 | save() { |
| 421 | console.log("this.editedItem", this.editedItem); | 421 | console.log("this.editedItem", this.editedItem); |
| 422 | let editCourseDiscuss = { | 422 | let editCourseDiscuss = { |
| 423 | courseDiscussionId: this.editedItem._id, | 423 | courseDiscussionId: this.editedItem._id, |
| 424 | courseId: this.editedItem.courseId, | 424 | courseId: this.editedItem.courseId, |
| 425 | studentId: this.editedItem.studentId._id, | 425 | studentId: this.editedItem.studentId._id, |
| 426 | subject: this.editedItem.subject, | 426 | subject: this.editedItem.subject, |
| 427 | description: this.editedItem.description, | 427 | description: this.editedItem.description, |
| 428 | }; | 428 | }; |
| 429 | if (this.editedItem.classId._id) { | 429 | if (this.editedItem.classId._id) { |
| 430 | editCourseDiscuss.classId = this.editedItem.classId._id; | 430 | editCourseDiscuss.classId = this.editedItem.classId._id; |
| 431 | } | 431 | } |
| 432 | if (!this.editedItem.classId._id) { | 432 | if (!this.editedItem.classId._id) { |
| 433 | editCourseDiscuss.classId = this.editedItem.classId; | 433 | editCourseDiscuss.classId = this.editedItem.classId; |
| 434 | } | 434 | } |
| 435 | if (this.editImageUrl) { | 435 | if (this.editImageUrl) { |
| 436 | var str = this.editImageUrl; | 436 | var str = this.editImageUrl; |
| 437 | const [baseUrl, editImageUrl] = str.split(/,/); | 437 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 438 | editCourse.upload = editImageUrl; | 438 | editCourse.upload = editImageUrl; |
| 439 | } | 439 | } |
| 440 | this.editLoading = true; | 440 | this.editLoading = true; |
| 441 | http() | 441 | http() |
| 442 | .put("/updateCourseDiscussion", editCourseDiscuss) | 442 | .put("/updateCourseDiscussion", editCourseDiscuss) |
| 443 | .then((response) => { | 443 | .then((response) => { |
| 444 | this.snackbar = true; | 444 | this.snackbar = true; |
| 445 | this.text = response.data.message; | 445 | this.text = response.data.message; |
| 446 | this.color = "green"; | 446 | this.color = "green"; |
| 447 | this.imageUrl = ""; | 447 | this.imageUrl = ""; |
| 448 | this.getCourseDiscussionTable(); | 448 | this.getCourseDiscussionTable(); |
| 449 | this.editDialog = false; | 449 | this.editDialog = false; |
| 450 | this.editLoading = false; | 450 | this.editLoading = false; |
| 451 | }) | 451 | }) |
| 452 | .catch((error) => { | 452 | .catch((error) => { |
| 453 | this.editLoading = false; | 453 | this.editLoading = false; |
| 454 | this.snackbar = true; | 454 | this.snackbar = true; |
| 455 | this.text = error.response.data.statusText; | 455 | this.text = error.response.data.statusText; |
| 456 | this.color = "error"; | 456 | this.color = "error"; |
| 457 | }); | 457 | }); |
| 458 | }, | 458 | }, |
| 459 | deleteItem(item) { | 459 | deleteItem(item) { |
| 460 | let deleteCourseDiscussion = { | 460 | let deleteCourseDiscussion = { |
| 461 | courseDiscussionId: item._id, | 461 | courseDiscussionId: item._id, |
| 462 | }; | 462 | }; |
| 463 | http() | 463 | http() |
| 464 | .delete( | 464 | .delete( |
| 465 | "/deleteCourseDiscussion", | 465 | "/deleteCourseDiscussion", |
| 466 | confirm("Are you sure you want to delete this?") && { | 466 | confirm("Are you sure you want to delete this?") && { |
| 467 | params: deleteCourseDiscussion, | 467 | params: deleteCourseDiscussion, |
| 468 | } | 468 | } |
| 469 | ) | 469 | ) |
| 470 | .then((response) => { | 470 | .then((response) => { |
| 471 | this.snackbar = true; | 471 | this.snackbar = true; |
| 472 | this.text = response.data.message; | 472 | this.text = response.data.message; |
| 473 | this.color = "green"; | 473 | this.color = "green"; |
| 474 | this.getCourseDiscussionTable(); | 474 | this.getCourseDiscussionTable(); |
| 475 | }) | 475 | }) |
| 476 | .catch((error) => { | 476 | .catch((error) => { |
| 477 | this.snackbar = true; | 477 | this.snackbar = true; |
| 478 | this.text = error.response.data.message; | 478 | this.text = error.response.data.message; |
| 479 | this.color = "error"; | 479 | this.color = "error"; |
| 480 | }); | 480 | }); |
| 481 | }, | 481 | }, |
| 482 | displaySearch() { | 482 | displaySearch() { |
| 483 | this.show = false; | 483 | this.show = false; |
| 484 | this.showSearch = true; | 484 | this.showSearch = true; |
| 485 | }, | 485 | }, |
| 486 | closeSearch() { | 486 | closeSearch() { |
| 487 | this.showSearch = false; | 487 | this.showSearch = false; |
| 488 | this.show = true; | 488 | this.show = true; |
| 489 | this.search = ""; | 489 | this.search = ""; |
| 490 | }, | 490 | }, |
| 491 | }, | 491 | }, |
| 492 | mounted() { | 492 | mounted() { |
| 493 | // this.getStudentList(); | 493 | // this.getStudentList(); |
| 494 | this.token = this.$store.state.token; | 494 | this.token = this.$store.state.token; |
| 495 | this.role = this.$store.state.role; | 495 | this.role = this.$store.state.role; |
| 496 | this.getAllClass(); | 496 | this.getAllClass(); |
| 497 | }, | 497 | }, |
| 498 | }; | 498 | }; |
| 499 | </script> | 499 | </script> |
| 500 | 500 | ||
| 501 | <style> | 501 | <style> |
| 502 | .row-click { | 502 | .row-click { |
| 503 | cursor: pointer !important; | 503 | cursor: pointer !important; |
| 504 | } | 504 | } |
| 505 | </style> | 505 | </style> |
src/pages/Dashboard/LiveOnlineClass.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="body-color"> | 2 | <div class="body-color"> |
| 3 | <!-- LOADER --> | 3 | <!-- LOADER --> |
| 4 | <div class="loader" v-if="showLoader"> | 4 | <div class="loader" v-if="showLoader"> |
| 5 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 5 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 6 | </div> | 6 | </div> |
| 7 | 7 | ||
| 8 | <!-- SNACKBAR --> | 8 | <!-- SNACKBAR --> |
| 9 | <v-snackbar | 9 | <v-snackbar |
| 10 | :timeout="timeout" | 10 | :timeout="timeout" |
| 11 | :top="y === 'top'" | 11 | :top="y === 'top'" |
| 12 | :right="x === 'right'" | 12 | :right="x === 'right'" |
| 13 | :vertical="mode === 'vertical'" | 13 | :vertical="mode === 'vertical'" |
| 14 | v-model="snackbar" | 14 | v-model="snackbar" |
| 15 | :color="snackbarColor" | 15 | :color="snackbarColor" |
| 16 | > | 16 | > |
| 17 | {{ text }} | 17 | {{ text }} |
| 18 | <v-spacer></v-spacer> | 18 | <v-spacer></v-spacer> |
| 19 | <v-btn flat text @click="snackbar = false">X</v-btn> | 19 | <v-btn flat text @click="snackbar = false">X</v-btn> |
| 20 | </v-snackbar> | 20 | </v-snackbar> |
| 21 | 21 | ||
| 22 | <v-container grid-list-xl class="pt-0"> | 22 | <v-container grid-list-xl class="pt-0"> |
| 23 | <v-layout row wrap class="mt-1"> | 23 | <v-layout row wrap class="mt-1"> |
| 24 | <!-- if logged in user is parent --> | 24 | <!-- if logged in user is parent --> |
| 25 | <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> | 25 | <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> |
| 26 | <v-layout column> | 26 | <v-layout column> |
| 27 | <!-- HEADING --> | 27 | <!-- HEADING --> |
| 28 | <v-flex> | 28 | <v-flex> |
| 29 | <div | 29 | <div |
| 30 | class="title side-bar-color font-weight-bold" | 30 | class="title side-bar-color font-weight-bold" |
| 31 | >Live Online Classes - {{$route.query.chapterName}}</div> | 31 | >Live Online Classes - {{$route.query.chapterName}}</div> |
| 32 | <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> | 32 | <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> |
| 33 | <!-- <div | 33 | <!-- <div |
| 34 | class="subheading grey--text lighten-1" | 34 | class="subheading grey--text lighten-1" |
| 35 | >The session started at 1:00 there is 1 moderator</div>--> | 35 | >The session started at 1:00 there is 1 moderator</div>--> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | 37 | ||
| 38 | <!-- JOIN OR END SESSION --> | 38 | <!-- JOIN OR END SESSION --> |
| 39 | <v-flex> | 39 | <v-flex> |
| 40 | <div> | 40 | <div> |
| 41 | <v-btn | 41 | <v-btn |
| 42 | round | 42 | round |
| 43 | class="open-dialog-button" | 43 | class="open-dialog-button" |
| 44 | dark | 44 | dark |
| 45 | v-if="studentBtn" | 45 | v-if="studentBtn" |
| 46 | @click="showLoader = true;startChat();" | 46 | @click="showLoader = true;startChat();" |
| 47 | >{{studentBtn}}</v-btn> | 47 | >{{studentBtn}}</v-btn> |
| 48 | <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> | 48 | <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> |
| 49 | </div> | 49 | </div> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | <v-flex id="studentClone"> | 51 | <v-flex id="studentClone"> |
| 52 | <div id="jitsi-container"></div> | 52 | <div id="jitsi-container"></div> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | 56 | ||
| 57 | <!-- if logged in user is teacher --> | 57 | <!-- if logged in user is teacher --> |
| 58 | <v-flex xs12 sm12 md12 v-else> | 58 | <v-flex xs12 sm12 md12 v-else> |
| 59 | <v-layout column> | 59 | <v-layout column> |
| 60 | <!-- HEADING --> | 60 | <!-- HEADING --> |
| 61 | <v-flex> | 61 | <v-flex> |
| 62 | <div | 62 | <div |
| 63 | class="title side-bar-color font-weight-bold" | 63 | class="title side-bar-color font-weight-bold" |
| 64 | >Live Online Classes - {{$route.query.chapterName}}</div> | 64 | >Live Online Classes - {{$route.query.chapterName}}</div> |
| 65 | <!-- <div class="subheading grey--text lighten-1"></div> --> | 65 | <!-- <div class="subheading grey--text lighten-1"></div> --> |
| 66 | <!-- <div | 66 | <!-- <div |
| 67 | class="subheading grey--text lighten-1" | 67 | class="subheading grey--text lighten-1" |
| 68 | >The session started at 1:00 there is 1 moderator</div>--> | 68 | >The session started at 1:00 there is 1 moderator</div>--> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | 70 | ||
| 71 | <!-- JOIN OR END SESSION --> | 71 | <!-- JOIN OR END SESSION --> |
| 72 | <v-flex> | 72 | <v-flex> |
| 73 | <div> | 73 | <div> |
| 74 | <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn> | 74 | <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn> |
| 75 | </div> | 75 | </div> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex id="teacherClone"> | 77 | <v-flex id="teacherClone"> |
| 78 | <div id="jitsi-container"></div> | 78 | <div id="jitsi-container"></div> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | 82 | ||
| 83 | <v-spacer></v-spacer> | 83 | <v-spacer></v-spacer> |
| 84 | 84 | ||
| 85 | <!-- COURSES SIDE BAR- positioned to the right of the page --> | 85 | <!-- COURSES SIDE BAR- positioned to the right of the page --> |
| 86 | <!-- <v-flex xs3> | 86 | <!-- <v-flex xs3> |
| 87 | <v-card class="elevation-0 card-border" height="100%"> | 87 | <v-card class="elevation-0 card-border" height="100%"> |
| 88 | <CoursesSideBar></CoursesSideBar> | 88 | <CoursesSideBar></CoursesSideBar> |
| 89 | </v-card> | 89 | </v-card> |
| 90 | </v-flex>--> | 90 | </v-flex>--> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | </v-container> | 92 | </v-container> |
| 93 | </div> | 93 | </div> |
| 94 | </template> | 94 | </template> |
| 95 | <script> | 95 | <script> |
| 96 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 96 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
| 97 | import http from "@/Services/http.js"; | 97 | import http from "@/Services/http.js"; |
| 98 | import moment from "moment"; | 98 | import moment from "moment"; |
| 99 | import Meet from "@/pages/Meet/meet.vue"; | 99 | import Meet from "@/pages/Meet/meet.vue"; |
| 100 | import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; | 100 | import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; |
| 101 | export default { | 101 | export default { |
| 102 | mixins: [AllApiCalls], | 102 | mixins: [AllApiCalls], |
| 103 | components: { | 103 | components: { |
| 104 | CoursesSideBar, | 104 | CoursesSideBar, |
| 105 | }, | 105 | }, |
| 106 | data() { | 106 | data() { |
| 107 | return { | 107 | return { |
| 108 | startLiveSession: "", | 108 | startLiveSession: "", |
| 109 | studentBtn: "", | 109 | studentBtn: "", |
| 110 | 110 | ||
| 111 | // DATA TABLE | 111 | // DATA TABLE |
| 112 | search: "", | 112 | search: "", |
| 113 | pagination: { | 113 | pagination: { |
| 114 | rowsPerPage: 10, | 114 | rowsPerPage: 10, |
| 115 | }, | 115 | }, |
| 116 | liveOnlineHeaders: [ | 116 | liveOnlineHeaders: [ |
| 117 | { | 117 | { |
| 118 | text: "Playback", | 118 | text: "Playback", |
| 119 | value: "attachementUrl", | 119 | value: "attachementUrl", |
| 120 | sortable: false, | 120 | sortable: false, |
| 121 | align: "center", | 121 | align: "center", |
| 122 | }, | 122 | }, |
| 123 | { | 123 | { |
| 124 | text: "Meeting", | 124 | text: "Meeting", |
| 125 | align: "center", | 125 | align: "center", |
| 126 | sortable: false, | 126 | sortable: false, |
| 127 | value: "", | 127 | value: "", |
| 128 | }, | 128 | }, |
| 129 | { | 129 | { |
| 130 | text: "Recording", | 130 | text: "Recording", |
| 131 | value: "", | 131 | value: "", |
| 132 | sortable: false, | 132 | sortable: false, |
| 133 | align: "center", | 133 | align: "center", |
| 134 | }, | 134 | }, |
| 135 | { | 135 | { |
| 136 | text: "Description Preview", | 136 | text: "Description Preview", |
| 137 | value: "", | 137 | value: "", |
| 138 | sortable: false, | 138 | sortable: false, |
| 139 | align: "center", | 139 | align: "center", |
| 140 | }, | 140 | }, |
| 141 | { text: "Date", value: "", sortable: false, align: "center" }, | 141 | { text: "Date", value: "", sortable: false, align: "center" }, |
| 142 | { text: "Duration", value: "", sortable: false, align: "center" }, | 142 | { text: "Duration", value: "", sortable: false, align: "center" }, |
| 143 | { text: "Toolbar", value: "", sortable: false, align: "center" }, | 143 | { text: "Toolbar", value: "", sortable: false, align: "center" }, |
| 144 | ], | 144 | ], |
| 145 | liveOnlineItems: [], | 145 | liveOnlineItems: [], |
| 146 | 146 | ||
| 147 | // JITSI CONTAINER | 147 | // JITSI CONTAINER |
| 148 | liveLink: "", | 148 | liveLink: "", |
| 149 | token: "", | 149 | token: "", |
| 150 | selectStudents: {}, | 150 | selectStudents: {}, |
| 151 | classRules: [(v) => !!v || " Class Name is required"], | 151 | classRules: [(v) => !!v || " Class Name is required"], |
| 152 | sectionRules: [(v) => !!v || " Section Name is required"], | 152 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 153 | addclass: [], | 153 | addclass: [], |
| 154 | addSection: [], | 154 | addSection: [], |
| 155 | loading: false, | 155 | loading: false, |
| 156 | room: "", | 156 | room: "", |
| 157 | username: "", | 157 | username: "", |
| 158 | roomPassword: "", | 158 | roomPassword: "", |
| 159 | counter: 0, | 159 | counter: 0, |
| 160 | }; | 160 | }; |
| 161 | }, | 161 | }, |
| 162 | methods: { | 162 | methods: { |
| 163 | async startChat() { | 163 | async startChat() { |
| 164 | if (this.$store.state.role === "PARENT") { | 164 | if (this.$store.state.role === "PARENT") { |
| 165 | if (this.counter == 0) { | 165 | if (this.counter == 0) { |
| 166 | console.log("enter start chat"); | 166 | console.log("enter start chat"); |
| 167 | this.startConference(); | 167 | this.startConference(); |
| 168 | this.counter += 1; | 168 | this.counter += 1; |
| 169 | } | 169 | } |
| 170 | } | 170 | } |
| 171 | if (this.$store.state.role === "TEACHER") { | 171 | if (this.$store.state.role === "TEACHER") { |
| 172 | if (this.counter == 0) { | 172 | if (this.counter == 0) { |
| 173 | this.createRoom(); | 173 | this.createRoom(); |
| 174 | this.counter += 1; | 174 | this.counter += 1; |
| 175 | } | 175 | } |
| 176 | } | 176 | } |
| 177 | }, | 177 | }, |
| 178 | // JITSI CONTAINER | 178 | // JITSI CONTAINER |
| 179 | startConference() { | 179 | startConference() { |
| 180 | console.log("yes session started"); | 180 | console.log("yes session started"); |
| 181 | var _this = this; | 181 | var _this = this; |
| 182 | try { | 182 | try { |
| 183 | const domain = "meet.intrack.in"; | 183 | const domain = "meet.intrack.in"; |
| 184 | const options = { | 184 | const options = { |
| 185 | audioInput: "<deviceLabel>", | 185 | audioInput: "<deviceLabel>", |
| 186 | audioOutput: "<deviceLabel>", | 186 | audioOutput: "<deviceLabel>", |
| 187 | videoInput: "<deviceLabel>", | 187 | videoInput: "<deviceLabel>", |
| 188 | prejoinPageEnabled: false, | 188 | prejoinPageEnabled: false, |
| 189 | roomName: this.room, | 189 | roomName: this.room, |
| 190 | height: 500, | 190 | height: 500, |
| 191 | parentNode: document.getElementById("jitsi-container"), | 191 | parentNode: document.getElementById("jitsi-container"), |
| 192 | interfaceConfigOverwrite: { | 192 | interfaceConfigOverwrite: { |
| 193 | filmStripOnly: false, | 193 | filmStripOnly: false, |
| 194 | SHOW_PROMOTIONAL_CLOSE_PAGE: false, | 194 | SHOW_PROMOTIONAL_CLOSE_PAGE: false, |
| 195 | SHOW_POWERED_BY: false, | 195 | SHOW_POWERED_BY: false, |
| 196 | SHOW_JITSI_WATERMARK: false, | 196 | SHOW_JITSI_WATERMARK: false, |
| 197 | TOOLBAR_BUTTONS: [ | 197 | TOOLBAR_BUTTONS: [ |
| 198 | "microphone", | 198 | "microphone", |
| 199 | "camera", | 199 | "camera", |
| 200 | "closedcaptions", | 200 | "closedcaptions", |
| 201 | "desktop", | 201 | "desktop", |
| 202 | "fullscreen", | 202 | "fullscreen", |
| 203 | "fodeviceselection", | 203 | "fodeviceselection", |
| 204 | "hangup", | 204 | "hangup", |
| 205 | "profile", | 205 | "profile", |
| 206 | "info", | 206 | "info", |
| 207 | "chat", | 207 | "chat", |
| 208 | "recording", | 208 | "recording", |
| 209 | "livestreaming", | 209 | "livestreaming", |
| 210 | "etherpad", | 210 | "etherpad", |
| 211 | "sharedvideo", | 211 | "sharedvideo", |
| 212 | "settings", | 212 | "settings", |
| 213 | "raisehand", | 213 | "raisehand", |
| 214 | "videoquality", | 214 | "videoquality", |
| 215 | "filmstrip", | 215 | "filmstrip", |
| 216 | "invite", | 216 | "invite", |
| 217 | "feedback", | 217 | "feedback", |
| 218 | "stats", | 218 | "stats", |
| 219 | "shortcuts", | 219 | "shortcuts", |
| 220 | "tileview", | 220 | "tileview", |
| 221 | ], | 221 | ], |
| 222 | }, | 222 | }, |
| 223 | configOverwrite: { | 223 | configOverwrite: { |
| 224 | disableSimulcast: false, | 224 | disableSimulcast: false, |
| 225 | }, | 225 | }, |
| 226 | teacherName: "", | 226 | teacherName: "", |
| 227 | romm: "", | 227 | romm: "", |
| 228 | }; | 228 | }; |
| 229 | _this.api = new JitsiMeetExternalAPI(domain, options); | 229 | _this.api = new JitsiMeetExternalAPI(domain, options); |
| 230 | console.log("this.api ", this.api); | 230 | console.log("this.api ", this.api); |
| 231 | _this.api.addEventListener("videoConferenceJoined", () => { | 231 | _this.api.addEventListener("videoConferenceJoined", () => { |
| 232 | console.log("Local User Joined"); | 232 | console.log("Local User Joined"); |
| 233 | 233 | ||
| 234 | _this.api.executeCommand("displayName", _this.username); | 234 | _this.api.executeCommand("displayName", _this.username); |
| 235 | _this.api.executeCommand("password", this_.roomPassword); | 235 | _this.api.executeCommand("password", this_.roomPassword); |
| 236 | }); | 236 | }); |
| 237 | _this.api.on("readyToClose", () => { | 237 | _this.api.on("readyToClose", () => { |
| 238 | this.$router.push({ name: "Refresh" }); | 238 | this.$router.push({ name: "Refresh" }); |
| 239 | this.showLoader = false; | ||
| 239 | }); | 240 | }); |
| 240 | } catch (error) { | 241 | } catch (error) { |
| 241 | console.error("Failed to load Jitsi API", error); | 242 | console.error("Failed to load Jitsi API", error); |
| 242 | } | 243 | } |
| 243 | }, | 244 | }, |
| 244 | openRoom() { | 245 | openRoom() { |
| 245 | // verify the JitsiMeetExternalAPI constructor is added to the global.. | 246 | // verify the JitsiMeetExternalAPI constructor is added to the global.. |
| 246 | // if (this.teacherName != "" || this.room != "") { | 247 | // if (this.teacherName != "" || this.room != "") { |
| 247 | // if (window.JitsiMeetExternalAPI) { | 248 | // if (window.JitsiMeetExternalAPI) { |
| 248 | // // var person = prompt("Please enter your name:", "Rabie"); | 249 | // // var person = prompt("Please enter your name:", "Rabie"); |
| 249 | // if (person != null || person != "") this.username = this.teacherName; | 250 | // if (person != null || person != "") this.username = this.teacherName; |
| 250 | // var room = prompt("Please enter your room:", "Test Room"); | 251 | // var room = prompt("Please enter your room:", "Test Room"); |
| 251 | // if (room != null || room != "") this.room = this.room; | 252 | // if (room != null || room != "") this.room = this.room; |
| 252 | // this.startConference(); | 253 | // this.startConference(); |
| 253 | // } else alert("Jitsi Meet API script not loaded"); | 254 | // } else alert("Jitsi Meet API script not loaded"); |
| 254 | // } | 255 | // } |
| 255 | }, | 256 | }, |
| 256 | 257 | ||
| 257 | createRoom(classId) { | 258 | createRoom(classId) { |
| 258 | this.showLoader = true; | 259 | this.showLoader = true; |
| 259 | var classId = { | 260 | var classId = { |
| 260 | classId: classId, | 261 | classId: classId, |
| 261 | }; | 262 | }; |
| 262 | http() | 263 | http() |
| 263 | .post("/createLiveClasses", { | 264 | .post("/createLiveClasses", { |
| 264 | classId: this.$route.query.classId, | 265 | classId: this.$route.query.classId, |
| 265 | courseId: this.$route.query.courseId, | 266 | courseId: this.$route.query.courseId, |
| 266 | chapterId: this.$route.query.chapterId, | 267 | chapterId: this.$route.query.chapterId, |
| 267 | }) | 268 | }) |
| 268 | .then((response) => { | 269 | .then((response) => { |
| 269 | // this.addSection = response.data.data; | 270 | // this.addSection = response.data.data; |
| 270 | console.log("CREATE___ROOOM", response.data); | 271 | console.log("CREATE___ROOOM", response.data); |
| 271 | var room = response.data.data.roomName; | 272 | var room = response.data.data.roomName; |
| 272 | var username = localStorage.getItem("teacherName") | 273 | var username = localStorage.getItem("teacherName") |
| 273 | var roomPassword = response.data.data.password; | 274 | var roomPassword = response.data.data.password; |
| 274 | console.log( | 275 | console.log( |
| 275 | "room", | 276 | "room", |
| 276 | room, | 277 | room, |
| 277 | "username", | 278 | "username", |
| 278 | username, | 279 | username, |
| 279 | "roomPassword", | 280 | "roomPassword", |
| 280 | roomPassword | 281 | roomPassword |
| 281 | ); | 282 | ); |
| 282 | var this_ = this; | 283 | var this_ = this; |
| 283 | if (username != "" || room != "") { | 284 | if (username != "" || room != "") { |
| 284 | if (window.JitsiMeetExternalAPI) { | 285 | if (window.JitsiMeetExternalAPI) { |
| 285 | // var person = prompt("Please enter your name:", "Rabie"); | 286 | // var person = prompt("Please enter your name:", "Rabie"); |
| 286 | if (username != null || username != "") { | 287 | if (username != null || username != "") { |
| 287 | this_.username = username; | 288 | this_.username = username; |
| 288 | } | 289 | } |
| 289 | // var room = prompt("Please enter your room:", "Test Room"); | 290 | // var room = prompt("Please enter your room:", "Test Room"); |
| 290 | if (room != null || room != "") { | 291 | if (room != null || room != "") { |
| 291 | this_.room = room; | 292 | this_.room = room; |
| 292 | } | 293 | } |
| 293 | if (roomPassword != null || roomPassword != "") { | 294 | if (roomPassword != null || roomPassword != "") { |
| 294 | this_.password = roomPassword; | 295 | this_.password = roomPassword; |
| 295 | } | 296 | } |
| 296 | } else alert("Jitsi Meet API script not loaded"); | 297 | } else alert("Jitsi Meet API script not loaded"); |
| 297 | this_.startConference(); | 298 | this_.startConference(); |
| 298 | } | 299 | } |
| 299 | this.showLoader = false; | 300 | this.showLoader = false; |
| 300 | }) | 301 | }) |
| 301 | .catch((err) => { | 302 | .catch((err) => { |
| 302 | this.showLoader = false; | 303 | this.showLoader = false; |
| 303 | }); | 304 | }); |
| 304 | }, | 305 | }, |
| 305 | async studentClasses() { | 306 | async studentClasses() { |
| 306 | this.liveLink = ""; | 307 | this.liveLink = ""; |
| 307 | this.room = ""; | 308 | this.room = ""; |
| 308 | this.username = ""; | 309 | this.username = ""; |
| 309 | this.roomPassword = ""; | 310 | this.roomPassword = ""; |
| 310 | /* getLiveClassesesList - To up date line under heading*/ | 311 | /* getLiveClassesesList - To up date line under heading*/ |
| 311 | let response = await this.getLiveClassesesList({ | 312 | let response = await this.getLiveClassesesList({ |
| 312 | classId: this.$route.query.classId, | 313 | classId: this.$route.query.classId, |
| 313 | courseId: this.$route.query.courseId, | 314 | courseId: this.$route.query.courseId, |
| 314 | chapterId: this.$route.query.chapterId, | 315 | chapterId: this.$route.query.chapterId, |
| 315 | }); | 316 | }); |
| 316 | console.log("response getLiveClassesesList- ", response); | 317 | console.log("response getLiveClassesesList- ", response); |
| 317 | 318 | ||
| 318 | /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ | 319 | /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ |
| 319 | if (response.data.data[0].sessionStatus == "ENDED") { | 320 | if (response.data.data[0].sessionStatus == "ENDED") { |
| 320 | // this.startLiveSession = "Start Session"; | 321 | // this.startLiveSession = "Start Session"; |
| 321 | this.studentBtn = ""; | 322 | this.studentBtn = ""; |
| 322 | } | 323 | } |
| 323 | if (response.data.data[0].sessionStatus == "STARTED") { | 324 | if (response.data.data[0].sessionStatus == "STARTED") { |
| 324 | // this.startLiveSession = "Join Session"; | 325 | // this.startLiveSession = "Join Session"; |
| 325 | this.studentBtn = "Join Session"; | 326 | this.studentBtn = "Join Session"; |
| 326 | } | 327 | } |
| 327 | if (response.data.data.length == 0) { | 328 | if (response.data.data.length == 0) { |
| 328 | this.startLiveSession = "Start Session"; | 329 | this.startLiveSession = "Start Session"; |
| 329 | this.studentBtn = ""; | 330 | this.studentBtn = ""; |
| 330 | } else { | 331 | } else { |
| 331 | this.liveLink = response.data.data[0].link; | 332 | this.liveLink = response.data.data[0].link; |
| 332 | var room = response.data.data[0].roomName; | 333 | var room = response.data.data[0].roomName; |
| 333 | var username = this.currentUser; | 334 | var username = this.currentUser; |
| 334 | var roomPassword = response.data.data[0].password; | 335 | var roomPassword = response.data.data[0].password; |
| 335 | var this_ = this; | 336 | var this_ = this; |
| 336 | // console.log(this.room, this.roomPassword, this.username); | 337 | // console.log(this.room, this.roomPassword, this.username); |
| 337 | 338 | ||
| 338 | if (username != "" || room != "") { | 339 | if (username != "" || room != "") { |
| 339 | if (window.JitsiMeetExternalAPI) { | 340 | if (window.JitsiMeetExternalAPI) { |
| 340 | // var person = prompt("Please enter your name:", "Rabie"); | 341 | // var person = prompt("Please enter your name:", "Rabie"); |
| 341 | if (username != null || username != "") { | 342 | if (username != null || username != "") { |
| 342 | this_.username = username; | 343 | this_.username = username; |
| 343 | } | 344 | } |
| 344 | if (roomPassword != null || roomPassword != "") { | 345 | if (roomPassword != null || roomPassword != "") { |
| 345 | this_.roomPassword = roomPassword; | 346 | this_.roomPassword = roomPassword; |
| 346 | } | 347 | } |
| 347 | // var room = prompt("Please enter your room:", "Test Room"); | 348 | // var room = prompt("Please enter your room:", "Test Room"); |
| 348 | if (room != null || room != "") { | 349 | if (room != null || room != "") { |
| 349 | this_.room = room; | 350 | this_.room = room; |
| 350 | } | 351 | } |
| 351 | // this.startConference(); | 352 | // this.startConference(); |
| 352 | } | 353 | } |
| 353 | } | 354 | } |
| 354 | } | 355 | } |
| 355 | }, | 356 | }, |
| 356 | }, | 357 | }, |
| 357 | 358 | ||
| 358 | async created() { | 359 | async created() { |
| 359 | console.log( | 360 | console.log( |
| 360 | "this.$store.state.studentsData", | 361 | "this.$store.state.studentsData", |
| 361 | this.$store.state.studentsData[0].name | 362 | this.$store.state.studentsData[0].name |
| 362 | ); | 363 | ); |
| 363 | this.currentUser = localStorage.getItem("studentName"); | 364 | this.currentUser = localStorage.getItem("studentName"); |
| 364 | this.token = this.$store.state.token; | 365 | this.token = this.$store.state.token; |
| 365 | if (this.$store.state.role === "PARENT") { | 366 | if (this.$store.state.role === "PARENT") { |
| 366 | await this.studentClasses(); | 367 | await this.studentClasses(); |
| 367 | } | 368 | } |
| 368 | 369 | ||
| 369 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ | 370 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ |
| 370 | if (this.$store.state.role === "PARENT") { | 371 | if (this.$store.state.role === "PARENT") { |
| 371 | await this.getStudentCourses({ | 372 | await this.getStudentCourses({ |
| 372 | classId: localStorage.getItem("parentClassId"), | 373 | classId: localStorage.getItem("parentClassId"), |
| 373 | studentId: localStorage.getItem("parentStudentId"), | 374 | studentId: localStorage.getItem("parentStudentId"), |
| 374 | }); | 375 | }); |
| 375 | } | 376 | } |
| 376 | }, | 377 | }, |
| 377 | }; | 378 | }; |
| 378 | </script> | 379 | </script> |
| 379 | <style scoped> | 380 | <style scoped> |
| 380 | .side-bar-color { | 381 | .side-bar-color { |
| 381 | color: #827bfa !important; | 382 | color: #827bfa !important; |
| 382 | /* border-top-right-radius: 74px !important; */ | 383 | /* border-top-right-radius: 74px !important; */ |
| 383 | } | 384 | } |
| 384 | .card-border { | 385 | .card-border { |
| 385 | border: 1px #bdbdbd solid; | 386 | border: 1px #bdbdbd solid; |
| 386 | border-radius: 3px; | 387 | border-radius: 3px; |
| 387 | } | 388 | } |
| 388 | .reply-desc { | 389 | .reply-desc { |
| 389 | border: 1px solid #f2f2f2; | 390 | border: 1px solid #f2f2f2; |
| 390 | } | 391 | } |
| 391 | .open-dialog-button { | 392 | .open-dialog-button { |
| 392 | background: #827bfa !important; | 393 | background: #827bfa !important; |
| 393 | border-color: #827bfa !important; | 394 | border-color: #827bfa !important; |
| 394 | text-transform: none !important; | 395 | text-transform: none !important; |
| 395 | } | 396 | } |
| 396 | 397 | ||
| 397 | .reply-btn { | 398 | .reply-btn { |
| 398 | background: #feb83c !important; | 399 | background: #feb83c !important; |
| 399 | border-color: #feb83c !important; | 400 | border-color: #feb83c !important; |
| 400 | text-transform: none !important; | 401 | text-transform: none !important; |
| 401 | -webkit-box-shadow: none !important; | 402 | -webkit-box-shadow: none !important; |
| 402 | box-shadow: none !important; | 403 | box-shadow: none !important; |
| 403 | } | 404 | } |
| 404 | #jitsi-container { | 405 | #jitsi-container { |
| 405 | height: 100vh; | 406 | height: 100vh; |
| 406 | } | 407 | } |
| 407 | </style> | 408 | </style> |
src/pages/Dashboard/dashboard.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> | 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> |
| 5 | <v-card> | 5 | <v-card> |
| 6 | <v-toolbar color="grey lighten-2" flat> | 6 | <v-toolbar color="grey lighten-2" flat> |
| 7 | <v-spacer></v-spacer> | 7 | <v-spacer></v-spacer> |
| 8 | <v-toolbar-title> | 8 | <v-toolbar-title> |
| 9 | <h3>Notice Board</h3> | 9 | <h3>Notice Board</h3> |
| 10 | </v-toolbar-title> | 10 | </v-toolbar-title> |
| 11 | <v-spacer></v-spacer> | 11 | <v-spacer></v-spacer> |
| 12 | <v-icon @click="closeNotice">close</v-icon> | 12 | <v-icon @click="closeNotice">close</v-icon> |
| 13 | </v-toolbar> | 13 | </v-toolbar> |
| 14 | <v-card-text> | 14 | <v-card-text> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> | 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> |
| 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> | 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> |
| 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> | 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | </v-layout> | 20 | </v-layout> |
| 21 | <v-container grid-list-md> | 21 | <v-container grid-list-md> |
| 22 | <v-layout wrap> | 22 | <v-layout wrap> |
| 23 | <v-flex> | 23 | <v-flex> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs5 sm6> | 25 | <v-flex xs5 sm6> |
| 26 | <h5 class="right my-1"> | 26 | <h5 class="right my-1"> |
| 27 | <b>Title:</b> | 27 | <b>Title:</b> |
| 28 | </h5> | 28 | </h5> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex sm6 xs8> | 30 | <v-flex sm6 xs8> |
| 31 | <h5 class="my-1">{{ notice.title }}</h5> | 31 | <h5 class="my-1">{{ notice.title }}</h5> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs5 sm6> | 35 | <v-flex xs5 sm6> |
| 36 | <h5 class="right my-1"> | 36 | <h5 class="right my-1"> |
| 37 | <b>Description:</b> | 37 | <b>Description:</b> |
| 38 | </h5> | 38 | </h5> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex sm6 xs8> | 40 | <v-flex sm6 xs8> |
| 41 | <h5 class="my-1">{{ notice.description }}</h5> | 41 | <h5 class="my-1">{{ notice.description }}</h5> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-layout> | 45 | </v-layout> |
| 46 | </v-container> | 46 | </v-container> |
| 47 | </v-card-text> | 47 | </v-card-text> |
| 48 | </v-card> | 48 | </v-card> |
| 49 | </v-dialog>--> | 49 | </v-dialog>--> |
| 50 | <!-- <v-container fluid grid-list-xl> --> | 50 | <!-- <v-container fluid grid-list-xl> --> |
| 51 | 51 | ||
| 52 | <!-- LOADER --> | 52 | <!-- LOADER --> |
| 53 | <div class="loader" v-if="showLoader"> | 53 | <div class="loader" v-if="showLoader"> |
| 54 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 54 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 55 | </div> | 55 | </div> |
| 56 | 56 | ||
| 57 | <!-- SNACKBAR --> | 57 | <!-- SNACKBAR --> |
| 58 | <v-snackbar | 58 | <v-snackbar |
| 59 | :timeout="timeout" | 59 | :timeout="timeout" |
| 60 | :top="y === 'top'" | 60 | :top="y === 'top'" |
| 61 | :right="x === 'right'" | 61 | :right="x === 'right'" |
| 62 | :vertical="mode === 'vertical'" | 62 | :vertical="mode === 'vertical'" |
| 63 | v-model="snackbar" | 63 | v-model="snackbar" |
| 64 | :color="snackbarColor" | 64 | :color="snackbarColor" |
| 65 | > | 65 | > |
| 66 | {{ text }} | 66 | {{ text }} |
| 67 | <v-spacer></v-spacer> | 67 | <v-spacer></v-spacer> |
| 68 | <v-btn flat text @click="snackbar = false">X</v-btn> | 68 | <v-btn flat text @click="snackbar = false">X</v-btn> |
| 69 | </v-snackbar> | 69 | </v-snackbar> |
| 70 | 70 | ||
| 71 | <!-- DIALOG BOX EVENT DETAILS --> | 71 | <!-- DIALOG BOX EVENT DETAILS --> |
| 72 | <v-dialog v-model="viewEventDetails" max-width="500"> | 72 | <v-dialog v-model="viewEventDetails" max-width="500" persistent> |
| 73 | <v-card flat class="card-style pa-2" dark> | 73 | <v-card flat class="card-style pa-2" dark> |
| 74 | <!-- TITLE --> | 74 | <!-- TITLE --> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs12> | 77 | <v-flex xs12> |
| 78 | <label class="title text-xs-center">{{particularEvent.title}}</label> | 78 | <label class="title text-xs-center">{{particularEvent.title}}</label> |
| 79 | <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> | 79 | <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | </v-layout> | 81 | </v-layout> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | 83 | ||
| 84 | <v-card-text> | 84 | <v-card-text> |
| 85 | <v-list dark class="card-style"> | 85 | <v-list dark class="card-style"> |
| 86 | <v-list-tile> | 86 | <v-list-tile> |
| 87 | <v-list-tile-content> | 87 | <v-list-tile-content> |
| 88 | <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> | 88 | <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> |
| 89 | </v-list-tile-content> | 89 | </v-list-tile-content> |
| 90 | </v-list-tile> | 90 | </v-list-tile> |
| 91 | <v-list-tile> | 91 | <v-list-tile> |
| 92 | <v-list-tile-content> | 92 | <v-list-tile-content> |
| 93 | <v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title> | 93 | <v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title> |
| 94 | </v-list-tile-content> | 94 | </v-list-tile-content> |
| 95 | </v-list-tile> | 95 | </v-list-tile> |
| 96 | <v-list-tile> | 96 | <v-list-tile> |
| 97 | <v-list-tile-content> | 97 | <v-list-tile-content> |
| 98 | <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> | 98 | <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> |
| 99 | </v-list-tile-content> | 99 | </v-list-tile-content> |
| 100 | </v-list-tile> | 100 | </v-list-tile> |
| 101 | <v-list-tile> | 101 | <v-list-tile> |
| 102 | <v-list-tile-content> | 102 | <v-list-tile-content> |
| 103 | <v-list-tile-title> | 103 | <v-list-tile-title> |
| 104 | Link : | 104 | Link : |
| 105 | <a :href="particularEvent.link">{{particularEvent.link}}</a> | 105 | <a :href="particularEvent.link">{{particularEvent.link}}</a> |
| 106 | </v-list-tile-title> | 106 | </v-list-tile-title> |
| 107 | </v-list-tile-content> | 107 | </v-list-tile-content> |
| 108 | </v-list-tile> | 108 | </v-list-tile> |
| 109 | </v-list> | 109 | </v-list> |
| 110 | </v-card-text> | 110 | </v-card-text> |
| 111 | </v-card> | 111 | </v-card> |
| 112 | </v-dialog> | 112 | </v-dialog> |
| 113 | 113 | ||
| 114 | <v-layout wrap row> | 114 | <v-layout wrap row> |
| 115 | <v-flex xs12 sm12 md9> | 115 | <v-flex xs12 sm12 md9> |
| 116 | <v-container fluid grid-list-xl> | 116 | <v-container fluid grid-list-xl> |
| 117 | <!-- ***** Total Students ***** --> | 117 | <!-- ***** Total Students ***** --> |
| 118 | <v-layout wrap class v-if="$store.state.role != 'PARENT' "> | 118 | <v-layout wrap class v-if="$store.state.role != 'PARENT' "> |
| 119 | <v-flex xs12 sm12 md3> | 119 | <v-flex xs12 sm12 md3> |
| 120 | <router-link :to="{ name:'Students' }"> | 120 | <router-link :to="{ name:'Students' }"> |
| 121 | <v-card class="card pink-bgcolor"> | 121 | <v-card class="card pink-bgcolor"> |
| 122 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> | 122 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> |
| 123 | <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> | 123 | <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> |
| 124 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> | 124 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> |
| 125 | </v-card> | 125 | </v-card> |
| 126 | </router-link> | 126 | </router-link> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <!-- ***** Total Teachers***** --> | 128 | <!-- ***** Total Teachers***** --> |
| 129 | <v-flex xs12 sm12 md3> | 129 | <v-flex xs12 sm12 md3> |
| 130 | <router-link :to="{ name:'Teachers' }"> | 130 | <router-link :to="{ name:'Teachers' }"> |
| 131 | <v-card flat class="card elevation-2 firozi-bgcolor"> | 131 | <v-card flat class="card elevation-2 firozi-bgcolor"> |
| 132 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> | 132 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> |
| 133 | <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> | 133 | <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> |
| 134 | 134 | ||
| 135 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> | 135 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> |
| 136 | </v-card> | 136 | </v-card> |
| 137 | </router-link> | 137 | </router-link> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <!-- ***** Total Parents ***** --> | 139 | <!-- ***** Total Parents ***** --> |
| 140 | <v-flex xs12 sm12 md3> | 140 | <v-flex xs12 sm12 md3> |
| 141 | <router-link :to="{ name:'Parents' }"> | 141 | <router-link :to="{ name:'Parents' }"> |
| 142 | <v-card flat class="card yellow darken-3"> | 142 | <v-card flat class="card yellow darken-3"> |
| 143 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> | 143 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> |
| 144 | <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> | 144 | <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> |
| 145 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> | 145 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> |
| 146 | </v-card> | 146 | </v-card> |
| 147 | </router-link> | 147 | </router-link> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | <!-- ***** Total Class***** --> | 149 | <!-- ***** Total Class***** --> |
| 150 | <v-flex xs12 sm12 md3> | 150 | <v-flex xs12 sm12 md3> |
| 151 | <router-link :to="{ name:'Class' }"> | 151 | <router-link :to="{ name:'Class' }"> |
| 152 | <v-card flat class="card darkBlue-bgcolor"> | 152 | <v-card flat class="card darkBlue-bgcolor"> |
| 153 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> | 153 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> |
| 154 | <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> | 154 | <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> |
| 155 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> | 155 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> |
| 156 | </v-card> | 156 | </v-card> |
| 157 | </router-link> | 157 | </router-link> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | 160 | ||
| 161 | <p | 161 | <p |
| 162 | v-if="studentsData.length === 0 && role == 'PARENT'" | 162 | v-if="studentsData.length === 0 && role == 'PARENT'" |
| 163 | class="text-center title grey lighten-4 error--text" | 163 | class="text-center title grey lighten-4 error--text" |
| 164 | >You have no student registered with school</p> | 164 | >You have no student registered with school</p> |
| 165 | <!-- ACCOUNT --> | 165 | <!-- ACCOUNT --> |
| 166 | <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> | 166 | <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> |
| 167 | <v-flex xs12> | 167 | <v-flex xs12> |
| 168 | <v-card class="card mt-2 account-Card"> | 168 | <v-card class="card mt-2 account-Card"> |
| 169 | <h4> | 169 | <h4> |
| 170 | <b>Account</b> | 170 | <b>Account</b> |
| 171 | </h4> | 171 | </h4> |
| 172 | <v-layout wrap> | 172 | <v-layout wrap> |
| 173 | <v-flex xs12 sm12 md3> | 173 | <v-flex xs12 sm12 md3> |
| 174 | <v-list two-line> | 174 | <v-list two-line> |
| 175 | <template> | 175 | <template> |
| 176 | <v-list-tile> | 176 | <v-list-tile> |
| 177 | <v-list-tile-avatar> | 177 | <v-list-tile-avatar> |
| 178 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> | 178 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> |
| 179 | </v-list-tile-avatar> | 179 | </v-list-tile-avatar> |
| 180 | <v-list-tile-content> | 180 | <v-list-tile-content> |
| 181 | <v-list-tile-title class="mt-2"> | 181 | <v-list-tile-title class="mt-2"> |
| 182 | <p class="subheading font-color">Fees</p> | 182 | <p class="subheading font-color">Fees</p> |
| 183 | </v-list-tile-title> | 183 | </v-list-tile-title> |
| 184 | <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> | 184 | <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> |
| 185 | </v-list-tile-content> | 185 | </v-list-tile-content> |
| 186 | </v-list-tile> | 186 | </v-list-tile> |
| 187 | <v-list-tile> | 187 | <v-list-tile> |
| 188 | <v-list-tile-avatar> | 188 | <v-list-tile-avatar> |
| 189 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> | 189 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> |
| 190 | </v-list-tile-avatar> | 190 | </v-list-tile-avatar> |
| 191 | <v-list-tile-content> | 191 | <v-list-tile-content> |
| 192 | <v-list-tile-title class="mt-2"> | 192 | <v-list-tile-title class="mt-2"> |
| 193 | <p class="subheading font-color">Collection</p> | 193 | <p class="subheading font-color">Collection</p> |
| 194 | </v-list-tile-title> | 194 | </v-list-tile-title> |
| 195 | <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> | 195 | <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> |
| 196 | </v-list-tile-content> | 196 | </v-list-tile-content> |
| 197 | </v-list-tile> | 197 | </v-list-tile> |
| 198 | <v-list-tile> | 198 | <v-list-tile> |
| 199 | <v-list-tile-avatar> | 199 | <v-list-tile-avatar> |
| 200 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> | 200 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> |
| 201 | </v-list-tile-avatar> | 201 | </v-list-tile-avatar> |
| 202 | <v-list-tile-content> | 202 | <v-list-tile-content> |
| 203 | <v-list-tile-title class="mt-2"> | 203 | <v-list-tile-title class="mt-2"> |
| 204 | <p class="subheading font-color">Expences</p> | 204 | <p class="subheading font-color">Expences</p> |
| 205 | </v-list-tile-title> | 205 | </v-list-tile-title> |
| 206 | <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> | 206 | <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> |
| 207 | </v-list-tile-content> | 207 | </v-list-tile-content> |
| 208 | </v-list-tile> | 208 | </v-list-tile> |
| 209 | </template> | 209 | </template> |
| 210 | </v-list> | 210 | </v-list> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | <v-flex xs12 sm12 md9 lg9> | 212 | <v-flex xs12 sm12 md9 lg9> |
| 213 | <div id="chart"> | 213 | <div id="chart"> |
| 214 | <div v-if="showChart"> | 214 | <div v-if="showChart"> |
| 215 | <apexchart | 215 | <apexchart |
| 216 | type="bar" | 216 | type="bar" |
| 217 | height="250" | 217 | height="250" |
| 218 | style="max-width: 800px !important" | 218 | style="max-width: 800px !important" |
| 219 | :options="chartOptions" | 219 | :options="chartOptions" |
| 220 | :series="series" | 220 | :series="series" |
| 221 | ></apexchart> | 221 | ></apexchart> |
| 222 | </div> | 222 | </div> |
| 223 | </div> | 223 | </div> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | </v-layout> | 225 | </v-layout> |
| 226 | </v-card> | 226 | </v-card> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | 229 | ||
| 230 | <!-- FOR ADMIN ROLE --> | 230 | <!-- FOR ADMIN ROLE --> |
| 231 | <v-card class="mt-2 card" v-if="role == 'ADMIN'"> | 231 | <v-card class="mt-2 card" v-if="role == 'ADMIN'"> |
| 232 | <!-- <full-calendar | 232 | <!-- <full-calendar |
| 233 | ref="calendar" | 233 | ref="calendar" |
| 234 | defaultView="month" | 234 | defaultView="month" |
| 235 | droppable="false" | 235 | droppable="false" |
| 236 | :events="events" | 236 | :events="events" |
| 237 | :config="config" | 237 | :config="config" |
| 238 | ></full-calendar>--> | 238 | ></full-calendar>--> |
| 239 | <h4 class="pa-3"> | 239 | <h4 class="pa-3"> |
| 240 | <b>Notice</b> | 240 | <b>Notice</b> |
| 241 | </h4> | 241 | </h4> |
| 242 | 242 | ||
| 243 | <v-data-table | 243 | <v-data-table |
| 244 | :items="noticeData" | 244 | :items="noticeData" |
| 245 | class="elevation-0" | 245 | class="elevation-0" |
| 246 | flat | 246 | flat |
| 247 | hide-actions | 247 | hide-actions |
| 248 | hide-headers | 248 | hide-headers |
| 249 | style="border-spacing: 0 !important;" | 249 | style="border-spacing: 0 !important;" |
| 250 | > | 250 | > |
| 251 | <template | 251 | <template |
| 252 | slot="items" | 252 | slot="items" |
| 253 | slot-scope="props" | 253 | slot-scope="props" |
| 254 | v-if="props.index < 5" | 254 | v-if="props.index < 5" |
| 255 | style="border-spacing: 0 !important;" | 255 | style="border-spacing: 0 !important;" |
| 256 | > | 256 | > |
| 257 | <tr class="td-notice"> | 257 | <tr class="td-notice"> |
| 258 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 258 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 259 | <td> | 259 | <td> |
| 260 | <span class="grey--text caption">{{ date(props.item.created) }}</span> | 260 | <span class="grey--text caption">{{ date(props.item.created) }}</span> |
| 261 | <br /> | 261 | <br /> |
| 262 | <span class="body-2">{{ props.item.title}}</span> | 262 | <span class="body-2">{{ props.item.title}}</span> |
| 263 | </td> | 263 | </td> |
| 264 | <td class="grey--text mt-2">{{ props.item.description}}</td> | 264 | <td class="grey--text mt-2">{{ props.item.description}}</td> |
| 265 | 265 | ||
| 266 | <td class="text-xs-center"> | 266 | <td class="text-xs-center"> |
| 267 | <span> | 267 | <span> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:25px; height:25px; " | 271 | style="cursor:pointer; width:25px; height:25px; " |
| 272 | @click="profile" | 272 | @click="profile" |
| 273 | src="/static/icon/view.png" | 273 | src="/static/icon/view.png" |
| 274 | /> | 274 | /> |
| 275 | <span>View</span> | 275 | <span>View</span> |
| 276 | </v-tooltip> | 276 | </v-tooltip> |
| 277 | </span> | 277 | </span> |
| 278 | </td> | 278 | </td> |
| 279 | </tr> | 279 | </tr> |
| 280 | </template> | 280 | </template> |
| 281 | </v-data-table> | 281 | </v-data-table> |
| 282 | </v-card> | 282 | </v-card> |
| 283 | 283 | ||
| 284 | <!-- FOR TEACHER ROLE --> | 284 | <!-- FOR TEACHER ROLE --> |
| 285 | <v-card class="mt-2 card" v-if="role == 'TEACHER'"> | 285 | <v-card class="mt-2 card" v-if="role == 'TEACHER'"> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-flex xs6 sm6 md6> | 287 | <v-flex xs6 sm6 md6> |
| 288 | <h4 class="pa-3"> | 288 | <h4 class="pa-3"> |
| 289 | <b>Notice</b> | 289 | <b>Notice</b> |
| 290 | </h4> | 290 | </h4> |
| 291 | <v-data-table | 291 | <v-data-table |
| 292 | :items="noticeData" | 292 | :items="noticeData" |
| 293 | class="elevation-0" | 293 | class="elevation-0" |
| 294 | flat | 294 | flat |
| 295 | hide-actions | 295 | hide-actions |
| 296 | hide-headers | 296 | hide-headers |
| 297 | style="border-spacing: 0 !important;" | 297 | style="border-spacing: 0 !important;" |
| 298 | > | 298 | > |
| 299 | <template | 299 | <template |
| 300 | slot="items" | 300 | slot="items" |
| 301 | slot-scope="props" | 301 | slot-scope="props" |
| 302 | v-if="props.index < 5" | 302 | v-if="props.index < 5" |
| 303 | style="border-spacing: 0 !important;" | 303 | style="border-spacing: 0 !important;" |
| 304 | > | 304 | > |
| 305 | <tr class="td-notice"> | 305 | <tr class="td-notice"> |
| 306 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 306 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 307 | <td> | 307 | <td> |
| 308 | <span class="grey--text caption">{{ date(props.item.created) }}</span> | 308 | <span class="grey--text caption">{{ date(props.item.created) }}</span> |
| 309 | <br /> | 309 | <br /> |
| 310 | <span class="body-2">{{ props.item.title}}</span> | 310 | <span class="body-2">{{ props.item.title}}</span> |
| 311 | </td> | 311 | </td> |
| 312 | <td class="grey--text mt-2">{{ props.item.description}}</td> | 312 | <td class="grey--text mt-2">{{ props.item.description}}</td> |
| 313 | 313 | ||
| 314 | <td class="text-xs-center"> | 314 | <td class="text-xs-center"> |
| 315 | <span> | 315 | <span> |
| 316 | <v-tooltip top> | 316 | <v-tooltip top> |
| 317 | <img | 317 | <img |
| 318 | slot="activator" | 318 | slot="activator" |
| 319 | style="cursor:pointer; width:25px; height:25px; " | 319 | style="cursor:pointer; width:25px; height:25px; " |
| 320 | @click="profile" | 320 | @click="profile" |
| 321 | src="/static/icon/view.png" | 321 | src="/static/icon/view.png" |
| 322 | /> | 322 | /> |
| 323 | <span>View</span> | 323 | <span>View</span> |
| 324 | </v-tooltip> | 324 | </v-tooltip> |
| 325 | </span> | 325 | </span> |
| 326 | </td> | 326 | </td> |
| 327 | </tr> | 327 | </tr> |
| 328 | </template> | 328 | </template> |
| 329 | </v-data-table> | 329 | </v-data-table> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | 331 | ||
| 332 | <v-flex xs6 sm6 md6> | 332 | <v-flex xs6 sm6 md6> |
| 333 | <v-card-text> | 333 | <v-card-text> |
| 334 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> | 334 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> |
| 335 | <div | 335 | <div |
| 336 | v-for="(activity,index) in activityList" | 336 | v-for="(activity,index) in activityList" |
| 337 | :key="index" | 337 | :key="index" |
| 338 | class="mt-2" | 338 | class="mt-2" |
| 339 | style="cursor: pointer;" | 339 | style="cursor: pointer;" |
| 340 | @click="seeEventDetails(activity)" | 340 | @click="seeEventDetails(activity)" |
| 341 | > | 341 | > |
| 342 | <span | 342 | <span |
| 343 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" | 343 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" |
| 344 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" | 344 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" |
| 345 | ></span> | 345 | ></span> |
| 346 | <div style="display: inline-block;" class="ml-2"> | 346 | <div style="display: inline-block;" class="ml-2"> |
| 347 | <div> | 347 | <div> |
| 348 | <div | 348 | <div |
| 349 | class="grey--text lighten-1 caption" | 349 | class="grey--text lighten-1 caption" |
| 350 | v-if="activity.dateOfEvent" | 350 | v-if="activity.dateOfEvent" |
| 351 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> | 351 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> |
| 352 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> | 352 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> |
| 353 | </div> | 353 | </div> |
| 354 | </div> | 354 | </div> |
| 355 | </div> | 355 | </div> |
| 356 | <div v-if="activityList.length == 0"> | 356 | <div v-if="activityList.length == 0"> |
| 357 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> | 357 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> |
| 358 | </div> | 358 | </div> |
| 359 | </v-card-text> | 359 | </v-card-text> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | </v-layout> | 361 | </v-layout> |
| 362 | </v-card> | 362 | </v-card> |
| 363 | 363 | ||
| 364 | <!-- COURSES --> | 364 | <!-- COURSES --> |
| 365 | <v-layout v-if="role == 'PARENT'"> | 365 | <v-layout v-if="role == 'PARENT'"> |
| 366 | <v-flex xs12> | 366 | <v-flex xs12> |
| 367 | <v-card class="card mt-2 account-Card"> | 367 | <v-card class="card mt-2 account-Card"> |
| 368 | <h4> | 368 | <h4> |
| 369 | <b>My Courses</b> | 369 | <b>My Courses</b> |
| 370 | </h4> | 370 | </h4> |
| 371 | <v-layout wrap> | 371 | <v-layout wrap> |
| 372 | <v-flex xs12 sm12> | 372 | <v-flex xs12 sm12> |
| 373 | <v-list two-line> | 373 | <v-list two-line> |
| 374 | <template> | 374 | <template> |
| 375 | <v-list-tile v-for="(course,i) in courseData" :key="i"> | 375 | <v-list-tile v-for="(course,i) in courseData" :key="i"> |
| 376 | <v-list-tile-avatar> | 376 | <v-list-tile-avatar> |
| 377 | <!-- <v-icon | 377 | <!-- <v-icon |
| 378 | class="account-circle darkBlue-color" | 378 | class="account-circle darkBlue-color" |
| 379 | style="cursor: pointer;" | 379 | style="cursor: pointer;" |
| 380 | @click="routeToCourseDetails(course._id)" | 380 | @click="routeToCourseDetails(course._id)" |
| 381 | >panorama_fish_eye</v-icon>--> | 381 | >panorama_fish_eye</v-icon>--> |
| 382 | <span> | 382 | <span> |
| 383 | <v-tooltip top> | 383 | <v-tooltip top> |
| 384 | <img | 384 | <img |
| 385 | slot="activator" | 385 | slot="activator" |
| 386 | style="cursor:pointer; width:25px; height:25px; " | 386 | style="cursor:pointer; width:25px; height:25px; " |
| 387 | src="/static/icon/view.png" | 387 | src="/static/icon/view.png" |
| 388 | @click="routeToCourseDetails(course._id)" | 388 | @click="routeToCourseDetails(course._id)" |
| 389 | /> | 389 | /> |
| 390 | <span>View</span> | 390 | <span>View</span> |
| 391 | </v-tooltip> | 391 | </v-tooltip> |
| 392 | </span> | 392 | </span> |
| 393 | </v-list-tile-avatar> | 393 | </v-list-tile-avatar> |
| 394 | <v-list-tile-content> | 394 | <v-list-tile-content> |
| 395 | <v-list-tile-title | 395 | <v-list-tile-title |
| 396 | style="cursor: pointer;" | 396 | style="cursor: pointer;" |
| 397 | @click="routeToCourseDetails(course._id)" | 397 | @click="routeToCourseDetails(course._id)" |
| 398 | >{{ course.courseName }}</v-list-tile-title> | 398 | >{{ course.courseName }}</v-list-tile-title> |
| 399 | </v-list-tile-content> | 399 | </v-list-tile-content> |
| 400 | </v-list-tile> | 400 | </v-list-tile> |
| 401 | </template> | 401 | </template> |
| 402 | </v-list> | 402 | </v-list> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | </v-layout> | 404 | </v-layout> |
| 405 | </v-card> | 405 | </v-card> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | <v-layout v-if="role == 'PARENT'"> | 408 | <v-layout v-if="role == 'PARENT'"> |
| 409 | <v-flex xs6> | 409 | <v-flex xs6> |
| 410 | <v-card class="mt-2 card"> | 410 | <v-card class="mt-2 card"> |
| 411 | <h4 class="pa-3"> | 411 | <h4 class="pa-3"> |
| 412 | <b>Latest Annoucements</b> | 412 | <b>Latest Annoucements</b> |
| 413 | </h4> | 413 | </h4> |
| 414 | 414 | ||
| 415 | <v-data-table | 415 | <v-data-table |
| 416 | :items="annoucementData" | 416 | :items="annoucementData" |
| 417 | class="elevation-0" | 417 | class="elevation-0" |
| 418 | flat | 418 | flat |
| 419 | hide-actions | 419 | hide-actions |
| 420 | hide-headers | 420 | hide-headers |
| 421 | style="border-spacing: 0 !important;" | 421 | style="border-spacing: 0 !important;" |
| 422 | > | 422 | > |
| 423 | <template | 423 | <template |
| 424 | slot="items" | 424 | slot="items" |
| 425 | slot-scope="props" | 425 | slot-scope="props" |
| 426 | v-if="props.index < 5" | 426 | v-if="props.index < 5" |
| 427 | style="border-spacing: 0 !important;" | 427 | style="border-spacing: 0 !important;" |
| 428 | > | 428 | > |
| 429 | <tr class="td-notice"> | 429 | <tr class="td-notice"> |
| 430 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 430 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 431 | <td> | 431 | <td> |
| 432 | <span class="grey--text caption">{{ date(props.item.created) }}</span> | 432 | <span class="grey--text caption">{{ date(props.item.created) }}</span> |
| 433 | <br /> | 433 | <br /> |
| 434 | <span class="body-2">{{ props.item.discussionType}}</span> | 434 | <span class="body-2">{{ props.item.discussionType}}</span> |
| 435 | </td> | 435 | </td> |
| 436 | <td class="text-xs-center"> | 436 | <td class="text-xs-center"> |
| 437 | <span> | 437 | <span> |
| 438 | <v-tooltip top> | 438 | <v-tooltip top> |
| 439 | <img | 439 | <img |
| 440 | slot="activator" | 440 | slot="activator" |
| 441 | style="cursor:pointer; width:25px; height:25px; " | 441 | style="cursor:pointer; width:25px; height:25px; " |
| 442 | src="/static/icon/view.png" | 442 | src="/static/icon/view.png" |
| 443 | /> | 443 | /> |
| 444 | <span>View</span> | 444 | <span>View</span> |
| 445 | </v-tooltip> | 445 | </v-tooltip> |
| 446 | </span> | 446 | </span> |
| 447 | </td> | 447 | </td> |
| 448 | </tr> | 448 | </tr> |
| 449 | </template> | 449 | </template> |
| 450 | </v-data-table> | 450 | </v-data-table> |
| 451 | </v-card> | 451 | </v-card> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | <v-flex xs6> | 453 | <v-flex xs6> |
| 454 | <v-card class="mt-2 card"> | 454 | <v-card class="mt-2 card"> |
| 455 | <h4 class="pa-3"> | 455 | <h4 class="pa-3"> |
| 456 | <b>Online User</b> | 456 | <b>Online User</b> |
| 457 | </h4> | 457 | </h4> |
| 458 | 458 | ||
| 459 | <v-data-table | 459 | <v-data-table |
| 460 | :items="onlineUser" | 460 | :items="onlineUser" |
| 461 | class="elevation-0" | 461 | class="elevation-0" |
| 462 | flat | 462 | flat |
| 463 | hide-actions | 463 | hide-actions |
| 464 | hide-headers | 464 | hide-headers |
| 465 | style="border-spacing: 0 !important;" | 465 | style="border-spacing: 0 !important;" |
| 466 | > | 466 | > |
| 467 | <template | 467 | <template |
| 468 | slot="items" | 468 | slot="items" |
| 469 | slot-scope="props" | 469 | slot-scope="props" |
| 470 | v-if="props.index < 5" | 470 | v-if="props.index < 5" |
| 471 | style="border-spacing: 0 !important;" | 471 | style="border-spacing: 0 !important;" |
| 472 | > | 472 | > |
| 473 | <tr class="td-notice"> | 473 | <tr class="td-notice"> |
| 474 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 474 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 475 | <td> | 475 | <td> |
| 476 | <span class="body-2">{{ props.item.user }}</span> | 476 | <span class="body-2">{{ props.item.user }}</span> |
| 477 | </td> | 477 | </td> |
| 478 | <td class="text-xs-center"> | 478 | <td class="text-xs-center"> |
| 479 | <span> | 479 | <span> |
| 480 | <v-tooltip top> | 480 | <v-tooltip top> |
| 481 | <img | 481 | <img |
| 482 | slot="activator" | 482 | slot="activator" |
| 483 | style="cursor:pointer; width:25px; height:25px; " | 483 | style="cursor:pointer; width:25px; height:25px; " |
| 484 | src="/static/icon/view.png" | 484 | src="/static/icon/view.png" |
| 485 | /> | 485 | /> |
| 486 | <span>View</span> | 486 | <span>View</span> |
| 487 | </v-tooltip> | 487 | </v-tooltip> |
| 488 | </span> | 488 | </span> |
| 489 | </td> | 489 | </td> |
| 490 | </tr> | 490 | </tr> |
| 491 | </template> | 491 | </template> |
| 492 | </v-data-table> | 492 | </v-data-table> |
| 493 | </v-card> | 493 | </v-card> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | </v-layout> | 495 | </v-layout> |
| 496 | </v-container> | 496 | </v-container> |
| 497 | </v-flex> | 497 | </v-flex> |
| 498 | <v-spacer></v-spacer> | 498 | <v-spacer></v-spacer> |
| 499 | <!-- SIDE BAR --> | 499 | <!-- SIDE BAR --> |
| 500 | <v-flex xs12 sm12 md3> | 500 | <v-flex xs12 sm12 md3> |
| 501 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> | 501 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> |
| 502 | <v-card-text class="px-2"> | 502 | <v-card-text class="px-2"> |
| 503 | <h4 class="text-xs-center py-3"> | 503 | <h4 class="text-xs-center py-3"> |
| 504 | <b>Profile</b> | 504 | <b>Profile</b> |
| 505 | </h4> | 505 | </h4> |
| 506 | <v-flex xs12 class="py-3"> | 506 | <v-flex xs12 class="py-3"> |
| 507 | <v-layout wrap> | 507 | <v-layout wrap> |
| 508 | <v-flex xs12 sm12 md4> | 508 | <v-flex xs12 sm12 md4> |
| 509 | <img | 509 | <img |
| 510 | src="/static/icon/user.png" | 510 | src="/static/icon/user.png" |
| 511 | v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" | 511 | v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" |
| 512 | width="80" | 512 | width="80" |
| 513 | /> | 513 | /> |
| 514 | <img | 514 | <img |
| 515 | :src="userData.profilePicUrl" | 515 | :src="userData.profilePicUrl" |
| 516 | onerror="this.src='/static/icon/user.png';" | 516 | onerror="this.src='/static/icon/user.png';" |
| 517 | v-if="userData.profilePicUrl" | 517 | v-if="userData.profilePicUrl" |
| 518 | width="80" | 518 | width="80" |
| 519 | /> | 519 | /> |
| 520 | <img | 520 | <img |
| 521 | :src="userData.schoolLogoUrl" | 521 | :src="userData.schoolLogoUrl" |
| 522 | onerror="this.src='/static/icon/user.png';" | 522 | onerror="this.src='/static/icon/user.png';" |
| 523 | v-if="userData.schoolLogoUrl" | 523 | v-if="userData.schoolLogoUrl" |
| 524 | width="80" | 524 | width="80" |
| 525 | /> | 525 | /> |
| 526 | </v-flex> | 526 | </v-flex> |
| 527 | <v-flex xs12 sm12 md6> | 527 | <v-flex xs12 sm12 md6> |
| 528 | <p class="mb-0 body-1"> | 528 | <p class="mb-0 body-1"> |
| 529 | <i>{{ userData.name }}</i> | 529 | <i>{{ userData.name }}</i> |
| 530 | </p> | 530 | </p> |
| 531 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> | 531 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> |
| 532 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> | 532 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> |
| 533 | <address class="caption grey--text mb-3">{{ userData.address }}</address> | 533 | <address class="caption grey--text mb-3">{{ userData.address }}</address> |
| 534 | </v-flex> | 534 | </v-flex> |
| 535 | </v-layout> | 535 | </v-layout> |
| 536 | </v-flex> | 536 | </v-flex> |
| 537 | <hr /> | 537 | <hr /> |
| 538 | <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> | 538 | <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> |
| 539 | 539 | ||
| 540 | <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> | 540 | <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> |
| 541 | 541 | ||
| 542 | <!-- LATEST EVENTS --> | 542 | <!-- LATEST EVENTS --> |
| 543 | <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'"> | 543 | <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'"> |
| 544 | <v-card-text v-if="$store.state.role === 'ADMIN' "> | 544 | <v-card-text v-if="$store.state.role === 'ADMIN' "> |
| 545 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> | 545 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> |
| 546 | <div | 546 | <div |
| 547 | v-for="(activity,index) in activityList" | 547 | v-for="(activity,index) in activityList" |
| 548 | :key="index" | 548 | :key="index" |
| 549 | class="mt-2" | 549 | class="mt-2" |
| 550 | style="cursor: pointer;" | 550 | style="cursor: pointer;" |
| 551 | @click="seeEventDetails(activity)" | 551 | @click="seeEventDetails(activity)" |
| 552 | > | 552 | > |
| 553 | <span | 553 | <span |
| 554 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" | 554 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" |
| 555 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" | 555 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" |
| 556 | ></span> | 556 | ></span> |
| 557 | <div style="display: inline-block;" class="ml-2"> | 557 | <div style="display: inline-block;" class="ml-2"> |
| 558 | <div> | 558 | <div> |
| 559 | <div | 559 | <div |
| 560 | class="grey--text lighten-1 caption" | 560 | class="grey--text lighten-1 caption" |
| 561 | v-if="activity.dateOfEvent" | 561 | v-if="activity.dateOfEvent" |
| 562 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> | 562 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> |
| 563 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> | 563 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> |
| 564 | </div> | 564 | </div> |
| 565 | </div> | 565 | </div> |
| 566 | </div> | 566 | </div> |
| 567 | <div v-if="activityList.length == 0"> | 567 | <div v-if="activityList.length == 0"> |
| 568 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> | 568 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> |
| 569 | </div> | 569 | </div> |
| 570 | </v-card-text> | 570 | </v-card-text> |
| 571 | <v-card-text v-if="$store.state.role != 'ADMIN'"> | 571 | <v-card-text v-if="$store.state.role != 'ADMIN'"> |
| 572 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> | 572 | <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> |
| 573 | <div | 573 | <div |
| 574 | v-for="(activity,index) in activityList" | 574 | v-for="(activity,index) in activityList" |
| 575 | :key="index" | 575 | :key="index" |
| 576 | class="mt-2" | 576 | class="mt-2" |
| 577 | style="cursor: pointer;" | 577 | style="cursor: pointer;" |
| 578 | @click="seeEventDetails(activity)" | 578 | @click="seeEventDetails(activity)" |
| 579 | > | 579 | > |
| 580 | <span | 580 | <span |
| 581 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" | 581 | :style="{ 'background-color': colorsArray[index%colorsArray.length] }" |
| 582 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" | 582 | style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" |
| 583 | ></span> | 583 | ></span> |
| 584 | <div style="display: inline-block;" class="ml-2"> | 584 | <div style="display: inline-block;" class="ml-2"> |
| 585 | <!-- LATEST EVENTS FOR PARENT --> | 585 | <!-- LATEST EVENTS FOR PARENT --> |
| 586 | <div v-if="$store.state.role === 'PARENT' "> | 586 | <div v-if="$store.state.role === 'PARENT' "> |
| 587 | <div | 587 | <div |
| 588 | class="grey--text lighten-1 caption" | 588 | class="grey--text lighten-1 caption" |
| 589 | v-if="activity.meetingEvent" | 589 | v-if="activity.meetingEvent" |
| 590 | >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> | 590 | >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> |
| 591 | <div | 591 | <div |
| 592 | class="body-2" | 592 | class="body-2" |
| 593 | v-if="activity.meetingEvent" | 593 | v-if="activity.meetingEvent" |
| 594 | >{{activity.meetingEvent.title}}</div> | 594 | >{{activity.meetingEvent.title}}</div> |
| 595 | </div> | 595 | </div> |
| 596 | 596 | ||
| 597 | <!-- LATEST EVENTS FOR TEACHER --> | 597 | <!-- LATEST EVENTS FOR TEACHER --> |
| 598 | <div v-if="role === 'TEACHER'"> | 598 | <div v-if="role === 'TEACHER'"> |
| 599 | <div | 599 | <div |
| 600 | class="grey--text lighten-1 caption" | 600 | class="grey--text lighten-1 caption" |
| 601 | v-if="activity.dateOfEvent" | 601 | v-if="activity.dateOfEvent" |
| 602 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> | 602 | >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> |
| 603 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> | 603 | <div class="body-2" v-if="activity.title">{{activity.title}}</div> |
| 604 | </div> | 604 | </div> |
| 605 | </div> | 605 | </div> |
| 606 | <div v-if="activityList.length == 0"> | 606 | <div v-if="activityList.length == 0"> |
| 607 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> | 607 | <p class="text-center title grey lighten-4 error--text">No Data Found!</p> |
| 608 | </div> | 608 | </div> |
| 609 | </div> | 609 | </div> |
| 610 | </v-card-text> | 610 | </v-card-text> |
| 611 | </v-card> | 611 | </v-card> |
| 612 | </v-card-text> | 612 | </v-card-text> |
| 613 | </v-card> | 613 | </v-card> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | </v-layout> | 615 | </v-layout> |
| 616 | 616 | ||
| 617 | <v-dialog v-model="dialog" max-width="500"> | 617 | <v-dialog v-model="dialog" max-width="500" persistent> |
| 618 | <v-card color="grey lighten-4" flat> | 618 | <v-card color="grey lighten-4" flat> |
| 619 | <v-toolbar dark color="fixcolors"> | 619 | <v-toolbar dark color="fixcolors"> |
| 620 | <v-spacer></v-spacer> | 620 | <v-spacer></v-spacer> |
| 621 | <v-btn icon @click="dialog= false"> | 621 | <v-btn icon @click="dialog= false"> |
| 622 | <v-icon>close</v-icon> | 622 | <v-icon>close</v-icon> |
| 623 | </v-btn> | 623 | </v-btn> |
| 624 | </v-toolbar> | 624 | </v-toolbar> |
| 625 | <v-flex class="py-4"> | 625 | <v-flex class="py-4"> |
| 626 | <v-list-tile> | 626 | <v-list-tile> |
| 627 | <v-list-tile-action> | 627 | <v-list-tile-action> |
| 628 | <v-icon>edit</v-icon> | 628 | <v-icon>edit</v-icon> |
| 629 | </v-list-tile-action> | 629 | </v-list-tile-action> |
| 630 | <v-list-tile-content> | 630 | <v-list-tile-content> |
| 631 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> | 631 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> |
| 632 | </v-list-tile-content> | 632 | </v-list-tile-content> |
| 633 | </v-list-tile> | 633 | </v-list-tile> |
| 634 | <v-list-tile> | 634 | <v-list-tile> |
| 635 | <v-list-tile-action> | 635 | <v-list-tile-action> |
| 636 | <v-icon>access_time</v-icon> | 636 | <v-icon>access_time</v-icon> |
| 637 | </v-list-tile-action> | 637 | </v-list-tile-action> |
| 638 | <v-list-tile-content> | 638 | <v-list-tile-content> |
| 639 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> | 639 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> |
| 640 | </v-list-tile-content> | 640 | </v-list-tile-content> |
| 641 | </v-list-tile> | 641 | </v-list-tile> |
| 642 | </v-flex> | 642 | </v-flex> |
| 643 | </v-card> | 643 | </v-card> |
| 644 | </v-dialog> | 644 | </v-dialog> |
| 645 | </v-app> | 645 | </v-app> |
| 646 | </template> | 646 | </template> |
| 647 | 647 | ||
| 648 | <script> | 648 | <script> |
| 649 | import http from "@/Services/http.js"; | 649 | import http from "@/Services/http.js"; |
| 650 | import moment from "moment"; | 650 | import moment from "moment"; |
| 651 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 651 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
| 652 | // import { FunctionalCalendar } from "vue-functional-calendar"; | 652 | // import { FunctionalCalendar } from "vue-functional-calendar"; |
| 653 | 653 | ||
| 654 | export default { | 654 | export default { |
| 655 | components: { | 655 | components: { |
| 656 | // FunctionalCalendar | 656 | // FunctionalCalendar |
| 657 | }, | 657 | }, |
| 658 | mixins: [AllApiCalls], | 658 | mixins: [AllApiCalls], |
| 659 | data() { | 659 | data() { |
| 660 | return { | 660 | return { |
| 661 | // data: { | 661 | // data: { |
| 662 | // clieckedToday: false | 662 | // clieckedToday: false |
| 663 | // }, | 663 | // }, |
| 664 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], | 664 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], |
| 665 | // calendarData: {}, | 665 | // calendarData: {}, |
| 666 | // calendar: {}, | 666 | // calendar: {}, |
| 667 | 667 | ||
| 668 | // DIALOG BOX EVENT DETAILS | 668 | // DIALOG BOX EVENT DETAILS |
| 669 | viewEventDetails: false, | 669 | viewEventDetails: false, |
| 670 | 670 | ||
| 671 | // CALENDER | 671 | // CALENDER |
| 672 | moment: moment, | 672 | moment: moment, |
| 673 | activityEvents: [], | 673 | activityEvents: [], |
| 674 | onlineUser: [ | 674 | onlineUser: [ |
| 675 | { | 675 | { |
| 676 | user: "Student Demo", | 676 | user: "Student Demo", |
| 677 | }, | 677 | }, |
| 678 | { | 678 | { |
| 679 | user: "Teacher Demo", | 679 | user: "Teacher Demo", |
| 680 | }, | 680 | }, |
| 681 | { | 681 | { |
| 682 | user: "Priyansh Gupta", | 682 | user: "Priyansh Gupta", |
| 683 | }, | 683 | }, |
| 684 | { | 684 | { |
| 685 | user: "Gaurav Aggarwal", | 685 | user: "Gaurav Aggarwal", |
| 686 | }, | 686 | }, |
| 687 | { | 687 | { |
| 688 | user: "Approve Arorra", | 688 | user: "Approve Arorra", |
| 689 | }, | 689 | }, |
| 690 | ], | 690 | ], |
| 691 | showLoader: false, | 691 | showLoader: false, |
| 692 | calendarData: {}, | 692 | calendarData: {}, |
| 693 | dialog: false, | 693 | dialog: false, |
| 694 | dialogNotice: false, | 694 | dialogNotice: false, |
| 695 | HolidaysList: [], | 695 | HolidaysList: [], |
| 696 | EventsList: [], | 696 | EventsList: [], |
| 697 | events: [], | 697 | events: [], |
| 698 | config: { | 698 | config: { |
| 699 | eventClick: (event) => { | 699 | eventClick: (event) => { |
| 700 | this.selected = event; | 700 | this.selected = event; |
| 701 | this.dialog = true; | 701 | this.dialog = true; |
| 702 | }, | 702 | }, |
| 703 | }, | 703 | }, |
| 704 | selected: {}, | 704 | selected: {}, |
| 705 | barGraph: [], | 705 | barGraph: [], |
| 706 | // notice: {}, | 706 | // notice: {}, |
| 707 | userData: {}, | 707 | userData: {}, |
| 708 | dated: new Date(2018, 0, 9), | 708 | dated: new Date(2018, 0, 9), |
| 709 | userList: [], | 709 | userList: [], |
| 710 | sectionList: [], | 710 | sectionList: [], |
| 711 | students: "", | 711 | students: "", |
| 712 | parents: "", | 712 | parents: "", |
| 713 | teachers: "", | 713 | teachers: "", |
| 714 | classes: "", | 714 | classes: "", |
| 715 | noticeData: [], | 715 | noticeData: [], |
| 716 | expenseData: [], | 716 | expenseData: [], |
| 717 | feeData: [], | 717 | feeData: [], |
| 718 | collectionData: [], | 718 | collectionData: [], |
| 719 | courseData: [], | 719 | courseData: [], |
| 720 | studentsData: [], | 720 | studentsData: [], |
| 721 | annoucementData: [], | 721 | annoucementData: [], |
| 722 | role: "", | 722 | role: "", |
| 723 | attrs: [ | 723 | attrs: [ |
| 724 | { | 724 | { |
| 725 | key: "today", | 725 | key: "today", |
| 726 | highlight: true, | 726 | highlight: true, |
| 727 | dates: new Date(), | 727 | dates: new Date(), |
| 728 | }, | 728 | }, |
| 729 | ], | 729 | ], |
| 730 | drawer: true, | 730 | drawer: true, |
| 731 | items: [ | 731 | items: [ |
| 732 | { title: "Home", icon: "dashboard" }, | 732 | { title: "Home", icon: "dashboard" }, |
| 733 | { title: "About", icon: "question_answer" }, | 733 | { title: "About", icon: "question_answer" }, |
| 734 | ], | 734 | ], |
| 735 | right: null, | 735 | right: null, |
| 736 | 736 | ||
| 737 | series: [ | 737 | series: [ |
| 738 | { | 738 | { |
| 739 | name: "Total", | 739 | name: "Total", |
| 740 | data: [], | 740 | data: [], |
| 741 | }, | 741 | }, |
| 742 | ], | 742 | ], |
| 743 | showChart: false, | 743 | showChart: false, |
| 744 | chartOptions: { | 744 | chartOptions: { |
| 745 | chart: { | 745 | chart: { |
| 746 | type: "bar", | 746 | type: "bar", |
| 747 | height: 150, | 747 | height: 150, |
| 748 | stacked: true, | 748 | stacked: true, |
| 749 | // animations: { | 749 | // animations: { |
| 750 | // enabled: true, | 750 | // enabled: true, |
| 751 | // easing: "easeinout", | 751 | // easing: "easeinout", |
| 752 | // speed: 1200, | 752 | // speed: 1200, |
| 753 | // animateGradually: { | 753 | // animateGradually: { |
| 754 | // enabled: true, | 754 | // enabled: true, |
| 755 | // delay: 450 | 755 | // delay: 450 |
| 756 | // }, | 756 | // }, |
| 757 | // dynamicAnimation: { | 757 | // dynamicAnimation: { |
| 758 | // enabled: true, | 758 | // enabled: true, |
| 759 | // speed: 450 | 759 | // speed: 450 |
| 760 | // } | 760 | // } |
| 761 | // } | 761 | // } |
| 762 | }, | 762 | }, |
| 763 | plotOptions: { | 763 | plotOptions: { |
| 764 | bar: { | 764 | bar: { |
| 765 | horizontal: false, | 765 | horizontal: false, |
| 766 | columnWidth: "25%", | 766 | columnWidth: "25%", |
| 767 | // endingShape: "rounded", | 767 | // endingShape: "rounded", |
| 768 | distributed: true, | 768 | distributed: true, |
| 769 | }, | 769 | }, |
| 770 | }, | 770 | }, |
| 771 | responsive: [ | 771 | responsive: [ |
| 772 | { | 772 | { |
| 773 | breakpoint: 480, | 773 | breakpoint: 480, |
| 774 | options: { | 774 | options: { |
| 775 | legend: { | 775 | legend: { |
| 776 | position: "bottom", | 776 | position: "bottom", |
| 777 | offsetX: -10, | 777 | offsetX: -10, |
| 778 | offsetY: 0, | 778 | offsetY: 0, |
| 779 | }, | 779 | }, |
| 780 | }, | 780 | }, |
| 781 | }, | 781 | }, |
| 782 | ], | 782 | ], |
| 783 | legend: { | 783 | legend: { |
| 784 | show: false, | 784 | show: false, |
| 785 | }, | 785 | }, |
| 786 | colors: ["#7852cc", "#f9a825", "#ff8a89"], | 786 | colors: ["#7852cc", "#f9a825", "#ff8a89"], |
| 787 | dataLabels: { | 787 | dataLabels: { |
| 788 | enabled: false, | 788 | enabled: false, |
| 789 | }, | 789 | }, |
| 790 | stroke: { | 790 | stroke: { |
| 791 | show: true, | 791 | show: true, |
| 792 | width: 2, | 792 | width: 2, |
| 793 | colors: ["transparent"], | 793 | colors: ["transparent"], |
| 794 | }, | 794 | }, |
| 795 | xaxis: { | 795 | xaxis: { |
| 796 | categories: ["Fee", "Collections", "Expences"], | 796 | categories: ["Fee", "Collections", "Expences"], |
| 797 | }, | 797 | }, |
| 798 | yaxis: { | 798 | yaxis: { |
| 799 | title: { | 799 | title: { |
| 800 | text: "", | 800 | text: "", |
| 801 | }, | 801 | }, |
| 802 | }, | 802 | }, |
| 803 | fill: { | 803 | fill: { |
| 804 | opacity: 1, | 804 | opacity: 1, |
| 805 | }, | 805 | }, |
| 806 | tooltip: { | 806 | tooltip: { |
| 807 | y: { | 807 | y: { |
| 808 | formatter: function (val, opts) { | 808 | formatter: function (val, opts) { |
| 809 | return "" + val + " "; | 809 | return "" + val + " "; |
| 810 | }, | 810 | }, |
| 811 | }, | 811 | }, |
| 812 | }, | 812 | }, |
| 813 | }, | 813 | }, |
| 814 | 814 | ||
| 815 | // LATEST ACTIVITY | 815 | // LATEST ACTIVITY |
| 816 | colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], | 816 | colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], |
| 817 | activityList: [], | 817 | activityList: [], |
| 818 | }; | 818 | }; |
| 819 | }, | 819 | }, |
| 820 | 820 | ||
| 821 | methods: { | 821 | methods: { |
| 822 | test(e) { | 822 | test(e) { |
| 823 | console.log(" test - ", e); | 823 | console.log(" test - ", e); |
| 824 | }, | 824 | }, |
| 825 | async handleDayChanged(e) { | 825 | async handleDayChanged(e) { |
| 826 | await this.getParticularMeetingEvent({ | 826 | await this.getParticularMeetingEvent({ |
| 827 | meetingEventId: e.events[0]._id, | 827 | meetingEventId: e.events[0]._id, |
| 828 | }); | 828 | }); |
| 829 | this.viewEventDetails = true; | 829 | this.viewEventDetails = true; |
| 830 | }, | 830 | }, |
| 831 | async seeEventDetails(activity) { | 831 | async seeEventDetails(activity) { |
| 832 | if (this.$store.state.role === "TEACHER") { | 832 | if (this.$store.state.role === "TEACHER") { |
| 833 | await this.getParticularMeetingEvent({ meetingEventId: activity._id }); | 833 | await this.getParticularMeetingEvent({ meetingEventId: activity._id }); |
| 834 | this.viewEventDetails = true; | 834 | this.viewEventDetails = true; |
| 835 | } | 835 | } |
| 836 | if (this.$store.state.role === "PARENT") { | 836 | if (this.$store.state.role === "PARENT") { |
| 837 | await this.getParticularMeetingEvent({ | 837 | await this.getParticularMeetingEvent({ |
| 838 | meetingEventId: activity.meetingEvent._id, | 838 | meetingEventId: activity.meetingEvent._id, |
| 839 | }); | 839 | }); |
| 840 | this.viewEventDetails = true; | 840 | this.viewEventDetails = true; |
| 841 | } | 841 | } |
| 842 | if (this.$store.state.role === "ADMIN") { | 842 | if (this.$store.state.role === "ADMIN") { |
| 843 | await this.getParticularMeetingEvent({ | 843 | await this.getParticularMeetingEvent({ |
| 844 | meetingEventId: activity._id, | 844 | meetingEventId: activity._id, |
| 845 | }); | 845 | }); |
| 846 | this.viewEventDetails = true; | 846 | this.viewEventDetails = true; |
| 847 | } | 847 | } |
| 848 | }, | 848 | }, |
| 849 | async routeToCourseDetails(courseId) { | 849 | async routeToCourseDetails(courseId) { |
| 850 | /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ | 850 | /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ |
| 851 | let response = await this.getParticularCourseDetail(courseId); | 851 | let response = await this.getParticularCourseDetail(courseId); |
| 852 | 852 | ||
| 853 | /* If the response is null then dont route */ | 853 | /* If the response is null then dont route */ |
| 854 | if (response.data.data.length > 0) { | 854 | if (response.data.data.length > 0) { |
| 855 | this.$router.push({ | 855 | this.$router.push({ |
| 856 | name: "Course Details", | 856 | name: "Course Details", |
| 857 | query: { courseId: courseId }, | 857 | query: { courseId: courseId }, |
| 858 | }); | 858 | }); |
| 859 | } else { | 859 | } else { |
| 860 | this.seeSnackbar("No Data Available", "warning"); | 860 | this.seeSnackbar("No Data Available", "warning"); |
| 861 | } | 861 | } |
| 862 | }, | 862 | }, |
| 863 | 863 | ||
| 864 | closeNotice() { | 864 | closeNotice() { |
| 865 | this.dialogNotice = false; | 865 | this.dialogNotice = false; |
| 866 | }, | 866 | }, |
| 867 | profile() { | 867 | profile() { |
| 868 | // this.editedIndex = this.desserts.indexOf(item); | 868 | // this.editedIndex = this.desserts.indexOf(item); |
| 869 | // this.notice = Object.assign({}, item); | 869 | // this.notice = Object.assign({}, item); |
| 870 | // this.dialogNotice = true; | 870 | // this.dialogNotice = true; |
| 871 | this.$router.push("/noticeBoard"); | 871 | this.$router.push("/noticeBoard"); |
| 872 | }, | 872 | }, |
| 873 | date: function (date) { | 873 | date: function (date) { |
| 874 | return moment(date).format("MMMM DD, YYYY HH:mm"); | 874 | return moment(date).format("MMMM DD, YYYY HH:mm"); |
| 875 | }, | 875 | }, |
| 876 | activityDate(date) { | 876 | activityDate(date) { |
| 877 | return moment(date).format("MMMM DD, YYYY"); | 877 | return moment(date).format("MMMM DD, YYYY"); |
| 878 | }, | 878 | }, |
| 879 | refreshEvents() { | 879 | refreshEvents() { |
| 880 | this.$refs.calendar.$emit("refetch-events"); | 880 | this.$refs.calendar.$emit("refetch-events"); |
| 881 | }, | 881 | }, |
| 882 | removeEvent() { | 882 | removeEvent() { |
| 883 | this.$refs.calendar.$emit("remove-event", this.selected); | 883 | this.$refs.calendar.$emit("remove-event", this.selected); |
| 884 | this.selected = {}; | 884 | this.selected = {}; |
| 885 | }, | 885 | }, |
| 886 | eventSelected(event) { | 886 | eventSelected(event) { |
| 887 | this.selected = event; | 887 | this.selected = event; |
| 888 | }, | 888 | }, |
| 889 | // eventDropStart: function(event) { | 889 | // eventDropStart: function(event) { |
| 890 | // event.editable = false; | 890 | // event.editable = false; |
| 891 | // }, | 891 | // }, |
| 892 | eventCreated(...test) { | 892 | eventCreated(...test) { |
| 893 | console.log(test); | 893 | console.log(test); |
| 894 | }, | 894 | }, |
| 895 | getStudents() { | 895 | getStudents() { |
| 896 | http() | 896 | http() |
| 897 | .get("/getStudentsList") | 897 | .get("/getStudentsList") |
| 898 | .then((response) => { | 898 | .then((response) => { |
| 899 | this.students = response.data.data; | 899 | this.students = response.data.data; |
| 900 | this.showLoader = false; | 900 | this.showLoader = false; |
| 901 | }) | 901 | }) |
| 902 | .catch((error) => { | 902 | .catch((error) => { |
| 903 | // console.log("err====>", err); | 903 | // console.log("err====>", err); |
| 904 | this.showLoader = false; | 904 | this.showLoader = false; |
| 905 | if (error.response.status === 401) { | 905 | if (error.response.status === 401) { |
| 906 | this.$router.replace({ path: "/" }); | 906 | this.$router.replace({ path: "/" }); |
| 907 | this.$store.dispatch("setToken", null); | 907 | this.$store.dispatch("setToken", null); |
| 908 | this.$store.dispatch("Id", null); | 908 | this.$store.dispatch("Id", null); |
| 909 | } | 909 | } |
| 910 | }); | 910 | }); |
| 911 | }, | 911 | }, |
| 912 | getParents() { | 912 | getParents() { |
| 913 | http() | 913 | http() |
| 914 | .get("/getParentsList") | 914 | .get("/getParentsList") |
| 915 | .then((response) => { | 915 | .then((response) => { |
| 916 | this.parents = response.data.data; | 916 | this.parents = response.data.data; |
| 917 | this.showLoader = false; | 917 | this.showLoader = false; |
| 918 | }) | 918 | }) |
| 919 | .catch((error) => { | 919 | .catch((error) => { |
| 920 | // console.log("err====>", err); | 920 | // console.log("err====>", err); |
| 921 | this.showLoader = false; | 921 | this.showLoader = false; |
| 922 | }); | 922 | }); |
| 923 | }, | 923 | }, |
| 924 | getTeachers() { | 924 | getTeachers() { |
| 925 | http() | 925 | http() |
| 926 | .get("/getTeachersList") | 926 | .get("/getTeachersList") |
| 927 | .then((response) => { | 927 | .then((response) => { |
| 928 | this.teachers = response.data.data; | 928 | this.teachers = response.data.data; |
| 929 | this.showLoader = false; | 929 | this.showLoader = false; |
| 930 | }) | 930 | }) |
| 931 | .catch((error) => { | 931 | .catch((error) => { |
| 932 | // console.log("err====>", err); | 932 | // console.log("err====>", err); |
| 933 | this.showLoader = false; | 933 | this.showLoader = false; |
| 934 | }); | 934 | }); |
| 935 | }, | 935 | }, |
| 936 | getClasses() { | 936 | getClasses() { |
| 937 | http() | 937 | http() |
| 938 | .get("/getClassesList") | 938 | .get("/getClassesList") |
| 939 | .then((response) => { | 939 | .then((response) => { |
| 940 | this.classes = response.data.data; | 940 | this.classes = response.data.data; |
| 941 | this.showLoader = false; | 941 | this.showLoader = false; |
| 942 | }) | 942 | }) |
| 943 | .catch((error) => { | 943 | .catch((error) => { |
| 944 | this.showLoader = false; | 944 | this.showLoader = false; |
| 945 | }); | 945 | }); |
| 946 | }, | 946 | }, |
| 947 | getNoticeData() { | 947 | getNoticeData() { |
| 948 | this.showLoader = true; | 948 | this.showLoader = true; |
| 949 | http() | 949 | http() |
| 950 | .get("/getEventsList") | 950 | .get("/getEventsList") |
| 951 | .then((response) => { | 951 | .then((response) => { |
| 952 | this.noticeData = response.data.data; | 952 | this.noticeData = response.data.data; |
| 953 | this.showLoader = false; | 953 | this.showLoader = false; |
| 954 | }) | 954 | }) |
| 955 | .catch((error) => { | 955 | .catch((error) => { |
| 956 | this.showLoader = false; | 956 | this.showLoader = false; |
| 957 | }); | 957 | }); |
| 958 | }, | 958 | }, |
| 959 | getUserData() { | 959 | getUserData() { |
| 960 | // this.showLoader = true; | 960 | // this.showLoader = true; |
| 961 | if (this.$store.state.role === "PARENT") { | 961 | if (this.$store.state.role === "PARENT") { |
| 962 | http() | 962 | http() |
| 963 | .get("/getParticularUserDetail", { | 963 | .get("/getParticularUserDetail", { |
| 964 | params: { | 964 | params: { |
| 965 | studentId: localStorage.getItem("parentStudentId"), | 965 | studentId: localStorage.getItem("parentStudentId"), |
| 966 | }, | 966 | }, |
| 967 | }) | 967 | }) |
| 968 | .then((response) => { | 968 | .then((response) => { |
| 969 | this.userData = response.data.data; | 969 | this.userData = response.data.data; |
| 970 | this.showLoader = false; | 970 | this.showLoader = false; |
| 971 | }) | 971 | }) |
| 972 | .catch((error) => { | 972 | .catch((error) => { |
| 973 | this.showLoader = false; | 973 | this.showLoader = false; |
| 974 | }); | 974 | }); |
| 975 | } else { | 975 | } else { |
| 976 | http() | 976 | http() |
| 977 | .get("/getParticularUserDetail") | 977 | .get("/getParticularUserDetail") |
| 978 | .then((response) => { | 978 | .then((response) => { |
| 979 | this.userData = response.data.data; | 979 | this.userData = response.data.data; |
| 980 | this.showLoader = false; | 980 | this.showLoader = false; |
| 981 | }) | 981 | }) |
| 982 | .catch((error) => { | 982 | .catch((error) => { |
| 983 | this.showLoader = false; | 983 | this.showLoader = false; |
| 984 | }); | 984 | }); |
| 985 | } | 985 | } |
| 986 | }, | 986 | }, |
| 987 | 987 | ||
| 988 | getFeesAndCollectionsData() { | 988 | getFeesAndCollectionsData() { |
| 989 | http() | 989 | http() |
| 990 | .get("/getTotalFeesAndCollections") | 990 | .get("/getTotalFeesAndCollections") |
| 991 | .then((response) => { | 991 | .then((response) => { |
| 992 | this.feeData = response.data.data; | 992 | this.feeData = response.data.data; |
| 993 | // this.collectionData = response.data.data; | 993 | // this.collectionData = response.data.data; |
| 994 | this.series[0].data[0] = this.feeData.totalFees; | 994 | this.series[0].data[0] = this.feeData.totalFees; |
| 995 | this.series[0].data[1] = this.feeData.totalCollection; | 995 | this.series[0].data[1] = this.feeData.totalCollection; |
| 996 | this.showLoader = false; | 996 | this.showLoader = false; |
| 997 | }) | 997 | }) |
| 998 | .catch((error) => { | 998 | .catch((error) => { |
| 999 | this.showLoader = false; | 999 | this.showLoader = false; |
| 1000 | }); | 1000 | }); |
| 1001 | }, | 1001 | }, |
| 1002 | getExpensesData() { | 1002 | getExpensesData() { |
| 1003 | http() | 1003 | http() |
| 1004 | .get("/getTotalExpenses") | 1004 | .get("/getTotalExpenses") |
| 1005 | .then((response) => { | 1005 | .then((response) => { |
| 1006 | this.expenseData = response.data.data; | 1006 | this.expenseData = response.data.data; |
| 1007 | // var array = response.data.data.sum; | 1007 | // var array = response.data.data.sum; |
| 1008 | this.series[0].data[2] = this.expenseData.sum; | 1008 | this.series[0].data[2] = this.expenseData.sum; |
| 1009 | this.showChart = true; | 1009 | this.showChart = true; |
| 1010 | // this.series = [ | 1010 | // this.series = [ |
| 1011 | // { | 1011 | // { |
| 1012 | // name: "Total", | 1012 | // name: "Total", |
| 1013 | // data: array | 1013 | // data: array |
| 1014 | // } | 1014 | // } |
| 1015 | // ]; | 1015 | // ]; |
| 1016 | this.showLoader = false; | 1016 | this.showLoader = false; |
| 1017 | }) | 1017 | }) |
| 1018 | .catch((error) => { | 1018 | .catch((error) => { |
| 1019 | this.showLoader = false; | 1019 | this.showLoader = false; |
| 1020 | }); | 1020 | }); |
| 1021 | }, | 1021 | }, |
| 1022 | // async getparentStudents() { | 1022 | // async getparentStudents() { |
| 1023 | // this.showLoader = true; | 1023 | // this.showLoader = true; |
| 1024 | // await http() | 1024 | // await http() |
| 1025 | // .get("/parentStudentsList") | 1025 | // .get("/parentStudentsList") |
| 1026 | // .then((response) => { | 1026 | // .then((response) => { |
| 1027 | 1027 | ||
| 1028 | // /* set values in local storage */ | 1028 | // /* set values in local storage */ |
| 1029 | // this.studentsData = response.data.data.students; | 1029 | // this.studentsData = response.data.data.students; |
| 1030 | // this.showLoader = false; | 1030 | // this.showLoader = false; |
| 1031 | // }) | 1031 | // }) |
| 1032 | // .catch((err) => { | 1032 | // .catch((err) => { |
| 1033 | // console.log("err====>", err); | 1033 | // console.log("err====>", err); |
| 1034 | // this.showLoader = false; | 1034 | // this.showLoader = false; |
| 1035 | // }); | 1035 | // }); |
| 1036 | // await this.getCourses(parentStudentsId, classId); | 1036 | // await this.getCourses(parentStudentsId, classId); |
| 1037 | // await this.getAnnoucementes(classId); | 1037 | // await this.getAnnoucementes(classId); |
| 1038 | // }, | 1038 | // }, |
| 1039 | async getCourses(parentStudentsId, classId) { | 1039 | async getCourses(parentStudentsId, classId) { |
| 1040 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ | 1040 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ |
| 1041 | await this.getStudentCourses({ | 1041 | await this.getStudentCourses({ |
| 1042 | classId: localStorage.getItem("parentClassId"), | 1042 | classId: localStorage.getItem("parentClassId"), |
| 1043 | studentId: localStorage.getItem("parentStudentId"), | 1043 | studentId: localStorage.getItem("parentStudentId"), |
| 1044 | }); | 1044 | }); |
| 1045 | }, | 1045 | }, |
| 1046 | getAnnoucementes(classId) { | 1046 | getAnnoucementes(classId) { |
| 1047 | this.showLoader = true; | 1047 | this.showLoader = true; |
| 1048 | http() | 1048 | http() |
| 1049 | .get("/getAnnoucementesList", { | 1049 | .get("/getAnnoucementesList", { |
| 1050 | params: { | 1050 | params: { |
| 1051 | classId: localStorage.getItem("parentClassId"), | 1051 | classId: localStorage.getItem("parentClassId"), |
| 1052 | }, | 1052 | }, |
| 1053 | }) | 1053 | }) |
| 1054 | .then((response) => { | 1054 | .then((response) => { |
| 1055 | this.annoucementData = response.data.data; | 1055 | this.annoucementData = response.data.data; |
| 1056 | this.showLoader = false; | 1056 | this.showLoader = false; |
| 1057 | }) | 1057 | }) |
| 1058 | .catch((err) => { | 1058 | .catch((err) => { |
| 1059 | console.log("err====>", err); | 1059 | console.log("err====>", err); |
| 1060 | this.showLoader = false; | 1060 | this.showLoader = false; |
| 1061 | }); | 1061 | }); |
| 1062 | }, | 1062 | }, |
| 1063 | async getMeetingEventes() { | 1063 | async getMeetingEventes() { |
| 1064 | if (this.role == "TEACHER" || this.role === "ADMIN") { | 1064 | if (this.role == "TEACHER" || this.role === "ADMIN") { |
| 1065 | this.showLoader = true; | 1065 | this.showLoader = true; |
| 1066 | await http() | 1066 | await http() |
| 1067 | .get("/getMeetingEventesList") | 1067 | .get("/getMeetingEventesList") |
| 1068 | .then((response) => { | 1068 | .then((response) => { |
| 1069 | var activityList = response.data.data; | 1069 | var activityList = response.data.data; |
| 1070 | this.activityList = activityList; | 1070 | this.activityList = activityList; |
| 1071 | this.showLoader = false; | 1071 | this.showLoader = false; |
| 1072 | 1072 | ||
| 1073 | /* set activityEvents array to highlight event dates in calender */ | 1073 | /* set activityEvents array to highlight event dates in calender */ |
| 1074 | for (var i = 0; i < this.activityList.length; i++) { | 1074 | for (var i = 0; i < this.activityList.length; i++) { |
| 1075 | let obj = {}; | 1075 | let obj = {}; |
| 1076 | obj.date = moment(this.activityList[i].dateOfEvent).format( | 1076 | obj.date = moment(this.activityList[i].dateOfEvent).format( |
| 1077 | "YYYY/MM/DD" | 1077 | "YYYY/MM/DD" |
| 1078 | ); | 1078 | ); |
| 1079 | obj.title = this.activityList[i].title; | 1079 | obj.title = this.activityList[i].title; |
| 1080 | obj._id = this.activityList[i]._id; | 1080 | obj._id = this.activityList[i]._id; |
| 1081 | this.activityEvents.push(obj); | 1081 | this.activityEvents.push(obj); |
| 1082 | } | 1082 | } |
| 1083 | }) | 1083 | }) |
| 1084 | .catch((error) => { | 1084 | .catch((error) => { |
| 1085 | this.showLoader = false; | 1085 | this.showLoader = false; |
| 1086 | }); | 1086 | }); |
| 1087 | } | 1087 | } |
| 1088 | }, | 1088 | }, |
| 1089 | }, | 1089 | }, |
| 1090 | 1090 | ||
| 1091 | mounted() { | 1091 | mounted() { |
| 1092 | // = this.$store.state.schoolToken; | 1092 | // = this.$store.state.schoolToken; |
| 1093 | // console.log("this.$store.state.role", this.token); | 1093 | // console.log("this.$store.state.role", this.token); |
| 1094 | // this.getUsersList(); | 1094 | // this.getUsersList(); |
| 1095 | }, | 1095 | }, |
| 1096 | 1096 | ||
| 1097 | async created() { | 1097 | async created() { |
| 1098 | if (this.$store.state.role === "ADMIN") { | 1098 | if (this.$store.state.role === "ADMIN") { |
| 1099 | // this.token = this.$store.state.token; | 1099 | // this.token = this.$store.state.token; |
| 1100 | await this.getFeesAndCollectionsData(); | 1100 | await this.getFeesAndCollectionsData(); |
| 1101 | await this.getExpensesData(); | 1101 | await this.getExpensesData(); |
| 1102 | } else if (this.$store.state.schoolRole === "SUPERADMIN") { | 1102 | } else if (this.$store.state.schoolRole === "SUPERADMIN") { |
| 1103 | // this.token = this.$store.state.schoolToken; | 1103 | // this.token = this.$store.state.schoolToken; |
| 1104 | await this.getFeesAndCollectionsData(); | 1104 | await this.getFeesAndCollectionsData(); |
| 1105 | await this.getExpensesData(); | 1105 | await this.getExpensesData(); |
| 1106 | } else if (this.$store.state.role === "TEACHER") { | 1106 | } else if (this.$store.state.role === "TEACHER") { |
| 1107 | // this.token = this.$store.state.token; | 1107 | // this.token = this.$store.state.token; |
| 1108 | } else if (this.$store.state.role === "ACCOUNTANT") { | 1108 | } else if (this.$store.state.role === "ACCOUNTANT") { |
| 1109 | // this.token = this.$store.state.token; | 1109 | // this.token = this.$store.state.token; |
| 1110 | } else if (this.$store.state.role === "LIBRARIAN") { | 1110 | } else if (this.$store.state.role === "LIBRARIAN") { |
| 1111 | // this.token = this.$store.state.token; | 1111 | // this.token = this.$store.state.token; |
| 1112 | } else if (this.$store.state.role === "PARENT") { | 1112 | } else if (this.$store.state.role === "PARENT") { |
| 1113 | // this.token = this.$store.state.token; | 1113 | // this.token = this.$store.state.token; |
| 1114 | // await this.getparentStudents(); | 1114 | // await this.getparentStudents(); |
| 1115 | this.studentsData = this.$store.getters.GET_STUDENTS_DATA; | 1115 | this.studentsData = this.$store.getters.GET_STUDENTS_DATA; |
| 1116 | console.log("students data - ", this.studentsData); | 1116 | console.log("students data - ", this.studentsData); |
| 1117 | await this.getCourses(); | 1117 | await this.getCourses(); |
| 1118 | await this.getAnnoucementes(); | 1118 | await this.getAnnoucementes(); |
| 1119 | } | 1119 | } |
| 1120 | this.role = this.$store.state.role; | 1120 | this.role = this.$store.state.role; |
| 1121 | 1121 | ||
| 1122 | await this.getStudents(); | 1122 | await this.getStudents(); |
| 1123 | await this.getTeachers(); | 1123 | await this.getTeachers(); |
| 1124 | await this.getParents(); | 1124 | await this.getParents(); |
| 1125 | await this.getClasses(); | 1125 | await this.getClasses(); |
| 1126 | await this.getNoticeData(); | 1126 | await this.getNoticeData(); |
| 1127 | await this.getUserData(); | 1127 | await this.getUserData(); |
| 1128 | 1128 | ||
| 1129 | /* get Latest events list for student login*/ | 1129 | /* get Latest events list for student login*/ |
| 1130 | if (this.$store.state.role == "PARENT") { | 1130 | if (this.$store.state.role == "PARENT") { |
| 1131 | let response = await this.studentMeetingEvents({ | 1131 | let response = await this.studentMeetingEvents({ |
| 1132 | studentId: localStorage.getItem("parentStudentId"), | 1132 | studentId: localStorage.getItem("parentStudentId"), |
| 1133 | }); | 1133 | }); |
| 1134 | this.activityList = response.data.data; | 1134 | this.activityList = response.data.data; |
| 1135 | 1135 | ||
| 1136 | /* set activityEvents array to highlight event dates in calender */ | 1136 | /* set activityEvents array to highlight event dates in calender */ |
| 1137 | for (var i = 0; i < this.activityList.length; i++) { | 1137 | for (var i = 0; i < this.activityList.length; i++) { |
| 1138 | let obj = {}; | 1138 | let obj = {}; |
| 1139 | obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( | 1139 | obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( |
| 1140 | "YYYY/MM/DD" | 1140 | "YYYY/MM/DD" |
| 1141 | ); | 1141 | ); |
| 1142 | obj.title = this.activityList[i].meetingEvent.title; | 1142 | obj.title = this.activityList[i].meetingEvent.title; |
| 1143 | obj._id = this.activityList[i].meetingEvent._id; | 1143 | obj._id = this.activityList[i].meetingEvent._id; |
| 1144 | this.activityEvents.push(obj); | 1144 | this.activityEvents.push(obj); |
| 1145 | } | 1145 | } |
| 1146 | } | 1146 | } |
| 1147 | 1147 | ||
| 1148 | /* get Latest events list for teacher login*/ | 1148 | /* get Latest events list for teacher login*/ |
| 1149 | if (this.role == "TEACHER" || this.role == "ADMIN") { | 1149 | if (this.role == "TEACHER" || this.role == "ADMIN") { |
| 1150 | await this.getMeetingEventes(); | 1150 | await this.getMeetingEventes(); |
| 1151 | } | 1151 | } |
| 1152 | }, | 1152 | }, |
| 1153 | }; | 1153 | }; |
| 1154 | </script> | 1154 | </script> |
| 1155 | 1155 | ||
| 1156 | <style scoped> | 1156 | <style scoped> |
| 1157 | @import "fullcalendar/dist/fullcalendar.css"; | 1157 | @import "fullcalendar/dist/fullcalendar.css"; |
| 1158 | 1158 | ||
| 1159 | a { | 1159 | a { |
| 1160 | color: white; | 1160 | color: white; |
| 1161 | } | 1161 | } |
| 1162 | </style> | 1162 | </style> |
src/pages/Event/event.vue
| 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" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Event</label> | 8 | <label class="title text-xs-center">Edit 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 | 19 | <v-text-field |
| 20 | v-model="editedItem.title" | 20 | v-model="editedItem.title" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Date:</label> | 31 | <label class="right">Date:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs7 class="ml-3"> | 33 | <v-flex xs7 class="ml-3"> |
| 34 | <v-menu | 34 | <v-menu |
| 35 | ref="menu" | 35 | ref="menu" |
| 36 | :close-on-content-click="false" | 36 | :close-on-content-click="false" |
| 37 | v-model="menu" | 37 | v-model="menu" |
| 38 | :nudge-right="40" | 38 | :nudge-right="40" |
| 39 | lazy | 39 | lazy |
| 40 | transition="scale-transition" | 40 | transition="scale-transition" |
| 41 | offset-y | 41 | offset-y |
| 42 | full-width | 42 | full-width |
| 43 | min-width="290px" | 43 | min-width="290px" |
| 44 | > | 44 | > |
| 45 | <v-text-field | 45 | <v-text-field |
| 46 | slot="activator" | 46 | slot="activator" |
| 47 | :rules="dateRules" | 47 | :rules="dateRules" |
| 48 | v-model="editedItem.dateOfEvent" | 48 | v-model="editedItem.dateOfEvent" |
| 49 | placeholder="Select date" | 49 | placeholder="Select date" |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | <v-date-picker | 51 | <v-date-picker |
| 52 | color="info" | 52 | color="info" |
| 53 | ref="picker" | 53 | ref="picker" |
| 54 | v-model="editedItem.dateOfEvent" | 54 | v-model="editedItem.dateOfEvent" |
| 55 | @input="$refs.menu.save(editedItem.dateOfEvent)" | 55 | @input="$refs.menu.save(editedItem.dateOfEvent)" |
| 56 | ></v-date-picker> | 56 | ></v-date-picker> |
| 57 | </v-menu> | 57 | </v-menu> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs12 sm12> | 61 | <v-flex xs12 sm12> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right">Description:</label> | 64 | <label class="right">Description:</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex xs7 class="ml-3"> | 66 | <v-flex xs7 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | placeholder="fill your Description" | 68 | placeholder="fill your Description" |
| 69 | v-model="editedItem.description" | 69 | v-model="editedItem.description" |
| 70 | type="text" | 70 | type="text" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs12> | 76 | <v-flex xs12> |
| 77 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 77 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 80 | </v-card-actions> | 80 | </v-card-actions> |
| 81 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 81 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 82 | <v-spacer></v-spacer> | 82 | <v-spacer></v-spacer> |
| 83 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 83 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 84 | <v-spacer></v-spacer> | 84 | <v-spacer></v-spacer> |
| 85 | </v-card-actions> | 85 | </v-card-actions> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-container> | 88 | </v-container> |
| 89 | </v-card> | 89 | </v-card> |
| 90 | </v-dialog> | 90 | </v-dialog> |
| 91 | <!-- ****** PROFILE VIEW EVENT ****** --> | 91 | <!-- ****** PROFILE VIEW EVENT ****** --> |
| 92 | <v-dialog v-model="viewEventdialog" max-width="500px"> | 92 | <v-dialog v-model="viewEventdialog" max-width="500px" persistent> |
| 93 | <v-card flat class="card-style pa-3" dark> | 93 | <v-card flat class="card-style pa-3" dark> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs12> | 95 | <v-flex xs12> |
| 96 | <label class="title text-xs-center">View Event</label> | 96 | <label class="title text-xs-center">View Event</label> |
| 97 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> | 97 | <v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | <v-card-text> | 100 | <v-card-text> |
| 101 | <v-container grid-list-md> | 101 | <v-container grid-list-md> |
| 102 | <v-layout wrap> | 102 | <v-layout wrap> |
| 103 | <v-flex> | 103 | <v-flex> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs5 sm6> | 105 | <v-flex xs5 sm6> |
| 106 | <h5 class="right my-1"> | 106 | <h5 class="right my-1"> |
| 107 | <b>Title:</b> | 107 | <b>Title:</b> |
| 108 | </h5> | 108 | </h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm6 xs8> | 110 | <v-flex sm6 xs8> |
| 111 | <h5 class="my-1">{{ editedItem.title }}</h5> | 111 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | <v-layout> | 114 | <v-layout> |
| 115 | <v-flex xs5 sm6> | 115 | <v-flex xs5 sm6> |
| 116 | <h5 class="right my-1"> | 116 | <h5 class="right my-1"> |
| 117 | <b>Date:</b> | 117 | <b>Date:</b> |
| 118 | </h5> | 118 | </h5> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | <v-flex sm6 xs8> | 120 | <v-flex sm6 xs8> |
| 121 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> | 121 | <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout> | 124 | <v-layout> |
| 125 | <v-flex xs5 sm6> | 125 | <v-flex xs5 sm6> |
| 126 | <h5 class="right my-1"> | 126 | <h5 class="right my-1"> |
| 127 | <b>Description:</b> | 127 | <b>Description:</b> |
| 128 | </h5> | 128 | </h5> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex sm6 xs8> | 130 | <v-flex sm6 xs8> |
| 131 | <h5 class="my-1">{{ editedItem.description }}</h5> | 131 | <h5 class="my-1">{{ editedItem.description }}</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 | 140 | ||
| 141 | <!-- ****** EVENT TABLE ****** --> | 141 | <!-- ****** EVENT TABLE ****** --> |
| 142 | 142 | ||
| 143 | <v-toolbar color="transparent" flat> | 143 | <v-toolbar color="transparent" flat> |
| 144 | <v-btn | 144 | <v-btn |
| 145 | fab | 145 | fab |
| 146 | dark | 146 | dark |
| 147 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 147 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 148 | small | 148 | small |
| 149 | @click="addEventDialog = true" | 149 | @click="addEventDialog = true" |
| 150 | > | 150 | > |
| 151 | <v-icon dark>add</v-icon> | 151 | <v-icon dark>add</v-icon> |
| 152 | </v-btn> | 152 | </v-btn> |
| 153 | <v-btn | 153 | <v-btn |
| 154 | round | 154 | round |
| 155 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 155 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 156 | dark | 156 | dark |
| 157 | @click="addEventDialog = true" | 157 | @click="addEventDialog = true" |
| 158 | > | 158 | > |
| 159 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event | 159 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Event |
| 160 | </v-btn> | 160 | </v-btn> |
| 161 | <v-spacer></v-spacer> | 161 | <v-spacer></v-spacer> |
| 162 | <v-card-title class="body-1" v-show="show"> | 162 | <v-card-title class="body-1" v-show="show"> |
| 163 | <v-btn icon large flat @click="displaySearch"> | 163 | <v-btn icon large flat @click="displaySearch"> |
| 164 | <v-avatar size="27"> | 164 | <v-avatar size="27"> |
| 165 | <img src="/static/icon/search.png" alt="icon" /> | 165 | <img src="/static/icon/search.png" alt="icon" /> |
| 166 | </v-avatar> | 166 | </v-avatar> |
| 167 | </v-btn> | 167 | </v-btn> |
| 168 | </v-card-title> | 168 | </v-card-title> |
| 169 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 169 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 170 | <v-layout> | 170 | <v-layout> |
| 171 | <v-text-field | 171 | <v-text-field |
| 172 | autofocus | 172 | autofocus |
| 173 | v-model="search" | 173 | v-model="search" |
| 174 | label="Search" | 174 | label="Search" |
| 175 | prepend-inner-icon="search" | 175 | prepend-inner-icon="search" |
| 176 | color="primary" | 176 | color="primary" |
| 177 | ></v-text-field> | 177 | ></v-text-field> |
| 178 | <v-icon @click="closeSearch" color="error">close</v-icon> | 178 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 179 | </v-layout> | 179 | </v-layout> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | </v-toolbar> | 181 | </v-toolbar> |
| 182 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> | 182 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> |
| 183 | <template slot="items" slot-scope="props"> | 183 | <template slot="items" slot-scope="props"> |
| 184 | <tr class="tr"> | 184 | <tr class="tr"> |
| 185 | <td class="td td-row">{{ props.index + 1}}</td> | 185 | <td class="td td-row">{{ props.index + 1}}</td> |
| 186 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 186 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 187 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> | 187 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> |
| 188 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 188 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 189 | <td class="td td-row text-xs-center"> | 189 | <td class="td td-row text-xs-center"> |
| 190 | <span> | 190 | <span> |
| 191 | <v-tooltip top> | 191 | <v-tooltip top> |
| 192 | <img | 192 | <img |
| 193 | slot="activator" | 193 | slot="activator" |
| 194 | style="cursor:pointer; width:25px; height:25px; " | 194 | style="cursor:pointer; width:25px; height:25px; " |
| 195 | class="mr-3" | 195 | class="mr-3" |
| 196 | @click="profile(props.item)" | 196 | @click="profile(props.item)" |
| 197 | src="/static/icon/view.png" | 197 | src="/static/icon/view.png" |
| 198 | /> | 198 | /> |
| 199 | <span>View</span> | 199 | <span>View</span> |
| 200 | </v-tooltip> | 200 | </v-tooltip> |
| 201 | <v-tooltip top> | 201 | <v-tooltip top> |
| 202 | <img | 202 | <img |
| 203 | slot="activator" | 203 | slot="activator" |
| 204 | style="cursor:pointer; width:20px; height:18px; " | 204 | style="cursor:pointer; width:20px; height:18px; " |
| 205 | class="mr-3" | 205 | class="mr-3" |
| 206 | @click="editItem(props.item)" | 206 | @click="editItem(props.item)" |
| 207 | src="/static/icon/edit.png" | 207 | src="/static/icon/edit.png" |
| 208 | /> | 208 | /> |
| 209 | <span>Edit</span> | 209 | <span>Edit</span> |
| 210 | </v-tooltip> | 210 | </v-tooltip> |
| 211 | <v-tooltip top> | 211 | <v-tooltip top> |
| 212 | <img | 212 | <img |
| 213 | slot="activator" | 213 | slot="activator" |
| 214 | style="cursor:pointer; width:20px; height:20px; " | 214 | style="cursor:pointer; width:20px; height:20px; " |
| 215 | class="mr-3" | 215 | class="mr-3" |
| 216 | @click="deleteItem(props.item)" | 216 | @click="deleteItem(props.item)" |
| 217 | src="/static/icon/delete.png" | 217 | src="/static/icon/delete.png" |
| 218 | /> | 218 | /> |
| 219 | <span>Delete</span> | 219 | <span>Delete</span> |
| 220 | </v-tooltip> | 220 | </v-tooltip> |
| 221 | </span> | 221 | </span> |
| 222 | </td> | 222 | </td> |
| 223 | </tr> | 223 | </tr> |
| 224 | </template> | 224 | </template> |
| 225 | <v-alert | 225 | <v-alert |
| 226 | slot="no-results" | 226 | slot="no-results" |
| 227 | :value="true" | 227 | :value="true" |
| 228 | color="error" | 228 | color="error" |
| 229 | icon="warning" | 229 | icon="warning" |
| 230 | >Your search for "{{ search }}" found no results.</v-alert> | 230 | >Your search for "{{ search }}" found no results.</v-alert> |
| 231 | </v-data-table> | 231 | </v-data-table> |
| 232 | <!-- ****** ADD MULTIPLE EVENT ****** --> | 232 | <!-- ****** ADD MULTIPLE EVENT ****** --> |
| 233 | <v-dialog v-model="addEventDialog" max-width="500px" v-if="addEventDialog"> | 233 | <v-dialog v-model="addEventDialog" max-width="500px" v-if="addEventDialog" persistent> |
| 234 | <v-card flat class="card-style pa-2" dark> | 234 | <v-card flat class="card-style pa-2" dark> |
| 235 | <v-layout> | 235 | <v-layout> |
| 236 | <v-flex xs12> | 236 | <v-flex xs12> |
| 237 | <label class="title text-xs-center">Add Event</label> | 237 | <label class="title text-xs-center">Add Event</label> |
| 238 | <v-icon size="24" class="right" @click="closeAddEventModel">cancel</v-icon> | 238 | <v-icon size="24" class="right" @click="closeAddEventModel">cancel</v-icon> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | <v-form ref="form" v-model="valid" lazy-validation> | 241 | <v-form ref="form" v-model="valid" lazy-validation> |
| 242 | <v-container fluid> | 242 | <v-container fluid> |
| 243 | <v-flex xs12> | 243 | <v-flex xs12> |
| 244 | <v-layout> | 244 | <v-layout> |
| 245 | <v-flex xs4 class="pt-4 subheading"> | 245 | <v-flex xs4 class="pt-4 subheading"> |
| 246 | <label class="right">Title:</label> | 246 | <label class="right">Title:</label> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | <v-flex xs8 sm8 class="ml-3"> | 248 | <v-flex xs8 sm8 class="ml-3"> |
| 249 | <v-text-field | 249 | <v-text-field |
| 250 | v-model="addEvent.title" | 250 | v-model="addEvent.title" |
| 251 | placeholder="fill your Title" | 251 | placeholder="fill your Title" |
| 252 | type="text" | 252 | type="text" |
| 253 | :rules="titleRules" | 253 | :rules="titleRules" |
| 254 | required | 254 | required |
| 255 | ></v-text-field> | 255 | ></v-text-field> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | <v-flex xs12> | 259 | <v-flex xs12> |
| 260 | <v-layout> | 260 | <v-layout> |
| 261 | <v-flex xs4 class="pt-4 subheading"> | 261 | <v-flex xs4 class="pt-4 subheading"> |
| 262 | <label class="right">Date:</label> | 262 | <label class="right">Date:</label> |
| 263 | </v-flex> | 263 | </v-flex> |
| 264 | <v-flex xs8 sm8 class="ml-3"> | 264 | <v-flex xs8 sm8 class="ml-3"> |
| 265 | <v-menu | 265 | <v-menu |
| 266 | ref="menu1" | 266 | ref="menu1" |
| 267 | :close-on-content-click="false" | 267 | :close-on-content-click="false" |
| 268 | v-model="menu1" | 268 | v-model="menu1" |
| 269 | :nudge-right="40" | 269 | :nudge-right="40" |
| 270 | :return-value.sync="addEvent.dateOfEvent" | 270 | :return-value.sync="addEvent.dateOfEvent" |
| 271 | app | 271 | app |
| 272 | lazy | 272 | lazy |
| 273 | transition="scale-transition" | 273 | transition="scale-transition" |
| 274 | offset-y | 274 | offset-y |
| 275 | full-width | 275 | full-width |
| 276 | min-width="290px" | 276 | min-width="290px" |
| 277 | > | 277 | > |
| 278 | <v-text-field | 278 | <v-text-field |
| 279 | slot="activator" | 279 | slot="activator" |
| 280 | :rules="dateRules" | 280 | :rules="dateRules" |
| 281 | v-model="addEvent.dateOfEvent" | 281 | v-model="addEvent.dateOfEvent" |
| 282 | append-icon="event" | 282 | append-icon="event" |
| 283 | placeholder="Select date" | 283 | placeholder="Select date" |
| 284 | ></v-text-field> | 284 | ></v-text-field> |
| 285 | <v-date-picker | 285 | <v-date-picker |
| 286 | color="info" | 286 | color="info" |
| 287 | v-model="addEvent.dateOfEvent" | 287 | v-model="addEvent.dateOfEvent" |
| 288 | @input="$refs.menu1.save(addEvent.dateOfEvent)" | 288 | @input="$refs.menu1.save(addEvent.dateOfEvent)" |
| 289 | ></v-date-picker> | 289 | ></v-date-picker> |
| 290 | </v-menu> | 290 | </v-menu> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | </v-layout> | 292 | </v-layout> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | <v-flex xs12> | 294 | <v-flex xs12> |
| 295 | <v-layout> | 295 | <v-layout> |
| 296 | <v-flex xs4 class="pt-4 subheading"> | 296 | <v-flex xs4 class="pt-4 subheading"> |
| 297 | <label class="right">Description:</label> | 297 | <label class="right">Description:</label> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | <v-flex xs8 sm8 class="ml-3"> | 299 | <v-flex xs8 sm8 class="ml-3"> |
| 300 | <v-text-field | 300 | <v-text-field |
| 301 | placeholder="fill your Description" | 301 | placeholder="fill your Description" |
| 302 | :rules="descriptionRules" | 302 | :rules="descriptionRules" |
| 303 | v-model="addEvent.description" | 303 | v-model="addEvent.description" |
| 304 | type="text" | 304 | type="text" |
| 305 | required | 305 | required |
| 306 | ></v-text-field> | 306 | ></v-text-field> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | <v-layout> | 310 | <v-layout> |
| 311 | <v-flex xs12> | 311 | <v-flex xs12> |
| 312 | <v-layout class="right"> | 312 | <v-layout class="right"> |
| 313 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 313 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 314 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 314 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 315 | </v-layout> | 315 | </v-layout> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | </v-container> | 318 | </v-container> |
| 319 | </v-form> | 319 | </v-form> |
| 320 | </v-card> | 320 | </v-card> |
| 321 | </v-dialog> | 321 | </v-dialog> |
| 322 | <v-snackbar | 322 | <v-snackbar |
| 323 | :timeout="timeout" | 323 | :timeout="timeout" |
| 324 | :top="y === 'top'" | 324 | :top="y === 'top'" |
| 325 | :right="x === 'right'" | 325 | :right="x === 'right'" |
| 326 | :vertical="mode === 'vertical'" | 326 | :vertical="mode === 'vertical'" |
| 327 | v-model="snackbar" | 327 | v-model="snackbar" |
| 328 | :color="color" | 328 | :color="color" |
| 329 | >{{ text }}</v-snackbar> | 329 | >{{ text }}</v-snackbar> |
| 330 | <div class="loader" v-if="showLoader"> | 330 | <div class="loader" v-if="showLoader"> |
| 331 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 331 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 332 | </div> | 332 | </div> |
| 333 | </v-container> | 333 | </v-container> |
| 334 | </template> | 334 | </template> |
| 335 | 335 | ||
| 336 | <script> | 336 | <script> |
| 337 | import http from "@/Services/http.js"; | 337 | import http from "@/Services/http.js"; |
| 338 | import moment from "moment"; | 338 | import moment from "moment"; |
| 339 | 339 | ||
| 340 | export default { | 340 | export default { |
| 341 | data: () => ({ | 341 | data: () => ({ |
| 342 | snackbar: false, | 342 | snackbar: false, |
| 343 | y: "top", | 343 | y: "top", |
| 344 | x: "right", | 344 | x: "right", |
| 345 | mode: "", | 345 | mode: "", |
| 346 | timeout: 5000, | 346 | timeout: 5000, |
| 347 | text: "", | 347 | text: "", |
| 348 | color: "", | 348 | color: "", |
| 349 | loading: false, | 349 | loading: false, |
| 350 | date: null, | 350 | date: null, |
| 351 | search: "", | 351 | search: "", |
| 352 | color: "", | 352 | color: "", |
| 353 | show: true, | 353 | show: true, |
| 354 | addEventDialog: false, | 354 | addEventDialog: false, |
| 355 | showSearch: false, | 355 | showSearch: false, |
| 356 | showLoader: false, | 356 | showLoader: false, |
| 357 | editEventdialog: false, | 357 | editEventdialog: false, |
| 358 | viewEventdialog: false, | 358 | viewEventdialog: false, |
| 359 | valid: true, | 359 | valid: true, |
| 360 | pagination: { | 360 | pagination: { |
| 361 | rowsPerPage: 10, | 361 | rowsPerPage: 10, |
| 362 | }, | 362 | }, |
| 363 | date: null, | 363 | date: null, |
| 364 | menu1: false, | 364 | menu1: false, |
| 365 | menu: false, | 365 | menu: false, |
| 366 | titleRules: [(v) => !!v || " Tilte is required"], | 366 | titleRules: [(v) => !!v || " Tilte is required"], |
| 367 | descriptionRules: [(v) => !!v || " Discription is required"], | 367 | descriptionRules: [(v) => !!v || " Discription is required"], |
| 368 | dateRules: [(v) => !!v || "Date is required"], | 368 | dateRules: [(v) => !!v || "Date is required"], |
| 369 | headers: [ | 369 | headers: [ |
| 370 | { | 370 | { |
| 371 | text: "No", | 371 | text: "No", |
| 372 | align: "", | 372 | align: "", |
| 373 | sortable: false, | 373 | sortable: false, |
| 374 | value: "No", | 374 | value: "No", |
| 375 | }, | 375 | }, |
| 376 | { text: "Title", value: "title", sortable: false, align: "center" }, | 376 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 377 | { text: "Date", value: "date", sortable: false, align: "center" }, | 377 | { text: "Date", value: "date", sortable: false, align: "center" }, |
| 378 | 378 | ||
| 379 | { | 379 | { |
| 380 | text: "Description", | 380 | text: "Description", |
| 381 | value: "description", | 381 | value: "description", |
| 382 | sortable: false, | 382 | sortable: false, |
| 383 | align: "center", | 383 | align: "center", |
| 384 | }, | 384 | }, |
| 385 | { text: "Action", value: "", sortable: false, align: "center" }, | 385 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 386 | ], | 386 | ], |
| 387 | events: [], | 387 | events: [], |
| 388 | editedIndex: -1, | 388 | editedIndex: -1, |
| 389 | addEvent: {}, | 389 | addEvent: {}, |
| 390 | editedItem: {}, | 390 | editedItem: {}, |
| 391 | }), | 391 | }), |
| 392 | watch: { | 392 | watch: { |
| 393 | addEventDialog: function (val) { | 393 | addEventDialog: function (val) { |
| 394 | if (!val) { | 394 | if (!val) { |
| 395 | this.addEvent = []; | 395 | this.addEvent = []; |
| 396 | this.menu1 = false; | 396 | this.menu1 = false; |
| 397 | } | 397 | } |
| 398 | }, | 398 | }, |
| 399 | }, | 399 | }, |
| 400 | methods: { | 400 | methods: { |
| 401 | dates: function (date) { | 401 | dates: function (date) { |
| 402 | return moment(date).format("MMMM DD, YYYY"); | 402 | return moment(date).format("MMMM DD, YYYY"); |
| 403 | }, | 403 | }, |
| 404 | getEvents() { | 404 | getEvents() { |
| 405 | this.showLoader = true; | 405 | this.showLoader = true; |
| 406 | var token = this.$store.state.token; | 406 | var token = this.$store.state.token; |
| 407 | http() | 407 | http() |
| 408 | .get("/getSchoolEventsList", { | 408 | .get("/getSchoolEventsList", { |
| 409 | headers: { Authorization: "Bearer " + token }, | 409 | headers: { Authorization: "Bearer " + token }, |
| 410 | }) | 410 | }) |
| 411 | .then((response) => { | 411 | .then((response) => { |
| 412 | this.events = response.data.data; | 412 | this.events = response.data.data; |
| 413 | this.showLoader = false; | 413 | this.showLoader = false; |
| 414 | }) | 414 | }) |
| 415 | .catch((error) => { | 415 | .catch((error) => { |
| 416 | // console.log("err====>", err); | 416 | // console.log("err====>", err); |
| 417 | this.showLoader = false; | 417 | this.showLoader = false; |
| 418 | if (error.response.status === 401) { | 418 | if (error.response.status === 401) { |
| 419 | this.$router.replace({ path: "/" }); | 419 | this.$router.replace({ path: "/" }); |
| 420 | this.$store.dispatch("setToken", null); | 420 | this.$store.dispatch("setToken", null); |
| 421 | this.$store.dispatch("Id", null); | 421 | this.$store.dispatch("Id", null); |
| 422 | } | 422 | } |
| 423 | }); | 423 | }); |
| 424 | }, | 424 | }, |
| 425 | editItem(item) { | 425 | editItem(item) { |
| 426 | this.editedIndex = this.events.indexOf(item); | 426 | this.editedIndex = this.events.indexOf(item); |
| 427 | this.editedItem = Object.assign({}, item); | 427 | this.editedItem = Object.assign({}, item); |
| 428 | this.editedItem.schoolEventId = item._id; | 428 | this.editedItem.schoolEventId = item._id; |
| 429 | this.editEventdialog = true; | 429 | this.editEventdialog = true; |
| 430 | }, | 430 | }, |
| 431 | profile(item) { | 431 | profile(item) { |
| 432 | this.editedIndex = this.events.indexOf(item); | 432 | this.editedIndex = this.events.indexOf(item); |
| 433 | this.editedItem = Object.assign({}, item); | 433 | this.editedItem = Object.assign({}, item); |
| 434 | this.viewEventdialog = true; | 434 | this.viewEventdialog = true; |
| 435 | }, | 435 | }, |
| 436 | 436 | ||
| 437 | deleteItem(item) { | 437 | deleteItem(item) { |
| 438 | let deleteEvent = { | 438 | let deleteEvent = { |
| 439 | schoolEventId: item._id, | 439 | schoolEventId: item._id, |
| 440 | }; | 440 | }; |
| 441 | http() | 441 | http() |
| 442 | .delete( | 442 | .delete( |
| 443 | "/deleteSchoolEvent", | 443 | "/deleteSchoolEvent", |
| 444 | confirm("Are you sure you want to delete this?") && { | 444 | confirm("Are you sure you want to delete this?") && { |
| 445 | params: deleteEvent, | 445 | params: deleteEvent, |
| 446 | } | 446 | } |
| 447 | ) | 447 | ) |
| 448 | .then((response) => { | 448 | .then((response) => { |
| 449 | this.snackbar = true; | 449 | this.snackbar = true; |
| 450 | this.text = response.data.message; | 450 | this.text = response.data.message; |
| 451 | this.getEvents(); | 451 | this.getEvents(); |
| 452 | this.snackbar = true; | 452 | this.snackbar = true; |
| 453 | this.color = "green"; | 453 | this.color = "green"; |
| 454 | this.text = response.data.message; | 454 | this.text = response.data.message; |
| 455 | }) | 455 | }) |
| 456 | .catch((error) => { | 456 | .catch((error) => { |
| 457 | this.snackbar = true; | 457 | this.snackbar = true; |
| 458 | this.text = error.response.data.message; | 458 | this.text = error.response.data.message; |
| 459 | this.color = "error"; | 459 | this.color = "error"; |
| 460 | this.loading = false; | 460 | this.loading = false; |
| 461 | }); | 461 | }); |
| 462 | }, | 462 | }, |
| 463 | close() { | 463 | close() { |
| 464 | this.editEventdialog = false; | 464 | this.editEventdialog = false; |
| 465 | }, | 465 | }, |
| 466 | closeAddEventModel() { | 466 | closeAddEventModel() { |
| 467 | this.addEventDialog = false; | 467 | this.addEventDialog = false; |
| 468 | this.addEvent = []; | 468 | this.addEvent = []; |
| 469 | this.menu1 = false; | 469 | this.menu1 = false; |
| 470 | }, | 470 | }, |
| 471 | submit() { | 471 | submit() { |
| 472 | if (this.$refs.form.validate()) { | 472 | if (this.$refs.form.validate()) { |
| 473 | this.loading = true; | 473 | this.loading = true; |
| 474 | http() | 474 | http() |
| 475 | .post("/createSchoolEvent", this.addEvent) | 475 | .post("/createSchoolEvent", this.addEvent) |
| 476 | .then((response) => { | 476 | .then((response) => { |
| 477 | this.snackbar = true; | 477 | this.snackbar = true; |
| 478 | this.text = response.data.message; | 478 | this.text = response.data.message; |
| 479 | this.color = "green"; | 479 | this.color = "green"; |
| 480 | this.getEvents(); | 480 | this.getEvents(); |
| 481 | this.clear(); | 481 | this.clear(); |
| 482 | this.loading = false; | 482 | this.loading = false; |
| 483 | this.addEventDialog = false; | 483 | this.addEventDialog = false; |
| 484 | }) | 484 | }) |
| 485 | .catch((error) => { | 485 | .catch((error) => { |
| 486 | this.snackbar = true; | 486 | this.snackbar = true; |
| 487 | this.text = error.response.data.message; | 487 | this.text = error.response.data.message; |
| 488 | this.color = "error"; | 488 | this.color = "error"; |
| 489 | this.loading = false; | 489 | this.loading = false; |
| 490 | }); | 490 | }); |
| 491 | } | 491 | } |
| 492 | }, | 492 | }, |
| 493 | clear() { | 493 | clear() { |
| 494 | this.$refs.form.reset(); | 494 | this.$refs.form.reset(); |
| 495 | }, | 495 | }, |
| 496 | save() { | 496 | save() { |
| 497 | http() | 497 | http() |
| 498 | .put("/updateSchoolEvent", this.editedItem) | 498 | .put("/updateSchoolEvent", this.editedItem) |
| 499 | .then((response) => { | 499 | .then((response) => { |
| 500 | this.snackbar = true; | 500 | this.snackbar = true; |
| 501 | this.text = response.data.message; | 501 | this.text = response.data.message; |
| 502 | this.color = "green"; | 502 | this.color = "green"; |
| 503 | this.getEvents(); | 503 | this.getEvents(); |
| 504 | this.close(); | 504 | this.close(); |
| 505 | }) | 505 | }) |
| 506 | .catch((error) => { | 506 | .catch((error) => { |
| 507 | this.snackbar = true; | 507 | this.snackbar = true; |
| 508 | this.text = error.response.data.message; | 508 | this.text = error.response.data.message; |
| 509 | this.color = "error"; | 509 | this.color = "error"; |
| 510 | }); | 510 | }); |
| 511 | }, | 511 | }, |
| 512 | displaySearch() { | 512 | displaySearch() { |
| 513 | (this.show = false), (this.showSearch = true); | 513 | (this.show = false), (this.showSearch = true); |
| 514 | }, | 514 | }, |
| 515 | closeSearch() { | 515 | closeSearch() { |
| 516 | this.showSearch = false; | 516 | this.showSearch = false; |
| 517 | this.show = true; | 517 | this.show = true; |
| 518 | this.search = ""; | 518 | this.search = ""; |
| 519 | }, | 519 | }, |
| 520 | }, | 520 | }, |
| 521 | mounted() { | 521 | mounted() { |
| 522 | this.getEvents(); | 522 | this.getEvents(); |
| 523 | }, | 523 | }, |
| 524 | }; | 524 | }; |
| 525 | </script> | 525 | </script> |
src/pages/Exam/exam.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT EXAM ****** --> | 3 | <!-- ****** EDIT EXAM ****** --> |
| 4 | <v-dialog v-model="editExamDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editExamDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Exam</label> | 8 | <label class="title text-xs-center">Edit Exam</label> |
| 9 | <v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Exam Name:</label> | 19 | <label class="right">Exam Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-text-field | 22 | <v-text-field |
| 23 | placeholder="fill your Serial Number" | 23 | placeholder="fill your Serial Number" |
| 24 | v-model="editedItem.examName" | 24 | v-model="editedItem.examName" |
| 25 | type="text" | 25 | type="text" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Date:</label> | 33 | <label class="right">Date:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-menu | 36 | <v-menu |
| 37 | ref="menu1" | 37 | ref="menu1" |
| 38 | :close-on-content-click="false" | 38 | :close-on-content-click="false" |
| 39 | v-model="menu1" | 39 | v-model="menu1" |
| 40 | :nudge-right="40" | 40 | :nudge-right="40" |
| 41 | :return-value.sync="menu1" | 41 | :return-value.sync="menu1" |
| 42 | lazy | 42 | lazy |
| 43 | transition="scale-transition" | 43 | transition="scale-transition" |
| 44 | offset-y | 44 | offset-y |
| 45 | full-width | 45 | full-width |
| 46 | min-width="290px" | 46 | min-width="290px" |
| 47 | > | 47 | > |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | slot="activator" | 49 | slot="activator" |
| 50 | v-model="editedItem.date" | 50 | v-model="editedItem.date" |
| 51 | label="Select Date" | 51 | label="Select Date" |
| 52 | append-icon="event" | 52 | append-icon="event" |
| 53 | readonly | 53 | readonly |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> | 55 | <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> |
| 56 | </v-menu> | 56 | </v-menu> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Note:</label> | 63 | <label class="right">Note:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Serial Number" | 67 | placeholder="fill your Serial Number" |
| 68 | v-model="editedItem.note" | 68 | v-model="editedItem.note" |
| 69 | type="text" | 69 | type="text" |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs12> | 76 | <v-flex xs12> |
| 77 | <v-card-actions> | 77 | <v-card-actions> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 79 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 80 | </v-card-actions> | 80 | </v-card-actions> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-form> | 84 | </v-form> |
| 85 | </v-card-text> | 85 | </v-card-text> |
| 86 | </v-card> | 86 | </v-card> |
| 87 | </v-dialog> | 87 | </v-dialog> |
| 88 | 88 | ||
| 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> | 89 | <!-- ****** PROFILE VIEW PARTICULAR EXAM ****** --> |
| 90 | 90 | ||
| 91 | <v-dialog v-model="profileExamDialog" max-width="500px"> | 91 | <v-dialog v-model="profileExamDialog" max-width="500px" persistent> |
| 92 | <v-card flat class="card-style pa-3" dark> | 92 | <v-card flat class="card-style pa-3" dark> |
| 93 | <v-layout> | 93 | <v-layout> |
| 94 | <v-flex xs12> | 94 | <v-flex xs12> |
| 95 | <label class="title text-xs-center">View Exam</label> | 95 | <label class="title text-xs-center">View Exam</label> |
| 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> | 96 | <v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | <v-card-text> | 99 | <v-card-text> |
| 100 | <v-container grid-list-md> | 100 | <v-container grid-list-md> |
| 101 | <v-layout wrap> | 101 | <v-layout wrap> |
| 102 | <v-flex> | 102 | <v-flex> |
| 103 | <v-layout> | 103 | <v-layout> |
| 104 | <v-flex xs6 sm4> | 104 | <v-flex xs6 sm4> |
| 105 | <h5 class="right my-1"> | 105 | <h5 class="right my-1"> |
| 106 | <b>Exam Name:</b> | 106 | <b>Exam Name:</b> |
| 107 | </h5> | 107 | </h5> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex sm8 xs6> | 109 | <v-flex sm8 xs6> |
| 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> | 110 | <h5 class="my-1">{{ editedItem.examName }}</h5> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs6 sm4> | 114 | <v-flex xs6 sm4> |
| 115 | <h5 class="right my-1"> | 115 | <h5 class="right my-1"> |
| 116 | <b>Date:</b> | 116 | <b>Date:</b> |
| 117 | </h5> | 117 | </h5> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-flex sm8 xs6> | 119 | <v-flex sm8 xs6> |
| 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 120 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs6 sm4> | 124 | <v-flex xs6 sm4> |
| 125 | <h5 class="right my-1"> | 125 | <h5 class="right my-1"> |
| 126 | <b>Note:</b> | 126 | <b>Note:</b> |
| 127 | </h5> | 127 | </h5> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex sm8 xs6> | 129 | <v-flex sm8 xs6> |
| 130 | <h5 class="my-1">{{ editedItem.note }}</h5> | 130 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-layout> | 134 | </v-layout> |
| 135 | </v-container> | 135 | </v-container> |
| 136 | </v-card-text> | 136 | </v-card-text> |
| 137 | </v-card> | 137 | </v-card> |
| 138 | </v-dialog> | 138 | </v-dialog> |
| 139 | <!-- ****** EXAM TABLE****** --> | 139 | <!-- ****** EXAM TABLE****** --> |
| 140 | 140 | ||
| 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="addExamDialog = true" | 147 | @click="addExamDialog = 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="addExamDialog = true" | 155 | @click="addExamDialog = true" |
| 156 | > | 156 | > |
| 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam | 157 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam |
| 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 sm8 md3 lg2 v-if="showSearch"> | 167 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field | 169 | <v-text-field |
| 170 | autofocus | 170 | autofocus |
| 171 | v-model="search" | 171 | v-model="search" |
| 172 | label="Search" | 172 | label="Search" |
| 173 | prepend-inner-icon="search" | 173 | prepend-inner-icon="search" |
| 174 | color="primary" | 174 | color="primary" |
| 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="examData" | 182 | :items="examData" |
| 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="td td-row text-xs-center">{{ props.item.examName}}</td> | 189 | <td class="td td-row text-xs-center">{{ props.item.examName}}</td> |
| 190 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 190 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 191 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> | 191 | <td class="td td-row text-xs-center">{{ props.item.note}}</td> |
| 192 | <td class="td td-row text-xs-center"> | 192 | <td class="td td-row text-xs-center"> |
| 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 | class="mr-3" | 218 | class="mr-3" |
| 219 | @click="deleteItem(props.item)" | 219 | @click="deleteItem(props.item)" |
| 220 | src="/static/icon/delete.png" | 220 | src="/static/icon/delete.png" |
| 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 | 235 | ||
| 236 | <!-- ****** ADD EXAM ****** --> | 236 | <!-- ****** ADD EXAM ****** --> |
| 237 | <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog"> | 237 | <v-dialog v-model="addExamDialog" max-width="500px" v-if="addExamDialog" persistent> |
| 238 | <v-card flat class="card-style pa-2" dark> | 238 | <v-card flat class="card-style pa-2" dark> |
| 239 | <v-layout> | 239 | <v-layout> |
| 240 | <v-flex xs12> | 240 | <v-flex xs12> |
| 241 | <label class="title text-xs-center">Add Exam</label> | 241 | <label class="title text-xs-center">Add Exam</label> |
| 242 | <v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = false">cancel</v-icon> | 242 | <v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = false">cancel</v-icon> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-layout> | 244 | </v-layout> |
| 245 | <v-form ref="form" v-model="valid" lazy-validation> | 245 | <v-form ref="form" v-model="valid" lazy-validation> |
| 246 | <v-container fluid> | 246 | <v-container fluid> |
| 247 | <v-flex xs12> | 247 | <v-flex xs12> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right hidden-xs-only">Exam Name:</label> | 250 | <label class="right hidden-xs-only">Exam Name:</label> |
| 251 | <label | 251 | <label |
| 252 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" | 252 | class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only" |
| 253 | >ExamName:</label> | 253 | >ExamName:</label> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | <v-flex xs8 sm7 class="ml-3"> | 255 | <v-flex xs8 sm7 class="ml-3"> |
| 256 | <v-text-field | 256 | <v-text-field |
| 257 | placeholder="fill your Exam Name" | 257 | placeholder="fill your Exam Name" |
| 258 | :rules="authorRules" | 258 | :rules="authorRules" |
| 259 | v-model="addExam.examName" | 259 | v-model="addExam.examName" |
| 260 | ></v-text-field> | 260 | ></v-text-field> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | </v-layout> | 262 | </v-layout> |
| 263 | </v-flex> | 263 | </v-flex> |
| 264 | <v-flex xs12> | 264 | <v-flex xs12> |
| 265 | <v-layout> | 265 | <v-layout> |
| 266 | <v-flex xs4 class="pt-4 subheading"> | 266 | <v-flex xs4 class="pt-4 subheading"> |
| 267 | <label class="right">Date:</label> | 267 | <label class="right">Date:</label> |
| 268 | </v-flex> | 268 | </v-flex> |
| 269 | <v-flex xs8 sm7 class="ml-3"> | 269 | <v-flex xs8 sm7 class="ml-3"> |
| 270 | <v-menu | 270 | <v-menu |
| 271 | ref="menu2" | 271 | ref="menu2" |
| 272 | :close-on-content-click="false" | 272 | :close-on-content-click="false" |
| 273 | v-model="menu2" | 273 | v-model="menu2" |
| 274 | :nudge-right="40" | 274 | :nudge-right="40" |
| 275 | :return-value.sync="addExam.date" | 275 | :return-value.sync="addExam.date" |
| 276 | lazy | 276 | lazy |
| 277 | transition="scale-transition" | 277 | transition="scale-transition" |
| 278 | offset-y | 278 | offset-y |
| 279 | full-width | 279 | full-width |
| 280 | min-width="290px" | 280 | min-width="290px" |
| 281 | > | 281 | > |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | slot="activator" | 283 | slot="activator" |
| 284 | v-model="addExam.date" | 284 | v-model="addExam.date" |
| 285 | :rules="examDateRules" | 285 | :rules="examDateRules" |
| 286 | label="Select Date" | 286 | label="Select Date" |
| 287 | append-icon="event" | 287 | append-icon="event" |
| 288 | readonly | 288 | readonly |
| 289 | ></v-text-field> | 289 | ></v-text-field> |
| 290 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> | 290 | <v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker> |
| 291 | </v-menu> | 291 | </v-menu> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | </v-layout> | 293 | </v-layout> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | <v-flex xs12> | 295 | <v-flex xs12> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs4 class="pt-4 subheading"> | 297 | <v-flex xs4 class="pt-4 subheading"> |
| 298 | <label class="right">Note:</label> | 298 | <label class="right">Note:</label> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs8 sm7 class="ml-3"> | 300 | <v-flex xs8 sm7 class="ml-3"> |
| 301 | <v-text-field placeholder="fill your Note" v-model="addExam.note"></v-text-field> | 301 | <v-text-field placeholder="fill your Note" v-model="addExam.note"></v-text-field> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs12> | 306 | <v-flex xs12> |
| 307 | <v-card-actions> | 307 | <v-card-actions> |
| 308 | <v-spacer class="hidden-xs-only"></v-spacer> | 308 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 309 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 309 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 310 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 310 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 311 | </v-card-actions> | 311 | </v-card-actions> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | </v-container> | 314 | </v-container> |
| 315 | </v-form> | 315 | </v-form> |
| 316 | </v-card> | 316 | </v-card> |
| 317 | </v-dialog> | 317 | </v-dialog> |
| 318 | <v-snackbar | 318 | <v-snackbar |
| 319 | :timeout="timeout" | 319 | :timeout="timeout" |
| 320 | :top="y === 'top'" | 320 | :top="y === 'top'" |
| 321 | :right="x === 'right'" | 321 | :right="x === 'right'" |
| 322 | :vertical="mode === 'vertical'" | 322 | :vertical="mode === 'vertical'" |
| 323 | v-model="snackbar" | 323 | v-model="snackbar" |
| 324 | :color="color" | 324 | :color="color" |
| 325 | >{{ text }}</v-snackbar> | 325 | >{{ text }}</v-snackbar> |
| 326 | <div class="loader" v-if="showLoader"> | 326 | <div class="loader" v-if="showLoader"> |
| 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 328 | </div> | 328 | </div> |
| 329 | </v-container> | 329 | </v-container> |
| 330 | </template> | 330 | </template> |
| 331 | 331 | ||
| 332 | <script> | 332 | <script> |
| 333 | import http from "@/Services/http.js"; | 333 | import http from "@/Services/http.js"; |
| 334 | import moment from "moment"; | 334 | import moment from "moment"; |
| 335 | 335 | ||
| 336 | export default { | 336 | export default { |
| 337 | data: () => ({ | 337 | data: () => ({ |
| 338 | snackbar: false, | 338 | snackbar: false, |
| 339 | date: null, | 339 | date: null, |
| 340 | menu1: false, | 340 | menu1: false, |
| 341 | menu2: false, | 341 | menu2: false, |
| 342 | color: "", | 342 | color: "", |
| 343 | y: "top", | 343 | y: "top", |
| 344 | x: "right", | 344 | x: "right", |
| 345 | mode: "", | 345 | mode: "", |
| 346 | timeout: 10000, | 346 | timeout: 10000, |
| 347 | text: "", | 347 | text: "", |
| 348 | libraryId: "", | 348 | libraryId: "", |
| 349 | show: true, | 349 | show: true, |
| 350 | showSearch: false, | 350 | showSearch: false, |
| 351 | addExamDialog: false, | 351 | addExamDialog: false, |
| 352 | loading: false, | 352 | loading: false, |
| 353 | loadingSearch: false, | 353 | loadingSearch: false, |
| 354 | date: null, | 354 | date: null, |
| 355 | search: "", | 355 | search: "", |
| 356 | showLoader: false, | 356 | showLoader: false, |
| 357 | editExamDialog: false, | 357 | editExamDialog: false, |
| 358 | profileExamDialog: false, | 358 | profileExamDialog: false, |
| 359 | valid: true, | 359 | valid: true, |
| 360 | pagination: { | 360 | pagination: { |
| 361 | rowsPerPage: 10, | 361 | rowsPerPage: 10, |
| 362 | }, | 362 | }, |
| 363 | libraryIDRules: [(v) => !!v || " Library ID is required"], | 363 | libraryIDRules: [(v) => !!v || " Library ID is required"], |
| 364 | bookRules: [(v) => !!v || " book Name is required"], | 364 | bookRules: [(v) => !!v || " book Name is required"], |
| 365 | authorRules: [(v) => !!v || "Author Name is required"], | 365 | authorRules: [(v) => !!v || "Author Name is required"], |
| 366 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], | 366 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], |
| 367 | authorRules: [(v) => !!v || "Author is required"], | 367 | authorRules: [(v) => !!v || "Author is required"], |
| 368 | examDateRules: [(v) => !!v || "Date is required"], | 368 | examDateRules: [(v) => !!v || "Date is required"], |
| 369 | headers: [ | 369 | headers: [ |
| 370 | { | 370 | { |
| 371 | align: "", | 371 | align: "", |
| 372 | text: "No", | 372 | text: "No", |
| 373 | sortable: false, | 373 | sortable: false, |
| 374 | value: "No", | 374 | value: "No", |
| 375 | }, | 375 | }, |
| 376 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, | 376 | { text: "Exam Name", vaue: "examName", sortable: false, align: "center" }, |
| 377 | { | 377 | { |
| 378 | text: "Date", | 378 | text: "Date", |
| 379 | value: "date", | 379 | value: "date", |
| 380 | sortable: false, | 380 | sortable: false, |
| 381 | align: "center", | 381 | align: "center", |
| 382 | }, | 382 | }, |
| 383 | { | 383 | { |
| 384 | text: "Note", | 384 | text: "Note", |
| 385 | value: "note", | 385 | value: "note", |
| 386 | sortable: false, | 386 | sortable: false, |
| 387 | align: "center", | 387 | align: "center", |
| 388 | }, | 388 | }, |
| 389 | { text: "Action", value: "", sortable: false, align: "center" }, | 389 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 390 | ], | 390 | ], |
| 391 | examData: [], | 391 | examData: [], |
| 392 | addExam: {}, | 392 | addExam: {}, |
| 393 | editedItem: {}, | 393 | editedItem: {}, |
| 394 | token: "", | 394 | token: "", |
| 395 | }), | 395 | }), |
| 396 | watch: { | 396 | watch: { |
| 397 | addExamDialog: function (val) { | 397 | addExamDialog: function (val) { |
| 398 | if (!val) { | 398 | if (!val) { |
| 399 | this.addExam = []; | 399 | this.addExam = []; |
| 400 | } | 400 | } |
| 401 | }, | 401 | }, |
| 402 | }, | 402 | }, |
| 403 | methods: { | 403 | methods: { |
| 404 | dates: function (date) { | 404 | dates: function (date) { |
| 405 | return moment(date).format("MMMM DD, YYYY"); | 405 | return moment(date).format("MMMM DD, YYYY"); |
| 406 | }, | 406 | }, |
| 407 | pickFile() { | 407 | pickFile() { |
| 408 | this.$refs.image.click(); | 408 | this.$refs.image.click(); |
| 409 | }, | 409 | }, |
| 410 | getExamList() { | 410 | getExamList() { |
| 411 | this.showLoader = true; | 411 | this.showLoader = true; |
| 412 | this.loadingSearch = true; | 412 | this.loadingSearch = true; |
| 413 | http() | 413 | http() |
| 414 | .get("/getExamsList", { | 414 | .get("/getExamsList", { |
| 415 | headers: { Authorization: "Bearer " + this.token }, | 415 | headers: { Authorization: "Bearer " + this.token }, |
| 416 | }) | 416 | }) |
| 417 | .then((response) => { | 417 | .then((response) => { |
| 418 | this.examData = response.data.data; | 418 | this.examData = response.data.data; |
| 419 | this.showLoader = false; | 419 | this.showLoader = false; |
| 420 | this.loadingSearch = false; | 420 | this.loadingSearch = false; |
| 421 | }) | 421 | }) |
| 422 | .catch((error) => { | 422 | .catch((error) => { |
| 423 | // console.log("err====>", err); | 423 | // console.log("err====>", err); |
| 424 | this.showLoader = false; | 424 | this.showLoader = false; |
| 425 | this.loadingSearch = false; | 425 | this.loadingSearch = false; |
| 426 | this.snackbar = true; | 426 | this.snackbar = true; |
| 427 | this.text = error.response.data.message; | 427 | this.text = error.response.data.message; |
| 428 | if (error.response.status === 401) { | 428 | if (error.response.status === 401) { |
| 429 | this.$router.replace({ path: "/" }); | 429 | this.$router.replace({ path: "/" }); |
| 430 | this.$store.dispatch("setToken", null); | 430 | this.$store.dispatch("setToken", null); |
| 431 | this.$store.dispatch("Id", null); | 431 | this.$store.dispatch("Id", null); |
| 432 | } | 432 | } |
| 433 | }); | 433 | }); |
| 434 | }, | 434 | }, |
| 435 | editItem(item) { | 435 | editItem(item) { |
| 436 | this.editedIndex = this.examData.indexOf(item); | 436 | this.editedIndex = this.examData.indexOf(item); |
| 437 | this.editedItem = Object.assign({}, item); | 437 | this.editedItem = Object.assign({}, item); |
| 438 | this.editedItem.date = | 438 | this.editedItem.date = |
| 439 | this.editedItem.date != undefined | 439 | this.editedItem.date != undefined |
| 440 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 440 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 441 | : (this.editedItem.date = ""); | 441 | : (this.editedItem.date = ""); |
| 442 | this.editExamDialog = true; | 442 | this.editExamDialog = true; |
| 443 | }, | 443 | }, |
| 444 | profile(item) { | 444 | profile(item) { |
| 445 | this.editedIndex = this.examData.indexOf(item); | 445 | this.editedIndex = this.examData.indexOf(item); |
| 446 | this.editedItem = Object.assign({}, item); | 446 | this.editedItem = Object.assign({}, item); |
| 447 | this.profileExamDialog = true; | 447 | this.profileExamDialog = true; |
| 448 | }, | 448 | }, |
| 449 | deleteItem(item) { | 449 | deleteItem(item) { |
| 450 | let Exam = { | 450 | let Exam = { |
| 451 | examId: item._id, | 451 | examId: item._id, |
| 452 | }; | 452 | }; |
| 453 | http() | 453 | http() |
| 454 | .delete( | 454 | .delete( |
| 455 | "/deleteExam", | 455 | "/deleteExam", |
| 456 | confirm("Are you sure you want to Delete this?") && { | 456 | confirm("Are you sure you want to Delete this?") && { |
| 457 | params: Exam, | 457 | params: Exam, |
| 458 | } | 458 | } |
| 459 | ) | 459 | ) |
| 460 | .then((response) => { | 460 | .then((response) => { |
| 461 | this.snackbar = true; | 461 | this.snackbar = true; |
| 462 | this.text = "Successfully Delete Exam "; | 462 | this.text = "Successfully Delete Exam "; |
| 463 | this.text = response.data.message; | 463 | this.text = response.data.message; |
| 464 | this.color = "green"; | 464 | this.color = "green"; |
| 465 | this.getExamList(); | 465 | this.getExamList(); |
| 466 | }) | 466 | }) |
| 467 | .catch((error) => { | 467 | .catch((error) => { |
| 468 | this.snackbar = true; | 468 | this.snackbar = true; |
| 469 | this.text = error.response.data.message; | 469 | this.text = error.response.data.message; |
| 470 | this.color = "red"; | 470 | this.color = "red"; |
| 471 | }); | 471 | }); |
| 472 | }, | 472 | }, |
| 473 | close() { | 473 | close() { |
| 474 | this.editExamDialog = false; | 474 | this.editExamDialog = false; |
| 475 | }, | 475 | }, |
| 476 | submit() { | 476 | submit() { |
| 477 | if (this.$refs.form.validate()) { | 477 | if (this.$refs.form.validate()) { |
| 478 | this.loading = true; | 478 | this.loading = true; |
| 479 | http() | 479 | http() |
| 480 | .post("/createExam", this.addExam) | 480 | .post("/createExam", this.addExam) |
| 481 | .then((response) => { | 481 | .then((response) => { |
| 482 | this.snackbar = true; | 482 | this.snackbar = true; |
| 483 | this.text = response.data.message; | 483 | this.text = response.data.message; |
| 484 | this.color = "green"; | 484 | this.color = "green"; |
| 485 | this.addExamDialog = false; | 485 | this.addExamDialog = false; |
| 486 | this.getExamList(); | 486 | this.getExamList(); |
| 487 | this.color = "success"; | 487 | this.color = "success"; |
| 488 | this.loading = false; | 488 | this.loading = false; |
| 489 | this.clear(); | 489 | this.clear(); |
| 490 | }) | 490 | }) |
| 491 | .catch((error) => { | 491 | .catch((error) => { |
| 492 | this.snackbar = true; | 492 | this.snackbar = true; |
| 493 | this.text = error.response.data.message; | 493 | this.text = error.response.data.message; |
| 494 | this.color = "red"; | 494 | this.color = "red"; |
| 495 | this.loading = false; | 495 | this.loading = false; |
| 496 | }); | 496 | }); |
| 497 | } | 497 | } |
| 498 | }, | 498 | }, |
| 499 | clear() { | 499 | clear() { |
| 500 | this.$refs.form.reset(); | 500 | this.$refs.form.reset(); |
| 501 | this.disable = false; | 501 | this.disable = false; |
| 502 | }, | 502 | }, |
| 503 | save() { | 503 | save() { |
| 504 | this.editedItem.examId = this.editedItem._id; | 504 | this.editedItem.examId = this.editedItem._id; |
| 505 | http() | 505 | http() |
| 506 | .put("/updateExam", this.editedItem) | 506 | .put("/updateExam", this.editedItem) |
| 507 | .then((response) => { | 507 | .then((response) => { |
| 508 | this.snackbar = true; | 508 | this.snackbar = true; |
| 509 | this.text = response.data.message; | 509 | this.text = response.data.message; |
| 510 | this.color = "green"; | 510 | this.color = "green"; |
| 511 | this.getExamList(); | 511 | this.getExamList(); |
| 512 | this.close(); | 512 | this.close(); |
| 513 | }) | 513 | }) |
| 514 | .catch((error) => { | 514 | .catch((error) => { |
| 515 | this.snackbar = true; | 515 | this.snackbar = true; |
| 516 | this.text = error.response.data.message; | 516 | this.text = error.response.data.message; |
| 517 | this.color = "red"; | 517 | this.color = "red"; |
| 518 | }); | 518 | }); |
| 519 | }, | 519 | }, |
| 520 | displaySearch() { | 520 | displaySearch() { |
| 521 | (this.show = false), (this.showSearch = true); | 521 | (this.show = false), (this.showSearch = true); |
| 522 | }, | 522 | }, |
| 523 | closeSearch() { | 523 | closeSearch() { |
| 524 | this.showSearch = false; | 524 | this.showSearch = false; |
| 525 | this.show = true; | 525 | this.show = true; |
| 526 | this.search = ""; | 526 | this.search = ""; |
| 527 | }, | 527 | }, |
| 528 | }, | 528 | }, |
| 529 | mounted() { | 529 | mounted() { |
| 530 | this.token = this.$store.state.token; | 530 | this.token = this.$store.state.token; |
| 531 | this.getExamList(); | 531 | this.getExamList(); |
| 532 | }, | 532 | }, |
| 533 | }; | 533 | }; |
| 534 | </script> | 534 | </script> |
src/pages/Exam/examAttendence.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ***** Exam Schedule TABLE****** --> | 3 | <!-- ***** Exam Schedule TABLE****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addExamAttendenceDialog = true" | 10 | @click="addExamAttendenceDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addExamAttendenceDialog = true" | 18 | @click="addExamAttendenceDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-spacer></v-spacer> | 22 | <v-spacer></v-spacer> |
| 23 | <v-flex xs8 sm3 md2 class="mr-3"> | 23 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 24 | <v-select | 24 | <v-select |
| 25 | v-model="getAttendence.examId" | 25 | v-model="getAttendence.examId" |
| 26 | label="Select Exam" | 26 | label="Select Exam" |
| 27 | :rules="examRules" | 27 | :rules="examRules" |
| 28 | :items="examList" | 28 | :items="examList" |
| 29 | item-text="examName" | 29 | item-text="examName" |
| 30 | item-value="_id" | 30 | item-value="_id" |
| 31 | required | 31 | required |
| 32 | ></v-select> | 32 | ></v-select> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 sm3 md2 class="mr-3"> | 34 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 35 | <v-select | 35 | <v-select |
| 36 | v-model="getAttendence.classId" | 36 | v-model="getAttendence.classId" |
| 37 | label="Select your class" | 37 | label="Select your class" |
| 38 | type="text" | 38 | type="text" |
| 39 | :items="classList" | 39 | :items="classList" |
| 40 | item-text="classNum" | 40 | item-text="classNum" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | @change="getSections(getAttendence.classId)" | 42 | @change="getSections(getAttendence.classId)" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex xs8 sm3 md2 class="mr-3"> | 46 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 47 | <v-select | 47 | <v-select |
| 48 | v-model="getAttendence.sectionId" | 48 | v-model="getAttendence.sectionId" |
| 49 | label="Select your section" | 49 | label="Select your section" |
| 50 | type="text" | 50 | type="text" |
| 51 | :items="addSection" | 51 | :items="addSection" |
| 52 | item-text="name" | 52 | item-text="name" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | @change="getClassSubject(getAttendence.classId)" | 54 | @change="getClassSubject(getAttendence.classId)" |
| 55 | required | 55 | required |
| 56 | ></v-select> | 56 | ></v-select> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | <v-flex xs8 sm3 md2 class="mr-3"> | 58 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 59 | <v-select | 59 | <v-select |
| 60 | v-model="getAttendence.subjectId" | 60 | v-model="getAttendence.subjectId" |
| 61 | label="Select Subject" | 61 | label="Select Subject" |
| 62 | :rules="subjectRules" | 62 | :rules="subjectRules" |
| 63 | :items="subjectList.subjects" | 63 | :items="subjectList.subjects" |
| 64 | item-text="subjectName" | 64 | item-text="subjectName" |
| 65 | item-value="_id" | 65 | item-value="_id" |
| 66 | @change="getExamAttendenceList()" | 66 | @change="getExamAttendenceList()" |
| 67 | required | 67 | required |
| 68 | ></v-select> | 68 | ></v-select> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | 70 | ||
| 71 | <v-card-title class="body-1" v-show="show"> | 71 | <v-card-title class="body-1" v-show="show"> |
| 72 | <v-btn icon large flat @click="displaySearch"> | 72 | <v-btn icon large flat @click="displaySearch"> |
| 73 | <v-avatar size="27"> | 73 | <v-avatar size="27"> |
| 74 | <img src="/static/icon/search.png" alt="icon" /> | 74 | <img src="/static/icon/search.png" alt="icon" /> |
| 75 | </v-avatar> | 75 | </v-avatar> |
| 76 | </v-btn> | 76 | </v-btn> |
| 77 | </v-card-title> | 77 | </v-card-title> |
| 78 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 78 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 79 | <v-layout> | 79 | <v-layout> |
| 80 | <v-text-field | 80 | <v-text-field |
| 81 | autofocus | 81 | autofocus |
| 82 | v-model="search" | 82 | v-model="search" |
| 83 | label="Search" | 83 | label="Search" |
| 84 | prepend-inner-icon="search" | 84 | prepend-inner-icon="search" |
| 85 | color="primary" | 85 | color="primary" |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <v-icon @click="closeSearch" color="error">close</v-icon> | 87 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 88 | </v-layout> | 88 | </v-layout> |
| 89 | </v-flex> | 89 | </v-flex> |
| 90 | </v-toolbar> | 90 | </v-toolbar> |
| 91 | 91 | ||
| 92 | <v-data-table | 92 | <v-data-table |
| 93 | v-if="showData" | 93 | v-if="showData" |
| 94 | :headers="headers" | 94 | :headers="headers" |
| 95 | :items="examData.students" | 95 | :items="examData.students" |
| 96 | :pagination.sync="pagination" | 96 | :pagination.sync="pagination" |
| 97 | :search="search" | 97 | :search="search" |
| 98 | > | 98 | > |
| 99 | <template slot="items" slot-scope="props"> | 99 | <template slot="items" slot-scope="props"> |
| 100 | <tr class="tr"> | 100 | <tr class="tr"> |
| 101 | <td class="td td-row">{{ props.index + 1}}</td> | 101 | <td class="td td-row">{{ props.index + 1}}</td> |
| 102 | <td class="text-xs-center td td-row"> | 102 | <td class="text-xs-center td td-row"> |
| 103 | <v-avatar size="40"> | 103 | <v-avatar size="40"> |
| 104 | <img | 104 | <img |
| 105 | :src="props.item.studentId.profilePicUrl" | 105 | :src="props.item.studentId.profilePicUrl" |
| 106 | v-if="props.item.studentId.profilePicUrl" | 106 | v-if="props.item.studentId.profilePicUrl" |
| 107 | /> | 107 | /> |
| 108 | <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" /> | 108 | <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" /> |
| 109 | </v-avatar> | 109 | </v-avatar> |
| 110 | </td> | 110 | </td> |
| 111 | <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td> | 111 | <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td> |
| 112 | <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td> | 112 | <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td> |
| 113 | <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td> | 113 | <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td> |
| 114 | <td class="td td-row text-xs-center"> | 114 | <td class="td td-row text-xs-center"> |
| 115 | <!-- <v-radio-group v-model="isPresent" row> | 115 | <!-- <v-radio-group v-model="isPresent" row> |
| 116 | <v-radio :value="props.item.isPresent"></v-radio> | 116 | <v-radio :value="props.item.isPresent"></v-radio> |
| 117 | </v-radio-group>--> | 117 | </v-radio-group>--> |
| 118 | <v-checkbox | 118 | <v-checkbox |
| 119 | v-model="props.item.isPresent" | 119 | v-model="props.item.isPresent" |
| 120 | @click="markStudentAttendence(props.item)" | 120 | @click="markStudentAttendence(props.item)" |
| 121 | primary | 121 | primary |
| 122 | hide-details | 122 | hide-details |
| 123 | ></v-checkbox> | 123 | ></v-checkbox> |
| 124 | </td> | 124 | </td> |
| 125 | </tr> | 125 | </tr> |
| 126 | </template> | 126 | </template> |
| 127 | <v-alert | 127 | <v-alert |
| 128 | slot="no-results" | 128 | slot="no-results" |
| 129 | :value="true" | 129 | :value="true" |
| 130 | color="error" | 130 | color="error" |
| 131 | icon="warning" | 131 | icon="warning" |
| 132 | >Your search for "{{ search }}" found no results.</v-alert> | 132 | >Your search for "{{ search }}" found no results.</v-alert> |
| 133 | </v-data-table> | 133 | </v-data-table> |
| 134 | 134 | ||
| 135 | <!-- ****** ADD Student Attendence ****** --> | 135 | <!-- ****** ADD Student Attendence ****** --> |
| 136 | <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px"> | 136 | <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent> |
| 137 | <v-card flat> | 137 | <v-card flat> |
| 138 | <v-layout class="pa-3 card-style white--text"> | 138 | <v-layout class="pa-3 card-style white--text"> |
| 139 | <v-flex xs12> | 139 | <v-flex xs12> |
| 140 | <label class="title text-xs-center">Change Student's Attendence</label> | 140 | <label class="title text-xs-center">Change Student's Attendence</label> |
| 141 | <v-icon | 141 | <v-icon |
| 142 | size="24" | 142 | size="24" |
| 143 | class="right white--text" | 143 | class="right white--text" |
| 144 | @click="changeStudentAttendenceDialog = false" | 144 | @click="changeStudentAttendenceDialog = false" |
| 145 | >cancel</v-icon> | 145 | >cancel</v-icon> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-container fluid> | 148 | <v-container fluid> |
| 149 | <v-flex xs12> | 149 | <v-flex xs12> |
| 150 | <h3>Are you sure you want to change the attendence</h3> | 150 | <h3>Are you sure you want to change the attendence</h3> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | <v-spacer></v-spacer> | 152 | <v-spacer></v-spacer> |
| 153 | 153 | ||
| 154 | <v-flex xs12> | 154 | <v-flex xs12> |
| 155 | <v-card-actions> | 155 | <v-card-actions> |
| 156 | <v-spacer></v-spacer> | 156 | <v-spacer></v-spacer> |
| 157 | <v-btn | 157 | <v-btn |
| 158 | @click.native="closeStudentAttendenceDialog" | 158 | @click.native="closeStudentAttendenceDialog" |
| 159 | round | 159 | round |
| 160 | dark | 160 | dark |
| 161 | class="clear-button" | 161 | class="clear-button" |
| 162 | >cancel</v-btn> | 162 | >cancel</v-btn> |
| 163 | <v-btn | 163 | <v-btn |
| 164 | @click="selectParticularStudent" | 164 | @click="selectParticularStudent" |
| 165 | round | 165 | round |
| 166 | dark | 166 | dark |
| 167 | :loading="loading" | 167 | :loading="loading" |
| 168 | class="add-button" | 168 | class="add-button" |
| 169 | >Yes</v-btn> | 169 | >Yes</v-btn> |
| 170 | </v-card-actions> | 170 | </v-card-actions> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | </v-container> | 172 | </v-container> |
| 173 | </v-card> | 173 | </v-card> |
| 174 | </v-dialog> | 174 | </v-dialog> |
| 175 | 175 | ||
| 176 | <!-- ****** ADD Exam Attendence ****** --> | 176 | <!-- ****** ADD Exam Attendence ****** --> |
| 177 | <v-dialog v-model="addExamAttendenceDialog" max-width="800px" v-if="addExamAttendenceDialog"> | 177 | <v-dialog v-model="addExamAttendenceDialog" max-width="800px" v-if="addExamAttendenceDialog" persistent> |
| 178 | <v-card flat> | 178 | <v-card flat> |
| 179 | <v-layout class="pa-3 card-style white--text"> | 179 | <v-layout class="pa-3 card-style white--text"> |
| 180 | <v-flex xs12> | 180 | <v-flex xs12> |
| 181 | <label class="title text-xs-center">Add Exam Attendence</label> | 181 | <label class="title text-xs-center">Add Exam Attendence</label> |
| 182 | <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon> | 182 | <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | </v-layout> | 184 | </v-layout> |
| 185 | <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center"> | 185 | <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center"> |
| 186 | <v-container fluid> | 186 | <v-container fluid> |
| 187 | <v-flex xs12> | 187 | <v-flex xs12> |
| 188 | <v-layout> | 188 | <v-layout> |
| 189 | <v-flex xs5 class="pt-4 subheading"> | 189 | <v-flex xs5 class="pt-4 subheading"> |
| 190 | <label class="right">Exam Name:</label> | 190 | <label class="right">Exam Name:</label> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | <v-flex xs7 sm7 md6 class="ml-3"> | 192 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 193 | <v-select | 193 | <v-select |
| 194 | label="Select Exam" | 194 | label="Select Exam" |
| 195 | :rules="examRules" | 195 | :rules="examRules" |
| 196 | :items="examList" | 196 | :items="examList" |
| 197 | v-model="addAttendence.examId" | 197 | v-model="addAttendence.examId" |
| 198 | item-text="examName" | 198 | item-text="examName" |
| 199 | item-value="_id" | 199 | item-value="_id" |
| 200 | ></v-select> | 200 | ></v-select> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-layout> | 202 | </v-layout> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | <v-flex xs12> | 204 | <v-flex xs12> |
| 205 | <v-layout> | 205 | <v-layout> |
| 206 | <v-flex xs5 class="pt-4 subheading"> | 206 | <v-flex xs5 class="pt-4 subheading"> |
| 207 | <label class="right">Class:</label> | 207 | <label class="right">Class:</label> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | <v-flex xs7 sm7 md6 class="ml-3"> | 209 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 210 | <v-select | 210 | <v-select |
| 211 | v-model="addAttendence.classId" | 211 | v-model="addAttendence.classId" |
| 212 | label="Select Class" | 212 | label="Select Class" |
| 213 | type="text" | 213 | type="text" |
| 214 | :items="classList" | 214 | :items="classList" |
| 215 | item-text="classNum" | 215 | item-text="classNum" |
| 216 | item-value="_id" | 216 | item-value="_id" |
| 217 | :rules="classRules" | 217 | :rules="classRules" |
| 218 | @change="getSections(addAttendence.classId)" | 218 | @change="getSections(addAttendence.classId)" |
| 219 | required | 219 | required |
| 220 | ></v-select> | 220 | ></v-select> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-flex xs12> | 224 | <v-flex xs12> |
| 225 | <v-layout> | 225 | <v-layout> |
| 226 | <v-flex xs5 class="pt-4 subheading"> | 226 | <v-flex xs5 class="pt-4 subheading"> |
| 227 | <label class="right">Section:</label> | 227 | <label class="right">Section:</label> |
| 228 | </v-flex> | 228 | </v-flex> |
| 229 | <v-flex xs7 sm7 md6 class="ml-3"> | 229 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 230 | <v-select | 230 | <v-select |
| 231 | :items="addSection" | 231 | :items="addSection" |
| 232 | label="Select Section" | 232 | label="Select Section" |
| 233 | v-model="addAttendence.sectionId" | 233 | v-model="addAttendence.sectionId" |
| 234 | item-text="name" | 234 | item-text="name" |
| 235 | item-value="_id" | 235 | item-value="_id" |
| 236 | name="Select Section" | 236 | name="Select Section" |
| 237 | :rules="sectionRules" | 237 | :rules="sectionRules" |
| 238 | @change="getClassSubject(addAttendence.classId)" | 238 | @change="getClassSubject(addAttendence.classId)" |
| 239 | required | 239 | required |
| 240 | ></v-select> | 240 | ></v-select> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | <v-flex xs12> | 244 | <v-flex xs12> |
| 245 | <v-layout> | 245 | <v-layout> |
| 246 | <v-flex xs5 class="pt-4 subheading"> | 246 | <v-flex xs5 class="pt-4 subheading"> |
| 247 | <label class="right">Subject Name:</label> | 247 | <label class="right">Subject Name:</label> |
| 248 | </v-flex> | 248 | </v-flex> |
| 249 | <v-flex xs7 sm7 md6 class="ml-3"> | 249 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 250 | <v-select | 250 | <v-select |
| 251 | :items="subjectList.subjects" | 251 | :items="subjectList.subjects" |
| 252 | label="Select Subject" | 252 | label="Select Subject" |
| 253 | item-text="subjectName" | 253 | item-text="subjectName" |
| 254 | v-model="addAttendence.subjectId" | 254 | v-model="addAttendence.subjectId" |
| 255 | item-value="_id" | 255 | item-value="_id" |
| 256 | name="Select Subject" | 256 | name="Select Subject" |
| 257 | :rules="subjectRules" | 257 | :rules="subjectRules" |
| 258 | required | 258 | required |
| 259 | ></v-select> | 259 | ></v-select> |
| 260 | </v-flex> | 260 | </v-flex> |
| 261 | </v-layout> | 261 | </v-layout> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | <v-layout> | 263 | <v-layout> |
| 264 | <v-flex xs12> | 264 | <v-flex xs12> |
| 265 | <v-card-actions> | 265 | <v-card-actions> |
| 266 | <v-spacer class="hidden-xs-only"></v-spacer> | 266 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 267 | <v-btn | 267 | <v-btn |
| 268 | round | 268 | round |
| 269 | dark | 269 | dark |
| 270 | @click="showTable" | 270 | @click="showTable" |
| 271 | :loading="loading" | 271 | :loading="loading" |
| 272 | class="add-button" | 272 | class="add-button" |
| 273 | >Attendence</v-btn> | 273 | >Attendence</v-btn> |
| 274 | </v-card-actions> | 274 | </v-card-actions> |
| 275 | </v-flex> | 275 | </v-flex> |
| 276 | </v-layout> | 276 | </v-layout> |
| 277 | </v-container> | 277 | </v-container> |
| 278 | </v-form> | 278 | </v-form> |
| 279 | <v-flex xs12 v-show="attendeceTable" class> | 279 | <v-flex xs12 v-show="attendeceTable" class> |
| 280 | <v-data-table | 280 | <v-data-table |
| 281 | :headers="studentheader" | 281 | :headers="studentheader" |
| 282 | :items="studentsData" | 282 | :items="studentsData" |
| 283 | :pagination.sync="pagination" | 283 | :pagination.sync="pagination" |
| 284 | :search="search" | 284 | :search="search" |
| 285 | select-all | 285 | select-all |
| 286 | v-model="selected" | 286 | v-model="selected" |
| 287 | item-key="_id" | 287 | item-key="_id" |
| 288 | > | 288 | > |
| 289 | <template slot="items" slot-scope="props"> | 289 | <template slot="items" slot-scope="props"> |
| 290 | <tr class="tr"> | 290 | <tr class="tr"> |
| 291 | <!-- <td class="td td-row">{{ props.index + 1}}</td> --> | 291 | <!-- <td class="td td-row">{{ props.index + 1}}</td> --> |
| 292 | <td class="td td-row"> | 292 | <td class="td td-row"> |
| 293 | <v-checkbox | 293 | <v-checkbox |
| 294 | v-model="props.item.attendence" | 294 | v-model="props.item.attendence" |
| 295 | @change="markParticularStudentAttendence(props.item)" | 295 | @change="markParticularStudentAttendence(props.item)" |
| 296 | primary | 296 | primary |
| 297 | hide-details | 297 | hide-details |
| 298 | ></v-checkbox> | 298 | ></v-checkbox> |
| 299 | </td> | 299 | </td> |
| 300 | <td class="text-xs-center td td-row"> | 300 | <td class="text-xs-center td td-row"> |
| 301 | <v-avatar size="40"> | 301 | <v-avatar size="40"> |
| 302 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 302 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 303 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 303 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 304 | </v-avatar> | 304 | </v-avatar> |
| 305 | </td> | 305 | </td> |
| 306 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 306 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 307 | <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td> | 307 | <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td> |
| 308 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 308 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 309 | <!-- <td class="td td-row text-xs-center"> | 309 | <!-- <td class="td td-row text-xs-center"> |
| 310 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> | 310 | <v-radio-group v-model="props.item.attendence" :mandatory="false" row> |
| 311 | <v-radio | 311 | <v-radio |
| 312 | v-for="attendences in attendenceType" | 312 | v-for="attendences in attendenceType" |
| 313 | :key="attendences.value" | 313 | :key="attendences.value" |
| 314 | :label="`${attendences.label}`" | 314 | :label="`${attendences.label}`" |
| 315 | :value="attendences.value" | 315 | :value="attendences.value" |
| 316 | ></v-radio> | 316 | ></v-radio> |
| 317 | </v-radio-group> | 317 | </v-radio-group> |
| 318 | </td>--> | 318 | </td>--> |
| 319 | </tr> | 319 | </tr> |
| 320 | </template> | 320 | </template> |
| 321 | <template slot="headers" slot-scope="props"> | 321 | <template slot="headers" slot-scope="props"> |
| 322 | <tr> | 322 | <tr> |
| 323 | <th> | 323 | <th> |
| 324 | <v-checkbox | 324 | <v-checkbox |
| 325 | :input-value="props.all" | 325 | :input-value="props.all" |
| 326 | :indeterminate="props.indeterminate" | 326 | :indeterminate="props.indeterminate" |
| 327 | primary | 327 | primary |
| 328 | hide-details | 328 | hide-details |
| 329 | @click.native="selectAll" | 329 | @click.native="selectAll" |
| 330 | ></v-checkbox> | 330 | ></v-checkbox> |
| 331 | </th> | 331 | </th> |
| 332 | <th | 332 | <th |
| 333 | v-for="header in props.headers" | 333 | v-for="header in props.headers" |
| 334 | :key="header.text" | 334 | :key="header.text" |
| 335 | :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" | 335 | :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" |
| 336 | @click="changeSort(header.value)" | 336 | @click="changeSort(header.value)" |
| 337 | > | 337 | > |
| 338 | <v-icon small>arrow_upward</v-icon> | 338 | <v-icon small>arrow_upward</v-icon> |
| 339 | {{ header.text }} | 339 | {{ header.text }} |
| 340 | </th> | 340 | </th> |
| 341 | </tr> | 341 | </tr> |
| 342 | </template> | 342 | </template> |
| 343 | <v-alert | 343 | <v-alert |
| 344 | slot="no-results" | 344 | slot="no-results" |
| 345 | :value="true" | 345 | :value="true" |
| 346 | color="error" | 346 | color="error" |
| 347 | icon="warning" | 347 | icon="warning" |
| 348 | >Your search for "{{ search }}" found no results.</v-alert> | 348 | >Your search for "{{ search }}" found no results.</v-alert> |
| 349 | </v-data-table> | 349 | </v-data-table> |
| 350 | <v-flex xs12 sm12> | 350 | <v-flex xs12 sm12> |
| 351 | <v-card-actions> | 351 | <v-card-actions> |
| 352 | <v-spacer></v-spacer> | 352 | <v-spacer></v-spacer> |
| 353 | <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn> | 353 | <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn> |
| 354 | </v-card-actions> | 354 | </v-card-actions> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | </v-flex> | 356 | </v-flex> |
| 357 | </v-card> | 357 | </v-card> |
| 358 | </v-dialog> | 358 | </v-dialog> |
| 359 | <v-snackbar | 359 | <v-snackbar |
| 360 | :timeout="timeout" | 360 | :timeout="timeout" |
| 361 | :top="y === 'top'" | 361 | :top="y === 'top'" |
| 362 | :right="x === 'right'" | 362 | :right="x === 'right'" |
| 363 | :vertical="mode === 'vertical'" | 363 | :vertical="mode === 'vertical'" |
| 364 | v-model="snackbar" | 364 | v-model="snackbar" |
| 365 | :color="color" | 365 | :color="color" |
| 366 | >{{ text }}</v-snackbar> | 366 | >{{ text }}</v-snackbar> |
| 367 | <div class="loader" v-if="showLoader"> | 367 | <div class="loader" v-if="showLoader"> |
| 368 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 368 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 369 | </div> | 369 | </div> |
| 370 | </v-container> | 370 | </v-container> |
| 371 | </template> | 371 | </template> |
| 372 | 372 | ||
| 373 | <script> | 373 | <script> |
| 374 | import http from "@/Services/http.js"; | 374 | import http from "@/Services/http.js"; |
| 375 | import Util from "@/util"; | 375 | import Util from "@/util"; |
| 376 | import moment from "moment"; | 376 | import moment from "moment"; |
| 377 | 377 | ||
| 378 | export default { | 378 | export default { |
| 379 | data: () => ({ | 379 | data: () => ({ |
| 380 | snackbar: false, | 380 | snackbar: false, |
| 381 | editDate: false, | 381 | editDate: false, |
| 382 | menu1: false, | 382 | menu1: false, |
| 383 | menuB: false, | 383 | menuB: false, |
| 384 | menu2: false, | 384 | menu2: false, |
| 385 | menuEdit: false, | 385 | menuEdit: false, |
| 386 | timeToEdit: false, | 386 | timeToEdit: false, |
| 387 | show: true, | 387 | show: true, |
| 388 | showSearch: false, | 388 | showSearch: false, |
| 389 | addExamAttendenceDialog: false, | 389 | addExamAttendenceDialog: false, |
| 390 | color: "", | 390 | color: "", |
| 391 | y: "top", | 391 | y: "top", |
| 392 | x: "right", | 392 | x: "right", |
| 393 | mode: "", | 393 | mode: "", |
| 394 | timeout: 10000, | 394 | timeout: 10000, |
| 395 | text: "", | 395 | text: "", |
| 396 | loading: false, | 396 | loading: false, |
| 397 | search: "", | 397 | search: "", |
| 398 | showLoader: false, | 398 | showLoader: false, |
| 399 | valid: true, | 399 | valid: true, |
| 400 | role: "", | 400 | role: "", |
| 401 | pagination: { | 401 | pagination: { |
| 402 | rowsPerPage: 10, | 402 | rowsPerPage: 10, |
| 403 | }, | 403 | }, |
| 404 | attendeceTable: false, | 404 | attendeceTable: false, |
| 405 | isPresent: true, | 405 | isPresent: true, |
| 406 | 406 | ||
| 407 | examRules: [(v) => !!v || "Exam Name is required"], | 407 | examRules: [(v) => !!v || "Exam Name is required"], |
| 408 | classRules: [(v) => !!v || "Class Name is required"], | 408 | classRules: [(v) => !!v || "Class Name is required"], |
| 409 | sectionRules: [(v) => !!v || "section is required"], | 409 | sectionRules: [(v) => !!v || "section is required"], |
| 410 | subjectRules: [(v) => !!v || "Subject is required"], | 410 | subjectRules: [(v) => !!v || "Subject is required"], |
| 411 | timeInRules: [(v) => !!v || "Time In is required"], | 411 | timeInRules: [(v) => !!v || "Time In is required"], |
| 412 | timeOutRules: [(v) => !!v || "time Out s is required"], | 412 | timeOutRules: [(v) => !!v || "time Out s is required"], |
| 413 | roomRules: [(v) => !!v || "Room is required"], | 413 | roomRules: [(v) => !!v || "Room is required"], |
| 414 | examScheduleDateRules: [(v) => !!v || "Date is required"], | 414 | examScheduleDateRules: [(v) => !!v || "Date is required"], |
| 415 | studentsData: [], | 415 | studentsData: [], |
| 416 | examData: [], | 416 | examData: [], |
| 417 | students: [], | 417 | students: [], |
| 418 | 418 | ||
| 419 | headers: [ | 419 | headers: [ |
| 420 | { | 420 | { |
| 421 | align: "", | 421 | align: "", |
| 422 | text: "No", | 422 | text: "No", |
| 423 | sortable: false, | 423 | sortable: false, |
| 424 | value: "No", | 424 | value: "No", |
| 425 | }, | 425 | }, |
| 426 | { | 426 | { |
| 427 | text: "Profile Pic", | 427 | text: "Profile Pic", |
| 428 | value: "profilePicUrl", | 428 | value: "profilePicUrl", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | align: "center", | 430 | align: "center", |
| 431 | }, | 431 | }, |
| 432 | { | 432 | { |
| 433 | text: "Name", | 433 | text: "Name", |
| 434 | value: "name", | 434 | value: "name", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | align: "center", | 436 | align: "center", |
| 437 | }, | 437 | }, |
| 438 | { | 438 | { |
| 439 | text: "Roll No", | 439 | text: "Roll No", |
| 440 | value: "rollNo", | 440 | value: "rollNo", |
| 441 | sortable: false, | 441 | sortable: false, |
| 442 | align: "center", | 442 | align: "center", |
| 443 | }, | 443 | }, |
| 444 | { | 444 | { |
| 445 | text: "Email", | 445 | text: "Email", |
| 446 | value: "email", | 446 | value: "email", |
| 447 | sortable: false, | 447 | sortable: false, |
| 448 | align: "center", | 448 | align: "center", |
| 449 | }, | 449 | }, |
| 450 | { | 450 | { |
| 451 | text: "Action", | 451 | text: "Action", |
| 452 | value: "isPresent", | 452 | value: "isPresent", |
| 453 | sortable: false, | 453 | sortable: false, |
| 454 | align: "center", | 454 | align: "center", |
| 455 | }, | 455 | }, |
| 456 | ], | 456 | ], |
| 457 | studentheader: [ | 457 | studentheader: [ |
| 458 | { | 458 | { |
| 459 | text: "Profile Pic", | 459 | text: "Profile Pic", |
| 460 | value: "profilePicUrl", | 460 | value: "profilePicUrl", |
| 461 | sortable: false, | 461 | sortable: false, |
| 462 | align: "center", | 462 | align: "center", |
| 463 | }, | 463 | }, |
| 464 | { | 464 | { |
| 465 | text: "Name", | 465 | text: "Name", |
| 466 | value: "name", | 466 | value: "name", |
| 467 | sortable: false, | 467 | sortable: false, |
| 468 | align: "center", | 468 | align: "center", |
| 469 | }, | 469 | }, |
| 470 | { | 470 | { |
| 471 | text: "Roll No", | 471 | text: "Roll No", |
| 472 | value: "rollNo", | 472 | value: "rollNo", |
| 473 | sortable: false, | 473 | sortable: false, |
| 474 | align: "center", | 474 | align: "center", |
| 475 | }, | 475 | }, |
| 476 | { | 476 | { |
| 477 | text: "Email", | 477 | text: "Email", |
| 478 | value: "email", | 478 | value: "email", |
| 479 | sortable: false, | 479 | sortable: false, |
| 480 | align: "center", | 480 | align: "center", |
| 481 | }, | 481 | }, |
| 482 | ], | 482 | ], |
| 483 | attendenceType: [ | 483 | attendenceType: [ |
| 484 | { | 484 | { |
| 485 | label: "", | 485 | label: "", |
| 486 | value: true, | 486 | value: true, |
| 487 | }, | 487 | }, |
| 488 | ], | 488 | ], |
| 489 | classList: [], | 489 | classList: [], |
| 490 | addSection: [], | 490 | addSection: [], |
| 491 | examList: [], | 491 | examList: [], |
| 492 | subjectList: [], | 492 | subjectList: [], |
| 493 | subjects: [], | 493 | subjects: [], |
| 494 | addAttendence: {}, | 494 | addAttendence: {}, |
| 495 | getAttendence: {}, | 495 | getAttendence: {}, |
| 496 | editedItem: { | 496 | editedItem: { |
| 497 | sectionId: { | 497 | sectionId: { |
| 498 | name: "", | 498 | name: "", |
| 499 | }, | 499 | }, |
| 500 | }, | 500 | }, |
| 501 | getScheduleData: {}, | 501 | getScheduleData: {}, |
| 502 | ScheduleData: [], | 502 | ScheduleData: [], |
| 503 | token: "", | 503 | token: "", |
| 504 | showData: false, | 504 | showData: false, |
| 505 | selected: [], | 505 | selected: [], |
| 506 | changeStudentAttendenceDialog: false, | 506 | changeStudentAttendenceDialog: false, |
| 507 | closeStudentAttendenceDialog() { | 507 | closeStudentAttendenceDialog() { |
| 508 | this.changeStudentAttendenceDialog = false; | 508 | this.changeStudentAttendenceDialog = false; |
| 509 | }, | 509 | }, |
| 510 | selectedStudent: {}, | 510 | selectedStudent: {}, |
| 511 | presentStudent: [], | 511 | presentStudent: [], |
| 512 | absentStudent: [], | 512 | absentStudent: [], |
| 513 | }), | 513 | }), |
| 514 | watch: { | 514 | watch: { |
| 515 | addExamAttendenceDialog: function (val) { | 515 | addExamAttendenceDialog: function (val) { |
| 516 | if (!val) { | 516 | if (!val) { |
| 517 | this.studentsData = []; | 517 | this.studentsData = []; |
| 518 | this.selected = []; | 518 | this.selected = []; |
| 519 | this.attendeceTable = false; | 519 | this.attendeceTable = false; |
| 520 | this.valid = false; | 520 | this.valid = false; |
| 521 | this.addAttendence = []; | 521 | this.addAttendence = []; |
| 522 | } | 522 | } |
| 523 | }, | 523 | }, |
| 524 | }, | 524 | }, |
| 525 | methods: { | 525 | methods: { |
| 526 | pickFile() { | 526 | pickFile() { |
| 527 | this.$refs.image.click(); | 527 | this.$refs.image.click(); |
| 528 | }, | 528 | }, |
| 529 | markStudentAttendence(item) { | 529 | markStudentAttendence(item) { |
| 530 | this.selectedStudent = { | 530 | this.selectedStudent = { |
| 531 | id: item.studentId._id, | 531 | id: item.studentId._id, |
| 532 | isPresent: !item.isPresent, | 532 | isPresent: !item.isPresent, |
| 533 | }; | 533 | }; |
| 534 | this.changeStudentAttendenceDialog = true; | 534 | this.changeStudentAttendenceDialog = true; |
| 535 | }, | 535 | }, |
| 536 | getSchedulesList() { | 536 | getSchedulesList() { |
| 537 | this.showLoader = true; | 537 | this.showLoader = true; |
| 538 | http() | 538 | http() |
| 539 | .get("/getSchedulesList", { | 539 | .get("/getSchedulesList", { |
| 540 | params: { classId: this.getScheduleData.classId }, | 540 | params: { classId: this.getScheduleData.classId }, |
| 541 | headers: { Authorization: "Bearer " + this.token }, | 541 | headers: { Authorization: "Bearer " + this.token }, |
| 542 | }) | 542 | }) |
| 543 | .then((response) => { | 543 | .then((response) => { |
| 544 | this.ScheduleData = response.data.data; | 544 | this.ScheduleData = response.data.data; |
| 545 | this.showLoader = false; | 545 | this.showLoader = false; |
| 546 | }) | 546 | }) |
| 547 | .catch((error) => { | 547 | .catch((error) => { |
| 548 | // console.log("err====>", err); | 548 | // console.log("err====>", err); |
| 549 | this.showLoader = false; | 549 | this.showLoader = false; |
| 550 | this.loadingSearch = false; | 550 | this.loadingSearch = false; |
| 551 | this.snackbar = true; | 551 | this.snackbar = true; |
| 552 | this.text = error.response.data.message; | 552 | this.text = error.response.data.message; |
| 553 | if (error.response.status === 401) { | 553 | if (error.response.status === 401) { |
| 554 | this.$router.replace({ path: "/" }); | 554 | this.$router.replace({ path: "/" }); |
| 555 | this.$store.dispatch("setToken", null); | 555 | this.$store.dispatch("setToken", null); |
| 556 | this.$store.dispatch("Id", null); | 556 | this.$store.dispatch("Id", null); |
| 557 | } | 557 | } |
| 558 | }); | 558 | }); |
| 559 | }, | 559 | }, |
| 560 | close() { | 560 | close() { |
| 561 | this.dialog = false; | 561 | this.dialog = false; |
| 562 | }, | 562 | }, |
| 563 | closeAttendenceModel() { | 563 | closeAttendenceModel() { |
| 564 | this.addExamAttendenceDialog = false; | 564 | this.addExamAttendenceDialog = false; |
| 565 | this.studentsData = []; | 565 | this.studentsData = []; |
| 566 | this.selected = []; | 566 | this.selected = []; |
| 567 | this.attendeceTable = false; | 567 | this.attendeceTable = false; |
| 568 | this.valid = false; | 568 | this.valid = false; |
| 569 | this.addAttendence = []; | 569 | this.addAttendence = []; |
| 570 | }, | 570 | }, |
| 571 | submit() { | 571 | submit() { |
| 572 | var examAttendence = { | 572 | var examAttendence = { |
| 573 | examId: this.addAttendence.examId, | 573 | examId: this.addAttendence.examId, |
| 574 | classId: this.addAttendence.classId, | 574 | classId: this.addAttendence.classId, |
| 575 | sectionId: this.addAttendence.sectionId, | 575 | sectionId: this.addAttendence.sectionId, |
| 576 | subjectId: this.addAttendence.subjectId, | 576 | subjectId: this.addAttendence.subjectId, |
| 577 | students: [], | 577 | students: [], |
| 578 | }; | 578 | }; |
| 579 | for (var j = 0; j < this.presentStudent.length; j++) { | 579 | for (var j = 0; j < this.presentStudent.length; j++) { |
| 580 | examAttendence.students.push({ | 580 | examAttendence.students.push({ |
| 581 | studentId: this.presentStudent[j], | 581 | studentId: this.presentStudent[j], |
| 582 | isPresent: true, | 582 | isPresent: true, |
| 583 | }); | 583 | }); |
| 584 | } | 584 | } |
| 585 | for (var j = 0; j < this.absentStudent.length; j++) { | 585 | for (var j = 0; j < this.absentStudent.length; j++) { |
| 586 | examAttendence.students.push({ | 586 | examAttendence.students.push({ |
| 587 | studentId: this.absentStudent[j], | 587 | studentId: this.absentStudent[j], |
| 588 | isPresent: false, | 588 | isPresent: false, |
| 589 | }); | 589 | }); |
| 590 | } | 590 | } |
| 591 | if (this.$refs.form.validate()) { | 591 | if (this.$refs.form.validate()) { |
| 592 | http() | 592 | http() |
| 593 | .post("/createExamAttendance", examAttendence) | 593 | .post("/createExamAttendance", examAttendence) |
| 594 | .then((response) => { | 594 | .then((response) => { |
| 595 | this.snackbar = true; | 595 | this.snackbar = true; |
| 596 | this.color = "success"; | 596 | this.color = "success"; |
| 597 | this.text = "Successfully created exam attendence"; | 597 | this.text = "Successfully created exam attendence"; |
| 598 | this.addExamAttendenceDialog = false; | 598 | this.addExamAttendenceDialog = false; |
| 599 | this.studentsData = []; | 599 | this.studentsData = []; |
| 600 | this.selected = []; | 600 | this.selected = []; |
| 601 | this.attendeceTable = false; | 601 | this.attendeceTable = false; |
| 602 | this.valid = false; | 602 | this.valid = false; |
| 603 | this.addAttendence = []; | 603 | this.addAttendence = []; |
| 604 | }) | 604 | }) |
| 605 | .catch((error) => { | 605 | .catch((error) => { |
| 606 | this.snackbar = true; | 606 | this.snackbar = true; |
| 607 | this.text = error.response.data.message; | 607 | this.text = error.response.data.message; |
| 608 | }); | 608 | }); |
| 609 | } | 609 | } |
| 610 | }, | 610 | }, |
| 611 | clear() { | 611 | clear() { |
| 612 | this.$refs.form.reset(); | 612 | this.$refs.form.reset(); |
| 613 | this.disable = false; | 613 | this.disable = false; |
| 614 | this.loading = false; | 614 | this.loading = false; |
| 615 | }, | 615 | }, |
| 616 | getClass() { | 616 | getClass() { |
| 617 | http() | 617 | http() |
| 618 | .get("/getClassesList", { | 618 | .get("/getClassesList", { |
| 619 | headers: { Authorization: "Bearer " + this.token }, | 619 | headers: { Authorization: "Bearer " + this.token }, |
| 620 | }) | 620 | }) |
| 621 | .then((response) => { | 621 | .then((response) => { |
| 622 | this.classList = response.data.data; | 622 | this.classList = response.data.data; |
| 623 | }) | 623 | }) |
| 624 | .catch((err) => { | 624 | .catch((err) => { |
| 625 | // console.log("err====>", err); | 625 | // console.log("err====>", err); |
| 626 | }); | 626 | }); |
| 627 | }, | 627 | }, |
| 628 | getSections(_id) { | 628 | getSections(_id) { |
| 629 | for (let i = 0; i < this.classList.length; i++) { | 629 | for (let i = 0; i < this.classList.length; i++) { |
| 630 | if (_id == this.classList[i]._id) { | 630 | if (_id == this.classList[i]._id) { |
| 631 | // this.subjects = this.classList[i].subjects; | 631 | // this.subjects = this.classList[i].subjects; |
| 632 | } | 632 | } |
| 633 | } | 633 | } |
| 634 | http() | 634 | http() |
| 635 | .get( | 635 | .get( |
| 636 | "/getSectionsList", | 636 | "/getSectionsList", |
| 637 | { params: { classId: _id } }, | 637 | { params: { classId: _id } }, |
| 638 | { | 638 | { |
| 639 | headers: { Authorization: "Bearer " + this.token }, | 639 | headers: { Authorization: "Bearer " + this.token }, |
| 640 | } | 640 | } |
| 641 | ) | 641 | ) |
| 642 | .then((response) => { | 642 | .then((response) => { |
| 643 | this.addSection = response.data.data; | 643 | this.addSection = response.data.data; |
| 644 | }) | 644 | }) |
| 645 | .catch((err) => {}); | 645 | .catch((err) => {}); |
| 646 | }, | 646 | }, |
| 647 | getClassSubject(_id) { | 647 | getClassSubject(_id) { |
| 648 | this.showLoader = true; | 648 | this.showLoader = true; |
| 649 | // this.classId = this.classId; | 649 | // this.classId = this.classId; |
| 650 | http() | 650 | http() |
| 651 | .get( | 651 | .get( |
| 652 | "/getParticularClass", | 652 | "/getParticularClass", |
| 653 | { params: { classId: _id } }, | 653 | { params: { classId: _id } }, |
| 654 | { | 654 | { |
| 655 | headers: { Authorization: "Bearer " + this.token }, | 655 | headers: { Authorization: "Bearer " + this.token }, |
| 656 | } | 656 | } |
| 657 | ) | 657 | ) |
| 658 | .then((response) => { | 658 | .then((response) => { |
| 659 | this.subjectList = response.data.data; | 659 | this.subjectList = response.data.data; |
| 660 | this.showLoader = false; | 660 | this.showLoader = false; |
| 661 | }) | 661 | }) |
| 662 | .catch((err) => { | 662 | .catch((err) => { |
| 663 | this.showLoader = false; | 663 | this.showLoader = false; |
| 664 | }); | 664 | }); |
| 665 | }, | 665 | }, |
| 666 | getExamList() { | 666 | getExamList() { |
| 667 | this.showLoader = true; | 667 | this.showLoader = true; |
| 668 | this.loadingSearch = true; | 668 | this.loadingSearch = true; |
| 669 | http() | 669 | http() |
| 670 | .get("/getExamsList", { | 670 | .get("/getExamsList", { |
| 671 | headers: { Authorization: "Bearer " + this.token }, | 671 | headers: { Authorization: "Bearer " + this.token }, |
| 672 | }) | 672 | }) |
| 673 | .then((response) => { | 673 | .then((response) => { |
| 674 | this.examList = response.data.data; | 674 | this.examList = response.data.data; |
| 675 | this.showLoader = false; | 675 | this.showLoader = false; |
| 676 | this.loadingSearch = false; | 676 | this.loadingSearch = false; |
| 677 | }) | 677 | }) |
| 678 | .catch((error) => { | 678 | .catch((error) => { |
| 679 | this.showLoader = false; | 679 | this.showLoader = false; |
| 680 | this.loadingSearch = false; | 680 | this.loadingSearch = false; |
| 681 | this.snackbar = true; | 681 | this.snackbar = true; |
| 682 | this.text = error.response.data.message; | 682 | this.text = error.response.data.message; |
| 683 | if (error.response.status === 401) { | 683 | if (error.response.status === 401) { |
| 684 | this.$router.replace({ path: "/" }); | 684 | this.$router.replace({ path: "/" }); |
| 685 | this.$store.dispatch("setToken", null); | 685 | this.$store.dispatch("setToken", null); |
| 686 | this.$store.dispatch("Id", null); | 686 | this.$store.dispatch("Id", null); |
| 687 | } | 687 | } |
| 688 | }); | 688 | }); |
| 689 | }, | 689 | }, |
| 690 | showTable() { | 690 | showTable() { |
| 691 | this.attendeceTable = true; | 691 | this.attendeceTable = true; |
| 692 | this.getStudentList(); | 692 | this.getStudentList(); |
| 693 | }, | 693 | }, |
| 694 | getStudentList() { | 694 | getStudentList() { |
| 695 | this.showLoader = true; | 695 | this.showLoader = true; |
| 696 | http() | 696 | http() |
| 697 | .get("/getStudentWithClass", { | 697 | .get("/getStudentWithClass", { |
| 698 | params: { | 698 | params: { |
| 699 | classId: this.addAttendence.classId, | 699 | classId: this.addAttendence.classId, |
| 700 | sectionId: this.addAttendence.sectionId, | 700 | sectionId: this.addAttendence.sectionId, |
| 701 | }, | 701 | }, |
| 702 | }) | 702 | }) |
| 703 | .then((response) => { | 703 | .then((response) => { |
| 704 | this.studentsData = response.data.data; | 704 | this.studentsData = response.data.data; |
| 705 | this.showLoader = false; | 705 | this.showLoader = false; |
| 706 | // this.addExamAttendenceDialog = false; | 706 | // this.addExamAttendenceDialog = false; |
| 707 | var attendence = ""; | 707 | var attendence = ""; |
| 708 | for (let i = 0; i < this.studentsData.length; i++) { | 708 | for (let i = 0; i < this.studentsData.length; i++) { |
| 709 | this.studentsData[i].attendence = false; | 709 | this.studentsData[i].attendence = false; |
| 710 | } | 710 | } |
| 711 | }) | 711 | }) |
| 712 | .catch((err) => { | 712 | .catch((err) => { |
| 713 | console.log("err====>", err); | 713 | console.log("err====>", err); |
| 714 | this.showLoader = false; | 714 | this.showLoader = false; |
| 715 | }); | 715 | }); |
| 716 | }, | 716 | }, |
| 717 | getExamAttendenceList() { | 717 | getExamAttendenceList() { |
| 718 | this.showLoader = true; | 718 | this.showLoader = true; |
| 719 | http() | 719 | http() |
| 720 | .get("/getExamAttendenceList", { | 720 | .get("/getExamAttendenceList", { |
| 721 | params: { | 721 | params: { |
| 722 | examId: this.getAttendence.examId, | 722 | examId: this.getAttendence.examId, |
| 723 | classId: this.getAttendence.classId, | 723 | classId: this.getAttendence.classId, |
| 724 | sectionId: this.getAttendence.sectionId, | 724 | sectionId: this.getAttendence.sectionId, |
| 725 | subjectId: this.getAttendence.subjectId, | 725 | subjectId: this.getAttendence.subjectId, |
| 726 | }, | 726 | }, |
| 727 | }) | 727 | }) |
| 728 | .then((response) => { | 728 | .then((response) => { |
| 729 | this.examData = response.data.data; | 729 | this.examData = response.data.data; |
| 730 | if (this.examData.length === 0) { | 730 | if (this.examData.length === 0) { |
| 731 | this.showLoader = false; | 731 | this.showLoader = false; |
| 732 | this.snackbar = true; | 732 | this.snackbar = true; |
| 733 | this.text = "No Attendence found!"; | 733 | this.text = "No Attendence found!"; |
| 734 | this.color = "error"; | 734 | this.color = "error"; |
| 735 | return; | 735 | return; |
| 736 | } | 736 | } |
| 737 | this.examData = this.examData[0]; | 737 | this.examData = this.examData[0]; |
| 738 | // if (this.examData.students.length === 0) { | 738 | // if (this.examData.students.length === 0) { |
| 739 | // this.showLoader = false; | 739 | // this.showLoader = false; |
| 740 | // this.snackbar = true; | 740 | // this.snackbar = true; |
| 741 | // this.text = "No Students found!"; | 741 | // this.text = "No Students found!"; |
| 742 | // this.color = "error"; | 742 | // this.color = "error"; |
| 743 | // return; | 743 | // return; |
| 744 | // } | 744 | // } |
| 745 | this.showData = true; | 745 | this.showData = true; |
| 746 | this.showLoader = false; | 746 | this.showLoader = false; |
| 747 | }) | 747 | }) |
| 748 | .catch((error) => { | 748 | .catch((error) => { |
| 749 | console.log("error", error); | 749 | console.log("error", error); |
| 750 | this.showLoader = false; | 750 | this.showLoader = false; |
| 751 | }); | 751 | }); |
| 752 | }, | 752 | }, |
| 753 | markParticularStudentAttendence(selected) { | 753 | markParticularStudentAttendence(selected) { |
| 754 | if (selected.attendence) { | 754 | if (selected.attendence) { |
| 755 | this.selected.push(selected); | 755 | this.selected.push(selected); |
| 756 | } else { | 756 | } else { |
| 757 | for (var i = 0; i < this.selected.length; i++) { | 757 | for (var i = 0; i < this.selected.length; i++) { |
| 758 | if (this.selected[i]._id === selected._id) { | 758 | if (this.selected[i]._id === selected._id) { |
| 759 | this.selected.splice(i, 1); | 759 | this.selected.splice(i, 1); |
| 760 | break; | 760 | break; |
| 761 | } | 761 | } |
| 762 | } | 762 | } |
| 763 | } | 763 | } |
| 764 | let presentIndex = this.presentStudent.indexOf(selected._id); | 764 | let presentIndex = this.presentStudent.indexOf(selected._id); |
| 765 | let absentIndex = this.absentStudent.indexOf(selected._id); | 765 | let absentIndex = this.absentStudent.indexOf(selected._id); |
| 766 | if (presentIndex > -1) { | 766 | if (presentIndex > -1) { |
| 767 | this.presentStudent.splice(presentIndex, 1); | 767 | this.presentStudent.splice(presentIndex, 1); |
| 768 | this.absentStudent.push(selected._id); | 768 | this.absentStudent.push(selected._id); |
| 769 | } else { | 769 | } else { |
| 770 | if (absentIndex > -1) { | 770 | if (absentIndex > -1) { |
| 771 | this.absentStudent.splice(absentIndex, 1); | 771 | this.absentStudent.splice(absentIndex, 1); |
| 772 | } | 772 | } |
| 773 | this.presentStudent.push(selected._id); | 773 | this.presentStudent.push(selected._id); |
| 774 | } | 774 | } |
| 775 | }, | 775 | }, |
| 776 | selectAll() { | 776 | selectAll() { |
| 777 | let markAbsent = false; | 777 | let markAbsent = false; |
| 778 | if (this.selected.length === this.studentsData.length) markAbsent = true; | 778 | if (this.selected.length === this.studentsData.length) markAbsent = true; |
| 779 | 779 | ||
| 780 | this.presentStudent = []; | 780 | this.presentStudent = []; |
| 781 | this.absentStudent = []; | 781 | this.absentStudent = []; |
| 782 | this.selected = []; | 782 | this.selected = []; |
| 783 | 783 | ||
| 784 | for (let i = 0; i < this.studentsData.length; i++) { | 784 | for (let i = 0; i < this.studentsData.length; i++) { |
| 785 | if (markAbsent) { | 785 | if (markAbsent) { |
| 786 | this.studentsData[i].attendence = false; | 786 | this.studentsData[i].attendence = false; |
| 787 | this.absentStudent.push(this.studentsData[i]._id); | 787 | this.absentStudent.push(this.studentsData[i]._id); |
| 788 | } else { | 788 | } else { |
| 789 | this.studentsData[i].attendence = true; | 789 | this.studentsData[i].attendence = true; |
| 790 | this.presentStudent.push(this.studentsData[i]._id); | 790 | this.presentStudent.push(this.studentsData[i]._id); |
| 791 | this.selected.push(this.studentsData[i]); | 791 | this.selected.push(this.studentsData[i]); |
| 792 | } | 792 | } |
| 793 | } | 793 | } |
| 794 | }, | 794 | }, |
| 795 | selectParticularStudent(_id) { | 795 | selectParticularStudent(_id) { |
| 796 | var payload = { | 796 | var payload = { |
| 797 | examAttendanceId: this.examData._id, | 797 | examAttendanceId: this.examData._id, |
| 798 | studentId: this.selectedStudent.id, | 798 | studentId: this.selectedStudent.id, |
| 799 | isPresent: this.selectedStudent.isPresent, | 799 | isPresent: this.selectedStudent.isPresent, |
| 800 | }; | 800 | }; |
| 801 | 801 | ||
| 802 | http() | 802 | http() |
| 803 | .put("/updateExamAttendance", payload) | 803 | .put("/updateExamAttendance", payload) |
| 804 | .then((response) => { | 804 | .then((response) => { |
| 805 | this.snackbar = true; | 805 | this.snackbar = true; |
| 806 | this.color = "success"; | 806 | this.color = "success"; |
| 807 | this.text = "Successfully change attendence"; | 807 | this.text = "Successfully change attendence"; |
| 808 | this.changeStudentAttendenceDialog = false; | 808 | this.changeStudentAttendenceDialog = false; |
| 809 | this.selectedStudent = {}; | 809 | this.selectedStudent = {}; |
| 810 | this.getExamAttendenceList(); | 810 | this.getExamAttendenceList(); |
| 811 | }) | 811 | }) |
| 812 | .catch((error) => { | 812 | .catch((error) => { |
| 813 | this.snackbar = true; | 813 | this.snackbar = true; |
| 814 | this.text = error.response.data.message; | 814 | this.text = error.response.data.message; |
| 815 | }); | 815 | }); |
| 816 | }, | 816 | }, |
| 817 | changeSort(column) { | 817 | changeSort(column) { |
| 818 | if (this.pagination.sortBy === column) { | 818 | if (this.pagination.sortBy === column) { |
| 819 | this.pagination.descending = !this.pagination.descending; | 819 | this.pagination.descending = !this.pagination.descending; |
| 820 | } else { | 820 | } else { |
| 821 | this.pagination.sortBy = column; | 821 | this.pagination.sortBy = column; |
| 822 | this.pagination.descending = false; | 822 | this.pagination.descending = false; |
| 823 | } | 823 | } |
| 824 | }, | 824 | }, |
| 825 | displaySearch() { | 825 | displaySearch() { |
| 826 | (this.show = false), (this.showSearch = true); | 826 | (this.show = false), (this.showSearch = true); |
| 827 | }, | 827 | }, |
| 828 | closeSearch() { | 828 | closeSearch() { |
| 829 | this.showSearch = false; | 829 | this.showSearch = false; |
| 830 | this.show = true; | 830 | this.show = true; |
| 831 | this.search = ""; | 831 | this.search = ""; |
| 832 | }, | 832 | }, |
| 833 | }, | 833 | }, |
| 834 | mounted() { | 834 | mounted() { |
| 835 | this.token = this.$store.state.token; | 835 | this.token = this.$store.state.token; |
| 836 | this.getClass(); | 836 | this.getClass(); |
| 837 | this.getExamList(); | 837 | this.getExamList(); |
| 838 | this.role = this.$store.state.role; | 838 | this.role = this.$store.state.role; |
| 839 | }, | 839 | }, |
| 840 | }; | 840 | }; |
| 841 | </script> | 841 | </script> |
src/pages/Exam/examSchedule.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Exam Schedule****** --> | 3 | <!-- ****** Edit Exam Schedule****** --> |
| 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable> | 4 | <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Exam Schedule</label> | 8 | <label class="title text-xs-center">Edit Exam Schedule</label> |
| 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Exam Name:</label> | 19 | <label class="right">Exam Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-select | 22 | <v-select |
| 23 | :rules="examRules" | 23 | :rules="examRules" |
| 24 | :items="examList" | 24 | :items="examList" |
| 25 | v-model="editedItem.examId" | 25 | v-model="editedItem.examId" |
| 26 | label="Select your Exam Name" | 26 | label="Select your Exam Name" |
| 27 | item-text="examName" | 27 | item-text="examName" |
| 28 | item-value="_id" | 28 | item-value="_id" |
| 29 | ></v-select> | 29 | ></v-select> |
| 30 | </v-flex> | 30 | </v-flex> |
| 31 | </v-layout> | 31 | </v-layout> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs12 sm12> | 33 | <v-flex xs12 sm12> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs4 class="pt-4 subheading"> | 35 | <v-flex xs4 class="pt-4 subheading"> |
| 36 | <label class="right">Class:</label> | 36 | <label class="right">Class:</label> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | <v-flex xs7 class="ml-3"> | 38 | <v-flex xs7 class="ml-3"> |
| 39 | <v-select | 39 | <v-select |
| 40 | v-model="editedItem.classId" | 40 | v-model="editedItem.classId" |
| 41 | label="Select your Class" | 41 | label="Select your Class" |
| 42 | type="text" | 42 | type="text" |
| 43 | :items="classList" | 43 | :items="classList" |
| 44 | item-text="classNum" | 44 | item-text="classNum" |
| 45 | item-value="_id" | 45 | item-value="_id" |
| 46 | @change="getSections(editedItem.classId)" | 46 | @change="getSections(editedItem.classId)" |
| 47 | required | 47 | required |
| 48 | ></v-select> | 48 | ></v-select> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex xs12 sm12> | 52 | <v-flex xs12 sm12> |
| 53 | <v-layout> | 53 | <v-layout> |
| 54 | <v-flex xs4 class="pt-4 subheading"> | 54 | <v-flex xs4 class="pt-4 subheading"> |
| 55 | <label class="right">Subject Name:</label> | 55 | <label class="right">Subject Name:</label> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs7 class="ml-3"> | 57 | <v-flex xs7 class="ml-3"> |
| 58 | <v-select | 58 | <v-select |
| 59 | :items="subjects" | 59 | :items="subjects" |
| 60 | label="Select your Subject" | 60 | label="Select your Subject" |
| 61 | v-model="editedItem.subjectName" | 61 | v-model="editedItem.subjectName" |
| 62 | item-text="subjectName" | 62 | item-text="subjectName" |
| 63 | item-value="subjectName" | 63 | item-value="subjectName" |
| 64 | name="Select Subject" | 64 | name="Select Subject" |
| 65 | required | 65 | required |
| 66 | ></v-select> | 66 | ></v-select> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Date:</label> | 73 | <label class="right">Date:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs7 class="ml-3"> | 75 | <v-flex xs7 class="ml-3"> |
| 76 | <v-menu | 76 | <v-menu |
| 77 | ref="editDate" | 77 | ref="editDate" |
| 78 | :close-on-content-click="false" | 78 | :close-on-content-click="false" |
| 79 | v-model="editDate" | 79 | v-model="editDate" |
| 80 | :nudge-right="40" | 80 | :nudge-right="40" |
| 81 | :return-value.sync="editDate" | 81 | :return-value.sync="editDate" |
| 82 | lazy | 82 | lazy |
| 83 | transition="scale-transition" | 83 | transition="scale-transition" |
| 84 | offset-y | 84 | offset-y |
| 85 | full-width | 85 | full-width |
| 86 | min-width="290px" | 86 | min-width="290px" |
| 87 | > | 87 | > |
| 88 | <v-text-field | 88 | <v-text-field |
| 89 | slot="activator" | 89 | slot="activator" |
| 90 | v-model="editedItem.date" | 90 | v-model="editedItem.date" |
| 91 | label="Select Date" | 91 | label="Select Date" |
| 92 | append-icon="event" | 92 | append-icon="event" |
| 93 | readonly | 93 | readonly |
| 94 | ></v-text-field> | 94 | ></v-text-field> |
| 95 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> | 95 | <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> |
| 96 | </v-menu> | 96 | </v-menu> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | </v-layout> | 98 | </v-layout> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex xs12 sm12> | 100 | <v-flex xs12 sm12> |
| 101 | <v-layout> | 101 | <v-layout> |
| 102 | <v-flex xs4 class="pt-4 subheading"> | 102 | <v-flex xs4 class="pt-4 subheading"> |
| 103 | <label class="right">Time From:</label> | 103 | <label class="right">Time From:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs7 class="ml-3"> | 105 | <v-flex xs7 class="ml-3"> |
| 106 | <v-menu | 106 | <v-menu |
| 107 | ref="menuEdit" | 107 | ref="menuEdit" |
| 108 | :close-on-content-click="false" | 108 | :close-on-content-click="false" |
| 109 | v-model="menuEdit" | 109 | v-model="menuEdit" |
| 110 | :nudge-right="40" | 110 | :nudge-right="40" |
| 111 | :return-value.sync="editedItem.timeFrom" | 111 | :return-value.sync="editedItem.timeFrom" |
| 112 | lazy | 112 | lazy |
| 113 | transition="scale-transition" | 113 | transition="scale-transition" |
| 114 | offset-y | 114 | offset-y |
| 115 | full-width | 115 | full-width |
| 116 | max-width="290px" | 116 | max-width="290px" |
| 117 | min-width="290px" | 117 | min-width="290px" |
| 118 | > | 118 | > |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | slot="activator" | 120 | slot="activator" |
| 121 | v-model="editedItem.timeFrom" | 121 | v-model="editedItem.timeFrom" |
| 122 | label="Select your time From" | 122 | label="Select your time From" |
| 123 | append-icon="access_time" | 123 | append-icon="access_time" |
| 124 | readonly | 124 | readonly |
| 125 | ></v-text-field> | 125 | ></v-text-field> |
| 126 | <v-time-picker | 126 | <v-time-picker |
| 127 | v-model="editedItem.timeIn" | 127 | v-model="editedItem.timeIn" |
| 128 | @change="$refs.menuEdit.save(editedItem.timeIn)" | 128 | @change="$refs.menuEdit.save(editedItem.timeIn)" |
| 129 | ></v-time-picker> | 129 | ></v-time-picker> |
| 130 | </v-menu> | 130 | </v-menu> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | <v-flex xs12 sm12> | 134 | <v-flex xs12 sm12> |
| 135 | <v-layout> | 135 | <v-layout> |
| 136 | <v-flex xs4 class="pt-4 subheading"> | 136 | <v-flex xs4 class="pt-4 subheading"> |
| 137 | <label class="right">Time To:</label> | 137 | <label class="right">Time To:</label> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-flex xs7 class="ml-3"> | 139 | <v-flex xs7 class="ml-3"> |
| 140 | <v-menu | 140 | <v-menu |
| 141 | ref="timeToEdit" | 141 | ref="timeToEdit" |
| 142 | :close-on-content-click="false" | 142 | :close-on-content-click="false" |
| 143 | v-model="timeToEdit" | 143 | v-model="timeToEdit" |
| 144 | :nudge-right="40" | 144 | :nudge-right="40" |
| 145 | :return-value.sync="editedItem.timeTo" | 145 | :return-value.sync="editedItem.timeTo" |
| 146 | lazy | 146 | lazy |
| 147 | transition="scale-transition" | 147 | transition="scale-transition" |
| 148 | offset-y | 148 | offset-y |
| 149 | full-width | 149 | full-width |
| 150 | max-width="290px" | 150 | max-width="290px" |
| 151 | min-width="290px" | 151 | min-width="290px" |
| 152 | > | 152 | > |
| 153 | <v-text-field | 153 | <v-text-field |
| 154 | slot="activator" | 154 | slot="activator" |
| 155 | v-model="editedItem.timeTo" | 155 | v-model="editedItem.timeTo" |
| 156 | label="Select your Time To" | 156 | label="Select your Time To" |
| 157 | append-icon="access_time" | 157 | append-icon="access_time" |
| 158 | readonly | 158 | readonly |
| 159 | ></v-text-field> | 159 | ></v-text-field> |
| 160 | <v-time-picker | 160 | <v-time-picker |
| 161 | v-model="editedItem.timeTo" | 161 | v-model="editedItem.timeTo" |
| 162 | @change="$refs.timeToEdit.save(editedItem.timeTo)" | 162 | @change="$refs.timeToEdit.save(editedItem.timeTo)" |
| 163 | ></v-time-picker> | 163 | ></v-time-picker> |
| 164 | </v-menu> | 164 | </v-menu> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | <v-flex xs12 sm12> | 168 | <v-flex xs12 sm12> |
| 169 | <v-layout> | 169 | <v-layout> |
| 170 | <v-flex xs4 class="pt-4 subheading"> | 170 | <v-flex xs4 class="pt-4 subheading"> |
| 171 | <label class="right">Room:</label> | 171 | <label class="right">Room:</label> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-flex xs7 class="ml-3"> | 173 | <v-flex xs7 class="ml-3"> |
| 174 | <v-text-field | 174 | <v-text-field |
| 175 | placeholder="fill your room" | 175 | placeholder="fill your room" |
| 176 | v-model="editedItem.room" | 176 | v-model="editedItem.room" |
| 177 | @keyup.enter="save" | 177 | @keyup.enter="save" |
| 178 | ></v-text-field> | 178 | ></v-text-field> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-layout> | 183 | <v-layout> |
| 184 | <v-flex xs12> | 184 | <v-flex xs12> |
| 185 | <v-card-actions> | 185 | <v-card-actions> |
| 186 | <v-spacer></v-spacer> | 186 | <v-spacer></v-spacer> |
| 187 | <v-btn round dark @click="update" class="add-button">Save</v-btn> | 187 | <v-btn round dark @click="update" class="add-button">Save</v-btn> |
| 188 | </v-card-actions> | 188 | </v-card-actions> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | </v-container> | 191 | </v-container> |
| 192 | </v-form> | 192 | </v-form> |
| 193 | </v-card-text> | 193 | </v-card-text> |
| 194 | </v-card> | 194 | </v-card> |
| 195 | </v-dialog> | 195 | </v-dialog> |
| 196 | 196 | ||
| 197 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> | 197 | <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> |
| 198 | 198 | ||
| 199 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> | 199 | <v-dialog v-model="profileExamScheduleDialog" max-width="600px" persistent> |
| 200 | <v-card flat class="card-style pa-3" dark> | 200 | <v-card flat class="card-style pa-3" dark> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs12> | 202 | <v-flex xs12> |
| 203 | <label class="title text-xs-center">View Exam Schedule</label> | 203 | <label class="title text-xs-center">View Exam Schedule</label> |
| 204 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> | 204 | <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | <v-card-text> | 207 | <v-card-text> |
| 208 | <v-container grid-list-md> | 208 | <v-container grid-list-md> |
| 209 | <v-layout wrap> | 209 | <v-layout wrap> |
| 210 | <v-flex> | 210 | <v-flex> |
| 211 | <v-layout> | 211 | <v-layout> |
| 212 | <v-flex xs5 sm6> | 212 | <v-flex xs5 sm6> |
| 213 | <h5 class="right my-1"> | 213 | <h5 class="right my-1"> |
| 214 | <b>Exam Name:</b> | 214 | <b>Exam Name:</b> |
| 215 | </h5> | 215 | </h5> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex sm6 xs8> | 217 | <v-flex sm6 xs8> |
| 218 | <h5 class="my-1">{{ editedItem.examId}}</h5> | 218 | <h5 class="my-1">{{ editedItem.examId}}</h5> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-layout> | 221 | <v-layout> |
| 222 | <v-flex xs5 sm6> | 222 | <v-flex xs5 sm6> |
| 223 | <h5 class="right my-1"> | 223 | <h5 class="right my-1"> |
| 224 | <b>Class:</b> | 224 | <b>Class:</b> |
| 225 | </h5> | 225 | </h5> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | <v-flex sm6 xs8> | 227 | <v-flex sm6 xs8> |
| 228 | <h5 class="my-1">{{ editedItem.classId }}</h5> | 228 | <h5 class="my-1">{{ editedItem.classId }}</h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | <v-layout> | 231 | <v-layout> |
| 232 | <v-flex xs5 sm6> | 232 | <v-flex xs5 sm6> |
| 233 | <h5 class="right my-1"> | 233 | <h5 class="right my-1"> |
| 234 | <b>Section:</b> | 234 | <b>Section:</b> |
| 235 | </h5> | 235 | </h5> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex sm6 xs8> | 237 | <v-flex sm6 xs8> |
| 238 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> | 238 | <h5 class="my-1">{{ editedItem.sectionId }}</h5> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs5 sm6> | 242 | <v-flex xs5 sm6> |
| 243 | <h5 class="right my-1"> | 243 | <h5 class="right my-1"> |
| 244 | <b>Subject Name:</b> | 244 | <b>Subject Name:</b> |
| 245 | </h5> | 245 | </h5> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex sm6 xs8> | 247 | <v-flex sm6 xs8> |
| 248 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> | 248 | <h5 class="my-1">{{ editedItem.subjectName }}</h5> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | </v-layout> | 250 | </v-layout> |
| 251 | <v-layout> | 251 | <v-layout> |
| 252 | <v-flex xs5 sm6> | 252 | <v-flex xs5 sm6> |
| 253 | <h5 class="right my-1"> | 253 | <h5 class="right my-1"> |
| 254 | <b>Date:</b> | 254 | <b>Date:</b> |
| 255 | </h5> | 255 | </h5> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | <v-flex sm6 xs8> | 257 | <v-flex sm6 xs8> |
| 258 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> | 258 | <h5 class="my-1">{{ dates(editedItem.date) }}</h5> |
| 259 | </v-flex> | 259 | </v-flex> |
| 260 | </v-layout> | 260 | </v-layout> |
| 261 | <v-layout> | 261 | <v-layout> |
| 262 | <v-flex xs5 sm6> | 262 | <v-flex xs5 sm6> |
| 263 | <h5 class="right my-1"> | 263 | <h5 class="right my-1"> |
| 264 | <b>Time From:</b> | 264 | <b>Time From:</b> |
| 265 | </h5> | 265 | </h5> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | <v-flex sm6 xs8> | 267 | <v-flex sm6 xs8> |
| 268 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> | 268 | <h5 class="my-1">{{ editedItem.timeFrom }}</h5> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | </v-layout> | 270 | </v-layout> |
| 271 | <v-layout> | 271 | <v-layout> |
| 272 | <v-flex xs5 sm6> | 272 | <v-flex xs5 sm6> |
| 273 | <h5 class="right my-1"> | 273 | <h5 class="right my-1"> |
| 274 | <b>Time To:</b> | 274 | <b>Time To:</b> |
| 275 | </h5> | 275 | </h5> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | <v-flex sm6 xs8> | 277 | <v-flex sm6 xs8> |
| 278 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> | 278 | <h5 class="my-1">{{ editedItem.timeTo }}</h5> |
| 279 | </v-flex> | 279 | </v-flex> |
| 280 | </v-layout> | 280 | </v-layout> |
| 281 | <v-layout> | 281 | <v-layout> |
| 282 | <v-flex xs5 sm6> | 282 | <v-flex xs5 sm6> |
| 283 | <h5 class="right my-1"> | 283 | <h5 class="right my-1"> |
| 284 | <b>Room:</b> | 284 | <b>Room:</b> |
| 285 | </h5> | 285 | </h5> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | <v-flex sm6 xs8> | 287 | <v-flex sm6 xs8> |
| 288 | <h5 class="my-1">{{ editedItem.room }}</h5> | 288 | <h5 class="my-1">{{ editedItem.room }}</h5> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | </v-layout> | 290 | </v-layout> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | </v-layout> | 292 | </v-layout> |
| 293 | </v-container> | 293 | </v-container> |
| 294 | </v-card-text> | 294 | </v-card-text> |
| 295 | </v-card> | 295 | </v-card> |
| 296 | </v-dialog> | 296 | </v-dialog> |
| 297 | <!-- ***** Exam Schedule TABLE****** --> | 297 | <!-- ***** Exam Schedule TABLE****** --> |
| 298 | <v-toolbar color="transparent" flat> | 298 | <v-toolbar color="transparent" flat> |
| 299 | <v-btn | 299 | <v-btn |
| 300 | fab | 300 | fab |
| 301 | dark | 301 | dark |
| 302 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 302 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 303 | small | 303 | small |
| 304 | @click="addExamScheduleDialog = true" | 304 | @click="addExamScheduleDialog = true" |
| 305 | > | 305 | > |
| 306 | <v-icon dark>add</v-icon> | 306 | <v-icon dark>add</v-icon> |
| 307 | </v-btn> | 307 | </v-btn> |
| 308 | <v-btn | 308 | <v-btn |
| 309 | v-if="role != 'TEACHER' " | 309 | v-if="role != 'TEACHER' " |
| 310 | round | 310 | round |
| 311 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 311 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 312 | dark | 312 | dark |
| 313 | @click="addExamScheduleDialog = true" | 313 | @click="addExamScheduleDialog = true" |
| 314 | > | 314 | > |
| 315 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule | 315 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule |
| 316 | </v-btn> | 316 | </v-btn> |
| 317 | <v-spacer></v-spacer> | 317 | <v-spacer></v-spacer> |
| 318 | <v-flex xs8 sm3 md2 class="mr-3"> | 318 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 319 | <v-select | 319 | <v-select |
| 320 | v-model="getScheduleData.classId" | 320 | v-model="getScheduleData.classId" |
| 321 | label="Select your class" | 321 | label="Select your class" |
| 322 | type="text" | 322 | type="text" |
| 323 | :items="classList" | 323 | :items="classList" |
| 324 | item-text="classNum" | 324 | item-text="classNum" |
| 325 | item-value="_id" | 325 | item-value="_id" |
| 326 | @change="getSections(getScheduleData.classId)" | 326 | @change="getSections(getScheduleData.classId)" |
| 327 | required | 327 | required |
| 328 | ></v-select> | 328 | ></v-select> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs8 sm3 md2 class="mr-3"> | 330 | <v-flex xs8 sm3 md2 class="mr-3"> |
| 331 | <v-select | 331 | <v-select |
| 332 | v-model="getScheduleData.sectionId" | 332 | v-model="getScheduleData.sectionId" |
| 333 | label="Select your section" | 333 | label="Select your section" |
| 334 | type="text" | 334 | type="text" |
| 335 | :items="addSection" | 335 | :items="addSection" |
| 336 | item-text="name" | 336 | item-text="name" |
| 337 | item-value="_id" | 337 | item-value="_id" |
| 338 | @change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)" | 338 | @change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)" |
| 339 | required | 339 | required |
| 340 | ></v-select> | 340 | ></v-select> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | <v-card-title class="body-1" v-show="show"> | 342 | <v-card-title class="body-1" v-show="show"> |
| 343 | <v-btn icon large flat @click="displaySearch"> | 343 | <v-btn icon large flat @click="displaySearch"> |
| 344 | <v-avatar size="27"> | 344 | <v-avatar size="27"> |
| 345 | <img src="/static/icon/search.png" alt="icon" /> | 345 | <img src="/static/icon/search.png" alt="icon" /> |
| 346 | </v-avatar> | 346 | </v-avatar> |
| 347 | </v-btn> | 347 | </v-btn> |
| 348 | </v-card-title> | 348 | </v-card-title> |
| 349 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 349 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 350 | <v-layout> | 350 | <v-layout> |
| 351 | <v-text-field | 351 | <v-text-field |
| 352 | autofocus | 352 | autofocus |
| 353 | v-model="search" | 353 | v-model="search" |
| 354 | label="Search" | 354 | label="Search" |
| 355 | prepend-inner-icon="search" | 355 | prepend-inner-icon="search" |
| 356 | color="primary" | 356 | color="primary" |
| 357 | ></v-text-field> | 357 | ></v-text-field> |
| 358 | <v-icon @click="closeSearch" color="error">close</v-icon> | 358 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | </v-toolbar> | 361 | </v-toolbar> |
| 362 | <v-data-table | 362 | <v-data-table |
| 363 | :headers="headers" | 363 | :headers="headers" |
| 364 | :items="ScheduleData" | 364 | :items="ScheduleData" |
| 365 | :pagination.sync="pagination" | 365 | :pagination.sync="pagination" |
| 366 | :search="search" | 366 | :search="search" |
| 367 | > | 367 | > |
| 368 | <template slot="items" slot-scope="props"> | 368 | <template slot="items" slot-scope="props"> |
| 369 | <tr class="tr"> | 369 | <tr class="tr"> |
| 370 | <td class="td td-row">{{ props.index + 1}}</td> | 370 | <td class="td td-row">{{ props.index + 1}}</td> |
| 371 | <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> | 371 | <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> |
| 372 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 372 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> | 373 | <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> |
| 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> | 374 | <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> |
| 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> | 375 | <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> |
| 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> | 376 | <td class="td td-row text-xs-center">{{ props.item.room }}</td> |
| 377 | <td class="td td-row text-xs-center"> | 377 | <td class="td td-row text-xs-center"> |
| 378 | <span> | 378 | <span> |
| 379 | <v-tooltip top> | 379 | <v-tooltip top> |
| 380 | <img | 380 | <img |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | style="cursor:pointer; width:25px; height:25px; " | 382 | style="cursor:pointer; width:25px; height:25px; " |
| 383 | class="mr-3" | 383 | class="mr-3" |
| 384 | @click="profile(props.item)" | 384 | @click="profile(props.item)" |
| 385 | src="/static/icon/view.png" | 385 | src="/static/icon/view.png" |
| 386 | /> | 386 | /> |
| 387 | <span>View</span> | 387 | <span>View</span> |
| 388 | </v-tooltip> | 388 | </v-tooltip> |
| 389 | <v-tooltip top v-if="role != 'TEACHER' "> | 389 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 390 | <img | 390 | <img |
| 391 | slot="activator" | 391 | slot="activator" |
| 392 | style="cursor:pointer; width:20px; height:18px; " | 392 | style="cursor:pointer; width:20px; height:18px; " |
| 393 | class="mr-3" | 393 | class="mr-3" |
| 394 | @click="editItem(props.item)" | 394 | @click="editItem(props.item)" |
| 395 | src="/static/icon/edit.png" | 395 | src="/static/icon/edit.png" |
| 396 | /> | 396 | /> |
| 397 | <span>Edit</span> | 397 | <span>Edit</span> |
| 398 | </v-tooltip> | 398 | </v-tooltip> |
| 399 | <v-tooltip top v-if="role != 'TEACHER' "> | 399 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 400 | <img | 400 | <img |
| 401 | slot="activator" | 401 | slot="activator" |
| 402 | style="cursor:pointer; width:20px; height:20px; " | 402 | style="cursor:pointer; width:20px; height:20px; " |
| 403 | @click="deleteSchedule(props.item)" | 403 | @click="deleteSchedule(props.item)" |
| 404 | src="/static/icon/delete.png" | 404 | src="/static/icon/delete.png" |
| 405 | /> | 405 | /> |
| 406 | <span>Delete</span> | 406 | <span>Delete</span> |
| 407 | </v-tooltip> | 407 | </v-tooltip> |
| 408 | </span> | 408 | </span> |
| 409 | </td> | 409 | </td> |
| 410 | </tr> | 410 | </tr> |
| 411 | </template> | 411 | </template> |
| 412 | <v-alert | 412 | <v-alert |
| 413 | slot="no-results" | 413 | slot="no-results" |
| 414 | :value="true" | 414 | :value="true" |
| 415 | color="error" | 415 | color="error" |
| 416 | icon="warning" | 416 | icon="warning" |
| 417 | >Your search for "{{ search }}" found no results.</v-alert> | 417 | >Your search for "{{ search }}" found no results.</v-alert> |
| 418 | </v-data-table> | 418 | </v-data-table> |
| 419 | 419 | ||
| 420 | <!-- ****** ADD Exam Schedule ****** --> | 420 | <!-- ****** ADD Exam Schedule ****** --> |
| 421 | <v-dialog v-model="addExamScheduleDialog" max-width="600" v-if="addExamScheduleDialog"> | 421 | <v-dialog v-model="addExamScheduleDialog" max-width="600" v-if="addExamScheduleDialog" persistent> |
| 422 | <v-card flat class="card-style pa-2" dark> | 422 | <v-card flat class="card-style pa-2" dark> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs12> | 424 | <v-flex xs12> |
| 425 | <label class="title text-xs-center">Add Exam Schedule</label> | 425 | <label class="title text-xs-center">Add Exam Schedule</label> |
| 426 | <v-icon | 426 | <v-icon |
| 427 | size="24" | 427 | size="24" |
| 428 | class="right" | 428 | class="right" |
| 429 | @click="$refs.form.reset();addExamScheduleDialog = false" | 429 | @click="$refs.form.reset();addExamScheduleDialog = false" |
| 430 | >cancel</v-icon> | 430 | >cancel</v-icon> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | </v-layout> | 432 | </v-layout> |
| 433 | <v-form ref="form" v-model="valid" lazy-validation> | 433 | <v-form ref="form" v-model="valid" lazy-validation> |
| 434 | <v-container fluid> | 434 | <v-container fluid> |
| 435 | <v-flex xs12> | 435 | <v-flex xs12> |
| 436 | <v-layout> | 436 | <v-layout> |
| 437 | <v-flex xs5 class="pt-4 subheading"> | 437 | <v-flex xs5 class="pt-4 subheading"> |
| 438 | <label class="right">Exam Name:</label> | 438 | <label class="right">Exam Name:</label> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | <v-flex xs7 sm7 md6 class="ml-3"> | 440 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 441 | <v-select | 441 | <v-select |
| 442 | label="Select your Exam Name" | 442 | label="Select your Exam Name" |
| 443 | :rules="examRules" | 443 | :rules="examRules" |
| 444 | :items="examList" | 444 | :items="examList" |
| 445 | v-model="addSchedule.examId" | 445 | v-model="addSchedule.examId" |
| 446 | item-text="examName" | 446 | item-text="examName" |
| 447 | item-value="_id" | 447 | item-value="_id" |
| 448 | ></v-select> | 448 | ></v-select> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | </v-layout> | 450 | </v-layout> |
| 451 | </v-flex> | 451 | </v-flex> |
| 452 | <v-flex xs12> | 452 | <v-flex xs12> |
| 453 | <v-layout> | 453 | <v-layout> |
| 454 | <v-flex xs5 class="pt-4 subheading"> | 454 | <v-flex xs5 class="pt-4 subheading"> |
| 455 | <label class="right">Class:</label> | 455 | <label class="right">Class:</label> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | <v-flex xs7 sm7 md6 class="ml-3"> | 457 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 458 | <v-select | 458 | <v-select |
| 459 | v-model="addSchedule.classId" | 459 | v-model="addSchedule.classId" |
| 460 | label="Select your class" | 460 | label="Select your class" |
| 461 | type="text" | 461 | type="text" |
| 462 | :items="classList" | 462 | :items="classList" |
| 463 | item-text="classNum" | 463 | item-text="classNum" |
| 464 | item-value="_id" | 464 | item-value="_id" |
| 465 | :rules="classRules" | 465 | :rules="classRules" |
| 466 | @change="getSections(addSchedule.classId)" | 466 | @change="getSections(addSchedule.classId)" |
| 467 | required | 467 | required |
| 468 | ></v-select> | 468 | ></v-select> |
| 469 | </v-flex> | 469 | </v-flex> |
| 470 | </v-layout> | 470 | </v-layout> |
| 471 | </v-flex> | 471 | </v-flex> |
| 472 | <v-flex xs12> | 472 | <v-flex xs12> |
| 473 | <v-layout> | 473 | <v-layout> |
| 474 | <v-flex xs5 class="pt-4 subheading"> | 474 | <v-flex xs5 class="pt-4 subheading"> |
| 475 | <label class="right">Section:</label> | 475 | <label class="right">Section:</label> |
| 476 | </v-flex> | 476 | </v-flex> |
| 477 | <v-flex xs7 sm7 md6 class="ml-3"> | 477 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 478 | <v-select | 478 | <v-select |
| 479 | :items="addSection" | 479 | :items="addSection" |
| 480 | label="Select Section" | 480 | label="Select Section" |
| 481 | v-model="addSchedule.sectionId" | 481 | v-model="addSchedule.sectionId" |
| 482 | item-text="name" | 482 | item-text="name" |
| 483 | item-value="_id" | 483 | item-value="_id" |
| 484 | name="Select Section" | 484 | name="Select Section" |
| 485 | :rules="sectionRules" | 485 | :rules="sectionRules" |
| 486 | required | 486 | required |
| 487 | ></v-select> | 487 | ></v-select> |
| 488 | </v-flex> | 488 | </v-flex> |
| 489 | </v-layout> | 489 | </v-layout> |
| 490 | </v-flex> | 490 | </v-flex> |
| 491 | <v-flex xs12> | 491 | <v-flex xs12> |
| 492 | <v-layout> | 492 | <v-layout> |
| 493 | <v-flex xs5 class="pt-4 subheading"> | 493 | <v-flex xs5 class="pt-4 subheading"> |
| 494 | <label class="right">Subject Name:</label> | 494 | <label class="right">Subject Name:</label> |
| 495 | </v-flex> | 495 | </v-flex> |
| 496 | <v-flex xs7 sm7 md6 class="ml-3"> | 496 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 497 | <v-select | 497 | <v-select |
| 498 | :items="subjects" | 498 | :items="subjects" |
| 499 | label="Select Subject" | 499 | label="Select Subject" |
| 500 | v-model="addSchedule.subjectName" | 500 | v-model="addSchedule.subjectName" |
| 501 | item-text="subjectName" | 501 | item-text="subjectName" |
| 502 | item-value="subjectName" | 502 | item-value="subjectName" |
| 503 | name="Select Section" | 503 | name="Select Section" |
| 504 | :rules="subjectRules" | 504 | :rules="subjectRules" |
| 505 | required | 505 | required |
| 506 | ></v-select> | 506 | ></v-select> |
| 507 | </v-flex> | 507 | </v-flex> |
| 508 | </v-layout> | 508 | </v-layout> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | <v-flex xs12> | 510 | <v-flex xs12> |
| 511 | <v-layout> | 511 | <v-layout> |
| 512 | <v-flex xs5 class="pt-4 subheading"> | 512 | <v-flex xs5 class="pt-4 subheading"> |
| 513 | <label class="right">Date:</label> | 513 | <label class="right">Date:</label> |
| 514 | </v-flex> | 514 | </v-flex> |
| 515 | <v-flex xs7 sm7 md6 class="ml-3"> | 515 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 516 | <v-menu | 516 | <v-menu |
| 517 | ref="menu2" | 517 | ref="menu2" |
| 518 | :close-on-content-click="false" | 518 | :close-on-content-click="false" |
| 519 | v-model="menu2" | 519 | v-model="menu2" |
| 520 | :nudge-right="40" | 520 | :nudge-right="40" |
| 521 | :return-value.sync="addSchedule.date" | 521 | :return-value.sync="addSchedule.date" |
| 522 | lazy | 522 | lazy |
| 523 | transition="scale-transition" | 523 | transition="scale-transition" |
| 524 | offset-y | 524 | offset-y |
| 525 | full-width | 525 | full-width |
| 526 | min-width="290px" | 526 | min-width="290px" |
| 527 | > | 527 | > |
| 528 | <v-text-field | 528 | <v-text-field |
| 529 | slot="activator" | 529 | slot="activator" |
| 530 | v-model="addSchedule.date" | 530 | v-model="addSchedule.date" |
| 531 | :rules="examScheduleDateRules" | 531 | :rules="examScheduleDateRules" |
| 532 | label="Select Date" | 532 | label="Select Date" |
| 533 | append-icon="event" | 533 | append-icon="event" |
| 534 | readonly | 534 | readonly |
| 535 | ></v-text-field> | 535 | ></v-text-field> |
| 536 | <v-date-picker | 536 | <v-date-picker |
| 537 | v-model="addSchedule.date" | 537 | v-model="addSchedule.date" |
| 538 | @input="$refs.menu2.save(addSchedule.date)" | 538 | @input="$refs.menu2.save(addSchedule.date)" |
| 539 | ></v-date-picker> | 539 | ></v-date-picker> |
| 540 | </v-menu> | 540 | </v-menu> |
| 541 | </v-flex> | 541 | </v-flex> |
| 542 | </v-layout> | 542 | </v-layout> |
| 543 | </v-flex> | 543 | </v-flex> |
| 544 | <v-flex xs12> | 544 | <v-flex xs12> |
| 545 | <v-layout> | 545 | <v-layout> |
| 546 | <v-flex xs5 class="pt-4 subheading"> | 546 | <v-flex xs5 class="pt-4 subheading"> |
| 547 | <label class="right">Time From:</label> | 547 | <label class="right">Time From:</label> |
| 548 | </v-flex> | 548 | </v-flex> |
| 549 | <v-flex xs7 sm7 md6 class="ml-3"> | 549 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 550 | <v-menu | 550 | <v-menu |
| 551 | ref="menuA" | 551 | ref="menuA" |
| 552 | :close-on-content-click="false" | 552 | :close-on-content-click="false" |
| 553 | v-model="menuB" | 553 | v-model="menuB" |
| 554 | :nudge-right="40" | 554 | :nudge-right="40" |
| 555 | :return-value.sync="addSchedule.timeFrom" | 555 | :return-value.sync="addSchedule.timeFrom" |
| 556 | lazy | 556 | lazy |
| 557 | transition="scale-transition" | 557 | transition="scale-transition" |
| 558 | offset-y | 558 | offset-y |
| 559 | full-width | 559 | full-width |
| 560 | max-width="290px" | 560 | max-width="290px" |
| 561 | min-width="290px" | 561 | min-width="290px" |
| 562 | > | 562 | > |
| 563 | <v-text-field | 563 | <v-text-field |
| 564 | slot="activator" | 564 | slot="activator" |
| 565 | v-model="addSchedule.timeIn" | 565 | v-model="addSchedule.timeIn" |
| 566 | label="Select your time From" | 566 | label="Select your time From" |
| 567 | append-icon="access_time" | 567 | append-icon="access_time" |
| 568 | :rules="timeInRules" | 568 | :rules="timeInRules" |
| 569 | readonly | 569 | readonly |
| 570 | ></v-text-field> | 570 | ></v-text-field> |
| 571 | <v-time-picker | 571 | <v-time-picker |
| 572 | v-model="addSchedule.timeIn" | 572 | v-model="addSchedule.timeIn" |
| 573 | @change="$refs.menuA.save(addSchedule.timeIn)" | 573 | @change="$refs.menuA.save(addSchedule.timeIn)" |
| 574 | ></v-time-picker> | 574 | ></v-time-picker> |
| 575 | </v-menu> | 575 | </v-menu> |
| 576 | </v-flex> | 576 | </v-flex> |
| 577 | </v-layout> | 577 | </v-layout> |
| 578 | </v-flex> | 578 | </v-flex> |
| 579 | <v-flex xs12> | 579 | <v-flex xs12> |
| 580 | <v-layout> | 580 | <v-layout> |
| 581 | <v-flex xs5 class="pt-4 subheading"> | 581 | <v-flex xs5 class="pt-4 subheading"> |
| 582 | <label class="right">Time To:</label> | 582 | <label class="right">Time To:</label> |
| 583 | </v-flex> | 583 | </v-flex> |
| 584 | <v-flex xs7 sm7 md6 class="ml-3"> | 584 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 585 | <v-menu | 585 | <v-menu |
| 586 | ref="menu" | 586 | ref="menu" |
| 587 | :close-on-content-click="false" | 587 | :close-on-content-click="false" |
| 588 | v-model="menu1" | 588 | v-model="menu1" |
| 589 | :nudge-right="40" | 589 | :nudge-right="40" |
| 590 | :return-value.sync="addSchedule.timeTo" | 590 | :return-value.sync="addSchedule.timeTo" |
| 591 | lazy | 591 | lazy |
| 592 | transition="scale-transition" | 592 | transition="scale-transition" |
| 593 | offset-y | 593 | offset-y |
| 594 | full-width | 594 | full-width |
| 595 | max-width="290px" | 595 | max-width="290px" |
| 596 | min-width="290px" | 596 | min-width="290px" |
| 597 | > | 597 | > |
| 598 | <v-text-field | 598 | <v-text-field |
| 599 | slot="activator" | 599 | slot="activator" |
| 600 | v-model="addSchedule.timeTo" | 600 | v-model="addSchedule.timeTo" |
| 601 | label="Select your Time To" | 601 | label="Select your Time To" |
| 602 | append-icon="access_time" | 602 | append-icon="access_time" |
| 603 | :rules="timeOutRules" | 603 | :rules="timeOutRules" |
| 604 | readonly | 604 | readonly |
| 605 | ></v-text-field> | 605 | ></v-text-field> |
| 606 | <v-time-picker | 606 | <v-time-picker |
| 607 | v-model="addSchedule.timeTo" | 607 | v-model="addSchedule.timeTo" |
| 608 | @change="$refs.menu.save(addSchedule.timeTo)" | 608 | @change="$refs.menu.save(addSchedule.timeTo)" |
| 609 | ></v-time-picker> | 609 | ></v-time-picker> |
| 610 | </v-menu> | 610 | </v-menu> |
| 611 | </v-flex> | 611 | </v-flex> |
| 612 | </v-layout> | 612 | </v-layout> |
| 613 | </v-flex> | 613 | </v-flex> |
| 614 | <v-flex xs12> | 614 | <v-flex xs12> |
| 615 | <v-layout> | 615 | <v-layout> |
| 616 | <v-flex xs5 class="pt-4 subheading"> | 616 | <v-flex xs5 class="pt-4 subheading"> |
| 617 | <label class="right">Room:</label> | 617 | <label class="right">Room:</label> |
| 618 | </v-flex> | 618 | </v-flex> |
| 619 | <v-flex xs7 sm7 md6 class="ml-3"> | 619 | <v-flex xs7 sm7 md6 class="ml-3"> |
| 620 | <v-text-field | 620 | <v-text-field |
| 621 | placeholder="fill your room" | 621 | placeholder="fill your room" |
| 622 | :rules="roomRules" | 622 | :rules="roomRules" |
| 623 | v-model="addSchedule.room" | 623 | v-model="addSchedule.room" |
| 624 | @keyup.enter="submit" | 624 | @keyup.enter="submit" |
| 625 | ></v-text-field> | 625 | ></v-text-field> |
| 626 | </v-flex> | 626 | </v-flex> |
| 627 | </v-layout> | 627 | </v-layout> |
| 628 | </v-flex> | 628 | </v-flex> |
| 629 | <v-layout> | 629 | <v-layout> |
| 630 | <v-flex xs12> | 630 | <v-flex xs12> |
| 631 | <v-card-actions> | 631 | <v-card-actions> |
| 632 | <v-spacer class="hidden-xs-only"></v-spacer> | 632 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 633 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 633 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 634 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 634 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 635 | </v-card-actions> | 635 | </v-card-actions> |
| 636 | </v-flex> | 636 | </v-flex> |
| 637 | </v-layout> | 637 | </v-layout> |
| 638 | </v-container> | 638 | </v-container> |
| 639 | </v-form> | 639 | </v-form> |
| 640 | </v-card> | 640 | </v-card> |
| 641 | </v-dialog> | 641 | </v-dialog> |
| 642 | <v-snackbar | 642 | <v-snackbar |
| 643 | :timeout="timeout" | 643 | :timeout="timeout" |
| 644 | :top="y === 'top'" | 644 | :top="y === 'top'" |
| 645 | :right="x === 'right'" | 645 | :right="x === 'right'" |
| 646 | :vertical="mode === 'vertical'" | 646 | :vertical="mode === 'vertical'" |
| 647 | v-model="snackbar" | 647 | v-model="snackbar" |
| 648 | :color="color" | 648 | :color="color" |
| 649 | >{{ text }}</v-snackbar> | 649 | >{{ text }}</v-snackbar> |
| 650 | <div class="loader" v-if="showLoader"> | 650 | <div class="loader" v-if="showLoader"> |
| 651 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 651 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 652 | </div> | 652 | </div> |
| 653 | </v-container> | 653 | </v-container> |
| 654 | </template> | 654 | </template> |
| 655 | 655 | ||
| 656 | <script> | 656 | <script> |
| 657 | import http from "@/Services/http.js"; | 657 | import http from "@/Services/http.js"; |
| 658 | import moment from "moment"; | 658 | import moment from "moment"; |
| 659 | 659 | ||
| 660 | export default { | 660 | export default { |
| 661 | data: () => ({ | 661 | data: () => ({ |
| 662 | snackbar: false, | 662 | snackbar: false, |
| 663 | date: null, | 663 | date: null, |
| 664 | editDate: false, | 664 | editDate: false, |
| 665 | menu1: false, | 665 | menu1: false, |
| 666 | menuB: false, | 666 | menuB: false, |
| 667 | menu2: false, | 667 | menu2: false, |
| 668 | menuEdit: false, | 668 | menuEdit: false, |
| 669 | timeToEdit: false, | 669 | timeToEdit: false, |
| 670 | show: true, | 670 | show: true, |
| 671 | showSearch: false, | 671 | showSearch: false, |
| 672 | addExamScheduleDialog: false, | 672 | addExamScheduleDialog: false, |
| 673 | color: "", | 673 | color: "", |
| 674 | y: "top", | 674 | y: "top", |
| 675 | x: "right", | 675 | x: "right", |
| 676 | mode: "", | 676 | mode: "", |
| 677 | timeout: 10000, | 677 | timeout: 10000, |
| 678 | text: "", | 678 | text: "", |
| 679 | loading: false, | 679 | loading: false, |
| 680 | date: null, | 680 | date: null, |
| 681 | search: "", | 681 | search: "", |
| 682 | showLoader: false, | 682 | showLoader: false, |
| 683 | editExamScheduleDialog: false, | 683 | editExamScheduleDialog: false, |
| 684 | profileExamScheduleDialog: false, | 684 | profileExamScheduleDialog: false, |
| 685 | valid: true, | 685 | valid: true, |
| 686 | role: "", | 686 | role: "", |
| 687 | pagination: { | 687 | pagination: { |
| 688 | rowsPerPage: 10, | 688 | rowsPerPage: 10, |
| 689 | }, | 689 | }, |
| 690 | examRules: [(v) => !!v || "Exam Name is required"], | 690 | examRules: [(v) => !!v || "Exam Name is required"], |
| 691 | classRules: [(v) => !!v || "Class Name is required"], | 691 | classRules: [(v) => !!v || "Class Name is required"], |
| 692 | sectionRules: [(v) => !!v || "section is required"], | 692 | sectionRules: [(v) => !!v || "section is required"], |
| 693 | subjectRules: [(v) => !!v || "Subject is required"], | 693 | subjectRules: [(v) => !!v || "Subject is required"], |
| 694 | timeInRules: [(v) => !!v || "Time In is required"], | 694 | timeInRules: [(v) => !!v || "Time In is required"], |
| 695 | timeOutRules: [(v) => !!v || "time Out s is required"], | 695 | timeOutRules: [(v) => !!v || "time Out s is required"], |
| 696 | roomRules: [(v) => !!v || "Room is required"], | 696 | roomRules: [(v) => !!v || "Room is required"], |
| 697 | examScheduleDateRules: [(v) => !!v || "Date is required"], | 697 | examScheduleDateRules: [(v) => !!v || "Date is required"], |
| 698 | headers: [ | 698 | headers: [ |
| 699 | { | 699 | { |
| 700 | align: "", | 700 | align: "", |
| 701 | text: "No", | 701 | text: "No", |
| 702 | sortable: false, | 702 | sortable: false, |
| 703 | value: "No", | 703 | value: "No", |
| 704 | }, | 704 | }, |
| 705 | { | 705 | { |
| 706 | text: "Exam Name", | 706 | text: "Exam Name", |
| 707 | vaue: "examId.examName", | 707 | vaue: "examId.examName", |
| 708 | sortable: false, | 708 | sortable: false, |
| 709 | align: "center", | 709 | align: "center", |
| 710 | }, | 710 | }, |
| 711 | { | 711 | { |
| 712 | text: "Class", | 712 | text: "Class", |
| 713 | value: "classId.classNum", | 713 | value: "classId.classNum", |
| 714 | sortable: false, | 714 | sortable: false, |
| 715 | align: "center", | 715 | align: "center", |
| 716 | }, | 716 | }, |
| 717 | // { | 717 | // { |
| 718 | // text: "Section", | 718 | // text: "Section", |
| 719 | // value: "sectionId.name", | 719 | // value: "sectionId.name", |
| 720 | // sortable: false, | 720 | // sortable: false, |
| 721 | // align: "center" | 721 | // align: "center" |
| 722 | // }, | 722 | // }, |
| 723 | { | 723 | { |
| 724 | text: "Subject Name", | 724 | text: "Subject Name", |
| 725 | value: "subjectName", | 725 | value: "subjectName", |
| 726 | sortable: false, | 726 | sortable: false, |
| 727 | align: "center", | 727 | align: "center", |
| 728 | }, | 728 | }, |
| 729 | { | 729 | { |
| 730 | text: "Date", | 730 | text: "Date", |
| 731 | value: "date", | 731 | value: "date", |
| 732 | sortable: false, | 732 | sortable: false, |
| 733 | align: "center", | 733 | align: "center", |
| 734 | }, | 734 | }, |
| 735 | { | 735 | { |
| 736 | text: "Time", | 736 | text: "Time", |
| 737 | value: "timeFrom", | 737 | value: "timeFrom", |
| 738 | sortable: false, | 738 | sortable: false, |
| 739 | align: "center", | 739 | align: "center", |
| 740 | }, | 740 | }, |
| 741 | { | 741 | { |
| 742 | text: "Room", | 742 | text: "Room", |
| 743 | value: "room", | 743 | value: "room", |
| 744 | sortable: false, | 744 | sortable: false, |
| 745 | align: "center", | 745 | align: "center", |
| 746 | }, | 746 | }, |
| 747 | { text: "Action", value: "", sortable: false, align: "center" }, | 747 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 748 | ], | 748 | ], |
| 749 | classList: [], | 749 | classList: [], |
| 750 | addSection: [], | 750 | addSection: [], |
| 751 | examList: [], | 751 | examList: [], |
| 752 | subjects: [], | 752 | subjects: [], |
| 753 | addSchedule: {}, | 753 | addSchedule: {}, |
| 754 | editedItem: { | 754 | editedItem: { |
| 755 | sectionId: { | 755 | sectionId: { |
| 756 | name: "", | 756 | name: "", |
| 757 | }, | 757 | }, |
| 758 | }, | 758 | }, |
| 759 | getScheduleData: {}, | 759 | getScheduleData: {}, |
| 760 | ScheduleData: [], | 760 | ScheduleData: [], |
| 761 | token: "", | 761 | token: "", |
| 762 | }), | 762 | }), |
| 763 | watch: { | 763 | watch: { |
| 764 | addExamScheduleDialog: function (val) { | 764 | addExamScheduleDialog: function (val) { |
| 765 | if (!val) { | 765 | if (!val) { |
| 766 | this.addSchedule = []; | 766 | this.addSchedule = []; |
| 767 | } | 767 | } |
| 768 | }, | 768 | }, |
| 769 | }, | 769 | }, |
| 770 | methods: { | 770 | methods: { |
| 771 | dates: function (date) { | 771 | dates: function (date) { |
| 772 | return moment(date).format("MMMM DD, YYYY"); | 772 | return moment(date).format("MMMM DD, YYYY"); |
| 773 | }, | 773 | }, |
| 774 | pickFile() { | 774 | pickFile() { |
| 775 | this.$refs.image.click(); | 775 | this.$refs.image.click(); |
| 776 | }, | 776 | }, |
| 777 | getSchedulesList() { | 777 | getSchedulesList() { |
| 778 | if (this.addSchedule.classId) { | 778 | if (this.addSchedule.classId) { |
| 779 | this.getScheduleData.classId = this.addSchedule.classId; | 779 | this.getScheduleData.classId = this.addSchedule.classId; |
| 780 | } | 780 | } |
| 781 | this.showLoader = true; | 781 | this.showLoader = true; |
| 782 | http() | 782 | http() |
| 783 | .get("/getSchedulesList", { | 783 | .get("/getSchedulesList", { |
| 784 | params: { | 784 | params: { |
| 785 | classId: this.getScheduleData.classId, | 785 | classId: this.getScheduleData.classId, |
| 786 | sectionId: this.getScheduleData.sectionId, | 786 | sectionId: this.getScheduleData.sectionId, |
| 787 | }, | 787 | }, |
| 788 | headers: { Authorization: "Bearer " + this.token }, | 788 | headers: { Authorization: "Bearer " + this.token }, |
| 789 | }) | 789 | }) |
| 790 | .then((response) => { | 790 | .then((response) => { |
| 791 | this.ScheduleData = response.data.data; | 791 | this.ScheduleData = response.data.data; |
| 792 | // console.log("this.ScheduleData", this.ScheduleData); | 792 | // console.log("this.ScheduleData", this.ScheduleData); |
| 793 | this.showLoader = false; | 793 | this.showLoader = false; |
| 794 | }) | 794 | }) |
| 795 | .catch((error) => { | 795 | .catch((error) => { |
| 796 | // console.log("err====>", err); | 796 | // console.log("err====>", err); |
| 797 | this.showLoader = false; | 797 | this.showLoader = false; |
| 798 | this.loadingSearch = false; | 798 | this.loadingSearch = false; |
| 799 | this.snackbar = true; | 799 | this.snackbar = true; |
| 800 | this.color = "error"; | 800 | this.color = "error"; |
| 801 | this.text = error.response.data.message; | 801 | this.text = error.response.data.message; |
| 802 | if (error.response.status === 401) { | 802 | if (error.response.status === 401) { |
| 803 | this.$router.replace({ path: "/" }); | 803 | this.$router.replace({ path: "/" }); |
| 804 | this.$store.dispatch("setToken", null); | 804 | this.$store.dispatch("setToken", null); |
| 805 | this.$store.dispatch("Id", null); | 805 | this.$store.dispatch("Id", null); |
| 806 | } | 806 | } |
| 807 | }); | 807 | }); |
| 808 | }, | 808 | }, |
| 809 | editItem(item) { | 809 | editItem(item) { |
| 810 | // console.log("item", item); | 810 | // console.log("item", item); |
| 811 | this.editedIndex = this.ScheduleData.indexOf(item); | 811 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 812 | this.editedItem = Object.assign({}, item); | 812 | this.editedItem = Object.assign({}, item); |
| 813 | this.editedItem.examId = this.editedItem.examId._id; | 813 | this.editedItem.examId = this.editedItem.examId._id; |
| 814 | this.editedItem.classId = this.editedItem.classId._id; | 814 | this.editedItem.classId = this.editedItem.classId._id; |
| 815 | this.editedItem.sectionId = | 815 | this.editedItem.sectionId = |
| 816 | this.editedItem.sectionId === null | 816 | this.editedItem.sectionId === null |
| 817 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") | 817 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") |
| 818 | : this.editedItem.sectionId._id; | 818 | : this.editedItem.sectionId._id; |
| 819 | this.editedItem.date = | 819 | this.editedItem.date = |
| 820 | this.editedItem.date != undefined | 820 | this.editedItem.date != undefined |
| 821 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 821 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 822 | : (this.editedItem.date = ""); | 822 | : (this.editedItem.date = ""); |
| 823 | this.editExamScheduleDialog = true; | 823 | this.editExamScheduleDialog = true; |
| 824 | }, | 824 | }, |
| 825 | profile(item) { | 825 | profile(item) { |
| 826 | this.editedIndex = this.ScheduleData.indexOf(item); | 826 | this.editedIndex = this.ScheduleData.indexOf(item); |
| 827 | this.editedItem = Object.assign({}, item); | 827 | this.editedItem = Object.assign({}, item); |
| 828 | this.editedItem.examId = this.editedItem.examId.examName; | 828 | this.editedItem.examId = this.editedItem.examId.examName; |
| 829 | this.editedItem.classId = this.editedItem.classId.classNum; | 829 | this.editedItem.classId = this.editedItem.classId.classNum; |
| 830 | this.editedItem.sectionId = | 830 | this.editedItem.sectionId = |
| 831 | this.editedItem.sectionId === null | 831 | this.editedItem.sectionId === null |
| 832 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") | 832 | ? (this.editedItem.sectionId = this.editedItem.sectionId = "") |
| 833 | : this.editedItem.sectionId.name; | 833 | : this.editedItem.sectionId.name; |
| 834 | this.profileExamScheduleDialog = true; | 834 | this.profileExamScheduleDialog = true; |
| 835 | }, | 835 | }, |
| 836 | deleteSchedule(item) { | 836 | deleteSchedule(item) { |
| 837 | let deleteSchedule = { | 837 | let deleteSchedule = { |
| 838 | scheduleId: item._id, | 838 | scheduleId: item._id, |
| 839 | }; | 839 | }; |
| 840 | http() | 840 | http() |
| 841 | .delete( | 841 | .delete( |
| 842 | "/deleteSchedule", | 842 | "/deleteSchedule", |
| 843 | confirm("Are you sure you want to Delete this?") && { | 843 | confirm("Are you sure you want to Delete this?") && { |
| 844 | params: deleteSchedule, | 844 | params: deleteSchedule, |
| 845 | } | 845 | } |
| 846 | ) | 846 | ) |
| 847 | .then((response) => { | 847 | .then((response) => { |
| 848 | this.snackbar = true; | 848 | this.snackbar = true; |
| 849 | this.text = response.data.message; | 849 | this.text = response.data.message; |
| 850 | this.color = "green"; | 850 | this.color = "green"; |
| 851 | this.getSchedulesList(); | 851 | this.getSchedulesList(); |
| 852 | }) | 852 | }) |
| 853 | .catch((error) => { | 853 | .catch((error) => { |
| 854 | this.snackbar = true; | 854 | this.snackbar = true; |
| 855 | this.color = "error"; | 855 | this.color = "error"; |
| 856 | this.text = error.response.data.message; | 856 | this.text = error.response.data.message; |
| 857 | }); | 857 | }); |
| 858 | }, | 858 | }, |
| 859 | close() { | 859 | close() { |
| 860 | this.dialog = false; | 860 | this.dialog = false; |
| 861 | }, | 861 | }, |
| 862 | submit() { | 862 | submit() { |
| 863 | if (this.$refs.form.validate()) { | 863 | if (this.$refs.form.validate()) { |
| 864 | this.loading = true; | 864 | this.loading = true; |
| 865 | http() | 865 | http() |
| 866 | .post("/createSchedule", this.addSchedule) | 866 | .post("/createSchedule", this.addSchedule) |
| 867 | .then((response) => { | 867 | .then((response) => { |
| 868 | this.loading = false; | 868 | this.loading = false; |
| 869 | this.snackbar = true; | 869 | this.snackbar = true; |
| 870 | this.text = response.data.message; | 870 | this.text = response.data.message; |
| 871 | this.color = "green"; | 871 | this.color = "green"; |
| 872 | http() | 872 | http() |
| 873 | .get("/getSchedulesList", { | 873 | .get("/getSchedulesList", { |
| 874 | params: { | 874 | params: { |
| 875 | classId: this.addSchedule.classId, | 875 | classId: this.addSchedule.classId, |
| 876 | sectionId: this.addSchedule.sectionId, | 876 | sectionId: this.addSchedule.sectionId, |
| 877 | }, | 877 | }, |
| 878 | headers: { Authorization: "Bearer " + this.token }, | 878 | headers: { Authorization: "Bearer " + this.token }, |
| 879 | }) | 879 | }) |
| 880 | .then((response) => { | 880 | .then((response) => { |
| 881 | this.ScheduleData = response.data.data; | 881 | this.ScheduleData = response.data.data; |
| 882 | this.showLoader = false; | 882 | this.showLoader = false; |
| 883 | }) | 883 | }) |
| 884 | .catch((error) => { | 884 | .catch((error) => { |
| 885 | this.showLoader = false; | 885 | this.showLoader = false; |
| 886 | this.loadingSearch = false; | 886 | this.loadingSearch = false; |
| 887 | this.snackbar = true; | 887 | this.snackbar = true; |
| 888 | this.color = "error"; | 888 | this.color = "error"; |
| 889 | this.text = error.response.data.message; | 889 | this.text = error.response.data.message; |
| 890 | if (error.response.status === 401) { | 890 | if (error.response.status === 401) { |
| 891 | this.$router.replace({ path: "/" }); | 891 | this.$router.replace({ path: "/" }); |
| 892 | this.$store.dispatch("setToken", null); | 892 | this.$store.dispatch("setToken", null); |
| 893 | this.$store.dispatch("Id", null); | 893 | this.$store.dispatch("Id", null); |
| 894 | } | 894 | } |
| 895 | }); | 895 | }); |
| 896 | this.addExamScheduleDialog = false; | 896 | this.addExamScheduleDialog = false; |
| 897 | // this.clear(); | 897 | // this.clear(); |
| 898 | }) | 898 | }) |
| 899 | .catch((error) => { | 899 | .catch((error) => { |
| 900 | this.snackbar = true; | 900 | this.snackbar = true; |
| 901 | this.text = error.response.data.message; | 901 | this.text = error.response.data.message; |
| 902 | this.color = "red"; | 902 | this.color = "red"; |
| 903 | this.loading = false; | 903 | this.loading = false; |
| 904 | }); | 904 | }); |
| 905 | } | 905 | } |
| 906 | }, | 906 | }, |
| 907 | clear() { | 907 | clear() { |
| 908 | this.$refs.form.reset(); | 908 | this.$refs.form.reset(); |
| 909 | this.disable = false; | 909 | this.disable = false; |
| 910 | this.loading = false; | 910 | this.loading = false; |
| 911 | }, | 911 | }, |
| 912 | update() { | 912 | update() { |
| 913 | this.editedItem.scheduleId = this.editedItem._id; | 913 | this.editedItem.scheduleId = this.editedItem._id; |
| 914 | http() | 914 | http() |
| 915 | .put("/updateSchedule", this.editedItem) | 915 | .put("/updateSchedule", this.editedItem) |
| 916 | .then((response) => { | 916 | .then((response) => { |
| 917 | this.snackbar = true; | 917 | this.snackbar = true; |
| 918 | this.text = "Successfully Edit Exam Schedule"; | 918 | this.text = "Successfully Edit Exam Schedule"; |
| 919 | this.color = "green"; | 919 | this.color = "green"; |
| 920 | this.editExamScheduleDialog = false; | 920 | this.editExamScheduleDialog = false; |
| 921 | this.getSchedulesList(); | 921 | this.getSchedulesList(); |
| 922 | this.close(); | 922 | this.close(); |
| 923 | }) | 923 | }) |
| 924 | .catch((error) => { | 924 | .catch((error) => { |
| 925 | this.snackbar = true; | 925 | this.snackbar = true; |
| 926 | this.text = error.response.data.messages; | 926 | this.text = error.response.data.messages; |
| 927 | this.color = "error"; | 927 | this.color = "error"; |
| 928 | this.loading = false; | 928 | this.loading = false; |
| 929 | }); | 929 | }); |
| 930 | }, | 930 | }, |
| 931 | getClass() { | 931 | getClass() { |
| 932 | http() | 932 | http() |
| 933 | .get("/getClassesList", { | 933 | .get("/getClassesList", { |
| 934 | headers: { Authorization: "Bearer " + this.token }, | 934 | headers: { Authorization: "Bearer " + this.token }, |
| 935 | }) | 935 | }) |
| 936 | .then((response) => { | 936 | .then((response) => { |
| 937 | this.classList = response.data.data; | 937 | this.classList = response.data.data; |
| 938 | }) | 938 | }) |
| 939 | .catch((err) => { | 939 | .catch((err) => { |
| 940 | // console.log("err====>", err); | 940 | // console.log("err====>", err); |
| 941 | }); | 941 | }); |
| 942 | }, | 942 | }, |
| 943 | getSections(_id) { | 943 | getSections(_id) { |
| 944 | for (let i = 0; i < this.classList.length; i++) { | 944 | for (let i = 0; i < this.classList.length; i++) { |
| 945 | if (_id == this.classList[i]._id) { | 945 | if (_id == this.classList[i]._id) { |
| 946 | this.subjects = this.classList[i].subjects; | 946 | this.subjects = this.classList[i].subjects; |
| 947 | } | 947 | } |
| 948 | } | 948 | } |
| 949 | http() | 949 | http() |
| 950 | .get( | 950 | .get( |
| 951 | "/getSectionsList", | 951 | "/getSectionsList", |
| 952 | { params: { classId: _id } }, | 952 | { params: { classId: _id } }, |
| 953 | { | 953 | { |
| 954 | headers: { Authorization: "Bearer " + this.token }, | 954 | headers: { Authorization: "Bearer " + this.token }, |
| 955 | } | 955 | } |
| 956 | ) | 956 | ) |
| 957 | .then((response) => { | 957 | .then((response) => { |
| 958 | this.addSection = response.data.data; | 958 | this.addSection = response.data.data; |
| 959 | }) | 959 | }) |
| 960 | .catch((err) => {}); | 960 | .catch((err) => {}); |
| 961 | }, | 961 | }, |
| 962 | getExamList() { | 962 | getExamList() { |
| 963 | this.showLoader = true; | 963 | this.showLoader = true; |
| 964 | this.loadingSearch = true; | 964 | this.loadingSearch = true; |
| 965 | http() | 965 | http() |
| 966 | .get("/getExamsList", { | 966 | .get("/getExamsList", { |
| 967 | headers: { Authorization: "Bearer " + this.token }, | 967 | headers: { Authorization: "Bearer " + this.token }, |
| 968 | }) | 968 | }) |
| 969 | .then((response) => { | 969 | .then((response) => { |
| 970 | this.examList = response.data.data; | 970 | this.examList = response.data.data; |
| 971 | this.showLoader = false; | 971 | this.showLoader = false; |
| 972 | this.loadingSearch = false; | 972 | this.loadingSearch = false; |
| 973 | }) | 973 | }) |
| 974 | .catch((error) => { | 974 | .catch((error) => { |
| 975 | this.showLoader = false; | 975 | this.showLoader = false; |
| 976 | this.loadingSearch = false; | 976 | this.loadingSearch = false; |
| 977 | this.snackbar = true; | 977 | this.snackbar = true; |
| 978 | this.text = error.response.data.message; | 978 | this.text = error.response.data.message; |
| 979 | if (error.response.status === 401) { | 979 | if (error.response.status === 401) { |
| 980 | this.$router.replace({ path: "/" }); | 980 | this.$router.replace({ path: "/" }); |
| 981 | this.$store.dispatch("setToken", null); | 981 | this.$store.dispatch("setToken", null); |
| 982 | this.$store.dispatch("Id", null); | 982 | this.$store.dispatch("Id", null); |
| 983 | } | 983 | } |
| 984 | }); | 984 | }); |
| 985 | }, | 985 | }, |
| 986 | displaySearch() { | 986 | displaySearch() { |
| 987 | (this.show = false), (this.showSearch = true); | 987 | (this.show = false), (this.showSearch = true); |
| 988 | }, | 988 | }, |
| 989 | closeSearch() { | 989 | closeSearch() { |
| 990 | this.showSearch = false; | 990 | this.showSearch = false; |
| 991 | this.show = true; | 991 | this.show = true; |
| 992 | this.search = ""; | 992 | this.search = ""; |
| 993 | }, | 993 | }, |
| 994 | }, | 994 | }, |
| 995 | mounted() { | 995 | mounted() { |
| 996 | this.token = this.$store.state.token; | 996 | this.token = this.$store.state.token; |
| 997 | this.getClass(); | 997 | this.getClass(); |
| 998 | this.getExamList(); | 998 | this.getExamList(); |
| 999 | this.role = this.$store.state.role; | 999 | this.role = this.$store.state.role; |
| 1000 | }, | 1000 | }, |
| 1001 | }; | 1001 | }; |
| 1002 | </script> | 1002 | </script> |
src/pages/Exam/grade.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT GRADE ****** --> | 3 | <!-- ****** EDIT GRADE ****** --> |
| 4 | <v-dialog v-model="editGradeDialog" max-width="500px"> | 4 | <v-dialog v-model="editGradeDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Grade</label> | 8 | <label class="title text-xs-center">Edit Grade</label> |
| 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> | 12 | <v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout wrap> | 14 | <v-layout wrap> |
| 15 | <v-flex xs12 sm12> | 15 | <v-flex xs12 sm12> |
| 16 | <v-layout> | 16 | <v-layout> |
| 17 | <v-flex xs4 class="pt-4 subheading"> | 17 | <v-flex xs4 class="pt-4 subheading"> |
| 18 | <label class="right">Grade Name:</label> | 18 | <label class="right">Grade Name:</label> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | <v-flex xs7 class="ml-3"> | 20 | <v-flex xs7 class="ml-3"> |
| 21 | <v-text-field | 21 | <v-text-field |
| 22 | placeholder="fill your Grade Name" | 22 | placeholder="fill your Grade Name" |
| 23 | v-model="editedItem.gradeName" | 23 | v-model="editedItem.gradeName" |
| 24 | type="text" | 24 | type="text" |
| 25 | :rules="editGradeName" | 25 | :rules="editGradeName" |
| 26 | ></v-text-field> | 26 | ></v-text-field> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Grade Point:</label> | 33 | <label class="right">Grade Point:</label> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex xs7 class="ml-3"> | 35 | <v-flex xs7 class="ml-3"> |
| 36 | <v-text-field | 36 | <v-text-field |
| 37 | placeholder="fill your Grade Point" | 37 | placeholder="fill your Grade Point" |
| 38 | v-model="editedItem.gradePoint" | 38 | v-model="editedItem.gradePoint" |
| 39 | :rules="editGradePoint" | 39 | :rules="editGradePoint" |
| 40 | type="text" | 40 | type="text" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12 sm12> | 45 | <v-flex xs12 sm12> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs4 class="pt-4 subheading"> | 47 | <v-flex xs4 class="pt-4 subheading"> |
| 48 | <label class="right">Mark From:</label> | 48 | <label class="right">Mark From:</label> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | <v-flex xs7 class="ml-3"> | 50 | <v-flex xs7 class="ml-3"> |
| 51 | <v-text-field | 51 | <v-text-field |
| 52 | placeholder="fill your Mark From" | 52 | placeholder="fill your Mark From" |
| 53 | v-model="editedItem.marksFrom" | 53 | v-model="editedItem.marksFrom" |
| 54 | :rules="editMarksFrom" | 54 | :rules="editMarksFrom" |
| 55 | type="text" | 55 | type="text" |
| 56 | ></v-text-field> | 56 | ></v-text-field> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs12 sm12> | 60 | <v-flex xs12 sm12> |
| 61 | <v-layout> | 61 | <v-layout> |
| 62 | <v-flex xs4 class="pt-4 subheading"> | 62 | <v-flex xs4 class="pt-4 subheading"> |
| 63 | <label class="right">Mark Upto:</label> | 63 | <label class="right">Mark Upto:</label> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | <v-flex xs7 class="ml-3"> | 65 | <v-flex xs7 class="ml-3"> |
| 66 | <v-text-field | 66 | <v-text-field |
| 67 | placeholder="fill your Mark From" | 67 | placeholder="fill your Mark From" |
| 68 | v-model="editedItem.marksUpTo" | 68 | v-model="editedItem.marksUpTo" |
| 69 | :rules="editMarksUpTo" | 69 | :rules="editMarksUpTo" |
| 70 | type="text" | 70 | type="text" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs12 sm12> | 75 | <v-flex xs12 sm12> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs4 class="pt-4 subheading"> | 77 | <v-flex xs4 class="pt-4 subheading"> |
| 78 | <label class="right">Note:</label> | 78 | <label class="right">Note:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs7 class="ml-3"> | 80 | <v-flex xs7 class="ml-3"> |
| 81 | <v-text-field | 81 | <v-text-field |
| 82 | placeholder="fill your Serial Number" | 82 | placeholder="fill your Serial Number" |
| 83 | v-model="editedItem.note" | 83 | v-model="editedItem.note" |
| 84 | type="text" | 84 | type="text" |
| 85 | ></v-text-field> | 85 | ></v-text-field> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs12> | 91 | <v-flex xs12> |
| 92 | <v-card-actions> | 92 | <v-card-actions> |
| 93 | <v-spacer></v-spacer> | 93 | <v-spacer></v-spacer> |
| 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 94 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 95 | </v-card-actions> | 95 | </v-card-actions> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | </v-container> | 98 | </v-container> |
| 99 | </v-form> | 99 | </v-form> |
| 100 | </v-card> | 100 | </v-card> |
| 101 | </v-dialog> | 101 | </v-dialog> |
| 102 | 102 | ||
| 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> | 103 | <!-- ****** PROFILE VIEW PARTICULAR GRDAE DATA ****** --> |
| 104 | 104 | ||
| 105 | <v-dialog v-model="viewGradeDialog" max-width="500px"> | 105 | <v-dialog v-model="viewGradeDialog" max-width="500px" persistent> |
| 106 | <v-card flat class="card-style pa-3" dark> | 106 | <v-card flat class="card-style pa-3" dark> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs12> | 108 | <v-flex xs12> |
| 109 | <label class="title text-xs-center">View Grade</label> | 109 | <label class="title text-xs-center">View Grade</label> |
| 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> | 110 | <v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | </v-layout> | 112 | </v-layout> |
| 113 | <v-card-text> | 113 | <v-card-text> |
| 114 | <v-container grid-list-md> | 114 | <v-container grid-list-md> |
| 115 | <v-layout wrap> | 115 | <v-layout wrap> |
| 116 | <v-flex> | 116 | <v-flex> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs5 sm6> | 118 | <v-flex xs5 sm6> |
| 119 | <h5 class="right my-1"> | 119 | <h5 class="right my-1"> |
| 120 | <b>Grade Name:</b> | 120 | <b>Grade Name:</b> |
| 121 | </h5> | 121 | </h5> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex sm6 xs8> | 123 | <v-flex sm6 xs8> |
| 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> | 124 | <h5 class="my-1">{{ editedItem.gradeName }}</h5> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | <v-layout> | 127 | <v-layout> |
| 128 | <v-flex xs5 sm6> | 128 | <v-flex xs5 sm6> |
| 129 | <h5 class="right my-1"> | 129 | <h5 class="right my-1"> |
| 130 | <b>Grade Point:</b> | 130 | <b>Grade Point:</b> |
| 131 | </h5> | 131 | </h5> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex sm6 xs8> | 133 | <v-flex sm6 xs8> |
| 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> | 134 | <h5 class="my-1">{{ editedItem.gradePoint }}</h5> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | </v-layout> | 136 | </v-layout> |
| 137 | <v-layout> | 137 | <v-layout> |
| 138 | <v-flex xs5 sm6> | 138 | <v-flex xs5 sm6> |
| 139 | <h5 class="right my-1"> | 139 | <h5 class="right my-1"> |
| 140 | <b>Mark From:</b> | 140 | <b>Mark From:</b> |
| 141 | </h5> | 141 | </h5> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex sm6 xs8> | 143 | <v-flex sm6 xs8> |
| 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> | 144 | <h5 class="my-1">{{ editedItem.marksFrom }}</h5> |
| 145 | </v-flex> | 145 | </v-flex> |
| 146 | </v-layout> | 146 | </v-layout> |
| 147 | <v-layout> | 147 | <v-layout> |
| 148 | <v-flex xs5 sm6> | 148 | <v-flex xs5 sm6> |
| 149 | <h5 class="right my-1"> | 149 | <h5 class="right my-1"> |
| 150 | <b>Mark Upto:</b> | 150 | <b>Mark Upto:</b> |
| 151 | </h5> | 151 | </h5> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | <v-flex sm6 xs8> | 153 | <v-flex sm6 xs8> |
| 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> | 154 | <h5 class="my-1">{{ editedItem.marksUpTo }}</h5> |
| 155 | </v-flex> | 155 | </v-flex> |
| 156 | </v-layout> | 156 | </v-layout> |
| 157 | <v-layout> | 157 | <v-layout> |
| 158 | <v-flex xs5 sm6> | 158 | <v-flex xs5 sm6> |
| 159 | <h5 class="right my-1"> | 159 | <h5 class="right my-1"> |
| 160 | <b>Note:</b> | 160 | <b>Note:</b> |
| 161 | </h5> | 161 | </h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex sm6 xs8> | 163 | <v-flex sm6 xs8> |
| 164 | <h5 class="my-1">{{ editedItem.note }}</h5> | 164 | <h5 class="my-1">{{ editedItem.note }}</h5> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | </v-container> | 169 | </v-container> |
| 170 | </v-card-text> | 170 | </v-card-text> |
| 171 | </v-card> | 171 | </v-card> |
| 172 | </v-dialog> | 172 | </v-dialog> |
| 173 | <!-- ****** EXISTING GRADE TABLE****** --> | 173 | <!-- ****** EXISTING GRADE TABLE****** --> |
| 174 | 174 | ||
| 175 | <v-toolbar color="transparent" flat> | 175 | <v-toolbar color="transparent" flat> |
| 176 | <v-btn | 176 | <v-btn |
| 177 | fab | 177 | fab |
| 178 | dark | 178 | dark |
| 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 179 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 180 | small | 180 | small |
| 181 | @click="addGradeDialog = true" | 181 | @click="addGradeDialog = true" |
| 182 | > | 182 | > |
| 183 | <v-icon dark>add</v-icon> | 183 | <v-icon dark>add</v-icon> |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | <v-btn | 185 | <v-btn |
| 186 | round | 186 | round |
| 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 187 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 188 | dark | 188 | dark |
| 189 | @click="addGradeDialog = true" | 189 | @click="addGradeDialog = true" |
| 190 | > | 190 | > |
| 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade | 191 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade |
| 192 | </v-btn> | 192 | </v-btn> |
| 193 | <v-spacer></v-spacer> | 193 | <v-spacer></v-spacer> |
| 194 | <v-card-title class="body-1" v-show="show"> | 194 | <v-card-title class="body-1" v-show="show"> |
| 195 | <v-btn icon large flat @click="displaySearch"> | 195 | <v-btn icon large flat @click="displaySearch"> |
| 196 | <v-avatar size="27"> | 196 | <v-avatar size="27"> |
| 197 | <img src="/static/icon/search.png" alt="icon" /> | 197 | <img src="/static/icon/search.png" alt="icon" /> |
| 198 | </v-avatar> | 198 | </v-avatar> |
| 199 | </v-btn> | 199 | </v-btn> |
| 200 | </v-card-title> | 200 | </v-card-title> |
| 201 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 201 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 202 | <v-layout> | 202 | <v-layout> |
| 203 | <v-text-field | 203 | <v-text-field |
| 204 | autofocus | 204 | autofocus |
| 205 | v-model="search" | 205 | v-model="search" |
| 206 | label="Search" | 206 | label="Search" |
| 207 | prepend-inner-icon="search" | 207 | prepend-inner-icon="search" |
| 208 | color="primary" | 208 | color="primary" |
| 209 | ></v-text-field> | 209 | ></v-text-field> |
| 210 | <v-icon @click="closeSearch" color="error">close</v-icon> | 210 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 211 | </v-layout> | 211 | </v-layout> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-toolbar> | 213 | </v-toolbar> |
| 214 | <v-data-table | 214 | <v-data-table |
| 215 | :headers="headers" | 215 | :headers="headers" |
| 216 | :items="gradeData" | 216 | :items="gradeData" |
| 217 | :pagination.sync="pagination" | 217 | :pagination.sync="pagination" |
| 218 | :search="search" | 218 | :search="search" |
| 219 | > | 219 | > |
| 220 | <template slot="items" slot-scope="props"> | 220 | <template slot="items" slot-scope="props"> |
| 221 | <tr class="tr"> | 221 | <tr class="tr"> |
| 222 | <td class="td td-row">{{ props.index + 1}}</td> | 222 | <td class="td td-row">{{ props.index + 1}}</td> |
| 223 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> | 223 | <td class="td td-row text-xs-center">{{ props.item.gradeName}}</td> |
| 224 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> | 224 | <td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td> |
| 225 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> | 225 | <td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td> |
| 226 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> | 226 | <td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td> |
| 227 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> | 227 | <td class="td td-row text-xs-center">{{ props.item.note }}</td> |
| 228 | <td class="td td-row text-xs-center"> | 228 | <td class="td td-row text-xs-center"> |
| 229 | <span> | 229 | <span> |
| 230 | <v-tooltip top> | 230 | <v-tooltip top> |
| 231 | <img | 231 | <img |
| 232 | slot="activator" | 232 | slot="activator" |
| 233 | style="cursor:pointer; width:25px; height:25px; " | 233 | style="cursor:pointer; width:25px; height:25px; " |
| 234 | class="mr-3" | 234 | class="mr-3" |
| 235 | @click="profile(props.item)" | 235 | @click="profile(props.item)" |
| 236 | src="/static/icon/view.png" | 236 | src="/static/icon/view.png" |
| 237 | /> | 237 | /> |
| 238 | <span>View</span> | 238 | <span>View</span> |
| 239 | </v-tooltip> | 239 | </v-tooltip> |
| 240 | <v-tooltip top> | 240 | <v-tooltip top> |
| 241 | <img | 241 | <img |
| 242 | slot="activator" | 242 | slot="activator" |
| 243 | style="cursor:pointer; width:20px; height:18px; " | 243 | style="cursor:pointer; width:20px; height:18px; " |
| 244 | class="mr-3" | 244 | class="mr-3" |
| 245 | @click="editItem(props.item)" | 245 | @click="editItem(props.item)" |
| 246 | src="/static/icon/edit.png" | 246 | src="/static/icon/edit.png" |
| 247 | /> | 247 | /> |
| 248 | <span>Edit</span> | 248 | <span>Edit</span> |
| 249 | </v-tooltip> | 249 | </v-tooltip> |
| 250 | <v-tooltip top> | 250 | <v-tooltip top> |
| 251 | <img | 251 | <img |
| 252 | slot="activator" | 252 | slot="activator" |
| 253 | style="cursor:pointer; width:20px; height:20px; " | 253 | style="cursor:pointer; width:20px; height:20px; " |
| 254 | @click="deleteGrade(props.item)" | 254 | @click="deleteGrade(props.item)" |
| 255 | class="mr-3" | 255 | class="mr-3" |
| 256 | src="/static/icon/delete.png" | 256 | src="/static/icon/delete.png" |
| 257 | /> | 257 | /> |
| 258 | <span>Delete</span> | 258 | <span>Delete</span> |
| 259 | </v-tooltip> | 259 | </v-tooltip> |
| 260 | </span> | 260 | </span> |
| 261 | </td> | 261 | </td> |
| 262 | </tr> | 262 | </tr> |
| 263 | </template> | 263 | </template> |
| 264 | <v-alert | 264 | <v-alert |
| 265 | slot="no-results" | 265 | slot="no-results" |
| 266 | :value="true" | 266 | :value="true" |
| 267 | color="error" | 267 | color="error" |
| 268 | icon="warning" | 268 | icon="warning" |
| 269 | >Your search for "{{ search }}" found no results.</v-alert> | 269 | >Your search for "{{ search }}" found no results.</v-alert> |
| 270 | </v-data-table> | 270 | </v-data-table> |
| 271 | <!-- ****** ADD GRADE ****** --> | 271 | <!-- ****** ADD GRADE ****** --> |
| 272 | <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog"> | 272 | <v-dialog v-model="addGradeDialog" max-width="500px" v-if="addGradeDialog" persistent> |
| 273 | <v-card flat class="card-style pa-2" dark> | 273 | <v-card flat class="card-style pa-2" dark> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <label class="title text-xs-center">Add Grade</label> | 276 | <label class="title text-xs-center">Add Grade</label> |
| 277 | <v-icon | 277 | <v-icon |
| 278 | size="24" | 278 | size="24" |
| 279 | class="right" | 279 | class="right" |
| 280 | @click="$refs.form.reset();addGradeDialog = false" | 280 | @click="$refs.form.reset();addGradeDialog = false" |
| 281 | >cancel</v-icon> | 281 | >cancel</v-icon> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | <v-form ref="form" v-model="valid" lazy-validation> | 284 | <v-form ref="form" v-model="valid" lazy-validation> |
| 285 | <v-container fluid> | 285 | <v-container fluid> |
| 286 | <v-flex xs12> | 286 | <v-flex xs12> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs5 sm4 class="pt-4 subheading"> | 288 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 289 | <label class="right">Grade Name:</label> | 289 | <label class="right">Grade Name:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs7 class="ml-3"> | 291 | <v-flex xs7 class="ml-3"> |
| 292 | <v-text-field | 292 | <v-text-field |
| 293 | placeholder="fill your Grade Name" | 293 | placeholder="fill your Grade Name" |
| 294 | :rules="gradeNameRules" | 294 | :rules="gradeNameRules" |
| 295 | v-model="addGrade.gradeName" | 295 | v-model="addGrade.gradeName" |
| 296 | ></v-text-field> | 296 | ></v-text-field> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-layout> | 298 | </v-layout> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs12> | 300 | <v-flex xs12> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs5 sm4 class="pt-4 subheading"> | 302 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 303 | <label class="right">Grade Point:</label> | 303 | <label class="right">Grade Point:</label> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex xs7 class="ml-3"> | 305 | <v-flex xs7 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | placeholder="fill your Grade Point" | 307 | placeholder="fill your Grade Point" |
| 308 | v-model="addGrade.gradePoint" | 308 | v-model="addGrade.gradePoint" |
| 309 | :rules="gradePointRules" | 309 | :rules="gradePointRules" |
| 310 | ></v-text-field> | 310 | ></v-text-field> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | </v-layout> | 312 | </v-layout> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs5 sm4 class="pt-4 subheading"> | 316 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Mark From:</label> | 317 | <label class="right">Mark From:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 319 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | placeholder="fill your Mark From" | 321 | placeholder="fill your Mark From" |
| 322 | :rules="markFromRules" | 322 | :rules="markFromRules" |
| 323 | v-model="addGrade.marksFrom" | 323 | v-model="addGrade.marksFrom" |
| 324 | type="number" | 324 | type="number" |
| 325 | ></v-text-field> | 325 | ></v-text-field> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | <v-flex xs12> | 329 | <v-flex xs12> |
| 330 | <v-layout> | 330 | <v-layout> |
| 331 | <v-flex xs5 sm4 class="pt-4 subheading"> | 331 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 332 | <label class="right">Mark Upto:</label> | 332 | <label class="right">Mark Upto:</label> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex xs7 class="ml-3"> | 334 | <v-flex xs7 class="ml-3"> |
| 335 | <v-text-field | 335 | <v-text-field |
| 336 | placeholder="fill your Mark Upto" | 336 | placeholder="fill your Mark Upto" |
| 337 | :rules="markUptoRules" | 337 | :rules="markUptoRules" |
| 338 | v-model="addGrade.marksUpTo" | 338 | v-model="addGrade.marksUpTo" |
| 339 | type="number" | 339 | type="number" |
| 340 | ></v-text-field> | 340 | ></v-text-field> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | </v-layout> | 342 | </v-layout> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex xs12> | 344 | <v-flex xs12> |
| 345 | <v-layout> | 345 | <v-layout> |
| 346 | <v-flex xs5 sm4 class="pt-4 subheading"> | 346 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 347 | <label class="right">Note:</label> | 347 | <label class="right">Note:</label> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex xs7 class="ml-3"> | 349 | <v-flex xs7 class="ml-3"> |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | placeholder="fill your Note" | 351 | placeholder="fill your Note" |
| 352 | v-model="addGrade.note" | 352 | v-model="addGrade.note" |
| 353 | @keyup.enter="submit" | 353 | @keyup.enter="submit" |
| 354 | ></v-text-field> | 354 | ></v-text-field> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | </v-layout> | 356 | </v-layout> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | <v-layout> | 358 | <v-layout> |
| 359 | <v-flex xs12> | 359 | <v-flex xs12> |
| 360 | <v-card-actions> | 360 | <v-card-actions> |
| 361 | <v-spacer class="hidden-xs-only"></v-spacer> | 361 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 362 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 362 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 363 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 363 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 364 | </v-card-actions> | 364 | </v-card-actions> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | </v-layout> | 366 | </v-layout> |
| 367 | </v-container> | 367 | </v-container> |
| 368 | </v-form> | 368 | </v-form> |
| 369 | </v-card> | 369 | </v-card> |
| 370 | </v-dialog> | 370 | </v-dialog> |
| 371 | <v-snackbar | 371 | <v-snackbar |
| 372 | :timeout="timeout" | 372 | :timeout="timeout" |
| 373 | :top="y === 'top'" | 373 | :top="y === 'top'" |
| 374 | :right="x === 'right'" | 374 | :right="x === 'right'" |
| 375 | :vertical="mode === 'vertical'" | 375 | :vertical="mode === 'vertical'" |
| 376 | v-model="snackbar" | 376 | v-model="snackbar" |
| 377 | :color="color" | 377 | :color="color" |
| 378 | >{{ text }}</v-snackbar> | 378 | >{{ text }}</v-snackbar> |
| 379 | <div class="loader" v-if="showLoader"> | 379 | <div class="loader" v-if="showLoader"> |
| 380 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 380 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 381 | </div> | 381 | </div> |
| 382 | </v-container> | 382 | </v-container> |
| 383 | </template> | 383 | </template> |
| 384 | 384 | ||
| 385 | <script> | 385 | <script> |
| 386 | import http from "@/Services/http.js"; | 386 | import http from "@/Services/http.js"; |
| 387 | import moment from "moment"; | 387 | import moment from "moment"; |
| 388 | 388 | ||
| 389 | export default { | 389 | export default { |
| 390 | data: () => ({ | 390 | data: () => ({ |
| 391 | snackbar: false, | 391 | snackbar: false, |
| 392 | date: null, | 392 | date: null, |
| 393 | menu1: false, | 393 | menu1: false, |
| 394 | menu2: false, | 394 | menu2: false, |
| 395 | addGradeDialog: false, | 395 | addGradeDialog: false, |
| 396 | color: "", | 396 | color: "", |
| 397 | y: "top", | 397 | y: "top", |
| 398 | x: "right", | 398 | x: "right", |
| 399 | mode: "", | 399 | mode: "", |
| 400 | timeout: 10000, | 400 | timeout: 10000, |
| 401 | text: "", | 401 | text: "", |
| 402 | show: true, | 402 | show: true, |
| 403 | showSearch: false, | 403 | showSearch: false, |
| 404 | loading: false, | 404 | loading: false, |
| 405 | loadingSearch: false, | 405 | loadingSearch: false, |
| 406 | date: null, | 406 | date: null, |
| 407 | search: "", | 407 | search: "", |
| 408 | showLoader: false, | 408 | showLoader: false, |
| 409 | editGradeDialog: false, | 409 | editGradeDialog: false, |
| 410 | viewGradeDialog: false, | 410 | viewGradeDialog: false, |
| 411 | valid: true, | 411 | valid: true, |
| 412 | validEditGrade: true, | 412 | validEditGrade: true, |
| 413 | pagination: { | 413 | pagination: { |
| 414 | rowsPerPage: 10, | 414 | rowsPerPage: 10, |
| 415 | }, | 415 | }, |
| 416 | gradeNameRules: [(v) => !!v || "Grade Name is required"], | 416 | gradeNameRules: [(v) => !!v || "Grade Name is required"], |
| 417 | gradePointRules: [(v) => !!v || "Grade Point required"], | 417 | gradePointRules: [(v) => !!v || "Grade Point required"], |
| 418 | markFromRules: [(v) => !!v || "Mark From is required"], | 418 | markFromRules: [(v) => !!v || "Mark From is required"], |
| 419 | markUptoRules: [(v) => !!v || "Mark Upto is required"], | 419 | markUptoRules: [(v) => !!v || "Mark Upto is required"], |
| 420 | authorRules: [(v) => !!v || "Author is required"], | 420 | authorRules: [(v) => !!v || "Author is required"], |
| 421 | noteRules: [(v) => !!v || "Note is required"], | 421 | noteRules: [(v) => !!v || "Note is required"], |
| 422 | editGradeName: [(v) => !!v || "Grade Name is required"], | 422 | editGradeName: [(v) => !!v || "Grade Name is required"], |
| 423 | editGradeName: [(v) => !!v || "Grade Name is required"], | 423 | editGradeName: [(v) => !!v || "Grade Name is required"], |
| 424 | editGradePoint: [(v) => !!v || "Grade Point required"], | 424 | editGradePoint: [(v) => !!v || "Grade Point required"], |
| 425 | editMarksFrom: [(v) => !!v || "Mark From is required"], | 425 | editMarksFrom: [(v) => !!v || "Mark From is required"], |
| 426 | editMarksUpTo: [(v) => !!v || "Mark Upto is required"], | 426 | editMarksUpTo: [(v) => !!v || "Mark Upto is required"], |
| 427 | headers: [ | 427 | headers: [ |
| 428 | { | 428 | { |
| 429 | align: "", | 429 | align: "", |
| 430 | text: "No", | 430 | text: "No", |
| 431 | sortable: false, | 431 | sortable: false, |
| 432 | value: "No", | 432 | value: "No", |
| 433 | }, | 433 | }, |
| 434 | { | 434 | { |
| 435 | text: "Grade Name", | 435 | text: "Grade Name", |
| 436 | vaue: "gradeName", | 436 | vaue: "gradeName", |
| 437 | sortable: false, | 437 | sortable: false, |
| 438 | align: "center", | 438 | align: "center", |
| 439 | }, | 439 | }, |
| 440 | { | 440 | { |
| 441 | text: "Grade Point", | 441 | text: "Grade Point", |
| 442 | value: "gradePoint", | 442 | value: "gradePoint", |
| 443 | sortable: false, | 443 | sortable: false, |
| 444 | align: "center", | 444 | align: "center", |
| 445 | }, | 445 | }, |
| 446 | { | 446 | { |
| 447 | text: "Mark From", | 447 | text: "Mark From", |
| 448 | value: "marksFrom", | 448 | value: "marksFrom", |
| 449 | sortable: false, | 449 | sortable: false, |
| 450 | align: "center", | 450 | align: "center", |
| 451 | }, | 451 | }, |
| 452 | { | 452 | { |
| 453 | text: "Mark Upto", | 453 | text: "Mark Upto", |
| 454 | value: "marksUpTo", | 454 | value: "marksUpTo", |
| 455 | sortable: false, | 455 | sortable: false, |
| 456 | align: "center", | 456 | align: "center", |
| 457 | }, | 457 | }, |
| 458 | { | 458 | { |
| 459 | text: "Note", | 459 | text: "Note", |
| 460 | value: "note", | 460 | value: "note", |
| 461 | sortable: false, | 461 | sortable: false, |
| 462 | align: "center", | 462 | align: "center", |
| 463 | }, | 463 | }, |
| 464 | { text: "Action", value: "", sortable: false, align: "center" }, | 464 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 465 | ], | 465 | ], |
| 466 | gradeData: [], | 466 | gradeData: [], |
| 467 | addGrade: {}, | 467 | addGrade: {}, |
| 468 | editedItem: {}, | 468 | editedItem: {}, |
| 469 | token: "", | 469 | token: "", |
| 470 | }), | 470 | }), |
| 471 | watch: { | 471 | watch: { |
| 472 | addGradeDialog: function (val) { | 472 | addGradeDialog: function (val) { |
| 473 | if (!val) { | 473 | if (!val) { |
| 474 | this.addGrade = []; | 474 | this.addGrade = []; |
| 475 | } | 475 | } |
| 476 | }, | 476 | }, |
| 477 | }, | 477 | }, |
| 478 | methods: { | 478 | methods: { |
| 479 | dates: function (date) { | 479 | dates: function (date) { |
| 480 | return moment(date).format("MMMM DD, YYYY"); | 480 | return moment(date).format("MMMM DD, YYYY"); |
| 481 | }, | 481 | }, |
| 482 | pickFile() { | 482 | pickFile() { |
| 483 | this.$refs.image.click(); | 483 | this.$refs.image.click(); |
| 484 | }, | 484 | }, |
| 485 | getGradeList() { | 485 | getGradeList() { |
| 486 | this.showLoader = true; | 486 | this.showLoader = true; |
| 487 | this.loadingSearch = true; | 487 | this.loadingSearch = true; |
| 488 | http() | 488 | http() |
| 489 | .get("/getGradesList", { | 489 | .get("/getGradesList", { |
| 490 | headers: { Authorization: "Bearer " + this.token }, | 490 | headers: { Authorization: "Bearer " + this.token }, |
| 491 | }) | 491 | }) |
| 492 | .then((response) => { | 492 | .then((response) => { |
| 493 | this.gradeData = response.data.data; | 493 | this.gradeData = response.data.data; |
| 494 | this.showLoader = false; | 494 | this.showLoader = false; |
| 495 | this.loadingSearch = false; | 495 | this.loadingSearch = false; |
| 496 | }) | 496 | }) |
| 497 | .catch((error) => { | 497 | .catch((error) => { |
| 498 | // console.log("err====>", err); | 498 | // console.log("err====>", err); |
| 499 | this.showLoader = false; | 499 | this.showLoader = false; |
| 500 | this.loadingSearch = false; | 500 | this.loadingSearch = false; |
| 501 | this.snackbar = true; | 501 | this.snackbar = true; |
| 502 | this.text = error.response.data.message; | 502 | this.text = error.response.data.message; |
| 503 | if (error.response.status === 401) { | 503 | if (error.response.status === 401) { |
| 504 | this.$router.replace({ path: "/" }); | 504 | this.$router.replace({ path: "/" }); |
| 505 | this.$store.dispatch("setToken", null); | 505 | this.$store.dispatch("setToken", null); |
| 506 | this.$store.dispatch("Id", null); | 506 | this.$store.dispatch("Id", null); |
| 507 | } | 507 | } |
| 508 | }); | 508 | }); |
| 509 | }, | 509 | }, |
| 510 | editItem(item) { | 510 | editItem(item) { |
| 511 | console.log("item", item); | 511 | console.log("item", item); |
| 512 | this.editedIndex = this.gradeData.indexOf(item); | 512 | this.editedIndex = this.gradeData.indexOf(item); |
| 513 | this.editedItem = Object.assign({}, item); | 513 | this.editedItem = Object.assign({}, item); |
| 514 | this.editedItem.date = | 514 | this.editedItem.date = |
| 515 | this.editedItem.date != undefined | 515 | this.editedItem.date != undefined |
| 516 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 516 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 517 | : (this.editedItem.date = ""); | 517 | : (this.editedItem.date = ""); |
| 518 | this.editGradeDialog = true; | 518 | this.editGradeDialog = true; |
| 519 | }, | 519 | }, |
| 520 | profile(item) { | 520 | profile(item) { |
| 521 | this.editedIndex = this.gradeData.indexOf(item); | 521 | this.editedIndex = this.gradeData.indexOf(item); |
| 522 | this.editedItem = Object.assign({}, item); | 522 | this.editedItem = Object.assign({}, item); |
| 523 | this.viewGradeDialog = true; | 523 | this.viewGradeDialog = true; |
| 524 | }, | 524 | }, |
| 525 | deleteGrade(item) { | 525 | deleteGrade(item) { |
| 526 | let deleteGrade = { | 526 | let deleteGrade = { |
| 527 | gradeId: item._id, | 527 | gradeId: item._id, |
| 528 | }; | 528 | }; |
| 529 | http() | 529 | http() |
| 530 | .delete( | 530 | .delete( |
| 531 | "/deleteGrade", | 531 | "/deleteGrade", |
| 532 | confirm("Are you sure you want to Delete this?") && { | 532 | confirm("Are you sure you want to Delete this?") && { |
| 533 | params: deleteGrade, | 533 | params: deleteGrade, |
| 534 | } | 534 | } |
| 535 | ) | 535 | ) |
| 536 | .then((response) => { | 536 | .then((response) => { |
| 537 | this.snackbar = true; | 537 | this.snackbar = true; |
| 538 | this.text = response.data.message; | 538 | this.text = response.data.message; |
| 539 | this.color = "green"; | 539 | this.color = "green"; |
| 540 | this.getGradeList(); | 540 | this.getGradeList(); |
| 541 | }) | 541 | }) |
| 542 | .catch((error) => { | 542 | .catch((error) => { |
| 543 | this.loading = false; | 543 | this.loading = false; |
| 544 | this.snackbar = true; | 544 | this.snackbar = true; |
| 545 | this.color = "error"; | 545 | this.color = "error"; |
| 546 | this.text = error.response.data.message; | 546 | this.text = error.response.data.message; |
| 547 | }); | 547 | }); |
| 548 | }, | 548 | }, |
| 549 | close() { | 549 | close() { |
| 550 | this.editGradeDialog = false; | 550 | this.editGradeDialog = false; |
| 551 | }, | 551 | }, |
| 552 | submit() { | 552 | submit() { |
| 553 | if (this.$refs.form.validate()) { | 553 | if (this.$refs.form.validate()) { |
| 554 | this.loading = true; | 554 | this.loading = true; |
| 555 | http() | 555 | http() |
| 556 | .post("/createGrade", this.addGrade) | 556 | .post("/createGrade", this.addGrade) |
| 557 | .then((response) => { | 557 | .then((response) => { |
| 558 | this.snackbar = true; | 558 | this.snackbar = true; |
| 559 | this.text = response.data.message; | 559 | this.text = response.data.message; |
| 560 | this.color = "green"; | 560 | this.color = "green"; |
| 561 | this.addGradeDialog = false; | 561 | this.addGradeDialog = false; |
| 562 | this.loading = false; | 562 | this.loading = false; |
| 563 | this.clear(); | 563 | this.clear(); |
| 564 | this.getGradeList(); | 564 | this.getGradeList(); |
| 565 | }) | 565 | }) |
| 566 | .catch((error) => { | 566 | .catch((error) => { |
| 567 | this.snackbar = true; | 567 | this.snackbar = true; |
| 568 | this.text = error.response.data.message; | 568 | this.text = error.response.data.message; |
| 569 | this.color = "red"; | 569 | this.color = "red"; |
| 570 | this.loading = false; | 570 | this.loading = false; |
| 571 | }); | 571 | }); |
| 572 | } | 572 | } |
| 573 | }, | 573 | }, |
| 574 | clear() { | 574 | clear() { |
| 575 | this.$refs.form.reset(); | 575 | this.$refs.form.reset(); |
| 576 | this.disable = false; | 576 | this.disable = false; |
| 577 | this.loading = false; | 577 | this.loading = false; |
| 578 | }, | 578 | }, |
| 579 | save() { | 579 | save() { |
| 580 | if (this.$refs.formEditGrade.validate()) { | 580 | if (this.$refs.formEditGrade.validate()) { |
| 581 | this.editedItem.gradeId = this.editedItem._id; | 581 | this.editedItem.gradeId = this.editedItem._id; |
| 582 | http() | 582 | http() |
| 583 | .put("/updateGrade", this.editedItem) | 583 | .put("/updateGrade", this.editedItem) |
| 584 | .then((response) => { | 584 | .then((response) => { |
| 585 | this.snackbar = true; | 585 | this.snackbar = true; |
| 586 | this.text = response.data.message; | 586 | this.text = response.data.message; |
| 587 | this.color = "green"; | 587 | this.color = "green"; |
| 588 | this.getGradeList(); | 588 | this.getGradeList(); |
| 589 | this.close(); | 589 | this.close(); |
| 590 | }) | 590 | }) |
| 591 | .catch((error) => { | 591 | .catch((error) => { |
| 592 | this.snackbar = true; | 592 | this.snackbar = true; |
| 593 | this.text = error.response.data.message; | 593 | this.text = error.response.data.message; |
| 594 | this.color = "red"; | 594 | this.color = "red"; |
| 595 | }); | 595 | }); |
| 596 | } | 596 | } |
| 597 | }, | 597 | }, |
| 598 | displaySearch() { | 598 | displaySearch() { |
| 599 | (this.show = false), (this.showSearch = true); | 599 | (this.show = false), (this.showSearch = true); |
| 600 | }, | 600 | }, |
| 601 | closeSearch() { | 601 | closeSearch() { |
| 602 | this.showSearch = false; | 602 | this.showSearch = false; |
| 603 | this.show = true; | 603 | this.show = true; |
| 604 | this.search = ""; | 604 | this.search = ""; |
| 605 | }, | 605 | }, |
| 606 | }, | 606 | }, |
| 607 | mounted() { | 607 | mounted() { |
| 608 | this.token = this.$store.state.token; | 608 | this.token = this.$store.state.token; |
| 609 | this.getGradeList(); | 609 | this.getGradeList(); |
| 610 | }, | 610 | }, |
| 611 | }; | 611 | }; |
| 612 | </script> | 612 | </script> |
src/pages/Gallery/gallery.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS Gallery ****** --> | 3 | <!-- ****** EDITS Gallery ****** --> |
| 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable> | 4 | <v-dialog v-model="editGalleryDialog" max-width="1000px" scrollable persistent> |
| 5 | <v-card class="card-style pa-2" dark> | 5 | <v-card 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 Gallery</label> | 8 | <label class="title text-xs-center">Edit Gallery</label> |
| 9 | <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editGalleryDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="editImage" | 18 | ref="editImage" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="editFilePicked" | 21 | @change="editFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs6 | 25 | xs6 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.imageUrl" | 28 | v-for="Image in editedItem.imageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.imageUrl" | 30 | v-if="editedItem.imageUrl" |
| 31 | class="profile-image-wrapper imgNews" | 31 | class="profile-image-wrapper imgNews" |
| 32 | > | 32 | > |
| 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> | 33 | <img :src="Image.imageLink" height="160" width="160" alt="Gallery" class="pa-2" /> |
| 34 | <v-icon | 34 | <v-icon |
| 35 | class="red edit-profile-icon" | 35 | class="red edit-profile-icon" |
| 36 | dark | 36 | dark |
| 37 | @click="deleteImage(Image._id,editedItem._id)" | 37 | @click="deleteImage(Image._id,editedItem._id)" |
| 38 | >close</v-icon> | 38 | >close</v-icon> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> | 40 | <v-flex v-for="(file, index) in editFiles" :key="index"> |
| 41 | <img :src="file" height="160" width="160" class="pa-2" /> | 41 | <img :src="file" height="160" width="160" class="pa-2" /> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <img | 44 | <img |
| 45 | src="/static/icon/user.png" | 45 | src="/static/icon/user.png" |
| 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" | 46 | v-if="editedItem.imageUrl == '' && editFiles == ''" |
| 47 | height="160" | 47 | height="160" |
| 48 | width="160" | 48 | width="160" |
| 49 | alt="Gallery" | 49 | alt="Gallery" |
| 50 | /> | 50 | /> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | <v-layout wrap> | 53 | <v-layout wrap> |
| 54 | <v-flex xs12 sm12> | 54 | <v-flex xs12 sm12> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right">Title:</label> | 57 | <label class="right">Title:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 sm6 class="ml-3"> | 59 | <v-flex xs8 sm6 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.title" | 61 | v-model="editedItem.title" |
| 62 | placeholder="fill your Title" | 62 | placeholder="fill your Title" |
| 63 | name="name" | 63 | name="name" |
| 64 | type="text" | 64 | type="text" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | <v-flex xs12 sm12> | 70 | <v-flex xs12 sm12> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs4 class="pt-4 subheading"> | 72 | <v-flex xs4 class="pt-4 subheading"> |
| 73 | <label class="right">Description:</label> | 73 | <label class="right">Description:</label> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex xs8 sm6 class="ml-3"> | 75 | <v-flex xs8 sm6 class="ml-3"> |
| 76 | <v-text-field | 76 | <v-text-field |
| 77 | placeholder="fill your Description" | 77 | placeholder="fill your Description" |
| 78 | v-model="editedItem.description" | 78 | v-model="editedItem.description" |
| 79 | type="text" | 79 | type="text" |
| 80 | name="email" | 80 | name="email" |
| 81 | required | 81 | required |
| 82 | ></v-text-field> | 82 | ></v-text-field> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | </v-layout> | 84 | </v-layout> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-layout> | 86 | <v-layout> |
| 87 | <v-flex xs4 class="pt-4 subheading"> | 87 | <v-flex xs4 class="pt-4 subheading"> |
| 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 88 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 89 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs8 sm6 class="ml-3"> | 91 | <v-flex xs8 sm6 class="ml-3"> |
| 92 | <v-select | 92 | <v-select |
| 93 | :items="addclass" | 93 | :items="addclass" |
| 94 | label="Select Class" | 94 | label="Select Class" |
| 95 | v-model="editedItem.classNum" | 95 | v-model="editedItem.classNum" |
| 96 | item-text="classNum" | 96 | item-text="classNum" |
| 97 | item-value="_id" | 97 | item-value="_id" |
| 98 | name="Select Class" | 98 | name="Select Class" |
| 99 | required | 99 | required |
| 100 | ></v-select> | 100 | ></v-select> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs4 class="pt-4 subheading"> | 105 | <v-flex xs4 class="pt-4 subheading"> |
| 106 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> | 106 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> | 107 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> |
| 108 | </v-flex> | 108 | </v-flex> |
| 109 | <v-flex xs8 sm6 class="ml-3"> | 109 | <v-flex xs8 sm6 class="ml-3"> |
| 110 | <v-text-field | 110 | <v-text-field |
| 111 | label="Select Image" | 111 | label="Select Image" |
| 112 | @click="editPickFile" | 112 | @click="editPickFile" |
| 113 | v-model="editImageName" | 113 | v-model="editImageName" |
| 114 | append-icon="attach_file" | 114 | append-icon="attach_file" |
| 115 | multiple | 115 | multiple |
| 116 | ></v-text-field> | 116 | ></v-text-field> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | </v-layout> | 118 | </v-layout> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | <v-flex xs12> | 121 | <v-flex xs12> |
| 122 | <div | 122 | <div |
| 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" | 123 | v-for="(editImage,index) in editedItem.youTubeLinkUrl" |
| 124 | :key="index" | 124 | :key="index" |
| 125 | v-if="editImage.youTubeLink !=[]" | 125 | v-if="editImage.youTubeLink !=[]" |
| 126 | > | 126 | > |
| 127 | <v-layout wrap> | 127 | <v-layout wrap> |
| 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 128 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> | 129 | <label class="right hidden-xs-only hidden-sm-only">You Tube Link Url:</label> |
| 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> | 130 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Link Url:</label> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> | 133 | <v-flex xs10 sm10 sm5 md9 class="ml-3"> |
| 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> | 134 | <v-text-field v-model="editImage.youTubeLink" type="text" name="link" required></v-text-field> |
| 135 | </v-flex> | 135 | </v-flex> |
| 136 | <v-flex xs2 class="pt-4"> | 136 | <v-flex xs2 class="pt-4"> |
| 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> | 137 | <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-layout> | 140 | </v-layout> |
| 141 | </div> | 141 | </div> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <div v-for="(updateImage,index) in updates" :key="index"> | 144 | <div v-for="(updateImage,index) in updates" :key="index"> |
| 145 | <v-layout wrap> | 145 | <v-layout wrap> |
| 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> | 147 | <label class="right hidden-xs-only hidden-sm-only">You Tube Url:</label> |
| 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> | 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">You Tube Url:</label> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs10 sm12 md9 class="ml-3"> | 151 | <v-flex xs10 sm12 md9 class="ml-3"> |
| 152 | <v-text-field | 152 | <v-text-field |
| 153 | v-model="updateImage.youTubeLink" | 153 | v-model="updateImage.youTubeLink" |
| 154 | label="Upload new you tube link url" | 154 | label="Upload new you tube link url" |
| 155 | required | 155 | required |
| 156 | ></v-text-field> | 156 | ></v-text-field> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex xs2 class="pt-4"> | 158 | <v-flex xs2 class="pt-4"> |
| 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> | 159 | <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> |
| 160 | <v-icon @click="update">add_circle</v-icon> | 160 | <v-icon @click="update">add_circle</v-icon> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </div> | 164 | </div> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-layout> | 166 | <v-layout> |
| 167 | <v-flex xs12 sm12 md11 lg11> | 167 | <v-flex xs12 sm12 md11 lg11> |
| 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 168 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 169 | <v-spacer></v-spacer> | 169 | <v-spacer></v-spacer> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | dark | 172 | dark |
| 173 | @click="save" | 173 | @click="save" |
| 174 | :loading="editGalleryLoading" | 174 | :loading="editGalleryLoading" |
| 175 | class="add-button mr-4" | 175 | class="add-button mr-4" |
| 176 | >Save</v-btn> | 176 | >Save</v-btn> |
| 177 | </v-card-actions> | 177 | </v-card-actions> |
| 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 178 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 179 | <v-spacer></v-spacer> | 179 | <v-spacer></v-spacer> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | dark | 182 | dark |
| 183 | @click="save" | 183 | @click="save" |
| 184 | :loading="editGalleryLoading" | 184 | :loading="editGalleryLoading" |
| 185 | class="add-button" | 185 | class="add-button" |
| 186 | >Save</v-btn> | 186 | >Save</v-btn> |
| 187 | <v-spacer></v-spacer> | 187 | <v-spacer></v-spacer> |
| 188 | </v-card-actions> | 188 | </v-card-actions> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | </v-card-text> | 191 | </v-card-text> |
| 192 | </v-card> | 192 | </v-card> |
| 193 | </v-dialog> | 193 | </v-dialog> |
| 194 | 194 | ||
| 195 | <!-- ****** PROFILE Gallery ****** --> | 195 | <!-- ****** PROFILE Gallery ****** --> |
| 196 | 196 | ||
| 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> | 197 | <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> |
| 198 | <v-card flat class="card-style pa-3" dark> | 198 | <v-card flat class="card-style pa-3" dark> |
| 199 | <v-layout> | 199 | <v-layout> |
| 200 | <v-flex xs12> | 200 | <v-flex xs12> |
| 201 | <label class="title text-xs-center">View Gallery</label> | 201 | <label class="title text-xs-center">View Gallery</label> |
| 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> | 202 | <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-layout> | 204 | </v-layout> |
| 205 | <v-card-text> | 205 | <v-card-text> |
| 206 | <v-layout row wrap> | 206 | <v-layout row wrap> |
| 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 207 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> | 208 | <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> |
| 209 | <img src="/static/icon/user.png" width="240" height="180" /> | 209 | <img src="/static/icon/user.png" width="240" height="180" /> |
| 210 | </v-avatar> | 210 | </v-avatar> |
| 211 | <span | 211 | <span |
| 212 | v-for="(image,i) in editedItem.imageUrl" | 212 | v-for="(image,i) in editedItem.imageUrl" |
| 213 | :key="i" | 213 | :key="i" |
| 214 | class="mt-4 pa-2" | 214 | class="mt-4 pa-2" |
| 215 | v-if="editedItem.imageUrl" | 215 | v-if="editedItem.imageUrl" |
| 216 | > | 216 | > |
| 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> | 217 | <img :src="image.imageLink" alt="Gallery" width="240" height="180" class="imgNews" /> |
| 218 | </span> | 218 | </span> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-layout> | 220 | </v-layout> |
| 221 | <v-container grid-list-md> | 221 | <v-container grid-list-md> |
| 222 | <v-layout wrap> | 222 | <v-layout wrap> |
| 223 | <v-flex xs12> | 223 | <v-flex xs12> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs5 sm6> | 225 | <v-flex xs5 sm6> |
| 226 | <h5 class="right my-1"> | 226 | <h5 class="right my-1"> |
| 227 | <b>Title:</b> | 227 | <b>Title:</b> |
| 228 | </h5> | 228 | </h5> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex sm6 xs8> | 230 | <v-flex sm6 xs8> |
| 231 | <h5 class="my-1">{{ editedItem.title }}</h5> | 231 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 232 | </v-flex> | 232 | </v-flex> |
| 233 | </v-layout> | 233 | </v-layout> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs5 sm6> | 235 | <v-flex xs5 sm6> |
| 236 | <h5 class="right my-1"> | 236 | <h5 class="right my-1"> |
| 237 | <b>Description:</b> | 237 | <b>Description:</b> |
| 238 | </h5> | 238 | </h5> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | <v-flex sm6 xs8> | 240 | <v-flex sm6 xs8> |
| 241 | <h5 class="my-1">{{ editedItem.description }}</h5> | 241 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 242 | </v-flex> | 242 | </v-flex> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | <v-layout> | 244 | <v-layout> |
| 245 | <v-flex xs5 sm6> | 245 | <v-flex xs5 sm6> |
| 246 | <h5 class="right my-1"> | 246 | <h5 class="right my-1"> |
| 247 | <b>You Tube Link Url:</b> | 247 | <b>You Tube Link Url:</b> |
| 248 | </h5> | 248 | </h5> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | <v-flex sm6 xs8> | 250 | <v-flex sm6 xs8> |
| 251 | <h5 class="my-1 ml-3"> | 251 | <h5 class="my-1 ml-3"> |
| 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> | 252 | <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> |
| 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> | 253 | <li>{{ youTubeLinkUrl.youTubeLink }}</li> |
| 254 | </ul> | 254 | </ul> |
| 255 | </h5> | 255 | </h5> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | </v-layout> | 259 | </v-layout> |
| 260 | </v-container> | 260 | </v-container> |
| 261 | </v-card-text> | 261 | </v-card-text> |
| 262 | </v-card> | 262 | </v-card> |
| 263 | </v-dialog> | 263 | </v-dialog> |
| 264 | 264 | ||
| 265 | <!-- ****** Gallery TABLE ****** --> | 265 | <!-- ****** Gallery TABLE ****** --> |
| 266 | 266 | ||
| 267 | <v-toolbar color="transparent" flat> | 267 | <v-toolbar color="transparent" flat> |
| 268 | <v-btn | 268 | <v-btn |
| 269 | fab | 269 | fab |
| 270 | dark | 270 | dark |
| 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 271 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 272 | small | 272 | small |
| 273 | @click="addGalleryDialog = true" | 273 | @click="addGalleryDialog = true" |
| 274 | > | 274 | > |
| 275 | <v-icon dark>add</v-icon> | 275 | <v-icon dark>add</v-icon> |
| 276 | </v-btn> | 276 | </v-btn> |
| 277 | <v-btn | 277 | <v-btn |
| 278 | round | 278 | round |
| 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 279 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 280 | dark | 280 | dark |
| 281 | @click="addGalleryDialog = true" | 281 | @click="addGalleryDialog = true" |
| 282 | > | 282 | > |
| 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery | 283 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Gallery |
| 284 | </v-btn> | 284 | </v-btn> |
| 285 | <v-spacer></v-spacer> | 285 | <v-spacer></v-spacer> |
| 286 | <v-card-title class="body-1" v-show="show"> | 286 | <v-card-title class="body-1" v-show="show"> |
| 287 | <v-btn icon large flat @click="displaySearch"> | 287 | <v-btn icon large flat @click="displaySearch"> |
| 288 | <v-avatar size="27"> | 288 | <v-avatar size="27"> |
| 289 | <img src="/static/icon/search.png" alt="icon" /> | 289 | <img src="/static/icon/search.png" alt="icon" /> |
| 290 | </v-avatar> | 290 | </v-avatar> |
| 291 | </v-btn> | 291 | </v-btn> |
| 292 | </v-card-title> | 292 | </v-card-title> |
| 293 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 293 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 294 | <v-layout> | 294 | <v-layout> |
| 295 | <v-text-field | 295 | <v-text-field |
| 296 | autofocus | 296 | autofocus |
| 297 | v-model="search" | 297 | v-model="search" |
| 298 | label="Search" | 298 | label="Search" |
| 299 | prepend-inner-icon="search" | 299 | prepend-inner-icon="search" |
| 300 | color="primary" | 300 | color="primary" |
| 301 | ></v-text-field> | 301 | ></v-text-field> |
| 302 | <v-icon @click="closeSearch" color="error">close</v-icon> | 302 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 303 | </v-layout> | 303 | </v-layout> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | </v-toolbar> | 305 | </v-toolbar> |
| 306 | <v-data-table | 306 | <v-data-table |
| 307 | :headers="headers" | 307 | :headers="headers" |
| 308 | :items="desserts" | 308 | :items="desserts" |
| 309 | :pagination.sync="pagination" | 309 | :pagination.sync="pagination" |
| 310 | :search="search" | 310 | :search="search" |
| 311 | > | 311 | > |
| 312 | <template slot="items" slot-scope="props"> | 312 | <template slot="items" slot-scope="props"> |
| 313 | <tr class="tr"> | 313 | <tr class="tr"> |
| 314 | <td class="td td-row">{{ props.index + 1}}</td> | 314 | <td class="td td-row">{{ props.index + 1}}</td> |
| 315 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 315 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 316 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 316 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 317 | <td class="td td-row text-xs-center"> | 317 | <td class="td td-row text-xs-center"> |
| 318 | <span> | 318 | <span> |
| 319 | <v-tooltip top> | 319 | <v-tooltip top> |
| 320 | <img | 320 | <img |
| 321 | slot="activator" | 321 | slot="activator" |
| 322 | style="cursor:pointer; width:25px; height:25px; " | 322 | style="cursor:pointer; width:25px; height:25px; " |
| 323 | class="mr-3" | 323 | class="mr-3" |
| 324 | @click="profile(props.item)" | 324 | @click="profile(props.item)" |
| 325 | src="/static/icon/view.png" | 325 | src="/static/icon/view.png" |
| 326 | /> | 326 | /> |
| 327 | <span>View</span> | 327 | <span>View</span> |
| 328 | </v-tooltip> | 328 | </v-tooltip> |
| 329 | <v-tooltip top> | 329 | <v-tooltip top> |
| 330 | <img | 330 | <img |
| 331 | slot="activator" | 331 | slot="activator" |
| 332 | style="cursor:pointer; width:20px; height:18px; " | 332 | style="cursor:pointer; width:20px; height:18px; " |
| 333 | class="mr-3" | 333 | class="mr-3" |
| 334 | @click="editItem(props.item)" | 334 | @click="editItem(props.item)" |
| 335 | src="/static/icon/edit.png" | 335 | src="/static/icon/edit.png" |
| 336 | /> | 336 | /> |
| 337 | <span>Edit</span> | 337 | <span>Edit</span> |
| 338 | </v-tooltip> | 338 | </v-tooltip> |
| 339 | <v-tooltip top> | 339 | <v-tooltip top> |
| 340 | <img | 340 | <img |
| 341 | slot="activator" | 341 | slot="activator" |
| 342 | style="cursor:pointer; width:20px; height:20px; " | 342 | style="cursor:pointer; width:20px; height:20px; " |
| 343 | class="mr-3" | 343 | class="mr-3" |
| 344 | @click="deleteItem(props.item)" | 344 | @click="deleteItem(props.item)" |
| 345 | src="/static/icon/delete.png" | 345 | src="/static/icon/delete.png" |
| 346 | /> | 346 | /> |
| 347 | <span>Delete</span> | 347 | <span>Delete</span> |
| 348 | </v-tooltip> | 348 | </v-tooltip> |
| 349 | </span> | 349 | </span> |
| 350 | </td> | 350 | </td> |
| 351 | </tr> | 351 | </tr> |
| 352 | </template> | 352 | </template> |
| 353 | <v-alert | 353 | <v-alert |
| 354 | slot="no-results" | 354 | slot="no-results" |
| 355 | :value="true" | 355 | :value="true" |
| 356 | color="error" | 356 | color="error" |
| 357 | icon="warning" | 357 | icon="warning" |
| 358 | >Your search for "{{ search }}" found no results.</v-alert> | 358 | >Your search for "{{ search }}" found no results.</v-alert> |
| 359 | </v-data-table> | 359 | </v-data-table> |
| 360 | <!-- ****** ADD Gallery ****** --> | 360 | <!-- ****** ADD Gallery ****** --> |
| 361 | <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog"> | 361 | <v-dialog v-model="addGalleryDialog" max-width="600px" v-if="addGalleryDialog" persistent> |
| 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 Gallery</label> | 365 | <label class="title text-xs-center">Add Gallery</label> |
| 366 | <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon> | 366 | <v-icon size="24" class="right" @click="closeAddGalleryModel">cancel</v-icon> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | </v-layout> | 368 | </v-layout> |
| 369 | <v-form ref="form" v-model="valid" lazy-validation> | 369 | <v-form ref="form" v-model="valid" lazy-validation> |
| 370 | <v-container fluid> | 370 | <v-container fluid> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 372 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 373 | <input | 373 | <input |
| 374 | type="file" | 374 | type="file" |
| 375 | style="display: none" | 375 | style="display: none" |
| 376 | ref="image" | 376 | ref="image" |
| 377 | accept="image/*" | 377 | accept="image/*" |
| 378 | multiple | 378 | multiple |
| 379 | @change="onFilePicked" | 379 | @change="onFilePicked" |
| 380 | /> | 380 | /> |
| 381 | <v-layout justify-center> | 381 | <v-layout justify-center> |
| 382 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 382 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 383 | <img :src="file" height="150" width="150" /> | 383 | <img :src="file" height="150" width="150" /> |
| 384 | </v-flex> | 384 | </v-flex> |
| 385 | </v-layout> | 385 | </v-layout> |
| 386 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> | 386 | <img src="/static/icon/user.png" v-if="files ==''" height="100" width="100;" /> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | </v-layout> | 388 | </v-layout> |
| 389 | <v-flex xs12> | 389 | <v-flex xs12> |
| 390 | <v-layout> | 390 | <v-layout> |
| 391 | <v-flex xs4 class="pt-4 subheading"> | 391 | <v-flex xs4 class="pt-4 subheading"> |
| 392 | <label class="right">Title:</label> | 392 | <label class="right">Title:</label> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | <v-flex xs8 sm8 md7 class="ml-3"> | 394 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 395 | <v-text-field | 395 | <v-text-field |
| 396 | v-model="addGallery.title" | 396 | v-model="addGallery.title" |
| 397 | placeholder="fill your Title" | 397 | placeholder="fill your Title" |
| 398 | name="name" | 398 | name="name" |
| 399 | type="text" | 399 | type="text" |
| 400 | :rules="titleRules" | 400 | :rules="titleRules" |
| 401 | required | 401 | required |
| 402 | ></v-text-field> | 402 | ></v-text-field> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | </v-layout> | 404 | </v-layout> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | <v-flex xs12> | 406 | <v-flex xs12> |
| 407 | <v-layout> | 407 | <v-layout> |
| 408 | <v-flex xs4 class="pt-4 subheading"> | 408 | <v-flex xs4 class="pt-4 subheading"> |
| 409 | <label class="right">Description:</label> | 409 | <label class="right">Description:</label> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-flex xs8 sm8 md7 class="ml-3"> | 411 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 412 | <v-text-field | 412 | <v-text-field |
| 413 | placeholder="fill your Description" | 413 | placeholder="fill your Description" |
| 414 | :rules="descriptionRules" | 414 | :rules="descriptionRules" |
| 415 | v-model="addGallery.description" | 415 | v-model="addGallery.description" |
| 416 | type="text" | 416 | type="text" |
| 417 | name="email" | 417 | name="email" |
| 418 | required | 418 | required |
| 419 | ></v-text-field> | 419 | ></v-text-field> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | </v-layout> | 421 | </v-layout> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | <v-flex xs12> | 423 | <v-flex xs12> |
| 424 | <v-layout> | 424 | <v-layout> |
| 425 | <v-flex xs4 class="pt-4 subheading"> | 425 | <v-flex xs4 class="pt-4 subheading"> |
| 426 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 426 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 427 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 427 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex xs8 sm8 md7 class="ml-3"> | 429 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 430 | <v-select | 430 | <v-select |
| 431 | :items="addclass" | 431 | :items="addclass" |
| 432 | label="Select Class" | 432 | label="Select Class" |
| 433 | v-model="addGallery.classNum" | 433 | v-model="addGallery.classNum" |
| 434 | item-text="classNum" | 434 | item-text="classNum" |
| 435 | item-value="_id" | 435 | item-value="_id" |
| 436 | name="Select Class" | 436 | name="Select Class" |
| 437 | required | 437 | required |
| 438 | ></v-select> | 438 | ></v-select> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | <v-flex xs12> | 442 | <v-flex xs12> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs4 class="pt-4 subheading"> | 444 | <v-flex xs4 class="pt-4 subheading"> |
| 445 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 445 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm8 md7 class="ml-3"> | 448 | <v-flex xs8 sm8 md7 class="ml-3"> |
| 449 | <v-text-field | 449 | <v-text-field |
| 450 | label="Select Image" | 450 | label="Select Image" |
| 451 | @click="pickFile" | 451 | @click="pickFile" |
| 452 | v-model="imageName" | 452 | v-model="imageName" |
| 453 | append-icon="attach_file" | 453 | append-icon="attach_file" |
| 454 | multiple | 454 | multiple |
| 455 | ></v-text-field> | 455 | ></v-text-field> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | </v-layout> | 457 | </v-layout> |
| 458 | </v-flex> | 458 | </v-flex> |
| 459 | <v-layout> | 459 | <v-layout> |
| 460 | <v-flex xs12> | 460 | <v-flex xs12> |
| 461 | <div v-for="(youTubeLink,index) in finds" :key="index"> | 461 | <div v-for="(youTubeLink,index) in finds" :key="index"> |
| 462 | <v-layout> | 462 | <v-layout> |
| 463 | <v-flex xs4 class="pt-4 subheading"> | 463 | <v-flex xs4 class="pt-4 subheading"> |
| 464 | <label class="right">You Tube Url:</label> | 464 | <label class="right">You Tube Url:</label> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-flex xs8 sm8 md6 class="ml-3"> | 466 | <v-flex xs8 sm8 md6 class="ml-3"> |
| 467 | <v-text-field | 467 | <v-text-field |
| 468 | placeholder="fill your youtube link" | 468 | placeholder="fill your youtube link" |
| 469 | v-model="youTubeLink.value" | 469 | v-model="youTubeLink.value" |
| 470 | type="text" | 470 | type="text" |
| 471 | name="link" | 471 | name="link" |
| 472 | required | 472 | required |
| 473 | ></v-text-field> | 473 | ></v-text-field> |
| 474 | </v-flex> | 474 | </v-flex> |
| 475 | <v-flex xs2 class="pt-4"> | 475 | <v-flex xs2 class="pt-4"> |
| 476 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> | 476 | <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> |
| 477 | <v-icon @click="addFind">add_circle</v-icon> | 477 | <v-icon @click="addFind">add_circle</v-icon> |
| 478 | </v-flex> | 478 | </v-flex> |
| 479 | </v-layout> | 479 | </v-layout> |
| 480 | </div> | 480 | </div> |
| 481 | </v-flex> | 481 | </v-flex> |
| 482 | </v-layout> | 482 | </v-layout> |
| 483 | <v-layout> | 483 | <v-layout> |
| 484 | <v-flex xs12 sm12> | 484 | <v-flex xs12 sm12> |
| 485 | <v-layout class="right"> | 485 | <v-layout class="right"> |
| 486 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 486 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 487 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 487 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 488 | </v-layout> | 488 | </v-layout> |
| 489 | </v-flex> | 489 | </v-flex> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | </v-container> | 491 | </v-container> |
| 492 | </v-form> | 492 | </v-form> |
| 493 | </v-card> | 493 | </v-card> |
| 494 | </v-dialog> | 494 | </v-dialog> |
| 495 | <v-snackbar | 495 | <v-snackbar |
| 496 | :timeout="timeout" | 496 | :timeout="timeout" |
| 497 | :top="y === 'top'" | 497 | :top="y === 'top'" |
| 498 | :right="x === 'right'" | 498 | :right="x === 'right'" |
| 499 | :vertical="mode === 'vertical'" | 499 | :vertical="mode === 'vertical'" |
| 500 | v-model="snackbar" | 500 | v-model="snackbar" |
| 501 | :color="color" | 501 | :color="color" |
| 502 | >{{ text }}</v-snackbar> | 502 | >{{ text }}</v-snackbar> |
| 503 | <div class="loader" v-if="showLoader"> | 503 | <div class="loader" v-if="showLoader"> |
| 504 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 504 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 505 | </div> | 505 | </div> |
| 506 | </v-container> | 506 | </v-container> |
| 507 | </template> | 507 | </template> |
| 508 | 508 | ||
| 509 | <script> | 509 | <script> |
| 510 | import http from "@/Services/http.js"; | 510 | import http from "@/Services/http.js"; |
| 511 | 511 | ||
| 512 | export default { | 512 | export default { |
| 513 | data: () => ({ | 513 | data: () => ({ |
| 514 | snackbar: false, | 514 | snackbar: false, |
| 515 | y: "top", | 515 | y: "top", |
| 516 | x: "right", | 516 | x: "right", |
| 517 | mode: "", | 517 | mode: "", |
| 518 | timeout: 3000, | 518 | timeout: 3000, |
| 519 | text: "", | 519 | text: "", |
| 520 | loading: false, | 520 | loading: false, |
| 521 | color: "", | 521 | color: "", |
| 522 | date: null, | 522 | date: null, |
| 523 | search: "", | 523 | search: "", |
| 524 | show: true, | 524 | show: true, |
| 525 | addGalleryDialog: false, | 525 | addGalleryDialog: false, |
| 526 | showSearch: false, | 526 | showSearch: false, |
| 527 | showLoader: false, | 527 | showLoader: false, |
| 528 | editGalleryDialog: false, | 528 | editGalleryDialog: false, |
| 529 | viewProfileGallery: false, | 529 | viewProfileGallery: false, |
| 530 | valid: true, | 530 | valid: true, |
| 531 | editGalleryLoading: false, | 531 | editGalleryLoading: false, |
| 532 | addclass: [], | 532 | addclass: [], |
| 533 | addSection: [], | 533 | addSection: [], |
| 534 | finds: [{ value: "" }], | 534 | finds: [{ value: "" }], |
| 535 | updates: [{ youTubeLink: "" }], | 535 | updates: [{ youTubeLink: "" }], |
| 536 | youTubeLink: {}, | 536 | youTubeLink: {}, |
| 537 | addGallery: { | 537 | addGallery: { |
| 538 | youTubeLinkUrl: [], | 538 | youTubeLinkUrl: [], |
| 539 | }, | 539 | }, |
| 540 | pagination: { | 540 | pagination: { |
| 541 | rowsPerPage: 10, | 541 | rowsPerPage: 10, |
| 542 | }, | 542 | }, |
| 543 | imageName: "", | 543 | imageName: "", |
| 544 | imageUrl: "", | 544 | imageUrl: "", |
| 545 | imageFile: "", | 545 | imageFile: "", |
| 546 | image: [], | 546 | image: [], |
| 547 | upload: "", | 547 | upload: "", |
| 548 | editImageName: "", | 548 | editImageName: "", |
| 549 | editFiles: [], | 549 | editFiles: [], |
| 550 | files: [], | 550 | files: [], |
| 551 | token: "", | 551 | token: "", |
| 552 | titleRules: [(v) => !!v || " Tilte is required"], | 552 | titleRules: [(v) => !!v || " Tilte is required"], |
| 553 | descriptionRules: [(v) => !!v || " Description is required"], | 553 | descriptionRules: [(v) => !!v || " Description is required"], |
| 554 | headers: [ | 554 | headers: [ |
| 555 | { | 555 | { |
| 556 | align: "", | 556 | align: "", |
| 557 | text: "No", | 557 | text: "No", |
| 558 | sortable: false, | 558 | sortable: false, |
| 559 | value: "index", | 559 | value: "index", |
| 560 | }, | 560 | }, |
| 561 | { text: "Title", value: "title", sortable: false, align: "center" }, | 561 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 562 | { | 562 | { |
| 563 | text: "Description", | 563 | text: "Description", |
| 564 | value: "description", | 564 | value: "description", |
| 565 | sortable: false, | 565 | sortable: false, |
| 566 | align: "center", | 566 | align: "center", |
| 567 | }, | 567 | }, |
| 568 | { text: "Action", value: "", sortable: false, align: "center" }, | 568 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 569 | ], | 569 | ], |
| 570 | desserts: [], | 570 | desserts: [], |
| 571 | editedIndex: -1, | 571 | editedIndex: -1, |
| 572 | editedItem: {}, | 572 | editedItem: {}, |
| 573 | index: "", | 573 | index: "", |
| 574 | }), | 574 | }), |
| 575 | watch: { | 575 | watch: { |
| 576 | addGalleryDialog: function (val) { | 576 | addGalleryDialog: function (val) { |
| 577 | if (!val) { | 577 | if (!val) { |
| 578 | this.addGallery = []; | 578 | this.addGallery = []; |
| 579 | this.imageName = ""; | 579 | this.imageName = ""; |
| 580 | this.youTubeLinkUrl = []; | 580 | this.youTubeLinkUrl = []; |
| 581 | this.youTubeLink = {}; | 581 | this.youTubeLink = {}; |
| 582 | this.index = ""; | 582 | this.index = ""; |
| 583 | this.files = []; | 583 | this.files = []; |
| 584 | } | 584 | } |
| 585 | }, | 585 | }, |
| 586 | }, | 586 | }, |
| 587 | methods: { | 587 | methods: { |
| 588 | pickFile() { | 588 | pickFile() { |
| 589 | this.$refs.image.click(); | 589 | this.$refs.image.click(); |
| 590 | }, | 590 | }, |
| 591 | editPickFile() { | 591 | editPickFile() { |
| 592 | this.$refs.editImage.click(); | 592 | this.$refs.editImage.click(); |
| 593 | }, | 593 | }, |
| 594 | onFilePicked(e) { | 594 | onFilePicked(e) { |
| 595 | const files = e.target.files; | 595 | const files = e.target.files; |
| 596 | /** fetch Image Name **/ | 596 | /** fetch Image Name **/ |
| 597 | if (files[0] !== undefined) { | 597 | if (files[0] !== undefined) { |
| 598 | this.imageName = files[0].name; | 598 | this.imageName = files[0].name; |
| 599 | if (this.imageName.lastIndexOf(".") <= 0) { | 599 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 600 | return; | 600 | return; |
| 601 | } | 601 | } |
| 602 | this.files = []; | 602 | this.files = []; |
| 603 | // console.log("files", this.files); | 603 | // console.log("files", this.files); |
| 604 | /** Select many image and showing many image add to Gallery card **/ | 604 | /** Select many image and showing many image add to Gallery card **/ |
| 605 | const test = Array.from(files).forEach((file, idx) => { | 605 | const test = Array.from(files).forEach((file, idx) => { |
| 606 | const fr = new FileReader(); | 606 | const fr = new FileReader(); |
| 607 | const getResult = new Promise((resolve) => { | 607 | const getResult = new Promise((resolve) => { |
| 608 | fr.onload = (e) => { | 608 | fr.onload = (e) => { |
| 609 | this.files.push( | 609 | this.files.push( |
| 610 | // id: idx, | 610 | // id: idx, |
| 611 | e.target.result | 611 | e.target.result |
| 612 | ); | 612 | ); |
| 613 | }; | 613 | }; |
| 614 | console.log("uploadImage=======>", this.files); | 614 | console.log("uploadImage=======>", this.files); |
| 615 | }); | 615 | }); |
| 616 | fr.readAsDataURL(file); | 616 | fr.readAsDataURL(file); |
| 617 | return getResult.then((file) => { | 617 | return getResult.then((file) => { |
| 618 | return file; | 618 | return file; |
| 619 | }); | 619 | }); |
| 620 | }); | 620 | }); |
| 621 | const fr = new FileReader(); | 621 | const fr = new FileReader(); |
| 622 | fr.readAsDataURL(files[0]); | 622 | fr.readAsDataURL(files[0]); |
| 623 | fr.addEventListener("load", () => { | 623 | fr.addEventListener("load", () => { |
| 624 | this.imageFile = files; // this is an image file that can be sent to server... | 624 | this.imageFile = files; // this is an image file that can be sent to server... |
| 625 | }); | 625 | }); |
| 626 | } else { | 626 | } else { |
| 627 | this.imageName = ""; | 627 | this.imageName = ""; |
| 628 | this.imageFile = ""; | 628 | this.imageFile = ""; |
| 629 | this.imageUrl = ""; | 629 | this.imageUrl = ""; |
| 630 | } | 630 | } |
| 631 | }, | 631 | }, |
| 632 | editFilePicked(e) { | 632 | editFilePicked(e) { |
| 633 | const files = e.target.files; | 633 | const files = e.target.files; |
| 634 | /** fetch Image Name **/ | 634 | /** fetch Image Name **/ |
| 635 | if (files[0] !== undefined) { | 635 | if (files[0] !== undefined) { |
| 636 | this.editImageName = files[0].name; | 636 | this.editImageName = files[0].name; |
| 637 | if (this.editImageName.lastIndexOf(".") <= 0) { | 637 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 638 | return; | 638 | return; |
| 639 | } | 639 | } |
| 640 | /** Select many image and showing many image add to Gallery card **/ | 640 | /** Select many image and showing many image add to Gallery card **/ |
| 641 | const test = Array.from(files).forEach((file, idx) => { | 641 | const test = Array.from(files).forEach((file, idx) => { |
| 642 | const fr = new FileReader(); | 642 | const fr = new FileReader(); |
| 643 | const getResult = new Promise((resolve) => { | 643 | const getResult = new Promise((resolve) => { |
| 644 | fr.onload = (e) => { | 644 | fr.onload = (e) => { |
| 645 | this.editFiles.push( | 645 | this.editFiles.push( |
| 646 | // id: idx, | 646 | // id: idx, |
| 647 | e.target.result | 647 | e.target.result |
| 648 | ); | 648 | ); |
| 649 | }; | 649 | }; |
| 650 | console.log("uploadeditFilesImage=======>", this.editFiles); | 650 | console.log("uploadeditFilesImage=======>", this.editFiles); |
| 651 | }); | 651 | }); |
| 652 | fr.readAsDataURL(file); | 652 | fr.readAsDataURL(file); |
| 653 | return getResult.then((file) => { | 653 | return getResult.then((file) => { |
| 654 | return file; | 654 | return file; |
| 655 | }); | 655 | }); |
| 656 | }); | 656 | }); |
| 657 | const fr = new FileReader(); | 657 | const fr = new FileReader(); |
| 658 | fr.readAsDataURL(files[0]); | 658 | fr.readAsDataURL(files[0]); |
| 659 | // fr.addEventListener("load", () => { | 659 | // fr.addEventListener("load", () => { |
| 660 | // this.imageFile = files; // this is an image file that can be sent to server... | 660 | // this.imageFile = files; // this is an image file that can be sent to server... |
| 661 | // }); | 661 | // }); |
| 662 | } else { | 662 | } else { |
| 663 | this.editImageName = ""; | 663 | this.editImageName = ""; |
| 664 | this.editFiles = []; | 664 | this.editFiles = []; |
| 665 | } | 665 | } |
| 666 | }, | 666 | }, |
| 667 | getGalleryList() { | 667 | getGalleryList() { |
| 668 | this.showLoader = true; | 668 | this.showLoader = true; |
| 669 | http() | 669 | http() |
| 670 | .get("/getGalleryList", { | 670 | .get("/getGalleryList", { |
| 671 | headers: { Authorization: "Bearer " + this.token }, | 671 | headers: { Authorization: "Bearer " + this.token }, |
| 672 | }) | 672 | }) |
| 673 | .then((response) => { | 673 | .then((response) => { |
| 674 | this.desserts = response.data.data; | 674 | this.desserts = response.data.data; |
| 675 | this.showLoader = false; | 675 | this.showLoader = false; |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | // console.log("err====>", err); | 678 | // console.log("err====>", err); |
| 679 | this.showLoader = false; | 679 | this.showLoader = false; |
| 680 | if (error.response.status === 401) { | 680 | if (error.response.status === 401) { |
| 681 | this.$router.replace({ path: "/" }); | 681 | this.$router.replace({ path: "/" }); |
| 682 | this.$store.dispatch("setToken", null); | 682 | this.$store.dispatch("setToken", null); |
| 683 | this.$store.dispatch("Id", null); | 683 | this.$store.dispatch("Id", null); |
| 684 | } | 684 | } |
| 685 | }); | 685 | }); |
| 686 | }, | 686 | }, |
| 687 | editItem(item) { | 687 | editItem(item) { |
| 688 | this.files = []; | 688 | this.files = []; |
| 689 | this.editedIndex = this.desserts.indexOf(item); | 689 | this.editedIndex = this.desserts.indexOf(item); |
| 690 | this.editedItem = Object.assign({}, item); | 690 | this.editedItem = Object.assign({}, item); |
| 691 | this.editGalleryDialog = true; | 691 | this.editGalleryDialog = true; |
| 692 | }, | 692 | }, |
| 693 | profile(item) { | 693 | profile(item) { |
| 694 | this.editedIndex = this.desserts.indexOf(item); | 694 | this.editedIndex = this.desserts.indexOf(item); |
| 695 | this.editedItem = Object.assign({}, item); | 695 | this.editedItem = Object.assign({}, item); |
| 696 | this.viewProfileGallery = true; | 696 | this.viewProfileGallery = true; |
| 697 | }, | 697 | }, |
| 698 | deleteItem(item) { | 698 | deleteItem(item) { |
| 699 | let deleteGallery = { | 699 | let deleteGallery = { |
| 700 | galleryId: item._id, | 700 | galleryId: item._id, |
| 701 | }; | 701 | }; |
| 702 | http() | 702 | http() |
| 703 | .delete( | 703 | .delete( |
| 704 | "/deleteGallery", | 704 | "/deleteGallery", |
| 705 | confirm("Are you sure you want to delete this?") && { | 705 | confirm("Are you sure you want to delete this?") && { |
| 706 | params: deleteGallery, | 706 | params: deleteGallery, |
| 707 | headers: { | 707 | headers: { |
| 708 | Authorization: "Bearer " + this.token, | 708 | Authorization: "Bearer " + this.token, |
| 709 | }, | 709 | }, |
| 710 | } | 710 | } |
| 711 | ) | 711 | ) |
| 712 | .then((response) => { | 712 | .then((response) => { |
| 713 | this.snackbar = true; | 713 | this.snackbar = true; |
| 714 | this.text = "Successfully delete Existing Gallery"; | 714 | this.text = "Successfully delete Existing Gallery"; |
| 715 | this.color = "green"; | 715 | this.color = "green"; |
| 716 | this.getGalleryList(); | 716 | this.getGalleryList(); |
| 717 | }) | 717 | }) |
| 718 | .catch((error) => { | 718 | .catch((error) => { |
| 719 | // console.log(error); | 719 | // console.log(error); |
| 720 | this.snackbar = true; | 720 | this.snackbar = true; |
| 721 | this.text = error.response.data.message; | 721 | this.text = error.response.data.message; |
| 722 | this.color = "error"; | 722 | this.color = "error"; |
| 723 | }); | 723 | }); |
| 724 | }, | 724 | }, |
| 725 | deleteImage(imageId, id) { | 725 | deleteImage(imageId, id) { |
| 726 | let deleteImages = { | 726 | let deleteImages = { |
| 727 | galleryId: id, | 727 | galleryId: id, |
| 728 | imageId: imageId, | 728 | imageId: imageId, |
| 729 | }; | 729 | }; |
| 730 | http() | 730 | http() |
| 731 | .put("/deleteImage", deleteImages) | 731 | .put("/deleteImage", deleteImages) |
| 732 | .then((response) => { | 732 | .then((response) => { |
| 733 | this.snackbar = true; | 733 | this.snackbar = true; |
| 734 | this.text = response.data.message; | 734 | this.text = response.data.message; |
| 735 | this.color = "green"; | 735 | this.color = "green"; |
| 736 | this.getGalleryList(); | 736 | this.getGalleryList(); |
| 737 | this.close(); | 737 | this.close(); |
| 738 | }) | 738 | }) |
| 739 | .catch((error) => { | 739 | .catch((error) => { |
| 740 | this.snackbar = true; | 740 | this.snackbar = true; |
| 741 | this.text = error.response.data.message; | 741 | this.text = error.response.data.message; |
| 742 | this.color = "error"; | 742 | this.color = "error"; |
| 743 | }); | 743 | }); |
| 744 | }, | 744 | }, |
| 745 | close() { | 745 | close() { |
| 746 | this.editGalleryDialog = false; | 746 | this.editGalleryDialog = false; |
| 747 | }, | 747 | }, |
| 748 | closeProfileGallery() { | 748 | closeProfileGallery() { |
| 749 | this.viewProfileGallery = false; | 749 | this.viewProfileGallery = false; |
| 750 | }, | 750 | }, |
| 751 | closeAddGalleryModel() { | 751 | closeAddGalleryModel() { |
| 752 | this.addGalleryDialog = false; | 752 | this.addGalleryDialog = false; |
| 753 | this.addGallery = []; | 753 | this.addGallery = []; |
| 754 | this.imageName = ""; | 754 | this.imageName = ""; |
| 755 | this.youTubeLinkUrl = []; | 755 | this.youTubeLinkUrl = []; |
| 756 | this.youTubeLink = {}; | 756 | this.youTubeLink = {}; |
| 757 | this.index = ""; | 757 | this.index = ""; |
| 758 | this.files = []; | 758 | this.files = []; |
| 759 | }, | 759 | }, |
| 760 | submit() { | 760 | submit() { |
| 761 | for (let i = 0; i < this.finds.length; i++) { | 761 | for (let i = 0; i < this.finds.length; i++) { |
| 762 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); | 762 | this.addGallery.youTubeLinkUrl.push(this.finds[i].value); |
| 763 | } | 763 | } |
| 764 | if (this.$refs.form.validate()) { | 764 | if (this.$refs.form.validate()) { |
| 765 | if (this.files) { | 765 | if (this.files) { |
| 766 | var ary = []; | 766 | var ary = []; |
| 767 | var imageData = []; | 767 | var imageData = []; |
| 768 | ary = this.files; | 768 | ary = this.files; |
| 769 | for (let i = 0; i < ary.length; i++) { | 769 | for (let i = 0; i < ary.length; i++) { |
| 770 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 770 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 771 | imageData.push(imageUrl); | 771 | imageData.push(imageUrl); |
| 772 | this.addGallery.upload = imageData; | 772 | this.addGallery.upload = imageData; |
| 773 | } | 773 | } |
| 774 | } | 774 | } |
| 775 | if (this.addGallery.youTubeLinkUrl == "") { | 775 | if (this.addGallery.youTubeLinkUrl == "") { |
| 776 | var galleryData = { | 776 | var galleryData = { |
| 777 | classId: this.addGallery.classNum, | 777 | classId: this.addGallery.classNum, |
| 778 | title: this.addGallery.title, | 778 | title: this.addGallery.title, |
| 779 | description: this.addGallery.description, | 779 | description: this.addGallery.description, |
| 780 | upload: this.addGallery.upload, | 780 | upload: this.addGallery.upload, |
| 781 | }; | 781 | }; |
| 782 | this.loading = true; | 782 | this.loading = true; |
| 783 | http() | 783 | http() |
| 784 | .post("/createGallery", galleryData) | 784 | .post("/createGallery", galleryData) |
| 785 | .then((response) => { | 785 | .then((response) => { |
| 786 | this.getGalleryList(); | 786 | this.getGalleryList(); |
| 787 | this.addGalleryDialog = false; | 787 | this.addGalleryDialog = false; |
| 788 | this.loading = false; | 788 | this.loading = false; |
| 789 | this.snackbar = true; | 789 | this.snackbar = true; |
| 790 | this.text = response.data.message; | 790 | this.text = response.data.message; |
| 791 | this.color = "green"; | 791 | this.color = "green"; |
| 792 | this.clear(); | 792 | this.clear(); |
| 793 | this.files = ""; | 793 | this.files = ""; |
| 794 | }) | 794 | }) |
| 795 | .catch((error) => { | 795 | .catch((error) => { |
| 796 | this.snackbar = true; | 796 | this.snackbar = true; |
| 797 | this.text = error.response.data.message; | 797 | this.text = error.response.data.message; |
| 798 | this.color = "error"; | 798 | this.color = "error"; |
| 799 | this.loading = false; | 799 | this.loading = false; |
| 800 | }); | 800 | }); |
| 801 | } else if (this.addGallery.youTubeLinkUrl) { | 801 | } else if (this.addGallery.youTubeLinkUrl) { |
| 802 | this.loading = true; | 802 | this.loading = true; |
| 803 | http() | 803 | http() |
| 804 | .post("/createGallery", this.addGallery) | 804 | .post("/createGallery", this.addGallery) |
| 805 | .then((response) => { | 805 | .then((response) => { |
| 806 | this.getGalleryList(); | 806 | this.getGalleryList(); |
| 807 | this.addGalleryDialog = false; | 807 | this.addGalleryDialog = false; |
| 808 | this.files = "nmn"; | 808 | this.files = "nmn"; |
| 809 | this.loading = false; | 809 | this.loading = false; |
| 810 | this.snackbar = true; | 810 | this.snackbar = true; |
| 811 | this.color = "green"; | 811 | this.color = "green"; |
| 812 | this.text = response.data.message; | 812 | this.text = response.data.message; |
| 813 | this.clear(); | 813 | this.clear(); |
| 814 | this.removeAddFind(); | 814 | this.removeAddFind(); |
| 815 | this.files = ""; | 815 | this.files = ""; |
| 816 | }) | 816 | }) |
| 817 | .catch((error) => { | 817 | .catch((error) => { |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = error.response.data.message; | 819 | this.text = error.response.data.message; |
| 820 | this.loading = false; | 820 | this.loading = false; |
| 821 | this.color = "error"; | 821 | this.color = "error"; |
| 822 | }); | 822 | }); |
| 823 | } | 823 | } |
| 824 | } | 824 | } |
| 825 | }, | 825 | }, |
| 826 | clear() { | 826 | clear() { |
| 827 | this.$refs.form.reset(); | 827 | this.$refs.form.reset(); |
| 828 | this.files = []; | 828 | this.files = []; |
| 829 | }, | 829 | }, |
| 830 | save() { | 830 | save() { |
| 831 | this.editedItem.gelleryId = this.editedItem._id; | 831 | this.editedItem.gelleryId = this.editedItem._id; |
| 832 | var linkUrl = []; | 832 | var linkUrl = []; |
| 833 | for (let i = 0; i < this.updates.length; i++) { | 833 | for (let i = 0; i < this.updates.length; i++) { |
| 834 | linkUrl.push(this.updates[i].youTubeLink); | 834 | linkUrl.push(this.updates[i].youTubeLink); |
| 835 | } | 835 | } |
| 836 | if (this.editFiles) { | 836 | if (this.editFiles) { |
| 837 | var ary = []; | 837 | var ary = []; |
| 838 | var imageData = []; | 838 | var imageData = []; |
| 839 | ary = this.editFiles; | 839 | ary = this.editFiles; |
| 840 | for (let i = 0; i < ary.length; i++) { | 840 | for (let i = 0; i < ary.length; i++) { |
| 841 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 841 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 842 | imageData.push(imageUrl); | 842 | imageData.push(imageUrl); |
| 843 | this.editedItem.editFiles = imageData; | 843 | this.editedItem.editFiles = imageData; |
| 844 | } | 844 | } |
| 845 | } | 845 | } |
| 846 | if (linkUrl != "") { | 846 | if (linkUrl != "") { |
| 847 | var updateData = { | 847 | var updateData = { |
| 848 | galleryId: this.editedItem._id, | 848 | galleryId: this.editedItem._id, |
| 849 | description: this.editedItem.description, | 849 | description: this.editedItem.description, |
| 850 | classId: this.editedItem.classNum, | 850 | classId: this.editedItem.classNum, |
| 851 | uploadImage: this.editedItem.editFiles, | 851 | uploadImage: this.editedItem.editFiles, |
| 852 | title: this.editedItem.title, | 852 | title: this.editedItem.title, |
| 853 | updateYouTubeLinkUrl: linkUrl, | 853 | updateYouTubeLinkUrl: linkUrl, |
| 854 | }; | 854 | }; |
| 855 | } else if (linkUrl == "") { | 855 | } else if (linkUrl == "") { |
| 856 | var updateData = { | 856 | var updateData = { |
| 857 | galleryId: this.editedItem._id, | 857 | galleryId: this.editedItem._id, |
| 858 | description: this.editedItem.description, | 858 | description: this.editedItem.description, |
| 859 | classId: this.editedItem.classNum, | 859 | classId: this.editedItem.classNum, |
| 860 | uploadImage: this.editedItem.editFiles, | 860 | uploadImage: this.editedItem.editFiles, |
| 861 | title: this.editedItem.title, | 861 | title: this.editedItem.title, |
| 862 | }; | 862 | }; |
| 863 | } | 863 | } |
| 864 | this.editGalleryLoading = true; | 864 | this.editGalleryLoading = true; |
| 865 | http() | 865 | http() |
| 866 | .put("/updateGallery", updateData) | 866 | .put("/updateGallery", updateData) |
| 867 | .then((response) => { | 867 | .then((response) => { |
| 868 | this.getGalleryList(); | 868 | this.getGalleryList(); |
| 869 | this.close(); | 869 | this.close(); |
| 870 | this.snackbar = true; | 870 | this.snackbar = true; |
| 871 | this.text = response.data.message; | 871 | this.text = response.data.message; |
| 872 | this.color = "green"; | 872 | this.color = "green"; |
| 873 | this.editGalleryLoading = false; | 873 | this.editGalleryLoading = false; |
| 874 | this.editImageName = ""; | 874 | this.editImageName = ""; |
| 875 | this.editFiles = []; | 875 | this.editFiles = []; |
| 876 | }) | 876 | }) |
| 877 | .catch((error) => { | 877 | .catch((error) => { |
| 878 | this.editGalleryLoading = false; | 878 | this.editGalleryLoading = false; |
| 879 | this.snackbar = true; | 879 | this.snackbar = true; |
| 880 | this.text = error.response.data.message; | 880 | this.text = error.response.data.message; |
| 881 | this.color = "error"; | 881 | this.color = "error"; |
| 882 | }); | 882 | }); |
| 883 | }, | 883 | }, |
| 884 | getAllClasses() { | 884 | getAllClasses() { |
| 885 | http() | 885 | http() |
| 886 | .get("/getClassesList", { | 886 | .get("/getClassesList", { |
| 887 | headers: { Authorization: "Bearer " + this.token }, | 887 | headers: { Authorization: "Bearer " + this.token }, |
| 888 | }) | 888 | }) |
| 889 | .then((response) => { | 889 | .then((response) => { |
| 890 | this.addclass = response.data.data; | 890 | this.addclass = response.data.data; |
| 891 | }) | 891 | }) |
| 892 | .catch((err) => { | 892 | .catch((err) => { |
| 893 | // console.log("err====>", err); | 893 | // console.log("err====>", err); |
| 894 | }); | 894 | }); |
| 895 | }, | 895 | }, |
| 896 | removeAddFind: function () { | 896 | removeAddFind: function () { |
| 897 | this.finds = [{ value: "" }]; | 897 | this.finds = [{ value: "" }]; |
| 898 | }, | 898 | }, |
| 899 | addFind: function () { | 899 | addFind: function () { |
| 900 | this.finds.push({ value: "" }); | 900 | this.finds.push({ value: "" }); |
| 901 | }, | 901 | }, |
| 902 | update: function () { | 902 | update: function () { |
| 903 | this.updates.push({ youTubeLink: "" }); | 903 | this.updates.push({ youTubeLink: "" }); |
| 904 | }, | 904 | }, |
| 905 | deleteFind: function (index) { | 905 | deleteFind: function (index) { |
| 906 | this.finds.splice(index, 1); | 906 | this.finds.splice(index, 1); |
| 907 | if (index === 0) this.addFind(); | 907 | if (index === 0) this.addFind(); |
| 908 | }, | 908 | }, |
| 909 | deleteUpdate: function (index) { | 909 | deleteUpdate: function (index) { |
| 910 | this.updates.splice(index, 1); | 910 | this.updates.splice(index, 1); |
| 911 | if (index === 0) this.update(); | 911 | if (index === 0) this.update(); |
| 912 | }, | 912 | }, |
| 913 | deleteUrl: function (index, youTubelinkId, id) { | 913 | deleteUrl: function (index, youTubelinkId, id) { |
| 914 | this.editedItem.youTubeLinkUrl.splice(index, 1); | 914 | this.editedItem.youTubeLinkUrl.splice(index, 1); |
| 915 | if (index === 0) this.update(); | 915 | if (index === 0) this.update(); |
| 916 | let deleteYouTubeUrl = { | 916 | let deleteYouTubeUrl = { |
| 917 | galleryId: id, | 917 | galleryId: id, |
| 918 | youTubeId: youTubelinkId, | 918 | youTubeId: youTubelinkId, |
| 919 | }; | 919 | }; |
| 920 | http() | 920 | http() |
| 921 | .put("/deleteYoutubeLink", deleteYouTubeUrl) | 921 | .put("/deleteYoutubeLink", deleteYouTubeUrl) |
| 922 | .then((response) => { | 922 | .then((response) => { |
| 923 | this.snackbar = true; | 923 | this.snackbar = true; |
| 924 | this.text = response.data.message; | 924 | this.text = response.data.message; |
| 925 | this.color = "green"; | 925 | this.color = "green"; |
| 926 | this.getGalleryList(); | 926 | this.getGalleryList(); |
| 927 | this.close(); | 927 | this.close(); |
| 928 | }) | 928 | }) |
| 929 | .catch((error) => { | 929 | .catch((error) => { |
| 930 | this.snackbar = true; | 930 | this.snackbar = true; |
| 931 | this.text = error.response.data.message; | 931 | this.text = error.response.data.message; |
| 932 | this.color = "error"; | 932 | this.color = "error"; |
| 933 | }); | 933 | }); |
| 934 | }, | 934 | }, |
| 935 | displaySearch() { | 935 | displaySearch() { |
| 936 | this.show = false; | 936 | this.show = false; |
| 937 | this.showSearch = true; | 937 | this.showSearch = true; |
| 938 | }, | 938 | }, |
| 939 | closeSearch() { | 939 | closeSearch() { |
| 940 | this.showSearch = false; | 940 | this.showSearch = false; |
| 941 | this.show = true; | 941 | this.show = true; |
| 942 | this.search = ""; | 942 | this.search = ""; |
| 943 | }, | 943 | }, |
| 944 | }, | 944 | }, |
| 945 | mounted() { | 945 | mounted() { |
| 946 | this.token = this.$store.state.token; | 946 | this.token = this.$store.state.token; |
| 947 | this.getAllClasses(); | 947 | this.getAllClasses(); |
| 948 | this.getGalleryList(); | 948 | this.getGalleryList(); |
| 949 | }, | 949 | }, |
| 950 | }; | 950 | }; |
| 951 | </script> | 951 | </script> |
src/pages/Holiday/holiday.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT HOLIDAY ****** --> | 3 | <!-- ****** EDIT HOLIDAY ****** --> |
| 4 | <v-dialog v-model="editHolidayDialog" max-width="500px"> | 4 | <v-dialog v-model="editHolidayDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Holiday</label> | 8 | <label class="title text-xs-center">Edit Holiday</label> |
| 9 | <v-icon size="24" class="right" @click="editHolidayDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editHolidayDialog = 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">Occasion:</label> | 16 | <label class="right">Occasion:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.occasion" | 20 | v-model="editedItem.occasion" |
| 21 | placeholder="fill your Occasion" | 21 | placeholder="fill your Occasion" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Date:</label> | 31 | <label class="right">Date:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 class="ml-3"> | 33 | <v-flex xs8 class="ml-3"> |
| 34 | <v-menu | 34 | <v-menu |
| 35 | ref="menu" | 35 | ref="menu" |
| 36 | :close-on-content-click="false" | 36 | :close-on-content-click="false" |
| 37 | :return-value.sync="editedItem.dateOfHoliday" | 37 | :return-value.sync="editedItem.dateOfHoliday" |
| 38 | v-model="menu" | 38 | v-model="menu" |
| 39 | :nudge-right="40" | 39 | :nudge-right="40" |
| 40 | lazy | 40 | lazy |
| 41 | transition="scale-transition" | 41 | transition="scale-transition" |
| 42 | offset-y | 42 | offset-y |
| 43 | full-width | 43 | full-width |
| 44 | min-width="290px" | 44 | min-width="290px" |
| 45 | > | 45 | > |
| 46 | <v-text-field | 46 | <v-text-field |
| 47 | slot="activator" | 47 | slot="activator" |
| 48 | :rules="dateRules" | 48 | :rules="dateRules" |
| 49 | v-model="editedItem.dateOfHoliday" | 49 | v-model="editedItem.dateOfHoliday" |
| 50 | append-icon="event" | 50 | append-icon="event" |
| 51 | placeholder="Select date" | 51 | placeholder="Select date" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | <v-date-picker | 53 | <v-date-picker |
| 54 | ref="picker" | 54 | ref="picker" |
| 55 | color="info" | 55 | color="info" |
| 56 | v-model="editedItem.dateOfHoliday" | 56 | v-model="editedItem.dateOfHoliday" |
| 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" | 57 | @input="$refs.menu.save(editedItem.dateOfHoliday)" |
| 58 | ></v-date-picker> | 58 | ></v-date-picker> |
| 59 | </v-menu> | 59 | </v-menu> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-layout> | 63 | <v-layout> |
| 64 | <v-flex xs12 sm12> | 64 | <v-flex xs12 sm12> |
| 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 65 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 66 | <v-spacer></v-spacer> | 66 | <v-spacer></v-spacer> |
| 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 67 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 68 | </v-card-actions> | 68 | </v-card-actions> |
| 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 69 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 70 | <v-spacer></v-spacer> | 70 | <v-spacer></v-spacer> |
| 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 71 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 72 | <v-spacer></v-spacer> | 72 | <v-spacer></v-spacer> |
| 73 | </v-card-actions> | 73 | </v-card-actions> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-container> | 76 | </v-container> |
| 77 | </v-card> | 77 | </v-card> |
| 78 | </v-dialog> | 78 | </v-dialog> |
| 79 | 79 | ||
| 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> | 80 | <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> |
| 81 | 81 | ||
| 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px"> | 82 | <v-dialog v-model="viewHolidayDialog" max-width="500px" persistent> |
| 83 | <v-card flat class="card-style pa-3" dark> | 83 | <v-card flat class="card-style pa-3" dark> |
| 84 | <v-layout> | 84 | <v-layout> |
| 85 | <v-flex xs12> | 85 | <v-flex xs12> |
| 86 | <label class="title text-xs-center">View Holiday</label> | 86 | <label class="title text-xs-center">View Holiday</label> |
| 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> | 87 | <v-icon size="24" class="right" @click="viewHolidayDialog = false">cancel</v-icon> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | <v-card-text> | 90 | <v-card-text> |
| 91 | <v-container grid-list-md> | 91 | <v-container grid-list-md> |
| 92 | <v-layout wrap> | 92 | <v-layout wrap> |
| 93 | <v-flex> | 93 | <v-flex> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 sm6> | 95 | <v-flex xs4 sm6> |
| 96 | <h5 class="right my-1"> | 96 | <h5 class="right my-1"> |
| 97 | <b>Occasion:</b> | 97 | <b>Occasion:</b> |
| 98 | </h5> | 98 | </h5> |
| 99 | </v-flex> | 99 | </v-flex> |
| 100 | <v-flex sm6 xs8> | 100 | <v-flex sm6 xs8> |
| 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> | 101 | <h5 class="my-1">{{ editedItem.occasion }}</h5> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs4 sm6> | 105 | <v-flex xs4 sm6> |
| 106 | <h5 class="right my-1"> | 106 | <h5 class="right my-1"> |
| 107 | <b>Date:</b> | 107 | <b>Date:</b> |
| 108 | </h5> | 108 | </h5> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | <v-flex sm6 xs8> | 110 | <v-flex sm6 xs8> |
| 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> | 111 | <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | </v-layout> | 113 | </v-layout> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-container> | 116 | </v-container> |
| 117 | </v-card-text> | 117 | </v-card-text> |
| 118 | </v-card> | 118 | </v-card> |
| 119 | </v-dialog> | 119 | </v-dialog> |
| 120 | <!-- ****** Holiday TABLE ****** --> | 120 | <!-- ****** Holiday TABLE ****** --> |
| 121 | <v-toolbar color="transparent" flat> | 121 | <v-toolbar color="transparent" flat> |
| 122 | <v-btn | 122 | <v-btn |
| 123 | fab | 123 | fab |
| 124 | dark | 124 | dark |
| 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 125 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 126 | small | 126 | small |
| 127 | @click="addHolidayDialog = true" | 127 | @click="addHolidayDialog = true" |
| 128 | > | 128 | > |
| 129 | <v-icon dark>add</v-icon> | 129 | <v-icon dark>add</v-icon> |
| 130 | </v-btn> | 130 | </v-btn> |
| 131 | <v-btn | 131 | <v-btn |
| 132 | round | 132 | round |
| 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 133 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 134 | dark | 134 | dark |
| 135 | @click="addHolidayDialog = true" | 135 | @click="addHolidayDialog = true" |
| 136 | > | 136 | > |
| 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday | 137 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Holiday |
| 138 | </v-btn> | 138 | </v-btn> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | <v-card-title class="body-1" v-show="show"> | 140 | <v-card-title class="body-1" v-show="show"> |
| 141 | <v-btn icon large flat @click="displaySearch"> | 141 | <v-btn icon large flat @click="displaySearch"> |
| 142 | <v-avatar size="27"> | 142 | <v-avatar size="27"> |
| 143 | <img src="/static/icon/search.png" alt="icon" /> | 143 | <img src="/static/icon/search.png" alt="icon" /> |
| 144 | </v-avatar> | 144 | </v-avatar> |
| 145 | </v-btn> | 145 | </v-btn> |
| 146 | </v-card-title> | 146 | </v-card-title> |
| 147 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 147 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-text-field | 149 | <v-text-field |
| 150 | autofocus | 150 | autofocus |
| 151 | v-model="search" | 151 | v-model="search" |
| 152 | label="Search" | 152 | label="Search" |
| 153 | prepend-inner-icon="search" | 153 | prepend-inner-icon="search" |
| 154 | color="primary" | 154 | color="primary" |
| 155 | ></v-text-field> | 155 | ></v-text-field> |
| 156 | <v-icon @click="closeSearch" color="error">close</v-icon> | 156 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 157 | </v-layout> | 157 | </v-layout> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-toolbar> | 159 | </v-toolbar> |
| 160 | <v-data-table | 160 | <v-data-table |
| 161 | :headers="headers" | 161 | :headers="headers" |
| 162 | :items="holidays" | 162 | :items="holidays" |
| 163 | :pagination.sync="pagination" | 163 | :pagination.sync="pagination" |
| 164 | :search="search" | 164 | :search="search" |
| 165 | > | 165 | > |
| 166 | <template slot="items" slot-scope="props"> | 166 | <template slot="items" slot-scope="props"> |
| 167 | <tr class="tr"> | 167 | <tr class="tr"> |
| 168 | <td class="td td-row">{{ props.index + 1}}</td> | 168 | <td class="td td-row">{{ props.index + 1}}</td> |
| 169 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> | 169 | <td class="text-xs-center td td-row">{{ props.item.occasion}}</td> |
| 170 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> | 170 | <td class="text-xs-center td td-row">{{ dates(props.item.dateOfHoliday) }}</td> |
| 171 | <td class="text-xs-center td td-row"> | 171 | <td class="text-xs-center td td-row"> |
| 172 | <span> | 172 | <span> |
| 173 | <v-tooltip top> | 173 | <v-tooltip top> |
| 174 | <img | 174 | <img |
| 175 | slot="activator" | 175 | slot="activator" |
| 176 | style="cursor:pointer; width:25px; height:25px; " | 176 | style="cursor:pointer; width:25px; height:25px; " |
| 177 | class="mr-3" | 177 | class="mr-3" |
| 178 | @click="profile(props.item)" | 178 | @click="profile(props.item)" |
| 179 | src="/static/icon/view.png" | 179 | src="/static/icon/view.png" |
| 180 | /> | 180 | /> |
| 181 | <span>View</span> | 181 | <span>View</span> |
| 182 | </v-tooltip> | 182 | </v-tooltip> |
| 183 | <v-tooltip top> | 183 | <v-tooltip top> |
| 184 | <img | 184 | <img |
| 185 | slot="activator" | 185 | slot="activator" |
| 186 | style="cursor:pointer; width:20px; height:18px; " | 186 | style="cursor:pointer; width:20px; height:18px; " |
| 187 | class="mr-3" | 187 | class="mr-3" |
| 188 | @click="editItem(props.item)" | 188 | @click="editItem(props.item)" |
| 189 | src="/static/icon/edit.png" | 189 | src="/static/icon/edit.png" |
| 190 | /> | 190 | /> |
| 191 | <span>Edit</span> | 191 | <span>Edit</span> |
| 192 | </v-tooltip> | 192 | </v-tooltip> |
| 193 | <v-tooltip top> | 193 | <v-tooltip top> |
| 194 | <img | 194 | <img |
| 195 | slot="activator" | 195 | slot="activator" |
| 196 | style="cursor:pointer; width:20px; height:20px; " | 196 | style="cursor:pointer; width:20px; height:20px; " |
| 197 | class="mr-3" | 197 | class="mr-3" |
| 198 | @click="deleteItem(props.item)" | 198 | @click="deleteItem(props.item)" |
| 199 | src="/static/icon/delete.png" | 199 | src="/static/icon/delete.png" |
| 200 | /> | 200 | /> |
| 201 | <span>Delete</span> | 201 | <span>Delete</span> |
| 202 | </v-tooltip> | 202 | </v-tooltip> |
| 203 | </span> | 203 | </span> |
| 204 | </td> | 204 | </td> |
| 205 | </tr> | 205 | </tr> |
| 206 | </template> | 206 | </template> |
| 207 | <v-alert | 207 | <v-alert |
| 208 | slot="no-results" | 208 | slot="no-results" |
| 209 | :value="true" | 209 | :value="true" |
| 210 | color="error" | 210 | color="error" |
| 211 | icon="warning" | 211 | icon="warning" |
| 212 | >Your search for "{{ search }}" found no results.</v-alert> | 212 | >Your search for "{{ search }}" found no results.</v-alert> |
| 213 | </v-data-table> | 213 | </v-data-table> |
| 214 | <!-- ****** ADD MULTIPLE Holiday ****** --> | 214 | <!-- ****** ADD MULTIPLE Holiday ****** --> |
| 215 | <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog"> | 215 | <v-dialog v-model="addHolidayDialog" max-width="400px" v-if="addHolidayDialog" persistent> |
| 216 | <v-card flat class="card-style pa-3" dark> | 216 | <v-card flat class="card-style pa-3" dark> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs12> | 218 | <v-flex xs12> |
| 219 | <label class="title text-xs-center">Add Holiday</label> | 219 | <label class="title text-xs-center">Add Holiday</label> |
| 220 | <v-icon size="24" class="right" @click="closeaddHolidayDialog">cancel</v-icon> | 220 | <v-icon size="24" class="right" @click="closeaddHolidayDialog">cancel</v-icon> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | <v-form ref="form" v-model="valid" lazy-validation> | 223 | <v-form ref="form" v-model="valid" lazy-validation> |
| 224 | <v-container fluid> | 224 | <v-container fluid> |
| 225 | <v-flex xs12> | 225 | <v-flex xs12> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs4 class="pt-4 subheading"> | 227 | <v-flex xs4 class="pt-4 subheading"> |
| 228 | <label class="right">Occasion:</label> | 228 | <label class="right">Occasion:</label> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex xs8 sm8 class="ml-3"> | 230 | <v-flex xs8 sm8 class="ml-3"> |
| 231 | <v-text-field | 231 | <v-text-field |
| 232 | v-model="addHoliday.occasion" | 232 | v-model="addHoliday.occasion" |
| 233 | placeholder="fill your Occasion" | 233 | placeholder="fill your Occasion" |
| 234 | type="text" | 234 | type="text" |
| 235 | :rules="occasionRules" | 235 | :rules="occasionRules" |
| 236 | required | 236 | required |
| 237 | ></v-text-field> | 237 | ></v-text-field> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | </v-layout> | 239 | </v-layout> |
| 240 | </v-flex> | 240 | </v-flex> |
| 241 | <v-flex xs12> | 241 | <v-flex xs12> |
| 242 | <v-layout> | 242 | <v-layout> |
| 243 | <v-flex xs4 class="pt-4 subheading"> | 243 | <v-flex xs4 class="pt-4 subheading"> |
| 244 | <label class="right">Date:</label> | 244 | <label class="right">Date:</label> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | <v-flex xs8 sm8 class="ml-3"> | 246 | <v-flex xs8 sm8 class="ml-3"> |
| 247 | <v-menu | 247 | <v-menu |
| 248 | ref="menu1" | 248 | ref="menu1" |
| 249 | :close-on-content-click="false" | 249 | :close-on-content-click="false" |
| 250 | v-model="menu1" | 250 | v-model="menu1" |
| 251 | :nudge-right="40" | 251 | :nudge-right="40" |
| 252 | :return-value.sync="addHoliday.dateOfHoliday" | 252 | :return-value.sync="addHoliday.dateOfHoliday" |
| 253 | lazy | 253 | lazy |
| 254 | transition="scale-transition" | 254 | transition="scale-transition" |
| 255 | offset-y | 255 | offset-y |
| 256 | full-width | 256 | full-width |
| 257 | min-width="290px" | 257 | min-width="290px" |
| 258 | > | 258 | > |
| 259 | <v-text-field | 259 | <v-text-field |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | :rules="dateRules" | 261 | :rules="dateRules" |
| 262 | v-model="addHoliday.dateOfHoliday" | 262 | v-model="addHoliday.dateOfHoliday" |
| 263 | append-icon="event" | 263 | append-icon="event" |
| 264 | label="Select date" | 264 | label="Select date" |
| 265 | ></v-text-field> | 265 | ></v-text-field> |
| 266 | <v-date-picker | 266 | <v-date-picker |
| 267 | ref="picker" | 267 | ref="picker" |
| 268 | color="info" | 268 | color="info" |
| 269 | v-model="addHoliday.dateOfHoliday" | 269 | v-model="addHoliday.dateOfHoliday" |
| 270 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" | 270 | @input="$refs.menu1.save(addHoliday.dateOfHoliday)" |
| 271 | ></v-date-picker> | 271 | ></v-date-picker> |
| 272 | </v-menu> | 272 | </v-menu> |
| 273 | </v-flex> | 273 | </v-flex> |
| 274 | </v-layout> | 274 | </v-layout> |
| 275 | </v-flex> | 275 | </v-flex> |
| 276 | <v-layout> | 276 | <v-layout> |
| 277 | <v-flex xs12> | 277 | <v-flex xs12> |
| 278 | <v-layout class="right"> | 278 | <v-layout class="right"> |
| 279 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 279 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 280 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 280 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 281 | </v-layout> | 281 | </v-layout> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | </v-layout> | 283 | </v-layout> |
| 284 | </v-container> | 284 | </v-container> |
| 285 | </v-form> | 285 | </v-form> |
| 286 | </v-card> | 286 | </v-card> |
| 287 | </v-dialog> | 287 | </v-dialog> |
| 288 | <v-snackbar | 288 | <v-snackbar |
| 289 | :timeout="timeout" | 289 | :timeout="timeout" |
| 290 | :top="y === 'top'" | 290 | :top="y === 'top'" |
| 291 | :right="x === 'right'" | 291 | :right="x === 'right'" |
| 292 | :vertical="mode === 'vertical'" | 292 | :vertical="mode === 'vertical'" |
| 293 | v-model="snackbar" | 293 | v-model="snackbar" |
| 294 | :color="color" | 294 | :color="color" |
| 295 | >{{ text }}</v-snackbar> | 295 | >{{ text }}</v-snackbar> |
| 296 | <div class="loader" v-if="showLoader"> | 296 | <div class="loader" v-if="showLoader"> |
| 297 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 297 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 298 | </div> | 298 | </div> |
| 299 | </v-container> | 299 | </v-container> |
| 300 | </template> | 300 | </template> |
| 301 | 301 | ||
| 302 | <script> | 302 | <script> |
| 303 | import http from "@/Services/http.js"; | 303 | import http from "@/Services/http.js"; |
| 304 | import moment from "moment"; | 304 | import moment from "moment"; |
| 305 | 305 | ||
| 306 | export default { | 306 | export default { |
| 307 | data: () => ({ | 307 | data: () => ({ |
| 308 | snackbar: false, | 308 | snackbar: false, |
| 309 | y: "top", | 309 | y: "top", |
| 310 | x: "right", | 310 | x: "right", |
| 311 | mode: "", | 311 | mode: "", |
| 312 | timeout: 3000, | 312 | timeout: 3000, |
| 313 | text: "", | 313 | text: "", |
| 314 | loading: false, | 314 | loading: false, |
| 315 | date: null, | 315 | date: null, |
| 316 | search: "", | 316 | search: "", |
| 317 | color: "", | 317 | color: "", |
| 318 | show: true, | 318 | show: true, |
| 319 | addHolidayDialog: false, | 319 | addHolidayDialog: false, |
| 320 | showSearch: false, | 320 | showSearch: false, |
| 321 | showLoader: false, | 321 | showLoader: false, |
| 322 | editHolidayDialog: false, | 322 | editHolidayDialog: false, |
| 323 | viewHolidayDialog: false, | 323 | viewHolidayDialog: false, |
| 324 | valid: true, | 324 | valid: true, |
| 325 | pagination: { | 325 | pagination: { |
| 326 | rowsPerPage: 10, | 326 | rowsPerPage: 10, |
| 327 | }, | 327 | }, |
| 328 | date: null, | 328 | date: null, |
| 329 | menu1: false, | 329 | menu1: false, |
| 330 | menu: false, | 330 | menu: false, |
| 331 | occasionRules: [(v) => !!v || "Occasion is required"], | 331 | occasionRules: [(v) => !!v || "Occasion is required"], |
| 332 | dateRules: [(v) => !!v || "Date is required"], | 332 | dateRules: [(v) => !!v || "Date is required"], |
| 333 | headers: [ | 333 | headers: [ |
| 334 | { | 334 | { |
| 335 | text: "No", | 335 | text: "No", |
| 336 | align: "", | 336 | align: "", |
| 337 | sortable: false, | 337 | sortable: false, |
| 338 | value: "No", | 338 | value: "No", |
| 339 | }, | 339 | }, |
| 340 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, | 340 | { text: "Occasion", value: "occasion", sortable: false, align: "center" }, |
| 341 | { | 341 | { |
| 342 | text: "Date Of Holiday", | 342 | text: "Date Of Holiday", |
| 343 | value: "dateOfHoliday", | 343 | value: "dateOfHoliday", |
| 344 | sortable: false, | 344 | sortable: false, |
| 345 | align: "center", | 345 | align: "center", |
| 346 | }, | 346 | }, |
| 347 | { text: "Action", value: "", sortable: false, align: "center" }, | 347 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 348 | ], | 348 | ], |
| 349 | holidays: [], | 349 | holidays: [], |
| 350 | editedIndex: -1, | 350 | editedIndex: -1, |
| 351 | addHoliday: {}, | 351 | addHoliday: {}, |
| 352 | editedItem: {}, | 352 | editedItem: {}, |
| 353 | }), | 353 | }), |
| 354 | watch: { | 354 | watch: { |
| 355 | addHolidayDialog: function (val) { | 355 | addHolidayDialog: function (val) { |
| 356 | if (!val) { | 356 | if (!val) { |
| 357 | this.addHoliday = []; | 357 | this.addHoliday = []; |
| 358 | this.menu1 = false; | 358 | this.menu1 = false; |
| 359 | } | 359 | } |
| 360 | }, | 360 | }, |
| 361 | }, | 361 | }, |
| 362 | methods: { | 362 | methods: { |
| 363 | dates: function (date) { | 363 | dates: function (date) { |
| 364 | return moment(date).format("MMMM DD, YYYY"); | 364 | return moment(date).format("MMMM DD, YYYY"); |
| 365 | }, | 365 | }, |
| 366 | getHolidays() { | 366 | getHolidays() { |
| 367 | this.showLoader = true; | 367 | this.showLoader = true; |
| 368 | var token = this.$store.state.token; | 368 | var token = this.$store.state.token; |
| 369 | http() | 369 | http() |
| 370 | .get("/getHolidaysList", { | 370 | .get("/getHolidaysList", { |
| 371 | headers: { Authorization: "Bearer " + token }, | 371 | headers: { Authorization: "Bearer " + token }, |
| 372 | }) | 372 | }) |
| 373 | .then((response) => { | 373 | .then((response) => { |
| 374 | this.holidays = response.data.data; | 374 | this.holidays = response.data.data; |
| 375 | this.showLoader = false; | 375 | this.showLoader = false; |
| 376 | }) | 376 | }) |
| 377 | .catch((err) => { | 377 | .catch((err) => { |
| 378 | this.showLoader = false; | 378 | this.showLoader = false; |
| 379 | if (error.response.status === 401) { | 379 | if (error.response.status === 401) { |
| 380 | this.$router.replace({ path: "/" }); | 380 | this.$router.replace({ path: "/" }); |
| 381 | this.$store.dispatch("setToken", null); | 381 | this.$store.dispatch("setToken", null); |
| 382 | this.$store.dispatch("Id", null); | 382 | this.$store.dispatch("Id", null); |
| 383 | } | 383 | } |
| 384 | }); | 384 | }); |
| 385 | }, | 385 | }, |
| 386 | editItem(item) { | 386 | editItem(item) { |
| 387 | this.editedIndex = this.holidays.indexOf(item); | 387 | this.editedIndex = this.holidays.indexOf(item); |
| 388 | this.editedItem = Object.assign({}, item); | 388 | this.editedItem = Object.assign({}, item); |
| 389 | this.editedItem.holidayId = item._id; | 389 | this.editedItem.holidayId = item._id; |
| 390 | this.editHolidayDialog = true; | 390 | this.editHolidayDialog = true; |
| 391 | }, | 391 | }, |
| 392 | profile(item) { | 392 | profile(item) { |
| 393 | this.editedIndex = this.holidays.indexOf(item); | 393 | this.editedIndex = this.holidays.indexOf(item); |
| 394 | this.editedItem = Object.assign({}, item); | 394 | this.editedItem = Object.assign({}, item); |
| 395 | this.viewHolidayDialog = true; | 395 | this.viewHolidayDialog = true; |
| 396 | }, | 396 | }, |
| 397 | 397 | ||
| 398 | deleteItem(item) { | 398 | deleteItem(item) { |
| 399 | let deleteHoliday = { | 399 | let deleteHoliday = { |
| 400 | holidayId: item._id, | 400 | holidayId: item._id, |
| 401 | }; | 401 | }; |
| 402 | http() | 402 | http() |
| 403 | .delete( | 403 | .delete( |
| 404 | "/deleteHoliday", | 404 | "/deleteHoliday", |
| 405 | confirm("Are you sure you want to delete this?") && { | 405 | confirm("Are you sure you want to delete this?") && { |
| 406 | params: deleteHoliday, | 406 | params: deleteHoliday, |
| 407 | } | 407 | } |
| 408 | ) | 408 | ) |
| 409 | .then((response) => { | 409 | .then((response) => { |
| 410 | this.snackbar = true; | 410 | this.snackbar = true; |
| 411 | this.text = response.data.message; | 411 | this.text = response.data.message; |
| 412 | this.color = "green"; | 412 | this.color = "green"; |
| 413 | this.getHolidays(); | 413 | this.getHolidays(); |
| 414 | }) | 414 | }) |
| 415 | .catch((error) => { | 415 | .catch((error) => { |
| 416 | this.snackbar = true; | 416 | this.snackbar = true; |
| 417 | this.text = error.response.data.message; | 417 | this.text = error.response.data.message; |
| 418 | this.color = "error"; | 418 | this.color = "error"; |
| 419 | }); | 419 | }); |
| 420 | }, | 420 | }, |
| 421 | close() { | 421 | close() { |
| 422 | this.editHolidayDialog = false; | 422 | this.editHolidayDialog = false; |
| 423 | }, | 423 | }, |
| 424 | closeaddHolidayDialog() { | 424 | closeaddHolidayDialog() { |
| 425 | this.addHolidayDialog = false; | 425 | this.addHolidayDialog = false; |
| 426 | this.addHoliday = []; | 426 | this.addHoliday = []; |
| 427 | this.menu1 = false; | 427 | this.menu1 = false; |
| 428 | }, | 428 | }, |
| 429 | submit() { | 429 | submit() { |
| 430 | if (this.$refs.form.validate()) { | 430 | if (this.$refs.form.validate()) { |
| 431 | this.loading = true; | 431 | this.loading = true; |
| 432 | http() | 432 | http() |
| 433 | .post("/createHoliday", this.addHoliday) | 433 | .post("/createHoliday", this.addHoliday) |
| 434 | .then((response) => { | 434 | .then((response) => { |
| 435 | this.snackbar = true; | 435 | this.snackbar = true; |
| 436 | this.text = response.data.message; | 436 | this.text = response.data.message; |
| 437 | this.color = "green"; | 437 | this.color = "green"; |
| 438 | this.getHolidays(); | 438 | this.getHolidays(); |
| 439 | this.addHolidayDialog = false; | 439 | this.addHolidayDialog = false; |
| 440 | this.clear(); | 440 | this.clear(); |
| 441 | this.loading = false; | 441 | this.loading = false; |
| 442 | }) | 442 | }) |
| 443 | .catch((error) => { | 443 | .catch((error) => { |
| 444 | this.snackbar = true; | 444 | this.snackbar = true; |
| 445 | this.text = error.response.data.message; | 445 | this.text = error.response.data.message; |
| 446 | this.loading = false; | 446 | this.loading = false; |
| 447 | this.color = "error"; | 447 | this.color = "error"; |
| 448 | }); | 448 | }); |
| 449 | } | 449 | } |
| 450 | }, | 450 | }, |
| 451 | clear() { | 451 | clear() { |
| 452 | this.$refs.form.reset(); | 452 | this.$refs.form.reset(); |
| 453 | }, | 453 | }, |
| 454 | save() { | 454 | save() { |
| 455 | http() | 455 | http() |
| 456 | .put("/updateHoliday", this.editedItem) | 456 | .put("/updateHoliday", this.editedItem) |
| 457 | .then((response) => { | 457 | .then((response) => { |
| 458 | this.snackbar = true; | 458 | this.snackbar = true; |
| 459 | this.text = response.data.message; | 459 | this.text = response.data.message; |
| 460 | this.getHolidays(); | 460 | this.getHolidays(); |
| 461 | this.color = "green"; | 461 | this.color = "green"; |
| 462 | this.close(); | 462 | this.close(); |
| 463 | }) | 463 | }) |
| 464 | .catch((error) => { | 464 | .catch((error) => { |
| 465 | this.snackbar = true; | 465 | this.snackbar = true; |
| 466 | this.text = error.response.data.message; | 466 | this.text = error.response.data.message; |
| 467 | this.loading = false; | 467 | this.loading = false; |
| 468 | this.color = "error"; | 468 | this.color = "error"; |
| 469 | }); | 469 | }); |
| 470 | }, | 470 | }, |
| 471 | displaySearch() { | 471 | displaySearch() { |
| 472 | (this.show = false), (this.showSearch = true); | 472 | (this.show = false), (this.showSearch = true); |
| 473 | }, | 473 | }, |
| 474 | closeSearch() { | 474 | closeSearch() { |
| 475 | this.showSearch = false; | 475 | this.showSearch = false; |
| 476 | this.show = true; | 476 | this.show = true; |
| 477 | this.search = ""; | 477 | this.search = ""; |
| 478 | }, | 478 | }, |
| 479 | }, | 479 | }, |
| 480 | mounted() { | 480 | mounted() { |
| 481 | this.getHolidays(); | 481 | this.getHolidays(); |
| 482 | }, | 482 | }, |
| 483 | }; | 483 | }; |
| 484 | </script> | 484 | </script> |
src/pages/Library/books.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Member ****** --> | 3 | <!-- ****** Edit Member ****** --> |
| 4 | <v-dialog v-model="editBookDialog" max-width="500px"> | 4 | <v-dialog v-model="editBookDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Book</label> | 8 | <label class="title text-xs-center">Edit Book</label> |
| 9 | <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editBookDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-container> | 13 | <v-container> |
| 14 | <v-layout wrap justify-center> | 14 | <v-layout wrap justify-center> |
| 15 | <v-flex xs12> | 15 | <v-flex xs12> |
| 16 | <v-form> | 16 | <v-form> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right pr-3">Name:</label> | 19 | <label class="right pr-3">Name:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs8> | 21 | <v-flex xs8> |
| 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> | 22 | <v-text-field v-model="editedItem.name" placeholder="fill your Name"></v-text-field> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | <v-layout> | 25 | <v-layout> |
| 26 | <v-flex xs4 class="pt-4 subheading"> | 26 | <v-flex xs4 class="pt-4 subheading"> |
| 27 | <label class="right pr-3">Author:</label> | 27 | <label class="right pr-3">Author:</label> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-flex xs8> | 29 | <v-flex xs8> |
| 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> | 30 | <v-text-field v-model="editedItem.author" placeholder="fill your Author Name"></v-text-field> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-layout> | 32 | </v-layout> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs4 class="pt-4 subheading"> | 34 | <v-flex xs4 class="pt-4 subheading"> |
| 35 | <label class="right pr-3">Subject Code:</label> | 35 | <label class="right pr-3">Subject Code:</label> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-flex xs8> | 37 | <v-flex xs8> |
| 38 | <v-text-field | 38 | <v-text-field |
| 39 | v-model="editedItem.subjectCode" | 39 | v-model="editedItem.subjectCode" |
| 40 | placeholder="fill your Subject Code" | 40 | placeholder="fill your Subject Code" |
| 41 | ></v-text-field> | 41 | ></v-text-field> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right pr-3">Price:</label> | 46 | <label class="right pr-3">Price:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8> | 48 | <v-flex xs8> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | v-model="editedItem.price" | 50 | v-model="editedItem.price" |
| 51 | placeholder="fill your Subject Code" | 51 | placeholder="fill your Subject Code" |
| 52 | ></v-text-field> | 52 | ></v-text-field> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right pr-3">Quantity:</label> | 57 | <label class="right pr-3">Quantity:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8> | 59 | <v-flex xs8> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | v-model="editedItem.quantity" | 61 | v-model="editedItem.quantity" |
| 62 | type="number" | 62 | type="number" |
| 63 | placeholder="fill your Quantity" | 63 | placeholder="fill your Quantity" |
| 64 | ></v-text-field> | 64 | ></v-text-field> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | </v-layout> | 66 | </v-layout> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-flex xs4 class="pt-4 subheading"> | 68 | <v-flex xs4 class="pt-4 subheading"> |
| 69 | <label class="right pr-3">Rack No:</label> | 69 | <label class="right pr-3">Rack No:</label> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-flex xs8> | 71 | <v-flex xs8> |
| 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> | 72 | <v-text-field v-model="editedItem.rackNo" placeholder="fill your Rack No"></v-text-field> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | </v-layout> | 74 | </v-layout> |
| 75 | <v-card-actions> | 75 | <v-card-actions> |
| 76 | <v-spacer></v-spacer> | 76 | <v-spacer></v-spacer> |
| 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 77 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | </v-card-actions> | 79 | </v-card-actions> |
| 80 | </v-form> | 80 | </v-form> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-layout> | 82 | </v-layout> |
| 83 | </v-container> | 83 | </v-container> |
| 84 | </v-card-text> | 84 | </v-card-text> |
| 85 | </v-card> | 85 | </v-card> |
| 86 | </v-dialog> | 86 | </v-dialog> |
| 87 | 87 | ||
| 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> | 88 | <!-- ****** PROFILE VIEW BOOKS DATA ****** --> |
| 89 | 89 | ||
| 90 | <v-dialog v-model="viewBookDialog" max-width="500px"> | 90 | <v-dialog v-model="viewBookDialog" max-width="500px" persistent> |
| 91 | <v-card flat class="card-style pa-3" dark> | 91 | <v-card flat class="card-style pa-3" dark> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <label class="title text-xs-center">View Book</label> | 94 | <label class="title text-xs-center">View Book</label> |
| 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> | 95 | <v-icon size="24" class="right" @click="viewBookDialog = false">cancel</v-icon> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | <v-card-text> | 98 | <v-card-text> |
| 99 | <v-container grid-list-md> | 99 | <v-container grid-list-md> |
| 100 | <v-layout wrap> | 100 | <v-layout wrap> |
| 101 | <v-flex> | 101 | <v-flex> |
| 102 | <v-layout> | 102 | <v-layout> |
| 103 | <v-flex xs5 sm6> | 103 | <v-flex xs5 sm6> |
| 104 | <h5 class="right my-1"> | 104 | <h5 class="right my-1"> |
| 105 | <b>Name :</b> | 105 | <b>Name :</b> |
| 106 | </h5> | 106 | </h5> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex sm6 xs8> | 108 | <v-flex sm6 xs8> |
| 109 | <h5 class="my-1">{{ editedItem.name }}</h5> | 109 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs5 sm6> | 113 | <v-flex xs5 sm6> |
| 114 | <h5 class="right my-1"> | 114 | <h5 class="right my-1"> |
| 115 | <b>Author :</b> | 115 | <b>Author :</b> |
| 116 | </h5> | 116 | </h5> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex sm6 xs8> | 118 | <v-flex sm6 xs8> |
| 119 | <h5 class="my-1">{{ editedItem.author }}</h5> | 119 | <h5 class="my-1">{{ editedItem.author }}</h5> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs5 sm6> | 123 | <v-flex xs5 sm6> |
| 124 | <h5 class="right my-1"> | 124 | <h5 class="right my-1"> |
| 125 | <b>Subject Code :</b> | 125 | <b>Subject Code :</b> |
| 126 | </h5> | 126 | </h5> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm6 xs8> | 128 | <v-flex sm6 xs8> |
| 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> | 129 | <h5 class="my-1">{{ editedItem.subjectCode }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs5 sm6> | 133 | <v-flex xs5 sm6> |
| 134 | <h5 class="right my-1"> | 134 | <h5 class="right my-1"> |
| 135 | <b>Price :</b> | 135 | <b>Price :</b> |
| 136 | </h5> | 136 | </h5> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <v-flex sm6 xs8> | 138 | <v-flex sm6 xs8> |
| 139 | <h5 class="my-1">{{ editedItem.price }}</h5> | 139 | <h5 class="my-1">{{ editedItem.price }}</h5> |
| 140 | </v-flex> | 140 | </v-flex> |
| 141 | </v-layout> | 141 | </v-layout> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs5 sm6> | 143 | <v-flex xs5 sm6> |
| 144 | <h5 class="right my-1"> | 144 | <h5 class="right my-1"> |
| 145 | <b>Quantity :</b> | 145 | <b>Quantity :</b> |
| 146 | </h5> | 146 | </h5> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex sm6 xs8> | 148 | <v-flex sm6 xs8> |
| 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> | 149 | <h5 class="my-1">{{ editedItem.quantity}}</h5> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | </v-layout> | 151 | </v-layout> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs5 sm6> | 153 | <v-flex xs5 sm6> |
| 154 | <h5 class="right my-1"> | 154 | <h5 class="right my-1"> |
| 155 | <b>Rack No :</b> | 155 | <b>Rack No :</b> |
| 156 | </h5> | 156 | </h5> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex sm6 xs8> | 158 | <v-flex sm6 xs8> |
| 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> | 159 | <h5 class="my-1">{{ editedItem.rackNo}}</h5> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | </v-container> | 164 | </v-container> |
| 165 | </v-card-text> | 165 | </v-card-text> |
| 166 | </v-card> | 166 | </v-card> |
| 167 | </v-dialog> | 167 | </v-dialog> |
| 168 | <!-- ****** BOOKS TABLE ****** --> | 168 | <!-- ****** BOOKS TABLE ****** --> |
| 169 | 169 | ||
| 170 | <v-toolbar color="transparent" flat> | 170 | <v-toolbar color="transparent" flat> |
| 171 | <v-btn | 171 | <v-btn |
| 172 | fab | 172 | fab |
| 173 | dark | 173 | dark |
| 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 174 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 175 | small | 175 | small |
| 176 | @click="addBookDialog = true" | 176 | @click="addBookDialog = true" |
| 177 | > | 177 | > |
| 178 | <v-icon dark>add</v-icon> | 178 | <v-icon dark>add</v-icon> |
| 179 | </v-btn> | 179 | </v-btn> |
| 180 | <v-btn | 180 | <v-btn |
| 181 | round | 181 | round |
| 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 182 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 183 | dark | 183 | dark |
| 184 | @click="addBookDialog = true" | 184 | @click="addBookDialog = true" |
| 185 | > | 185 | > |
| 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book | 186 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Book |
| 187 | </v-btn> | 187 | </v-btn> |
| 188 | <v-spacer></v-spacer> | 188 | <v-spacer></v-spacer> |
| 189 | <v-card-title class="body-1" v-show="show"> | 189 | <v-card-title class="body-1" v-show="show"> |
| 190 | <v-btn icon large flat @click="displaySearch"> | 190 | <v-btn icon large flat @click="displaySearch"> |
| 191 | <v-avatar size="27"> | 191 | <v-avatar size="27"> |
| 192 | <img src="/static/icon/search.png" alt="icon" /> | 192 | <img src="/static/icon/search.png" alt="icon" /> |
| 193 | </v-avatar> | 193 | </v-avatar> |
| 194 | </v-btn> | 194 | </v-btn> |
| 195 | </v-card-title> | 195 | </v-card-title> |
| 196 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 196 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 197 | <v-layout> | 197 | <v-layout> |
| 198 | <v-text-field | 198 | <v-text-field |
| 199 | autofocus | 199 | autofocus |
| 200 | v-model="search" | 200 | v-model="search" |
| 201 | label="Search" | 201 | label="Search" |
| 202 | prepend-inner-icon="search" | 202 | prepend-inner-icon="search" |
| 203 | color="primary" | 203 | color="primary" |
| 204 | ></v-text-field> | 204 | ></v-text-field> |
| 205 | <v-icon @click="closeSearch" color="error">close</v-icon> | 205 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | </v-toolbar> | 208 | </v-toolbar> |
| 209 | <v-data-table | 209 | <v-data-table |
| 210 | :headers="headers" | 210 | :headers="headers" |
| 211 | :items="bookData" | 211 | :items="bookData" |
| 212 | :pagination.sync="pagination" | 212 | :pagination.sync="pagination" |
| 213 | :search="search" | 213 | :search="search" |
| 214 | > | 214 | > |
| 215 | <template slot="items" slot-scope="props"> | 215 | <template slot="items" slot-scope="props"> |
| 216 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> | 216 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> |
| 217 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> | 217 | <td class="td td-row text-xs-center">{{ props.item.name }}</td> |
| 218 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> | 218 | <td class="td td-row text-xs-center">{{ props.item.author }}</td> |
| 219 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> | 219 | <td class="td td-row text-xs-center">{{ props.item.subjectCode }}</td> |
| 220 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> | 220 | <td class="td td-row text-xs-center">{{ props.item.price }}</td> |
| 221 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> | 221 | <td class="td td-row text-xs-center">{{ props.item.quantity }}</td> |
| 222 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> | 222 | <td class="td td-row text-xs-center">{{ props.item.rackNo }}</td> |
| 223 | <td class="td td-row text-xs-center"> | 223 | <td class="td td-row text-xs-center"> |
| 224 | <span | 224 | <span |
| 225 | v-if="props.item.status === 'AVAILABLE'" | 225 | v-if="props.item.status === 'AVAILABLE'" |
| 226 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 226 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 227 | >{{ props.item.status}}</span> | 227 | >{{ props.item.status}}</span> |
| 228 | <span | 228 | <span |
| 229 | v-if="props.item.status === 'UNAVAILABLE'" | 229 | v-if="props.item.status === 'UNAVAILABLE'" |
| 230 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 230 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 231 | >{{ props.item.status}}</span> | 231 | >{{ props.item.status}}</span> |
| 232 | </td> | 232 | </td> |
| 233 | <td class="text-xs-center td td-row"> | 233 | <td class="text-xs-center td td-row"> |
| 234 | <span> | 234 | <span> |
| 235 | <!-- <v-tooltip top> | 235 | <!-- <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:25px; height:25px; " | 238 | style="cursor:pointer; width:25px; height:25px; " |
| 239 | class="mr-3" | 239 | class="mr-3" |
| 240 | @click="profile(props.item)" | 240 | @click="profile(props.item)" |
| 241 | src="/static/icon/view.png" | 241 | src="/static/icon/view.png" |
| 242 | /> | 242 | /> |
| 243 | <span>View</span> | 243 | <span>View</span> |
| 244 | </v-tooltip>--> | 244 | </v-tooltip>--> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:20px; height:18px; " | 248 | style="cursor:pointer; width:20px; height:18px; " |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | @click="editItem(props.item)" | 250 | @click="editItem(props.item)" |
| 251 | src="/static/icon/edit.png" | 251 | src="/static/icon/edit.png" |
| 252 | /> | 252 | /> |
| 253 | <span>Edit</span> | 253 | <span>Edit</span> |
| 254 | </v-tooltip> | 254 | </v-tooltip> |
| 255 | <v-tooltip top v-if="role != 'TEACHER' "> | 255 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 256 | <img | 256 | <img |
| 257 | slot="activator" | 257 | slot="activator" |
| 258 | style="cursor:pointer; width:20px; height:20px; " | 258 | style="cursor:pointer; width:20px; height:20px; " |
| 259 | @click="deleteItem(props.item)" | 259 | @click="deleteItem(props.item)" |
| 260 | src="/static/icon/delete.png" | 260 | src="/static/icon/delete.png" |
| 261 | /> | 261 | /> |
| 262 | <span>Delete</span> | 262 | <span>Delete</span> |
| 263 | </v-tooltip> | 263 | </v-tooltip> |
| 264 | </span> | 264 | </span> |
| 265 | </td> | 265 | </td> |
| 266 | </template> | 266 | </template> |
| 267 | <v-alert | 267 | <v-alert |
| 268 | slot="no-results" | 268 | slot="no-results" |
| 269 | :value="true" | 269 | :value="true" |
| 270 | color="error" | 270 | color="error" |
| 271 | icon="warning" | 271 | icon="warning" |
| 272 | >Your search for "{{ search }}" found no results.</v-alert> | 272 | >Your search for "{{ search }}" found no results.</v-alert> |
| 273 | </v-data-table> | 273 | </v-data-table> |
| 274 | <!-- ****** ADD BOOK ****** --> | 274 | <!-- ****** ADD BOOK ****** --> |
| 275 | <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog"> | 275 | <v-dialog v-model="addBookDialog" max-width="600px" v-if="addBookDialog" persistent> |
| 276 | <v-card flat class="card-style pa-2" dark> | 276 | <v-card flat class="card-style pa-2" dark> |
| 277 | <v-layout> | 277 | <v-layout> |
| 278 | <v-flex xs12> | 278 | <v-flex xs12> |
| 279 | <label class="title text-xs-center">Add Book</label> | 279 | <label class="title text-xs-center">Add Book</label> |
| 280 | <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon> | 280 | <v-icon size="24" class="right" @click="$refs.form.reset();addBookDialog = false">cancel</v-icon> |
| 281 | </v-flex> | 281 | </v-flex> |
| 282 | </v-layout> | 282 | </v-layout> |
| 283 | <v-container fluid fill-height> | 283 | <v-container fluid fill-height> |
| 284 | <v-layout align-center> | 284 | <v-layout align-center> |
| 285 | <v-flex xs12 class="mt-4"> | 285 | <v-flex xs12 class="mt-4"> |
| 286 | <v-form ref="form" v-model="valid" lazy-validation> | 286 | <v-form ref="form" v-model="valid" lazy-validation> |
| 287 | <v-layout> | 287 | <v-layout> |
| 288 | <v-flex xs4 class="pt-4 subheading"> | 288 | <v-flex xs4 class="pt-4 subheading"> |
| 289 | <label class="right">Name:</label> | 289 | <label class="right">Name:</label> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs7 class="ml-3"> | 291 | <v-flex xs7 class="ml-3"> |
| 292 | <v-text-field | 292 | <v-text-field |
| 293 | v-model="BooksData.name" | 293 | v-model="BooksData.name" |
| 294 | placeholder="fill your Name" | 294 | placeholder="fill your Name" |
| 295 | type="text" | 295 | type="text" |
| 296 | :rules="nameRules" | 296 | :rules="nameRules" |
| 297 | required | 297 | required |
| 298 | ></v-text-field> | 298 | ></v-text-field> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | </v-layout> | 300 | </v-layout> |
| 301 | <v-layout> | 301 | <v-layout> |
| 302 | <v-flex xs4 class="pt-4 subheading"> | 302 | <v-flex xs4 class="pt-4 subheading"> |
| 303 | <label class="right">Author:</label> | 303 | <label class="right">Author:</label> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | <v-flex xs7 class="ml-3"> | 305 | <v-flex xs7 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | v-model="BooksData.author" | 307 | v-model="BooksData.author" |
| 308 | placeholder="fill your Author Name" | 308 | placeholder="fill your Author Name" |
| 309 | type="text" | 309 | type="text" |
| 310 | :rules="authorRules" | 310 | :rules="authorRules" |
| 311 | required | 311 | required |
| 312 | ></v-text-field> | 312 | ></v-text-field> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 class="pt-4 subheading"> | 316 | <v-flex xs4 class="pt-4 subheading"> |
| 317 | <label class="right">Subject Code:</label> | 317 | <label class="right">Subject Code:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs7 class="ml-3"> | 319 | <v-flex xs7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="BooksData.subjectCode" | 321 | v-model="BooksData.subjectCode" |
| 322 | placeholder="fill your Subject Code" | 322 | placeholder="fill your Subject Code" |
| 323 | type="text" | 323 | type="text" |
| 324 | :rules="subjectRules" | 324 | :rules="subjectRules" |
| 325 | required | 325 | required |
| 326 | ></v-text-field> | 326 | ></v-text-field> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | </v-layout> | 328 | </v-layout> |
| 329 | <v-layout> | 329 | <v-layout> |
| 330 | <v-flex xs4 class="pt-4 subheading"> | 330 | <v-flex xs4 class="pt-4 subheading"> |
| 331 | <label class="right">Price:</label> | 331 | <label class="right">Price:</label> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | <v-flex xs7 class="ml-3"> | 333 | <v-flex xs7 class="ml-3"> |
| 334 | <v-text-field | 334 | <v-text-field |
| 335 | v-model="BooksData.price" | 335 | v-model="BooksData.price" |
| 336 | placeholder="fill your Price" | 336 | placeholder="fill your Price" |
| 337 | :rules="priceRules" | 337 | :rules="priceRules" |
| 338 | required | 338 | required |
| 339 | ></v-text-field> | 339 | ></v-text-field> |
| 340 | </v-flex> | 340 | </v-flex> |
| 341 | </v-layout> | 341 | </v-layout> |
| 342 | <v-layout> | 342 | <v-layout> |
| 343 | <v-flex xs4 class="pt-4 subheading"> | 343 | <v-flex xs4 class="pt-4 subheading"> |
| 344 | <label class="right">Quantity:</label> | 344 | <label class="right">Quantity:</label> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | <v-flex xs7 class="ml-3"> | 346 | <v-flex xs7 class="ml-3"> |
| 347 | <v-text-field | 347 | <v-text-field |
| 348 | v-model="BooksData.quantity" | 348 | v-model="BooksData.quantity" |
| 349 | placeholder="fill your Quantity" | 349 | placeholder="fill your Quantity" |
| 350 | :rules="quantityRules" | 350 | :rules="quantityRules" |
| 351 | required | 351 | required |
| 352 | ></v-text-field> | 352 | ></v-text-field> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | </v-layout> | 354 | </v-layout> |
| 355 | <v-layout> | 355 | <v-layout> |
| 356 | <v-flex xs4 class="pt-4 subheading"> | 356 | <v-flex xs4 class="pt-4 subheading"> |
| 357 | <label class="right">Rack No:</label> | 357 | <label class="right">Rack No:</label> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex xs7 class="ml-3"> | 359 | <v-flex xs7 class="ml-3"> |
| 360 | <v-text-field | 360 | <v-text-field |
| 361 | v-model="BooksData.rackNo" | 361 | v-model="BooksData.rackNo" |
| 362 | placeholder="fill your Rack No" | 362 | placeholder="fill your Rack No" |
| 363 | :rules="rackNoRules" | 363 | :rules="rackNoRules" |
| 364 | required | 364 | required |
| 365 | ></v-text-field> | 365 | ></v-text-field> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | </v-layout> | 367 | </v-layout> |
| 368 | <v-layout> | 368 | <v-layout> |
| 369 | <v-flex xs12> | 369 | <v-flex xs12> |
| 370 | <v-card-actions> | 370 | <v-card-actions> |
| 371 | <v-spacer></v-spacer> | 371 | <v-spacer></v-spacer> |
| 372 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 372 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 373 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 373 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 374 | </v-card-actions> | 374 | </v-card-actions> |
| 375 | </v-flex> | 375 | </v-flex> |
| 376 | </v-layout> | 376 | </v-layout> |
| 377 | </v-form> | 377 | </v-form> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | </v-layout> | 379 | </v-layout> |
| 380 | </v-container> | 380 | </v-container> |
| 381 | </v-card> | 381 | </v-card> |
| 382 | </v-dialog> | 382 | </v-dialog> |
| 383 | <v-snackbar | 383 | <v-snackbar |
| 384 | :timeout="timeout" | 384 | :timeout="timeout" |
| 385 | :top="y === 'top'" | 385 | :top="y === 'top'" |
| 386 | :right="x === 'right'" | 386 | :right="x === 'right'" |
| 387 | :vertical="mode === 'vertical'" | 387 | :vertical="mode === 'vertical'" |
| 388 | v-model="snackbar" | 388 | v-model="snackbar" |
| 389 | :color="color" | 389 | :color="color" |
| 390 | >{{ text }}</v-snackbar> | 390 | >{{ text }}</v-snackbar> |
| 391 | <div class="loader" v-if="showLoader"> | 391 | <div class="loader" v-if="showLoader"> |
| 392 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 392 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 393 | </div> | 393 | </div> |
| 394 | </v-container> | 394 | </v-container> |
| 395 | </template> | 395 | </template> |
| 396 | 396 | ||
| 397 | <script> | 397 | <script> |
| 398 | import http from "@/Services/http.js"; | 398 | import http from "@/Services/http.js"; |
| 399 | import Util from "@/util"; | 399 | import Util from "@/util"; |
| 400 | 400 | ||
| 401 | export default { | 401 | export default { |
| 402 | data: () => ({ | 402 | data: () => ({ |
| 403 | snackbar: false, | 403 | snackbar: false, |
| 404 | y: "top", | 404 | y: "top", |
| 405 | x: "right", | 405 | x: "right", |
| 406 | mode: "", | 406 | mode: "", |
| 407 | timeout: 5000, | 407 | timeout: 5000, |
| 408 | text: "", | 408 | text: "", |
| 409 | color: "", | 409 | color: "", |
| 410 | show: true, | 410 | show: true, |
| 411 | showSearch: false, | 411 | showSearch: false, |
| 412 | showLoader: false, | 412 | showLoader: false, |
| 413 | loading: false, | 413 | loading: false, |
| 414 | date: null, | 414 | date: null, |
| 415 | search: "", | 415 | search: "", |
| 416 | editBookDialog: false, | 416 | editBookDialog: false, |
| 417 | viewBookDialog: false, | 417 | viewBookDialog: false, |
| 418 | valid: true, | 418 | valid: true, |
| 419 | validEdit: true, | 419 | validEdit: true, |
| 420 | addBookDialog: false, | 420 | addBookDialog: false, |
| 421 | pagination: { | 421 | pagination: { |
| 422 | rowsPerPage: 10, | 422 | rowsPerPage: 10, |
| 423 | }, | 423 | }, |
| 424 | nameRules: [(v) => !!v || " Name is required"], | 424 | nameRules: [(v) => !!v || " Name is required"], |
| 425 | authorRules: [(v) => !!v || "Author Name Monthly"], | 425 | authorRules: [(v) => !!v || "Author Name Monthly"], |
| 426 | subjectRules: [(v) => !!v || "Subject Code is required"], | 426 | subjectRules: [(v) => !!v || "Subject Code is required"], |
| 427 | priceRules: [(v) => !!v || "Price is required"], | 427 | priceRules: [(v) => !!v || "Price is required"], |
| 428 | quantityRules: [(v) => !!v || "Quantity is required"], | 428 | quantityRules: [(v) => !!v || "Quantity is required"], |
| 429 | rackNoRules: [(v) => !!v || "Rack No. is required"], | 429 | rackNoRules: [(v) => !!v || "Rack No. is required"], |
| 430 | 430 | ||
| 431 | headers: [ | 431 | headers: [ |
| 432 | { | 432 | { |
| 433 | text: "No", | 433 | text: "No", |
| 434 | align: "", | 434 | align: "", |
| 435 | sortable: false, | 435 | sortable: false, |
| 436 | value: "No", | 436 | value: "No", |
| 437 | }, | 437 | }, |
| 438 | { | 438 | { |
| 439 | text: "Name", | 439 | text: "Name", |
| 440 | value: "name", | 440 | value: "name", |
| 441 | sortable: false, | 441 | sortable: false, |
| 442 | align: "center", | 442 | align: "center", |
| 443 | }, | 443 | }, |
| 444 | { text: "Authour", value: "author", sortable: false, align: "center" }, | 444 | { text: "Authour", value: "author", sortable: false, align: "center" }, |
| 445 | { | 445 | { |
| 446 | text: "Subject Code", | 446 | text: "Subject Code", |
| 447 | value: "subjectCode", | 447 | value: "subjectCode", |
| 448 | sortable: false, | 448 | sortable: false, |
| 449 | align: "center", | 449 | align: "center", |
| 450 | }, | 450 | }, |
| 451 | { text: "Price", value: "price", sortable: false, align: "center" }, | 451 | { text: "Price", value: "price", sortable: false, align: "center" }, |
| 452 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, | 452 | { text: "Quantity", value: "quantity", sortable: false, align: "center" }, |
| 453 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, | 453 | { text: "Rack No", value: "rackNo", sortable: false, align: "center" }, |
| 454 | { text: "Status", value: "status", sortable: false, align: "center" }, | 454 | { text: "Status", value: "status", sortable: false, align: "center" }, |
| 455 | 455 | ||
| 456 | { text: "Action", value: "", sortable: false, align: "center" }, | 456 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 457 | ], | 457 | ], |
| 458 | bookData: [], | 458 | bookData: [], |
| 459 | select: "", | 459 | select: "", |
| 460 | token: "", | 460 | token: "", |
| 461 | editedItem: {}, | 461 | editedItem: {}, |
| 462 | BooksData: {}, | 462 | BooksData: {}, |
| 463 | }), | 463 | }), |
| 464 | watch: { | 464 | watch: { |
| 465 | addBookDialog: function (val) { | 465 | addBookDialog: function (val) { |
| 466 | if (!val) { | 466 | if (!val) { |
| 467 | this.BooksData = []; | 467 | this.BooksData = []; |
| 468 | } | 468 | } |
| 469 | }, | 469 | }, |
| 470 | }, | 470 | }, |
| 471 | methods: { | 471 | methods: { |
| 472 | getBookData() { | 472 | getBookData() { |
| 473 | this.showLoader = true; | 473 | this.showLoader = true; |
| 474 | http() | 474 | http() |
| 475 | .get("/getBooksList", { | 475 | .get("/getBooksList", { |
| 476 | params: { | 476 | params: { |
| 477 | schoolId: this.$store.state.schoolId, | 477 | schoolId: this.$store.state.schoolId, |
| 478 | }, | 478 | }, |
| 479 | headers: { Authorization: "Bearer " + this.token }, | 479 | headers: { Authorization: "Bearer " + this.token }, |
| 480 | }) | 480 | }) |
| 481 | .then((response) => { | 481 | .then((response) => { |
| 482 | this.bookData = response.data.data; | 482 | this.bookData = response.data.data; |
| 483 | this.showLoader = false; | 483 | this.showLoader = false; |
| 484 | }) | 484 | }) |
| 485 | .catch((error) => { | 485 | .catch((error) => { |
| 486 | this.showLoader = false; | 486 | this.showLoader = false; |
| 487 | if (error.response.status === 401) { | 487 | if (error.response.status === 401) { |
| 488 | this.$router.replace({ path: "/" }); | 488 | this.$router.replace({ path: "/" }); |
| 489 | this.$store.dispatch("setToken", null); | 489 | this.$store.dispatch("setToken", null); |
| 490 | this.$store.dispatch("Id", null); | 490 | this.$store.dispatch("Id", null); |
| 491 | } | 491 | } |
| 492 | }); | 492 | }); |
| 493 | }, | 493 | }, |
| 494 | editItem(item) { | 494 | editItem(item) { |
| 495 | this.editedIndex = this.bookData.indexOf(item); | 495 | this.editedIndex = this.bookData.indexOf(item); |
| 496 | this.editedItem = Object.assign({}, item); | 496 | this.editedItem = Object.assign({}, item); |
| 497 | console.log(this.editedItem); | 497 | console.log(this.editedItem); |
| 498 | this.editBookDialog = true; | 498 | this.editBookDialog = true; |
| 499 | }, | 499 | }, |
| 500 | profile(item) { | 500 | profile(item) { |
| 501 | this.editedIndex = this.bookData.indexOf(item); | 501 | this.editedIndex = this.bookData.indexOf(item); |
| 502 | this.editedItem = Object.assign({}, item); | 502 | this.editedItem = Object.assign({}, item); |
| 503 | this.viewBookDialog = true; | 503 | this.viewBookDialog = true; |
| 504 | }, | 504 | }, |
| 505 | deleteItem(item) { | 505 | deleteItem(item) { |
| 506 | let deleteStudent = { | 506 | let deleteStudent = { |
| 507 | bookId: item._id, | 507 | bookId: item._id, |
| 508 | }; | 508 | }; |
| 509 | http() | 509 | http() |
| 510 | .delete( | 510 | .delete( |
| 511 | "/deleteBook", | 511 | "/deleteBook", |
| 512 | confirm("Are you sure you want to delete this?") && { | 512 | confirm("Are you sure you want to delete this?") && { |
| 513 | params: deleteStudent, | 513 | params: deleteStudent, |
| 514 | } | 514 | } |
| 515 | ) | 515 | ) |
| 516 | .then((response) => { | 516 | .then((response) => { |
| 517 | this.snackbar = true; | 517 | this.snackbar = true; |
| 518 | this.text = response.data.message; | 518 | this.text = response.data.message; |
| 519 | this.color = "green"; | 519 | this.color = "green"; |
| 520 | this.getBookData(); | 520 | this.getBookData(); |
| 521 | }) | 521 | }) |
| 522 | .catch((error) => { | 522 | .catch((error) => { |
| 523 | this.snackbar = true; | 523 | this.snackbar = true; |
| 524 | this.text = error.response.data.message; | 524 | this.text = error.response.data.message; |
| 525 | this.color = "error"; | 525 | this.color = "error"; |
| 526 | }); | 526 | }); |
| 527 | }, | 527 | }, |
| 528 | closeEditProfile() { | 528 | closeEditProfile() { |
| 529 | this.editBookDialog = false; | 529 | this.editBookDialog = false; |
| 530 | }, | 530 | }, |
| 531 | close2() { | 531 | close2() { |
| 532 | this.dialog2 = false; | 532 | this.dialog2 = false; |
| 533 | }, | 533 | }, |
| 534 | submit() { | 534 | submit() { |
| 535 | this.BooksData.quantity = Number(this.BooksData.quantity); | 535 | this.BooksData.quantity = Number(this.BooksData.quantity); |
| 536 | this.BooksData.schoolId = this.$store.state.schoolId; | 536 | this.BooksData.schoolId = this.$store.state.schoolId; |
| 537 | if (this.$refs.form.validate()) { | 537 | if (this.$refs.form.validate()) { |
| 538 | this.loading = true; | 538 | this.loading = true; |
| 539 | http() | 539 | http() |
| 540 | .post("/createBook", this.BooksData) | 540 | .post("/createBook", this.BooksData) |
| 541 | .then((response) => { | 541 | .then((response) => { |
| 542 | this.getBookData(); | 542 | this.getBookData(); |
| 543 | this.snackbar = true; | 543 | this.snackbar = true; |
| 544 | this.text = response.data.message; | 544 | this.text = response.data.message; |
| 545 | this.color = "green"; | 545 | this.color = "green"; |
| 546 | this.addBookDialog = false; | 546 | this.addBookDialog = false; |
| 547 | this.clear(); | 547 | this.clear(); |
| 548 | this.loading = false; | 548 | this.loading = false; |
| 549 | }) | 549 | }) |
| 550 | .catch((error) => { | 550 | .catch((error) => { |
| 551 | this.snackbar = true; | 551 | this.snackbar = true; |
| 552 | this.text = error.response.data.message; | 552 | this.text = error.response.data.message; |
| 553 | this.color = "error"; | 553 | this.color = "error"; |
| 554 | this.loading = false; | 554 | this.loading = false; |
| 555 | }); | 555 | }); |
| 556 | } | 556 | } |
| 557 | }, | 557 | }, |
| 558 | clear() { | 558 | clear() { |
| 559 | this.$refs.form.reset(); | 559 | this.$refs.form.reset(); |
| 560 | }, | 560 | }, |
| 561 | save() { | 561 | save() { |
| 562 | this.editedItem.bookId = this.editedItem._id; | 562 | this.editedItem.bookId = this.editedItem._id; |
| 563 | http() | 563 | http() |
| 564 | .put("/updateBook", this.editedItem) | 564 | .put("/updateBook", this.editedItem) |
| 565 | .then((response) => { | 565 | .then((response) => { |
| 566 | this.snackbar = true; | 566 | this.snackbar = true; |
| 567 | this.text = response.data.message; | 567 | this.text = response.data.message; |
| 568 | this.color = "green"; | 568 | this.color = "green"; |
| 569 | this.getBookData(); | 569 | this.getBookData(); |
| 570 | this.closeEditProfile(); | 570 | this.closeEditProfile(); |
| 571 | }) | 571 | }) |
| 572 | .catch((error) => { | 572 | .catch((error) => { |
| 573 | this.snackbar = true; | 573 | this.snackbar = true; |
| 574 | this.text = error.response.data.message; | 574 | this.text = error.response.data.message; |
| 575 | this.color = "error"; | 575 | this.color = "error"; |
| 576 | // console.log(error); | 576 | // console.log(error); |
| 577 | }); | 577 | }); |
| 578 | }, | 578 | }, |
| 579 | displaySearch() { | 579 | displaySearch() { |
| 580 | (this.show = false), (this.showSearch = true); | 580 | (this.show = false), (this.showSearch = true); |
| 581 | }, | 581 | }, |
| 582 | closeSearch() { | 582 | closeSearch() { |
| 583 | this.showSearch = false; | 583 | this.showSearch = false; |
| 584 | this.show = true; | 584 | this.show = true; |
| 585 | this.search = ""; | 585 | this.search = ""; |
| 586 | }, | 586 | }, |
| 587 | }, | 587 | }, |
| 588 | mounted() { | 588 | mounted() { |
| 589 | this.token = this.$store.state.token; | 589 | this.token = this.$store.state.token; |
| 590 | this.getBookData(); | 590 | this.getBookData(); |
| 591 | this.role = this.$store.state.role; | 591 | this.role = this.$store.state.role; |
| 592 | }, | 592 | }, |
| 593 | }; | 593 | }; |
| 594 | </script> | 594 | </script> |
| 595 | 595 |
src/pages/Library/eBook.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> | 3 | <!-- ****** EDITS EBOOK DETAILS ****** --> |
| 4 | <v-dialog v-model="editEbookDialog" max-width="600px"> | 4 | <v-dialog v-model="editEbookDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit E-Book</label> | 8 | <label class="title text-xs-center">Edit E-Book</label> |
| 9 | <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 13 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 14 | <input | 14 | <input |
| 15 | type="file" | 15 | type="file" |
| 16 | style="display: none" | 16 | style="display: none" |
| 17 | ref="editImage" | 17 | ref="editImage" |
| 18 | accept="image/*" | 18 | accept="image/*" |
| 19 | @change="onEditImagePicked" | 19 | @change="onEditImagePicked" |
| 20 | /> | 20 | /> |
| 21 | <img | 21 | <img |
| 22 | v-if="editedItem.coverPhotoUrl" | 22 | v-if="editedItem.coverPhotoUrl" |
| 23 | :src="editedItem.coverPhotoUrl" | 23 | :src="editedItem.coverPhotoUrl" |
| 24 | height="160" | 24 | height="160" |
| 25 | width="160" | 25 | width="160" |
| 26 | alt="eBooks" | 26 | alt="eBooks" |
| 27 | class="pa-2" | 27 | class="pa-2" |
| 28 | /> | 28 | /> |
| 29 | <img | 29 | <img |
| 30 | src="/static/icon/user.png" | 30 | src="/static/icon/user.png" |
| 31 | v-if="editedItem.coverPhotoUrl == ''" | 31 | v-if="editedItem.coverPhotoUrl == ''" |
| 32 | height="160" | 32 | height="160" |
| 33 | width="160" | 33 | width="160" |
| 34 | alt="Books" | 34 | alt="Books" |
| 35 | /> | 35 | /> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-container grid-list-md> | 37 | <v-container grid-list-md> |
| 38 | <v-flex xs12 sm12> | 38 | <v-flex xs12 sm12> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right hidden-xs-only hidden-sm-only">Name :</label> | 41 | <label class="right hidden-xs-only hidden-sm-only">Name :</label> |
| 42 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> | 42 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | <v-flex xs8 class="ml-3"> | 44 | <v-flex xs8 class="ml-3"> |
| 45 | <v-text-field | 45 | <v-text-field |
| 46 | v-model="editedItem.name" | 46 | v-model="editedItem.name" |
| 47 | placeholder="fill your full Name" | 47 | placeholder="fill your full Name" |
| 48 | name="name" | 48 | name="name" |
| 49 | type="text" | 49 | type="text" |
| 50 | required | 50 | required |
| 51 | ></v-text-field> | 51 | ></v-text-field> |
| 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 hidden-xs-only hidden-sm-only">Author :</label> | 58 | <label class="right hidden-xs-only hidden-sm-only">Author :</label> |
| 59 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> | 59 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs8 class="ml-3"> | 61 | <v-flex xs8 class="ml-3"> |
| 62 | <v-text-field | 62 | <v-text-field |
| 63 | v-model="editedItem.author" | 63 | v-model="editedItem.author" |
| 64 | placeholder="fill your full author" | 64 | placeholder="fill your full author" |
| 65 | name="name" | 65 | name="name" |
| 66 | type="text" | 66 | type="text" |
| 67 | required | 67 | required |
| 68 | ></v-text-field> | 68 | ></v-text-field> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | <v-flex xs12 sm12> | 72 | <v-flex xs12 sm12> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 class="pt-4 subheading"> | 74 | <v-flex xs4 class="pt-4 subheading"> |
| 75 | <label class="right hidden-xs-only hidden-sm-only">Class :</label> | 75 | <label class="right hidden-xs-only hidden-sm-only">Class :</label> |
| 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> | 76 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 class="ml-3"> | 78 | <v-flex xs8 class="ml-3"> |
| 79 | <v-select | 79 | <v-select |
| 80 | v-model="editedItem.classId" | 80 | v-model="editedItem.classId" |
| 81 | :items="addClass" | 81 | :items="addClass" |
| 82 | label="Select Class" | 82 | label="Select Class" |
| 83 | item-text="classNum" | 83 | item-text="classNum" |
| 84 | item-value="_id" | 84 | item-value="_id" |
| 85 | type="_id" | 85 | type="_id" |
| 86 | required | 86 | required |
| 87 | ></v-select> | 87 | ></v-select> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs12 sm12> | 91 | <v-flex xs12 sm12> |
| 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 hidden-xs-only hidden-sm-only">Upload Image :</label> | 94 | <label class="right hidden-xs-only hidden-sm-only">Upload Image :</label> |
| 95 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> | 95 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">UploadImage :</label> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs8 class="ml-3"> | 97 | <v-flex xs8 class="ml-3"> |
| 98 | <v-text-field | 98 | <v-text-field |
| 99 | label="Select Image" | 99 | label="Select Image" |
| 100 | @click="editPickImage" | 100 | @click="editPickImage" |
| 101 | v-model="editImageName" | 101 | v-model="editImageName" |
| 102 | append-icon="attach_file" | 102 | append-icon="attach_file" |
| 103 | ></v-text-field> | 103 | ></v-text-field> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | </v-layout> | 105 | </v-layout> |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | <v-flex xs12> | 107 | <v-flex xs12> |
| 108 | <v-layout> | 108 | <v-layout> |
| 109 | <v-flex xs4 class="pt-4 subheading"> | 109 | <v-flex xs4 class="pt-4 subheading"> |
| 110 | <label class="right">Upload File:</label> | 110 | <label class="right">Upload File:</label> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | <v-flex xs8 class="ml-3"> | 112 | <v-flex xs8 class="ml-3"> |
| 113 | <input | 113 | <input |
| 114 | type="file" | 114 | type="file" |
| 115 | style="display: none" | 115 | style="display: none" |
| 116 | ref="editFile" | 116 | ref="editFile" |
| 117 | @change="onEditFilePicked" | 117 | @change="onEditFilePicked" |
| 118 | /> | 118 | /> |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | label="Select File" | 120 | label="Select File" |
| 121 | @click="editPickFile" | 121 | @click="editPickFile" |
| 122 | v-model="editFileName" | 122 | v-model="editFileName" |
| 123 | append-icon="attach_file" | 123 | append-icon="attach_file" |
| 124 | ></v-text-field> | 124 | ></v-text-field> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-card-actions> | 128 | <v-card-actions> |
| 129 | <v-spacer></v-spacer> | 129 | <v-spacer></v-spacer> |
| 130 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 130 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 131 | <v-spacer></v-spacer> | 131 | <v-spacer></v-spacer> |
| 132 | </v-card-actions> | 132 | </v-card-actions> |
| 133 | </v-container> | 133 | </v-container> |
| 134 | </v-card-text> | 134 | </v-card-text> |
| 135 | </v-card> | 135 | </v-card> |
| 136 | </v-dialog> | 136 | </v-dialog> |
| 137 | 137 | ||
| 138 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> | 138 | <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> |
| 139 | 139 | ||
| 140 | <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable> | 140 | <v-dialog v-model="viewEbookDialog" max-width="600px" scrollable persistent> |
| 141 | <v-card flat class="card-style pa-3" dark> | 141 | <v-card flat class="card-style pa-3" dark> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <label class="title text-xs-center">View E-book</label> | 144 | <label class="title text-xs-center">View E-book</label> |
| 145 | <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> | 145 | <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout> | 148 | <v-layout> |
| 149 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 149 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 150 | <v-avatar size="100px"> | 150 | <v-avatar size="100px"> |
| 151 | <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> | 151 | <img src="/static/icon/user.png" v-if="!editedItem.coverPhotoUrl" /> |
| 152 | <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> | 152 | <img :src="editedItem.coverPhotoUrl" v-else-if="editedItem.coverPhotoUrl" /> |
| 153 | </v-avatar> | 153 | </v-avatar> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-container grid-list-md> | 156 | <v-container grid-list-md> |
| 157 | <v-layout wrap> | 157 | <v-layout wrap> |
| 158 | <v-flex xs12 sm12> | 158 | <v-flex xs12 sm12> |
| 159 | <v-layout> | 159 | <v-layout> |
| 160 | <v-flex xs6 sm6> | 160 | <v-flex xs6 sm6> |
| 161 | <h5 class="right my-1"> | 161 | <h5 class="right my-1"> |
| 162 | <b>Name:</b> | 162 | <b>Name:</b> |
| 163 | </h5> | 163 | </h5> |
| 164 | </v-flex> | 164 | </v-flex> |
| 165 | <v-flex sm6 xs6> | 165 | <v-flex sm6 xs6> |
| 166 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 166 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 167 | </v-flex> | 167 | </v-flex> |
| 168 | </v-layout> | 168 | </v-layout> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex xs12 sm12> | 170 | <v-flex xs12 sm12> |
| 171 | <v-layout> | 171 | <v-layout> |
| 172 | <v-flex xs6 sm6> | 172 | <v-flex xs6 sm6> |
| 173 | <h5 class="right my-1"> | 173 | <h5 class="right my-1"> |
| 174 | <b>Author:</b> | 174 | <b>Author:</b> |
| 175 | </h5> | 175 | </h5> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | <v-flex sm6 xs6> | 177 | <v-flex sm6 xs6> |
| 178 | <h5 class="my-1 left">{{ editedItem.author }}</h5> | 178 | <h5 class="my-1 left">{{ editedItem.author }}</h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-layout> | 180 | </v-layout> |
| 181 | </v-flex> | 181 | </v-flex> |
| 182 | </v-layout> | 182 | </v-layout> |
| 183 | <v-flex xs12 sm12> | 183 | <v-flex xs12 sm12> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs6 sm6> | 185 | <v-flex xs6 sm6> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Class:</b> | 187 | <b>Class:</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm6 xs6> | 190 | <v-flex sm6 xs6> |
| 191 | <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> | 191 | <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-container> | 195 | </v-container> |
| 196 | </v-card> | 196 | </v-card> |
| 197 | </v-dialog> | 197 | </v-dialog> |
| 198 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 198 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 199 | 199 | ||
| 200 | <v-toolbar color="transparent" flat> | 200 | <v-toolbar color="transparent" flat> |
| 201 | <v-btn | 201 | <v-btn |
| 202 | fab | 202 | fab |
| 203 | dark | 203 | dark |
| 204 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 204 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 205 | small | 205 | small |
| 206 | @click="addEBookDialog = true" | 206 | @click="addEBookDialog = true" |
| 207 | > | 207 | > |
| 208 | <v-icon dark>add</v-icon> | 208 | <v-icon dark>add</v-icon> |
| 209 | </v-btn> | 209 | </v-btn> |
| 210 | <v-btn | 210 | <v-btn |
| 211 | round | 211 | round |
| 212 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 212 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 213 | dark | 213 | dark |
| 214 | @click="addEBookDialog = true" | 214 | @click="addEBookDialog = true" |
| 215 | > | 215 | > |
| 216 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book | 216 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book |
| 217 | </v-btn> | 217 | </v-btn> |
| 218 | <v-spacer></v-spacer> | 218 | <v-spacer></v-spacer> |
| 219 | <v-card-title class="body-1" v-show="show"> | 219 | <v-card-title class="body-1" v-show="show"> |
| 220 | <v-btn icon large flat @click="displaySearch"> | 220 | <v-btn icon large flat @click="displaySearch"> |
| 221 | <v-avatar size="27"> | 221 | <v-avatar size="27"> |
| 222 | <img src="/static/icon/search.png" alt="icon" /> | 222 | <img src="/static/icon/search.png" alt="icon" /> |
| 223 | </v-avatar> | 223 | </v-avatar> |
| 224 | </v-btn> | 224 | </v-btn> |
| 225 | </v-card-title> | 225 | </v-card-title> |
| 226 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 226 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 227 | <v-layout> | 227 | <v-layout> |
| 228 | <v-text-field | 228 | <v-text-field |
| 229 | autofocus | 229 | autofocus |
| 230 | v-model="search" | 230 | v-model="search" |
| 231 | label="Search" | 231 | label="Search" |
| 232 | prepend-inner-icon="search" | 232 | prepend-inner-icon="search" |
| 233 | color="primary" | 233 | color="primary" |
| 234 | ></v-text-field> | 234 | ></v-text-field> |
| 235 | <v-icon @click="closeSearch" color="error">close</v-icon> | 235 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 236 | </v-layout> | 236 | </v-layout> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-toolbar> | 238 | </v-toolbar> |
| 239 | <v-data-table | 239 | <v-data-table |
| 240 | :headers="headers" | 240 | :headers="headers" |
| 241 | :items="eBookData" | 241 | :items="eBookData" |
| 242 | :pagination.sync="pagination" | 242 | :pagination.sync="pagination" |
| 243 | :search="search" | 243 | :search="search" |
| 244 | > | 244 | > |
| 245 | <template slot="items" slot-scope="props"> | 245 | <template slot="items" slot-scope="props"> |
| 246 | <tr class="tr"> | 246 | <tr class="tr"> |
| 247 | <td class="td td-row">{{ props.index + 1}}</td> | 247 | <td class="td td-row">{{ props.index + 1}}</td> |
| 248 | <td class="td td-row text-xs-center"> | 248 | <td class="td td-row text-xs-center"> |
| 249 | <v-avatar size="40"> | 249 | <v-avatar size="40"> |
| 250 | <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> | 250 | <img :src="props.item.coverPhotoUrl" v-if="props.item.coverPhotoUrl" alt="ebooks" /> |
| 251 | <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> | 251 | <img src="/static/icon/user.png" v-if="!props.item.coverPhotoUrl" /> |
| 252 | </v-avatar> | 252 | </v-avatar> |
| 253 | </td> | 253 | </td> |
| 254 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 254 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 255 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> | 255 | <td class="td td-row text-xs-center">{{ props.item.author}}</td> |
| 256 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> | 256 | <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> |
| 257 | <td class="td td-row text-xs-center"> | 257 | <td class="td td-row text-xs-center"> |
| 258 | <span> | 258 | <span> |
| 259 | <v-tooltip top> | 259 | <v-tooltip top> |
| 260 | <img | 260 | <img |
| 261 | slot="activator" | 261 | slot="activator" |
| 262 | style="cursor:pointer; width:25px; height:25px; " | 262 | style="cursor:pointer; width:25px; height:25px; " |
| 263 | class="mr-3" | 263 | class="mr-3" |
| 264 | @click="profile(props.item)" | 264 | @click="profile(props.item)" |
| 265 | src="/static/icon/view.png" | 265 | src="/static/icon/view.png" |
| 266 | /> | 266 | /> |
| 267 | <span>View</span> | 267 | <span>View</span> |
| 268 | </v-tooltip> | 268 | </v-tooltip> |
| 269 | <v-tooltip top> | 269 | <v-tooltip top> |
| 270 | <img | 270 | <img |
| 271 | slot="activator" | 271 | slot="activator" |
| 272 | style="cursor:pointer; width:20px; height:18px; " | 272 | style="cursor:pointer; width:20px; height:18px; " |
| 273 | class="mr-3" | 273 | class="mr-3" |
| 274 | @click="editItem(props.item)" | 274 | @click="editItem(props.item)" |
| 275 | src="/static/icon/edit.png" | 275 | src="/static/icon/edit.png" |
| 276 | /> | 276 | /> |
| 277 | <span>Edit</span> | 277 | <span>Edit</span> |
| 278 | </v-tooltip> | 278 | </v-tooltip> |
| 279 | <v-tooltip top v-if="role != 'TEACHER' "> | 279 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 280 | <img | 280 | <img |
| 281 | slot="activator" | 281 | slot="activator" |
| 282 | style="cursor:pointer; width:20px; height:20px; " | 282 | style="cursor:pointer; width:20px; height:20px; " |
| 283 | @click="deleteItem(props.item)" | 283 | @click="deleteItem(props.item)" |
| 284 | src="/static/icon/delete.png" | 284 | src="/static/icon/delete.png" |
| 285 | /> | 285 | /> |
| 286 | <span>Delete</span> | 286 | <span>Delete</span> |
| 287 | </v-tooltip> | 287 | </v-tooltip> |
| 288 | </span> | 288 | </span> |
| 289 | </td> | 289 | </td> |
| 290 | </tr> | 290 | </tr> |
| 291 | </template> | 291 | </template> |
| 292 | <v-alert | 292 | <v-alert |
| 293 | slot="no-results" | 293 | slot="no-results" |
| 294 | :value="true" | 294 | :value="true" |
| 295 | color="error" | 295 | color="error" |
| 296 | icon="warning" | 296 | icon="warning" |
| 297 | >Your search for "{{ search }}" found no results.</v-alert> | 297 | >Your search for "{{ search }}" found no results.</v-alert> |
| 298 | </v-data-table> | 298 | </v-data-table> |
| 299 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> | 299 | <!-- ****** ADD MULTIPLE E-BOOK ****** --> |
| 300 | <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog"> | 300 | <v-dialog v-model="addEBookDialog" max-width="600px" v-if="addEBookDialog" persistent> |
| 301 | <v-card flat class="card-style pa-2" dark> | 301 | <v-card flat class="card-style pa-2" dark> |
| 302 | <v-layout> | 302 | <v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <label class="title text-xs-center">Add E-Book</label> | 304 | <label class="title text-xs-center">Add E-Book</label> |
| 305 | <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> | 305 | <v-icon size="24" class="right" @click="closeAddEBookModel">cancel</v-icon> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | <v-form ref="form" v-model="valid" lazy-validation> | 308 | <v-form ref="form" v-model="valid" lazy-validation> |
| 309 | <v-container fluid> | 309 | <v-container fluid> |
| 310 | <v-layout> | 310 | <v-layout> |
| 311 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 311 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 312 | <input | 312 | <input |
| 313 | type="file" | 313 | type="file" |
| 314 | style="display: none" | 314 | style="display: none" |
| 315 | ref="image" | 315 | ref="image" |
| 316 | accept="image/*" | 316 | accept="image/*" |
| 317 | @change="onImagePicked" | 317 | @change="onImagePicked" |
| 318 | /> | 318 | /> |
| 319 | <v-layout justify-center> | 319 | <v-layout justify-center> |
| 320 | <v-flex v-if="files != ''"> | 320 | <v-flex v-if="files != ''"> |
| 321 | <img :src="files" height="150" width="150" /> | 321 | <img :src="files" height="150" width="150" /> |
| 322 | </v-flex> | 322 | </v-flex> |
| 323 | </v-layout> | 323 | </v-layout> |
| 324 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> | 324 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" /> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | </v-layout> | 326 | </v-layout> |
| 327 | <v-flex xs12> | 327 | <v-flex xs12> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex xs4 class="pt-4 subheading"> | 329 | <v-flex xs4 class="pt-4 subheading"> |
| 330 | <label class="right">Name:</label> | 330 | <label class="right">Name:</label> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs7 class="ml-3"> | 332 | <v-flex xs7 class="ml-3"> |
| 333 | <v-text-field | 333 | <v-text-field |
| 334 | v-model="addEBooks.name" | 334 | v-model="addEBooks.name" |
| 335 | placeholder="fill name" | 335 | placeholder="fill name" |
| 336 | name="name" | 336 | name="name" |
| 337 | type="text" | 337 | type="text" |
| 338 | :rules="titleRules" | 338 | :rules="titleRules" |
| 339 | required | 339 | required |
| 340 | ></v-text-field> | 340 | ></v-text-field> |
| 341 | </v-flex> | 341 | </v-flex> |
| 342 | </v-layout> | 342 | </v-layout> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex xs12> | 344 | <v-flex xs12> |
| 345 | <v-layout> | 345 | <v-layout> |
| 346 | <v-flex xs4 class="pt-4 subheading"> | 346 | <v-flex xs4 class="pt-4 subheading"> |
| 347 | <label class="right">Author:</label> | 347 | <label class="right">Author:</label> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex xs7 class="ml-3"> | 349 | <v-flex xs7 class="ml-3"> |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | v-model="addEBooks.author" | 351 | v-model="addEBooks.author" |
| 352 | placeholder="fill your Author Name" | 352 | placeholder="fill your Author Name" |
| 353 | name="name" | 353 | name="name" |
| 354 | type="text" | 354 | type="text" |
| 355 | :rules="titleRules" | 355 | :rules="titleRules" |
| 356 | required | 356 | required |
| 357 | ></v-text-field> | 357 | ></v-text-field> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | <v-flex xs12> | 361 | <v-flex xs12> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs4 class="pt-4 subheading"> | 363 | <v-flex xs4 class="pt-4 subheading"> |
| 364 | <label class="right">Class:</label> | 364 | <label class="right">Class:</label> |
| 365 | </v-flex> | 365 | </v-flex> |
| 366 | <v-flex xs7 class="ml-3"> | 366 | <v-flex xs7 class="ml-3"> |
| 367 | <v-select | 367 | <v-select |
| 368 | v-model="addEBooks.classId" | 368 | v-model="addEBooks.classId" |
| 369 | :items="addClass" | 369 | :items="addClass" |
| 370 | label="Select Class" | 370 | label="Select Class" |
| 371 | item-text="classNum" | 371 | item-text="classNum" |
| 372 | item-value="_id" | 372 | item-value="_id" |
| 373 | :rules="titleRules" | 373 | :rules="titleRules" |
| 374 | required | 374 | required |
| 375 | ></v-select> | 375 | ></v-select> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | <v-flex xs12> | 379 | <v-flex xs12> |
| 380 | <v-layout> | 380 | <v-layout> |
| 381 | <v-flex xs4 class="pt-4 subheading"> | 381 | <v-flex xs4 class="pt-4 subheading"> |
| 382 | <label class="right">Upload Image:</label> | 382 | <label class="right">Upload Image:</label> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | <v-flex xs7 class="ml-3"> | 384 | <v-flex xs7 class="ml-3"> |
| 385 | <v-text-field | 385 | <v-text-field |
| 386 | label="Select Image" | 386 | label="Select Image" |
| 387 | @click="pickImage" | 387 | @click="pickImage" |
| 388 | v-model="imageName" | 388 | v-model="imageName" |
| 389 | append-icon="attach_file" | 389 | append-icon="attach_file" |
| 390 | ></v-text-field> | 390 | ></v-text-field> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | </v-layout> | 392 | </v-layout> |
| 393 | </v-flex> | 393 | </v-flex> |
| 394 | <v-flex xs12> | 394 | <v-flex xs12> |
| 395 | <v-layout> | 395 | <v-layout> |
| 396 | <v-flex xs4 class="pt-4 subheading"> | 396 | <v-flex xs4 class="pt-4 subheading"> |
| 397 | <label class="right">Upload File:</label> | 397 | <label class="right">Upload File:</label> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex xs8 class="ml-3"> | 399 | <v-flex xs8 class="ml-3"> |
| 400 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> | 400 | <input type="file" style="display: none" ref="file" @change="onFilePicked" /> |
| 401 | <v-text-field | 401 | <v-text-field |
| 402 | label="Select File" | 402 | label="Select File" |
| 403 | @click="pickFile" | 403 | @click="pickFile" |
| 404 | v-model="fileName" | 404 | v-model="fileName" |
| 405 | append-icon="attach_file" | 405 | append-icon="attach_file" |
| 406 | ></v-text-field> | 406 | ></v-text-field> |
| 407 | </v-flex> | 407 | </v-flex> |
| 408 | </v-layout> | 408 | </v-layout> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs12> | 410 | <v-flex xs12> |
| 411 | <v-layout> | 411 | <v-layout> |
| 412 | <v-flex xs4 class="pt-3 subheading"> | 412 | <v-flex xs4 class="pt-3 subheading"> |
| 413 | <label class="right">Private:</label> | 413 | <label class="right">Private:</label> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | <v-flex xs7 class="ml-3"> | 415 | <v-flex xs7 class="ml-3"> |
| 416 | <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> | 416 | <v-checkbox v-model="addEBooks.private" :rules="uploadPrivateRule"></v-checkbox> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | </v-layout> | 418 | </v-layout> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | <v-layout> | 420 | <v-layout> |
| 421 | <v-flex xs12> | 421 | <v-flex xs12> |
| 422 | <v-card-actions> | 422 | <v-card-actions> |
| 423 | <v-spacer></v-spacer> | 423 | <v-spacer></v-spacer> |
| 424 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 424 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 425 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 425 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 426 | </v-card-actions> | 426 | </v-card-actions> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | </v-container> | 429 | </v-container> |
| 430 | </v-form> | 430 | </v-form> |
| 431 | </v-card> | 431 | </v-card> |
| 432 | </v-dialog> | 432 | </v-dialog> |
| 433 | <div class="loader" v-if="showLoader"> | 433 | <div class="loader" v-if="showLoader"> |
| 434 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 434 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 435 | </div> | 435 | </div> |
| 436 | </v-container> | 436 | </v-container> |
| 437 | </template> | 437 | </template> |
| 438 | 438 | ||
| 439 | <script> | 439 | <script> |
| 440 | import http from "@/Services/http.js"; | 440 | import http from "@/Services/http.js"; |
| 441 | import Util from "@/util"; | 441 | import Util from "@/util"; |
| 442 | 442 | ||
| 443 | export default { | 443 | export default { |
| 444 | data: () => ({ | 444 | data: () => ({ |
| 445 | snackbar: false, | 445 | snackbar: false, |
| 446 | y: "top", | 446 | y: "top", |
| 447 | x: "right", | 447 | x: "right", |
| 448 | mode: "", | 448 | mode: "", |
| 449 | timeout: 3000, | 449 | timeout: 3000, |
| 450 | text: "", | 450 | text: "", |
| 451 | show: true, | 451 | show: true, |
| 452 | showSearch: false, | 452 | showSearch: false, |
| 453 | loading: false, | 453 | loading: false, |
| 454 | loadingUpadte: false, | 454 | loadingUpadte: false, |
| 455 | date: null, | 455 | date: null, |
| 456 | search: "", | 456 | search: "", |
| 457 | showLoader: false, | 457 | showLoader: false, |
| 458 | editEbookDialog: false, | 458 | editEbookDialog: false, |
| 459 | viewEbookDialog: false, | 459 | viewEbookDialog: false, |
| 460 | valid: true, | 460 | valid: true, |
| 461 | addEBookDialog: false, | 461 | addEBookDialog: false, |
| 462 | editLoading: false, | 462 | editLoading: false, |
| 463 | addClass: [], | 463 | addClass: [], |
| 464 | addSection: [], | 464 | addSection: [], |
| 465 | pagination: { | 465 | pagination: { |
| 466 | rowsPerPage: 10, | 466 | rowsPerPage: 10, |
| 467 | }, | 467 | }, |
| 468 | imageName: "", | 468 | imageName: "", |
| 469 | fileName: "", | 469 | fileName: "", |
| 470 | imageUrl: "", | 470 | imageUrl: "", |
| 471 | imageFile: "", | 471 | imageFile: "", |
| 472 | image: [], | 472 | image: [], |
| 473 | upload: "", | 473 | upload: "", |
| 474 | files: "", | 474 | files: "", |
| 475 | anyFile: "", | 475 | anyFile: "", |
| 476 | titleRules: [(v) => !!v || " Tilte is required"], | 476 | titleRules: [(v) => !!v || " Tilte is required"], |
| 477 | descriptionRules: [(v) => !!v || " Description is required"], | 477 | descriptionRules: [(v) => !!v || " Description is required"], |
| 478 | uploadImageRule: [(v) => !!v || " field is required"], | 478 | uploadImageRule: [(v) => !!v || " field is required"], |
| 479 | uploadFileRule: [(v) => !!v || " fied is required"], | 479 | uploadFileRule: [(v) => !!v || " fied is required"], |
| 480 | uploadPrivateRule: [(v) => !!v || " fied is required"], | 480 | uploadPrivateRule: [(v) => !!v || " fied is required"], |
| 481 | 481 | ||
| 482 | headers: [ | 482 | headers: [ |
| 483 | { | 483 | { |
| 484 | align: "left", | 484 | align: "left", |
| 485 | text: "No", | 485 | text: "No", |
| 486 | sortable: false, | 486 | sortable: false, |
| 487 | value: "No", | 487 | value: "No", |
| 488 | }, | 488 | }, |
| 489 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, | 489 | { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" }, |
| 490 | { text: "Name", vaue: "name", sortable: false, align: "center" }, | 490 | { text: "Name", vaue: "name", sortable: false, align: "center" }, |
| 491 | { text: "Author", value: "author", sortable: false, align: "center" }, | 491 | { text: "Author", value: "author", sortable: false, align: "center" }, |
| 492 | { | 492 | { |
| 493 | text: "Class", | 493 | text: "Class", |
| 494 | value: "classId", | 494 | value: "classId", |
| 495 | sortable: false, | 495 | sortable: false, |
| 496 | align: "center", | 496 | align: "center", |
| 497 | }, | 497 | }, |
| 498 | { text: "Action", value: "", sortable: false, align: "center" }, | 498 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 499 | ], | 499 | ], |
| 500 | eBookData: [], | 500 | eBookData: [], |
| 501 | editedIndex: -1, | 501 | editedIndex: -1, |
| 502 | addEBooks: { | 502 | addEBooks: { |
| 503 | private: false, | 503 | private: false, |
| 504 | }, | 504 | }, |
| 505 | editedItem: {}, | 505 | editedItem: {}, |
| 506 | editedItem: { | 506 | editedItem: { |
| 507 | classId: { | 507 | classId: { |
| 508 | classNum: "", | 508 | classNum: "", |
| 509 | }, | 509 | }, |
| 510 | }, | 510 | }, |
| 511 | token: "", | 511 | token: "", |
| 512 | uploadCover: {}, | 512 | uploadCover: {}, |
| 513 | editImageName: "", | 513 | editImageName: "", |
| 514 | editFiles: "", | 514 | editFiles: "", |
| 515 | editAnyFile: "", | 515 | editAnyFile: "", |
| 516 | editFileName: "", | 516 | editFileName: "", |
| 517 | }), | 517 | }), |
| 518 | watch: { | 518 | watch: { |
| 519 | addEBookDialog: function (val) { | 519 | addEBookDialog: function (val) { |
| 520 | if (!val) { | 520 | if (!val) { |
| 521 | this.addEBooks = []; | 521 | this.addEBooks = []; |
| 522 | this.imageName = ""; | 522 | this.imageName = ""; |
| 523 | this.fileName = ""; | 523 | this.fileName = ""; |
| 524 | this.files = ""; | 524 | this.files = ""; |
| 525 | } | 525 | } |
| 526 | }, | 526 | }, |
| 527 | }, | 527 | }, |
| 528 | methods: { | 528 | methods: { |
| 529 | editPickImage() { | 529 | editPickImage() { |
| 530 | this.$refs.editImage.click(); | 530 | this.$refs.editImage.click(); |
| 531 | }, | 531 | }, |
| 532 | pickImage() { | 532 | pickImage() { |
| 533 | this.$refs.image.click(); | 533 | this.$refs.image.click(); |
| 534 | }, | 534 | }, |
| 535 | pickFile() { | 535 | pickFile() { |
| 536 | this.$refs.file.click(); | 536 | this.$refs.file.click(); |
| 537 | }, | 537 | }, |
| 538 | editPickFile() { | 538 | editPickFile() { |
| 539 | this.$refs.editFile.click(); | 539 | this.$refs.editFile.click(); |
| 540 | }, | 540 | }, |
| 541 | onImagePicked(e) { | 541 | onImagePicked(e) { |
| 542 | // console.log(e) | 542 | // console.log(e) |
| 543 | const files = e.target.files; | 543 | const files = e.target.files; |
| 544 | /** fetch Image Name **/ | 544 | /** fetch Image Name **/ |
| 545 | if (files[0] !== undefined) { | 545 | if (files[0] !== undefined) { |
| 546 | this.imageName = files[0].name; | 546 | this.imageName = files[0].name; |
| 547 | if (this.imageName.lastIndexOf(".") <= 0) { | 547 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 548 | return; | 548 | return; |
| 549 | } | 549 | } |
| 550 | /** Select many image and showing many image add to news card **/ | 550 | /** Select many image and showing many image add to news card **/ |
| 551 | const fr = new FileReader(); | 551 | const fr = new FileReader(); |
| 552 | fr.readAsDataURL(files[0]); | 552 | fr.readAsDataURL(files[0]); |
| 553 | fr.addEventListener("load", () => { | 553 | fr.addEventListener("load", () => { |
| 554 | this.files = fr.result; | 554 | this.files = fr.result; |
| 555 | }); | 555 | }); |
| 556 | } else { | 556 | } else { |
| 557 | this.imageName = ""; | 557 | this.imageName = ""; |
| 558 | this.imageFile = ""; | 558 | this.imageFile = ""; |
| 559 | this.files = ""; | 559 | this.files = ""; |
| 560 | this.imageUrl = ""; | 560 | this.imageUrl = ""; |
| 561 | } | 561 | } |
| 562 | }, | 562 | }, |
| 563 | onEditImagePicked(e) { | 563 | onEditImagePicked(e) { |
| 564 | // console.log(e) | 564 | // console.log(e) |
| 565 | const files = e.target.files; | 565 | const files = e.target.files; |
| 566 | /** fetch Image Name **/ | 566 | /** fetch Image Name **/ |
| 567 | if (files[0] !== undefined) { | 567 | if (files[0] !== undefined) { |
| 568 | this.editImageName = files[0].name; | 568 | this.editImageName = files[0].name; |
| 569 | if (this.editImageName.lastIndexOf(".") <= 0) { | 569 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 570 | return; | 570 | return; |
| 571 | } | 571 | } |
| 572 | /** Select many image and showing many image add to news card **/ | 572 | /** Select many image and showing many image add to news card **/ |
| 573 | const fr = new FileReader(); | 573 | const fr = new FileReader(); |
| 574 | fr.readAsDataURL(files[0]); | 574 | fr.readAsDataURL(files[0]); |
| 575 | fr.addEventListener("load", () => { | 575 | fr.addEventListener("load", () => { |
| 576 | this.editFiles = fr.result; | 576 | this.editFiles = fr.result; |
| 577 | }); | 577 | }); |
| 578 | } else { | 578 | } else { |
| 579 | this.editImageName = ""; | 579 | this.editImageName = ""; |
| 580 | this.editFiles = ""; | 580 | this.editFiles = ""; |
| 581 | } | 581 | } |
| 582 | }, | 582 | }, |
| 583 | getEBooksList() { | 583 | getEBooksList() { |
| 584 | this.showLoader = true; | 584 | this.showLoader = true; |
| 585 | http() | 585 | http() |
| 586 | .get("/getEBooksList", { | 586 | .get("/getEBooksList", { |
| 587 | params: { schoolId: this.$store.state.schoolId }, | 587 | params: { schoolId: this.$store.state.schoolId }, |
| 588 | headers: { Authorization: "Bearer " + this.token }, | 588 | headers: { Authorization: "Bearer " + this.token }, |
| 589 | }) | 589 | }) |
| 590 | .then((response) => { | 590 | .then((response) => { |
| 591 | this.eBookData = response.data.data; | 591 | this.eBookData = response.data.data; |
| 592 | this.showLoader = false; | 592 | this.showLoader = false; |
| 593 | }) | 593 | }) |
| 594 | .catch((error) => { | 594 | .catch((error) => { |
| 595 | // console.log("err====>", err); | 595 | // console.log("err====>", err); |
| 596 | this.showLoader = false; | 596 | this.showLoader = false; |
| 597 | if (error.response.status === 401) { | 597 | if (error.response.status === 401) { |
| 598 | this.$router.replace({ path: "/" }); | 598 | this.$router.replace({ path: "/" }); |
| 599 | this.$store.dispatch("setToken", null); | 599 | this.$store.dispatch("setToken", null); |
| 600 | this.$store.dispatch("Id", null); | 600 | this.$store.dispatch("Id", null); |
| 601 | } | 601 | } |
| 602 | }); | 602 | }); |
| 603 | }, | 603 | }, |
| 604 | onFilePicked(e) { | 604 | onFilePicked(e) { |
| 605 | // console.log(e) | 605 | // console.log(e) |
| 606 | const files = e.target.files; | 606 | const files = e.target.files; |
| 607 | /** fetch Image Name **/ | 607 | /** fetch Image Name **/ |
| 608 | if (files[0] !== undefined) { | 608 | if (files[0] !== undefined) { |
| 609 | this.fileName = files[0].name; | 609 | this.fileName = files[0].name; |
| 610 | if (this.fileName.lastIndexOf(".") <= 0) { | 610 | if (this.fileName.lastIndexOf(".") <= 0) { |
| 611 | return; | 611 | return; |
| 612 | } | 612 | } |
| 613 | const fr = new FileReader(); | 613 | const fr = new FileReader(); |
| 614 | fr.readAsDataURL(files[0]); | 614 | fr.readAsDataURL(files[0]); |
| 615 | fr.addEventListener("load", () => { | 615 | fr.addEventListener("load", () => { |
| 616 | this.anyFile = fr.result; | 616 | this.anyFile = fr.result; |
| 617 | // console.log(" this.anyFile Url", this.anyFile ) | 617 | // console.log(" this.anyFile Url", this.anyFile ) |
| 618 | }); | 618 | }); |
| 619 | } else { | 619 | } else { |
| 620 | this.anyFile = ""; | 620 | this.anyFile = ""; |
| 621 | this.fileName = ""; | 621 | this.fileName = ""; |
| 622 | } | 622 | } |
| 623 | }, | 623 | }, |
| 624 | onEditFilePicked(e) { | 624 | onEditFilePicked(e) { |
| 625 | // console.log(e) | 625 | // console.log(e) |
| 626 | const files = e.target.files; | 626 | const files = e.target.files; |
| 627 | /** fetch Image Name **/ | 627 | /** fetch Image Name **/ |
| 628 | if (files[0] !== undefined) { | 628 | if (files[0] !== undefined) { |
| 629 | this.editFileName = files[0].name; | 629 | this.editFileName = files[0].name; |
| 630 | if (this.editFileName.lastIndexOf(".") <= 0) { | 630 | if (this.editFileName.lastIndexOf(".") <= 0) { |
| 631 | return; | 631 | return; |
| 632 | } | 632 | } |
| 633 | const fr = new FileReader(); | 633 | const fr = new FileReader(); |
| 634 | fr.readAsDataURL(files[0]); | 634 | fr.readAsDataURL(files[0]); |
| 635 | fr.addEventListener("load", () => { | 635 | fr.addEventListener("load", () => { |
| 636 | this.editAnyFile = fr.result; | 636 | this.editAnyFile = fr.result; |
| 637 | // console.log(" this.anyFile Url", this.anyFile ) | 637 | // console.log(" this.anyFile Url", this.anyFile ) |
| 638 | }); | 638 | }); |
| 639 | } else { | 639 | } else { |
| 640 | this.editAnyFile = ""; | 640 | this.editAnyFile = ""; |
| 641 | this.editFileName = ""; | 641 | this.editFileName = ""; |
| 642 | } | 642 | } |
| 643 | }, | 643 | }, |
| 644 | editItem(item) { | 644 | editItem(item) { |
| 645 | this.files = []; | 645 | this.files = []; |
| 646 | this.editedIndex = this.eBookData.indexOf(item); | 646 | this.editedIndex = this.eBookData.indexOf(item); |
| 647 | this.editedItem = Object.assign({}, item); | 647 | this.editedItem = Object.assign({}, item); |
| 648 | this.editedItem.className = item.classId.classNum; | 648 | this.editedItem.className = item.classId.classNum; |
| 649 | this.editEbookDialog = true; | 649 | this.editEbookDialog = true; |
| 650 | }, | 650 | }, |
| 651 | profile(item) { | 651 | profile(item) { |
| 652 | this.editedIndex = this.eBookData.indexOf(item); | 652 | this.editedIndex = this.eBookData.indexOf(item); |
| 653 | this.editedItem = Object.assign({}, item); | 653 | this.editedItem = Object.assign({}, item); |
| 654 | this.viewEbookDialog = true; | 654 | this.viewEbookDialog = true; |
| 655 | }, | 655 | }, |
| 656 | deleteItem(item) { | 656 | deleteItem(item) { |
| 657 | let deleteEBooks = { | 657 | let deleteEBooks = { |
| 658 | ebookId: item._id, | 658 | ebookId: item._id, |
| 659 | }; | 659 | }; |
| 660 | http() | 660 | http() |
| 661 | .delete( | 661 | .delete( |
| 662 | "/deleteEBook", | 662 | "/deleteEBook", |
| 663 | confirm("Are you sure you want to delete this?") && { | 663 | confirm("Are you sure you want to delete this?") && { |
| 664 | params: deleteEBooks, | 664 | params: deleteEBooks, |
| 665 | } | 665 | } |
| 666 | ) | 666 | ) |
| 667 | .then((response) => { | 667 | .then((response) => { |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.text = "Successfully delete Existing News"; | 669 | this.text = "Successfully delete Existing News"; |
| 670 | this.getEBooksList(); | 670 | this.getEBooksList(); |
| 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 | }); | 675 | }); |
| 676 | }, | 676 | }, |
| 677 | close() { | 677 | close() { |
| 678 | this.editEbookDialog = false; | 678 | this.editEbookDialog = false; |
| 679 | }, | 679 | }, |
| 680 | close1() { | 680 | close1() { |
| 681 | this.viewEbookDialog = false; | 681 | this.viewEbookDialog = false; |
| 682 | }, | 682 | }, |
| 683 | closeAddEBookModel() { | 683 | closeAddEBookModel() { |
| 684 | this.addEBookDialog = false; | 684 | this.addEBookDialog = false; |
| 685 | // this.eBookData = []; | 685 | // this.eBookData = []; |
| 686 | this.addEBooks = []; | 686 | this.addEBooks = []; |
| 687 | this.imageName = ""; | 687 | this.imageName = ""; |
| 688 | this.fileName = ""; | 688 | this.fileName = ""; |
| 689 | this.files = ""; | 689 | this.files = ""; |
| 690 | }, | 690 | }, |
| 691 | submit() { | 691 | submit() { |
| 692 | if (this.$refs.form.validate()) { | 692 | if (this.$refs.form.validate()) { |
| 693 | this.loading = true; | 693 | this.loading = true; |
| 694 | var uploadCover = ""; | 694 | var uploadCover = ""; |
| 695 | var uploadFile = ""; | 695 | var uploadFile = ""; |
| 696 | if (this.files) { | 696 | if (this.files) { |
| 697 | const [baseUrl, imageUrl] = this.files.split(/,/); | 697 | const [baseUrl, imageUrl] = this.files.split(/,/); |
| 698 | uploadCover = imageUrl; | 698 | uploadCover = imageUrl; |
| 699 | console.log("anyFile.split(/,/)", uploadCover); | 699 | console.log("anyFile.split(/,/)", uploadCover); |
| 700 | } | 700 | } |
| 701 | if (this.anyFile) { | 701 | if (this.anyFile) { |
| 702 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); | 702 | const [baseUrl, fileUrl] = this.anyFile.split(/,/); |
| 703 | uploadFile = fileUrl; | 703 | uploadFile = fileUrl; |
| 704 | console.log("anyFile.split(/,/)", uploadFile); | 704 | console.log("anyFile.split(/,/)", uploadFile); |
| 705 | } | 705 | } |
| 706 | let data = { | 706 | let data = { |
| 707 | classId: this.addEBooks.classId, | 707 | classId: this.addEBooks.classId, |
| 708 | name: this.addEBooks.name, | 708 | name: this.addEBooks.name, |
| 709 | author: this.addEBooks.author, | 709 | author: this.addEBooks.author, |
| 710 | private: this.addEBooks.private, | 710 | private: this.addEBooks.private, |
| 711 | uploadCover: uploadCover, | 711 | uploadCover: uploadCover, |
| 712 | uploadFile: uploadFile, | 712 | uploadFile: uploadFile, |
| 713 | }; | 713 | }; |
| 714 | http() | 714 | http() |
| 715 | .post("/createEBook", data) | 715 | .post("/createEBook", data) |
| 716 | .then((response) => { | 716 | .then((response) => { |
| 717 | this.getEBooksList(); | 717 | this.getEBooksList(); |
| 718 | // this.getEBooksList = []; | 718 | // this.getEBooksList = []; |
| 719 | this.addEBookDialog = false; | 719 | this.addEBookDialog = false; |
| 720 | this.snackbar = true; | 720 | this.snackbar = true; |
| 721 | this.text = response.data.message; | 721 | this.text = response.data.message; |
| 722 | this.color = "green"; | 722 | this.color = "green"; |
| 723 | this.loading = false; | 723 | this.loading = false; |
| 724 | (this.imageName = ""), (this.fileName = ""); | 724 | (this.imageName = ""), (this.fileName = ""); |
| 725 | }) | 725 | }) |
| 726 | .catch((error) => { | 726 | .catch((error) => { |
| 727 | this.snackbar = true; | 727 | this.snackbar = true; |
| 728 | this.text = error.response.data.message; | 728 | this.text = error.response.data.message; |
| 729 | this.color = "red"; | 729 | this.color = "red"; |
| 730 | }); | 730 | }); |
| 731 | } | 731 | } |
| 732 | }, | 732 | }, |
| 733 | clear() { | 733 | clear() { |
| 734 | this.$refs.form.reset(); | 734 | this.$refs.form.reset(); |
| 735 | this.addEBooks.uploadCover = ""; | 735 | this.addEBooks.uploadCover = ""; |
| 736 | this.files = ""; | 736 | this.files = ""; |
| 737 | }, | 737 | }, |
| 738 | save() { | 738 | save() { |
| 739 | this.editLoading = true; | 739 | this.editLoading = true; |
| 740 | this.loadingUpadte = true; | 740 | this.loadingUpadte = true; |
| 741 | if (this.editFiles) { | 741 | if (this.editFiles) { |
| 742 | const [baseUrl, imageUrl] = this.editFiles.split(/,/); | 742 | const [baseUrl, imageUrl] = this.editFiles.split(/,/); |
| 743 | this.editedItem.uploadCover = imageUrl; | 743 | this.editedItem.uploadCover = imageUrl; |
| 744 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); | 744 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover); |
| 745 | } | 745 | } |
| 746 | if (this.editAnyFile) { | 746 | if (this.editAnyFile) { |
| 747 | const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); | 747 | const [baseUrl, fileUrl] = this.editAnyFile.split(/,/); |
| 748 | this.editedItem.uploadFile = fileUrl; | 748 | this.editedItem.uploadFile = fileUrl; |
| 749 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); | 749 | // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile); |
| 750 | } | 750 | } |
| 751 | if (this.editedItem.classId._id) { | 751 | if (this.editedItem.classId._id) { |
| 752 | this.editedItem.classId = this.editedItem.classId._id; | 752 | this.editedItem.classId = this.editedItem.classId._id; |
| 753 | } | 753 | } |
| 754 | this.editedItem.ebookId = this.editedItem._id; | 754 | this.editedItem.ebookId = this.editedItem._id; |
| 755 | console.log("this.editedItem", this.editedItem); | 755 | console.log("this.editedItem", this.editedItem); |
| 756 | http() | 756 | http() |
| 757 | .put("/updateEBook", this.editedItem) | 757 | .put("/updateEBook", this.editedItem) |
| 758 | .then((response) => { | 758 | .then((response) => { |
| 759 | this.loadingUpadte = false; | 759 | this.loadingUpadte = false; |
| 760 | this.snackbar = true; | 760 | this.snackbar = true; |
| 761 | this.text = "Successfully Edit Existing E-Book"; | 761 | this.text = "Successfully Edit Existing E-Book"; |
| 762 | this.getEBooksList(); | 762 | this.getEBooksList(); |
| 763 | this.editLoading = false; | 763 | this.editLoading = false; |
| 764 | this.editedItem.uploadFile = ""; | 764 | this.editedItem.uploadFile = ""; |
| 765 | this.editedItem.uploadCover = ""; | 765 | this.editedItem.uploadCover = ""; |
| 766 | this.anyFile = ""; | 766 | this.anyFile = ""; |
| 767 | this.files = ""; | 767 | this.files = ""; |
| 768 | this.close(); | 768 | this.close(); |
| 769 | }) | 769 | }) |
| 770 | .catch((error) => { | 770 | .catch((error) => { |
| 771 | this.editLoading = false; | 771 | this.editLoading = false; |
| 772 | this.loadingUpadte = false; | 772 | this.loadingUpadte = false; |
| 773 | this.snackbar = true; | 773 | this.snackbar = true; |
| 774 | this.text = error.response.data.message; | 774 | this.text = error.response.data.message; |
| 775 | // console.log(error); | 775 | // console.log(error); |
| 776 | }); | 776 | }); |
| 777 | }, | 777 | }, |
| 778 | getAllClass() { | 778 | getAllClass() { |
| 779 | http() | 779 | http() |
| 780 | .get("/getClassesList", { | 780 | .get("/getClassesList", { |
| 781 | headers: { Authorization: "Bearer " + this.token }, | 781 | headers: { Authorization: "Bearer " + this.token }, |
| 782 | }) | 782 | }) |
| 783 | .then((response) => { | 783 | .then((response) => { |
| 784 | this.addClass = response.data.data; | 784 | this.addClass = response.data.data; |
| 785 | }) | 785 | }) |
| 786 | .catch((err) => { | 786 | .catch((err) => { |
| 787 | // console.log("err====>", err); | 787 | // console.log("err====>", err); |
| 788 | // this.$router.replace({ path: "/" }); | 788 | // this.$router.replace({ path: "/" }); |
| 789 | }); | 789 | }); |
| 790 | }, | 790 | }, |
| 791 | displaySearch() { | 791 | displaySearch() { |
| 792 | (this.show = false), (this.showSearch = true); | 792 | (this.show = false), (this.showSearch = true); |
| 793 | }, | 793 | }, |
| 794 | closeSearch() { | 794 | closeSearch() { |
| 795 | this.showSearch = false; | 795 | this.showSearch = false; |
| 796 | this.show = true; | 796 | this.show = true; |
| 797 | this.search = ""; | 797 | this.search = ""; |
| 798 | }, | 798 | }, |
| 799 | }, | 799 | }, |
| 800 | mounted() { | 800 | mounted() { |
| 801 | this.token = this.$store.state.token; | 801 | this.token = this.$store.state.token; |
| 802 | this.getEBooksList(); | 802 | this.getEBooksList(); |
| 803 | this.getAllClass(); | 803 | this.getAllClass(); |
| 804 | this.role = this.$store.state.role; | 804 | this.role = this.$store.state.role; |
| 805 | // this.getBookData(); | 805 | // this.getBookData(); |
| 806 | // this.editItem; | 806 | // this.editItem; |
| 807 | }, | 807 | }, |
| 808 | }; | 808 | }; |
| 809 | </script> | 809 | </script> |
src/pages/Library/issue.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT ISSUE ****** --> | 3 | <!-- ****** EDIT ISSUE ****** --> |
| 4 | <v-dialog v-model="editIssueDialog" max-width="600px" scrollable> | 4 | <v-dialog v-model="editIssueDialog" max-width="600px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Issue</label> | 8 | <label class="title text-xs-center">Edit Issue</label> |
| 9 | <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editIssueDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12> | 16 | <v-flex xs12 sm12> |
| 17 | <v-layout> | 17 | <v-layout> |
| 18 | <v-flex xs4 class="pt-4 subheading"> | 18 | <v-flex xs4 class="pt-4 subheading"> |
| 19 | <label class="right">Library Id:</label> | 19 | <label class="right">Library Id:</label> |
| 20 | </v-flex> | 20 | </v-flex> |
| 21 | <v-flex xs7 class="ml-3"> | 21 | <v-flex xs7 class="ml-3"> |
| 22 | <v-text-field | 22 | <v-text-field |
| 23 | v-model="editedItem.libraryId" | 23 | v-model="editedItem.libraryId" |
| 24 | placeholder="fill your Library Id" | 24 | placeholder="fill your Library Id" |
| 25 | name="name" | 25 | name="name" |
| 26 | type="text" | 26 | type="text" |
| 27 | disabled | 27 | disabled |
| 28 | ></v-text-field> | 28 | ></v-text-field> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | </v-layout> | 30 | </v-layout> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs12 sm12> | 32 | <v-flex xs12 sm12> |
| 33 | <v-layout> | 33 | <v-layout> |
| 34 | <v-flex xs4 class="pt-4 subheading"> | 34 | <v-flex xs4 class="pt-4 subheading"> |
| 35 | <label class="right">Book:</label> | 35 | <label class="right">Book:</label> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-flex xs7 class="ml-3"> | 37 | <v-flex xs7 class="ml-3"> |
| 38 | <v-select | 38 | <v-select |
| 39 | v-model="editedItem.bookId" | 39 | v-model="editedItem.bookId" |
| 40 | label="Select Book Name" | 40 | label="Select Book Name" |
| 41 | :rules="bookRules" | 41 | :rules="bookRules" |
| 42 | :items="books" | 42 | :items="books" |
| 43 | item-text="name" | 43 | item-text="name" |
| 44 | item-value="_id" | 44 | item-value="_id" |
| 45 | ></v-select> | 45 | ></v-select> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | </v-layout> | 47 | </v-layout> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <v-flex xs12 sm12> | 49 | <v-flex xs12 sm12> |
| 50 | <v-layout> | 50 | <v-layout> |
| 51 | <v-flex xs4 class="pt-4 subheading"> | 51 | <v-flex xs4 class="pt-4 subheading"> |
| 52 | <label class="right">Author:</label> | 52 | <label class="right">Author:</label> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs7 class="ml-3"> | 54 | <v-flex xs7 class="ml-3"> |
| 55 | <v-text-field | 55 | <v-text-field |
| 56 | placeholder="fill your Author Name" | 56 | placeholder="fill your Author Name" |
| 57 | v-model="editedItem.author" | 57 | v-model="editedItem.author" |
| 58 | type="text" | 58 | type="text" |
| 59 | ></v-text-field> | 59 | ></v-text-field> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | </v-layout> | 61 | </v-layout> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-flex xs12 sm12> | 63 | <v-flex xs12 sm12> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-flex xs4 class="pt-4 subheading"> | 65 | <v-flex xs4 class="pt-4 subheading"> |
| 66 | <label class="right">Subject Code:</label> | 66 | <label class="right">Subject Code:</label> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex xs7 class="ml-3"> | 68 | <v-flex xs7 class="ml-3"> |
| 69 | <v-text-field | 69 | <v-text-field |
| 70 | placeholder="fill your Subject Codes" | 70 | placeholder="fill your Subject Codes" |
| 71 | v-model="editedItem.subjectCode" | 71 | v-model="editedItem.subjectCode" |
| 72 | type="text" | 72 | type="text" |
| 73 | ></v-text-field> | 73 | ></v-text-field> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex xs12 sm12> | 77 | <v-flex xs12 sm12> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 class="pt-4 subheading"> | 79 | <v-flex xs4 class="pt-4 subheading"> |
| 80 | <label class="right">Serial Number:</label> | 80 | <label class="right">Serial Number:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex xs7 class="ml-3"> | 82 | <v-flex xs7 class="ml-3"> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | placeholder="fill your Serial Number" | 84 | placeholder="fill your Serial Number" |
| 85 | v-model="editedItem.serialNumber" | 85 | v-model="editedItem.serialNumber" |
| 86 | type="text" | 86 | type="text" |
| 87 | ></v-text-field> | 87 | ></v-text-field> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-flex> | 90 | </v-flex> |
| 91 | <v-flex xs12 sm12> | 91 | <v-flex xs12 sm12> |
| 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">due Date:</label> | 94 | <label class="right">due Date:</label> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | <v-flex xs7 class="ml-3"> | 96 | <v-flex xs7 class="ml-3"> |
| 97 | <v-menu | 97 | <v-menu |
| 98 | ref="menu1" | 98 | ref="menu1" |
| 99 | :close-on-content-click="false" | 99 | :close-on-content-click="false" |
| 100 | v-model="menu1" | 100 | v-model="menu1" |
| 101 | :nudge-right="40" | 101 | :nudge-right="40" |
| 102 | :return-value.sync="menu1" | 102 | :return-value.sync="menu1" |
| 103 | lazy | 103 | lazy |
| 104 | transition="scale-transition" | 104 | transition="scale-transition" |
| 105 | offset-y | 105 | offset-y |
| 106 | full-width | 106 | full-width |
| 107 | min-width="290px" | 107 | min-width="290px" |
| 108 | > | 108 | > |
| 109 | <v-text-field | 109 | <v-text-field |
| 110 | slot="activator" | 110 | slot="activator" |
| 111 | v-model="editedItem.dueDate" | 111 | v-model="editedItem.dueDate" |
| 112 | label="Select Due Date" | 112 | label="Select Due Date" |
| 113 | append-icon="event" | 113 | append-icon="event" |
| 114 | readonly | 114 | readonly |
| 115 | ></v-text-field> | 115 | ></v-text-field> |
| 116 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> | 116 | <v-date-picker v-model="editedItem.dueDate" @input="menu1 = false"></v-date-picker> |
| 117 | </v-menu> | 117 | </v-menu> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | </v-layout> | 119 | </v-layout> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | <v-flex xs12 sm12> | 121 | <v-flex xs12 sm12> |
| 122 | <v-layout> | 122 | <v-layout> |
| 123 | <v-flex xs4 class="pt-4 subheading"> | 123 | <v-flex xs4 class="pt-4 subheading"> |
| 124 | <label class="right">Note:</label> | 124 | <label class="right">Note:</label> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | <v-flex xs7 class="ml-3"> | 126 | <v-flex xs7 class="ml-3"> |
| 127 | <v-text-field | 127 | <v-text-field |
| 128 | placeholder="fill your Serial Number" | 128 | placeholder="fill your Serial Number" |
| 129 | v-model="editedItem.note" | 129 | v-model="editedItem.note" |
| 130 | type="text" | 130 | type="text" |
| 131 | ></v-text-field> | 131 | ></v-text-field> |
| 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-layout> | 136 | <v-layout> |
| 137 | <v-flex xs12> | 137 | <v-flex xs12> |
| 138 | <v-card-actions> | 138 | <v-card-actions> |
| 139 | <v-spacer></v-spacer> | 139 | <v-spacer></v-spacer> |
| 140 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 140 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 141 | </v-card-actions> | 141 | </v-card-actions> |
| 142 | </v-flex> | 142 | </v-flex> |
| 143 | </v-layout> | 143 | </v-layout> |
| 144 | </v-container> | 144 | </v-container> |
| 145 | </v-form> | 145 | </v-form> |
| 146 | </v-card-text> | 146 | </v-card-text> |
| 147 | </v-card> | 147 | </v-card> |
| 148 | </v-dialog> | 148 | </v-dialog> |
| 149 | 149 | ||
| 150 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> | 150 | <!-- ****** PROFILE VIEW PARTICULAR ISSUE DATA ****** --> |
| 151 | 151 | ||
| 152 | <v-dialog v-model="viewIssueDialog" max-width="500px"> | 152 | <v-dialog v-model="viewIssueDialog" max-width="500px" persistent> |
| 153 | <v-card flat class="card-style pa-3" dark> | 153 | <v-card flat class="card-style pa-3" dark> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs12> | 155 | <v-flex xs12> |
| 156 | <label class="title text-xs-center">View Issue</label> | 156 | <label class="title text-xs-center">View Issue</label> |
| 157 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> | 157 | <v-icon size="24" class="right" @click="viewIssueDialog = false">cancel</v-icon> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | <v-card-text> | 160 | <v-card-text> |
| 161 | <v-container grid-list-md> | 161 | <v-container grid-list-md> |
| 162 | <v-layout wrap> | 162 | <v-layout wrap> |
| 163 | <v-flex> | 163 | <v-flex> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs5 sm6> | 165 | <v-flex xs5 sm6> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Book:</b> | 167 | <b>Book:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm6 xs8> | 170 | <v-flex sm6 xs8> |
| 171 | <h5 class="my-1">{{ editedItem.name }}</h5> | 171 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs5 sm6> | 175 | <v-flex xs5 sm6> |
| 176 | <h5 class="right my-1"> | 176 | <h5 class="right my-1"> |
| 177 | <b>Serial Number:</b> | 177 | <b>Serial Number:</b> |
| 178 | </h5> | 178 | </h5> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex sm6 xs8> | 180 | <v-flex sm6 xs8> |
| 181 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> | 181 | <h5 class="my-1">{{ editedItem.serialNumber }}</h5> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | <v-layout> | 184 | <v-layout> |
| 185 | <v-flex xs5 sm6> | 185 | <v-flex xs5 sm6> |
| 186 | <h5 class="right my-1"> | 186 | <h5 class="right my-1"> |
| 187 | <b>Issue date:</b> | 187 | <b>Issue date:</b> |
| 188 | </h5> | 188 | </h5> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex sm6 xs8> | 190 | <v-flex sm6 xs8> |
| 191 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> | 191 | <h5 class="my-1">{{ dates(editedItem.creted) }}</h5> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | <v-layout> | 194 | <v-layout> |
| 195 | <v-flex xs5 sm6> | 195 | <v-flex xs5 sm6> |
| 196 | <h5 class="right my-1"> | 196 | <h5 class="right my-1"> |
| 197 | <b>Due date:</b> | 197 | <b>Due date:</b> |
| 198 | </h5> | 198 | </h5> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex sm6 xs8> | 200 | <v-flex sm6 xs8> |
| 201 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> | 201 | <h5 class="my-1">{{ dates(editedItem.dueDate) }}</h5> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | </v-layout> | 203 | </v-layout> |
| 204 | <v-layout> | 204 | <v-layout> |
| 205 | <v-flex xs5 sm6> | 205 | <v-flex xs5 sm6> |
| 206 | <h5 class="right my-1"> | 206 | <h5 class="right my-1"> |
| 207 | <b>Status:</b> | 207 | <b>Status:</b> |
| 208 | </h5> | 208 | </h5> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex sm6 xs8> | 210 | <v-flex sm6 xs8> |
| 211 | <h5 class="my-1">{{ editedItem.status }}</h5> | 211 | <h5 class="my-1">{{ editedItem.status }}</h5> |
| 212 | </v-flex> | 212 | </v-flex> |
| 213 | </v-layout> | 213 | </v-layout> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-container> | 216 | </v-container> |
| 217 | </v-card-text> | 217 | </v-card-text> |
| 218 | </v-card> | 218 | </v-card> |
| 219 | </v-dialog> | 219 | </v-dialog> |
| 220 | <!-- ****** EXISTING ISSUE TABLE****** --> | 220 | <!-- ****** EXISTING ISSUE TABLE****** --> |
| 221 | <!-- <v-card> | 221 | <!-- <v-card> |
| 222 | <v-layout> | 222 | <v-layout> |
| 223 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> | 223 | <v-flex lg1 xs4 md4 xl1 class="hidden-xs-only"> |
| 224 | <label class="right pt-4">Library ID:</label> | 224 | <label class="right pt-4">Library ID:</label> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | <v-flex lg2 md3 xs7> | 226 | <v-flex lg2 md3 xs7> |
| 227 | <v-text-field | 227 | <v-text-field |
| 228 | class="pl-3" | 228 | class="pl-3" |
| 229 | @keyup.enter="getIssueList" | 229 | @keyup.enter="getIssueList" |
| 230 | v-model="libraryId" | 230 | v-model="libraryId" |
| 231 | placeholder="fill your library Id" | 231 | placeholder="fill your library Id" |
| 232 | ></v-text-field> | 232 | ></v-text-field> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-flex lg9 md3 xs5> | 234 | <v-flex lg9 md3 xs5> |
| 235 | <v-btn | 235 | <v-btn |
| 236 | round | 236 | round |
| 237 | class="black mt-1 right hidden-xs-only" | 237 | class="black mt-1 right hidden-xs-only" |
| 238 | @click="getIssueList" | 238 | @click="getIssueList" |
| 239 | :loading="loadingSearch" | 239 | :loading="loadingSearch" |
| 240 | dark | 240 | dark |
| 241 | >Search</v-btn> | 241 | >Search</v-btn> |
| 242 | <v-btn | 242 | <v-btn |
| 243 | round | 243 | round |
| 244 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 244 | class="black mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 245 | :loading="loadingSearch" | 245 | :loading="loadingSearch" |
| 246 | @click="getIssueList" | 246 | @click="getIssueList" |
| 247 | small | 247 | small |
| 248 | dark | 248 | dark |
| 249 | >Search</v-btn> | 249 | >Search</v-btn> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-card>--> | 252 | </v-card>--> |
| 253 | 253 | ||
| 254 | <v-toolbar color="transparent" flat> | 254 | <v-toolbar color="transparent" flat> |
| 255 | <v-btn | 255 | <v-btn |
| 256 | fab | 256 | fab |
| 257 | dark | 257 | dark |
| 258 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 258 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 259 | small | 259 | small |
| 260 | @click="addIssueDialog = true" | 260 | @click="addIssueDialog = true" |
| 261 | > | 261 | > |
| 262 | <v-icon dark>add</v-icon> | 262 | <v-icon dark>add</v-icon> |
| 263 | </v-btn> | 263 | </v-btn> |
| 264 | <v-btn | 264 | <v-btn |
| 265 | round | 265 | round |
| 266 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 266 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 267 | dark | 267 | dark |
| 268 | @click="addIssueDialog = true" | 268 | @click="addIssueDialog = true" |
| 269 | > | 269 | > |
| 270 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue | 270 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Issue |
| 271 | </v-btn> | 271 | </v-btn> |
| 272 | <v-flex lg2 md3 xs7> | 272 | <v-flex lg2 md3 xs7> |
| 273 | <v-text-field | 273 | <v-text-field |
| 274 | class="pl-3" | 274 | class="pl-3" |
| 275 | @keyup.enter="getIssueList" | 275 | @keyup.enter="getIssueList" |
| 276 | v-model="libraryId" | 276 | v-model="libraryId" |
| 277 | placeholder="fill your library Id" | 277 | placeholder="fill your library Id" |
| 278 | ></v-text-field> | 278 | ></v-text-field> |
| 279 | </v-flex> | 279 | </v-flex> |
| 280 | <v-spacer></v-spacer> | 280 | <v-spacer></v-spacer> |
| 281 | <v-btn | 281 | <v-btn |
| 282 | round | 282 | round |
| 283 | class="add-button mt-1 right hidden-xs-only" | 283 | class="add-button mt-1 right hidden-xs-only" |
| 284 | @click="getIssueList" | 284 | @click="getIssueList" |
| 285 | :loading="loadingSearch" | 285 | :loading="loadingSearch" |
| 286 | dark | 286 | dark |
| 287 | >Search</v-btn> | 287 | >Search</v-btn> |
| 288 | <v-btn | 288 | <v-btn |
| 289 | round | 289 | round |
| 290 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" | 290 | class="add-button mt-4 right hidden-sm-only hidden-xl-only hidden-md-only hidden-lg-only" |
| 291 | :loading="loadingSearch" | 291 | :loading="loadingSearch" |
| 292 | @click="getIssueList" | 292 | @click="getIssueList" |
| 293 | small | 293 | small |
| 294 | dark | 294 | dark |
| 295 | >Search</v-btn> | 295 | >Search</v-btn> |
| 296 | <v-card-title class="body-1" v-show="show"> | 296 | <v-card-title class="body-1" v-show="show"> |
| 297 | <v-btn icon large flat @click="displaySearch"> | 297 | <v-btn icon large flat @click="displaySearch"> |
| 298 | <v-avatar size="27"> | 298 | <v-avatar size="27"> |
| 299 | <img src="/static/icon/search.png" alt="icon" /> | 299 | <img src="/static/icon/search.png" alt="icon" /> |
| 300 | </v-avatar> | 300 | </v-avatar> |
| 301 | </v-btn> | 301 | </v-btn> |
| 302 | </v-card-title> | 302 | </v-card-title> |
| 303 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 303 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-text-field | 305 | <v-text-field |
| 306 | autofocus | 306 | autofocus |
| 307 | v-model="search" | 307 | v-model="search" |
| 308 | label="Search" | 308 | label="Search" |
| 309 | prepend-inner-icon="search" | 309 | prepend-inner-icon="search" |
| 310 | color="primary" | 310 | color="primary" |
| 311 | ></v-text-field> | 311 | ></v-text-field> |
| 312 | <v-icon @click="closeSearch" color="error">close</v-icon> | 312 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | </v-toolbar> | 315 | </v-toolbar> |
| 316 | <v-data-table | 316 | <v-data-table |
| 317 | :headers="headers" | 317 | :headers="headers" |
| 318 | :items="desserts" | 318 | :items="desserts" |
| 319 | :pagination.sync="pagination" | 319 | :pagination.sync="pagination" |
| 320 | :search="search" | 320 | :search="search" |
| 321 | > | 321 | > |
| 322 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> | 322 | <template slot="items" slot-scope="props" v-if="props.item.isReturn != true"> |
| 323 | <tr class="tr"> | 323 | <tr class="tr"> |
| 324 | <td class="td td-row">{{ props.index + 1}}</td> | 324 | <td class="td td-row">{{ props.index + 1}}</td> |
| 325 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> | 325 | <td class="text-xs-center td td-row">{{ props.item.bookId.name}}</td> |
| 326 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> | 326 | <td class="text-xs-center td td-row">{{ props.item.serialNumber}}</td> |
| 327 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> | 327 | <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td> |
| 328 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> | 328 | <td class="text-xs-center td td-row">{{ dates(props.item.dueDate) }}</td> |
| 329 | <td class="text-xs-center td td-row"> | 329 | <td class="text-xs-center td td-row"> |
| 330 | <span | 330 | <span |
| 331 | v-if="props.item.bookId.status === 'AVAILABLE'" | 331 | v-if="props.item.bookId.status === 'AVAILABLE'" |
| 332 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" | 332 | class="green lighten-1 pa-1 px-2 white--text paymentStatus" |
| 333 | >{{ props.item.bookId.status}}</span> | 333 | >{{ props.item.bookId.status}}</span> |
| 334 | <span | 334 | <span |
| 335 | v-if="props.item.bookId.status === 'UNAVAILABLE'" | 335 | v-if="props.item.bookId.status === 'UNAVAILABLE'" |
| 336 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" | 336 | class="red lighten-1 pa-1 px-2 white--text paymentStatus" |
| 337 | >{{ props.item.bookId.status}}</span> | 337 | >{{ props.item.bookId.status}}</span> |
| 338 | </td> | 338 | </td> |
| 339 | <td class="text-xs-center td td-row"> | 339 | <td class="text-xs-center td td-row"> |
| 340 | <span> | 340 | <span> |
| 341 | <v-tooltip top> | 341 | <v-tooltip top> |
| 342 | <img | 342 | <img |
| 343 | slot="activator" | 343 | slot="activator" |
| 344 | style="cursor:pointer; width:25px; height:25px; " | 344 | style="cursor:pointer; width:25px; height:25px; " |
| 345 | class="mr-3" | 345 | class="mr-3" |
| 346 | @click="profile(props.item)" | 346 | @click="profile(props.item)" |
| 347 | src="/static/icon/view.png" | 347 | src="/static/icon/view.png" |
| 348 | /> | 348 | /> |
| 349 | <span>View</span> | 349 | <span>View</span> |
| 350 | </v-tooltip> | 350 | </v-tooltip> |
| 351 | <v-tooltip top> | 351 | <v-tooltip top> |
| 352 | <img | 352 | <img |
| 353 | slot="activator" | 353 | slot="activator" |
| 354 | style="cursor:pointer; width:20px; height:18px; " | 354 | style="cursor:pointer; width:20px; height:18px; " |
| 355 | class="mr-3" | 355 | class="mr-3" |
| 356 | @click="editItem(props.item)" | 356 | @click="editItem(props.item)" |
| 357 | src="/static/icon/edit.png" | 357 | src="/static/icon/edit.png" |
| 358 | /> | 358 | /> |
| 359 | <span>Edit</span> | 359 | <span>Edit</span> |
| 360 | </v-tooltip> | 360 | </v-tooltip> |
| 361 | <v-tooltip top> | 361 | <v-tooltip top> |
| 362 | <img | 362 | <img |
| 363 | slot="activator" | 363 | slot="activator" |
| 364 | style="cursor:pointer; width:20px; height:20px; " | 364 | style="cursor:pointer; width:20px; height:20px; " |
| 365 | @click="deleteItem(props.item)" | 365 | @click="deleteItem(props.item)" |
| 366 | src="/static/icon/delete.png" | 366 | src="/static/icon/delete.png" |
| 367 | /> | 367 | /> |
| 368 | <span>Delete</span> | 368 | <span>Delete</span> |
| 369 | </v-tooltip> | 369 | </v-tooltip> |
| 370 | </span> | 370 | </span> |
| 371 | </td> | 371 | </td> |
| 372 | </tr> | 372 | </tr> |
| 373 | </template> | 373 | </template> |
| 374 | <v-alert | 374 | <v-alert |
| 375 | slot="no-results" | 375 | slot="no-results" |
| 376 | :value="true" | 376 | :value="true" |
| 377 | color="error" | 377 | color="error" |
| 378 | icon="warning" | 378 | icon="warning" |
| 379 | >Your search for "{{ search }}" found no results.</v-alert> | 379 | >Your search for "{{ search }}" found no results.</v-alert> |
| 380 | </v-data-table> | 380 | </v-data-table> |
| 381 | 381 | ||
| 382 | <!-- ****** ADD Issue ****** --> | 382 | <!-- ****** ADD Issue ****** --> |
| 383 | <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog"> | 383 | <v-dialog v-model="addIssueDialog" max-width="600px" v-if="addIssueDialog" persistent> |
| 384 | <v-card flat class="card-style pa-2" dark> | 384 | <v-card flat class="card-style pa-2" dark> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs12> | 386 | <v-flex xs12> |
| 387 | <label class="title text-xs-center">Add Issue</label> | 387 | <label class="title text-xs-center">Add Issue</label> |
| 388 | <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon> | 388 | <v-icon size="24" class="right" @click="closeAddIssueModel">cancel</v-icon> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-form ref="form" v-model="valid" lazy-validation> | 391 | <v-form ref="form" v-model="valid" lazy-validation> |
| 392 | <v-container fluid> | 392 | <v-container fluid> |
| 393 | <v-flex xs12> | 393 | <v-flex xs12> |
| 394 | <v-layout> | 394 | <v-layout> |
| 395 | <v-flex xs4 class="pt-4 subheading"> | 395 | <v-flex xs4 class="pt-4 subheading"> |
| 396 | <label class="right">Library ID:</label> | 396 | <label class="right">Library ID:</label> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | <v-flex xs7 class="ml-3"> | 398 | <v-flex xs7 class="ml-3"> |
| 399 | <v-text-field | 399 | <v-text-field |
| 400 | v-model="libraryID" | 400 | v-model="libraryID" |
| 401 | placeholder="fill your Library ID" | 401 | placeholder="fill your Library ID" |
| 402 | :rules="libraryIDRules" | 402 | :rules="libraryIDRules" |
| 403 | required | 403 | required |
| 404 | ></v-text-field> | 404 | ></v-text-field> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | </v-layout> | 406 | </v-layout> |
| 407 | </v-flex> | 407 | </v-flex> |
| 408 | <v-flex xs12> | 408 | <v-flex xs12> |
| 409 | <v-layout> | 409 | <v-layout> |
| 410 | <v-flex xs4 class="pt-4 subheading"> | 410 | <v-flex xs4 class="pt-4 subheading"> |
| 411 | <label class="right">Book:</label> | 411 | <label class="right">Book:</label> |
| 412 | </v-flex> | 412 | </v-flex> |
| 413 | <v-flex xs7 class="ml-3"> | 413 | <v-flex xs7 class="ml-3"> |
| 414 | <v-select | 414 | <v-select |
| 415 | label="Select Book Name" | 415 | label="Select Book Name" |
| 416 | :rules="bookRules" | 416 | :rules="bookRules" |
| 417 | :items="books" | 417 | :items="books" |
| 418 | item-text="name" | 418 | item-text="name" |
| 419 | item-value="_id" | 419 | item-value="_id" |
| 420 | v-model="bookId" | 420 | v-model="bookId" |
| 421 | @change="getParticularBookData(bookId)" | 421 | @change="getParticularBookData(bookId)" |
| 422 | required | 422 | required |
| 423 | ></v-select> | 423 | ></v-select> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | </v-layout> | 425 | </v-layout> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | <v-flex xs12> | 427 | <v-flex xs12> |
| 428 | <v-layout> | 428 | <v-layout> |
| 429 | <v-flex xs4 class="pt-4 subheading"> | 429 | <v-flex xs4 class="pt-4 subheading"> |
| 430 | <label class="right">Author:</label> | 430 | <label class="right">Author:</label> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | <v-flex xs7 class="ml-3"> | 432 | <v-flex xs7 class="ml-3"> |
| 433 | <v-text-field | 433 | <v-text-field |
| 434 | placeholder="fill your Author" | 434 | placeholder="fill your Author" |
| 435 | :rules="authorRules" | 435 | :rules="authorRules" |
| 436 | v-model="addIssue.author" | 436 | v-model="addIssue.author" |
| 437 | ></v-text-field> | 437 | ></v-text-field> |
| 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">Subject Code:</label> | 444 | <label class="right">Subject Code:</label> |
| 445 | </v-flex> | 445 | </v-flex> |
| 446 | <v-flex xs7 class="ml-3"> | 446 | <v-flex xs7 class="ml-3"> |
| 447 | <v-text-field | 447 | <v-text-field |
| 448 | placeholder="fill your Subject Code" | 448 | placeholder="fill your Subject Code" |
| 449 | :rules="subjectCodeRules" | 449 | :rules="subjectCodeRules" |
| 450 | v-model="addIssue.subjectCode" | 450 | v-model="addIssue.subjectCode" |
| 451 | ></v-text-field> | 451 | ></v-text-field> |
| 452 | </v-flex> | 452 | </v-flex> |
| 453 | </v-layout> | 453 | </v-layout> |
| 454 | </v-flex> | 454 | </v-flex> |
| 455 | <v-flex xs12> | 455 | <v-flex xs12> |
| 456 | <v-layout> | 456 | <v-layout> |
| 457 | <v-flex xs4 class="pt-4 subheading"> | 457 | <v-flex xs4 class="pt-4 subheading"> |
| 458 | <label class="right">Serial No:</label> | 458 | <label class="right">Serial No:</label> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | <v-flex xs7 class="ml-3"> | 460 | <v-flex xs7 class="ml-3"> |
| 461 | <v-text-field | 461 | <v-text-field |
| 462 | placeholder="fill your Serial No" | 462 | placeholder="fill your Serial No" |
| 463 | :rules="authorRules" | 463 | :rules="authorRules" |
| 464 | v-model="serialNo" | 464 | v-model="serialNo" |
| 465 | ></v-text-field> | 465 | ></v-text-field> |
| 466 | </v-flex> | 466 | </v-flex> |
| 467 | </v-layout> | 467 | </v-layout> |
| 468 | </v-flex> | 468 | </v-flex> |
| 469 | <v-flex xs12> | 469 | <v-flex xs12> |
| 470 | <v-layout> | 470 | <v-layout> |
| 471 | <v-flex xs4 class="pt-4 subheading"> | 471 | <v-flex xs4 class="pt-4 subheading"> |
| 472 | <label class="right">Due Date:</label> | 472 | <label class="right">Due Date:</label> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | <v-flex xs7 class="ml-3"> | 474 | <v-flex xs7 class="ml-3"> |
| 475 | <v-menu | 475 | <v-menu |
| 476 | ref="menu2" | 476 | ref="menu2" |
| 477 | :close-on-content-click="false" | 477 | :close-on-content-click="false" |
| 478 | v-model="menu2" | 478 | v-model="menu2" |
| 479 | :nudge-right="40" | 479 | :nudge-right="40" |
| 480 | :return-value.sync="date" | 480 | :return-value.sync="date" |
| 481 | lazy | 481 | lazy |
| 482 | transition="scale-transition" | 482 | transition="scale-transition" |
| 483 | offset-y | 483 | offset-y |
| 484 | full-width | 484 | full-width |
| 485 | min-width="290px" | 485 | min-width="290px" |
| 486 | > | 486 | > |
| 487 | <v-text-field | 487 | <v-text-field |
| 488 | slot="activator" | 488 | slot="activator" |
| 489 | v-model="date" | 489 | v-model="date" |
| 490 | label="Select Due Date" | 490 | label="Select Due Date" |
| 491 | append-icon="event" | 491 | append-icon="event" |
| 492 | :rules="dueDateRule" | 492 | :rules="dueDateRule" |
| 493 | readonly | 493 | readonly |
| 494 | ></v-text-field> | 494 | ></v-text-field> |
| 495 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> | 495 | <v-date-picker v-model="date" @input="$refs.menu2.save(date)"></v-date-picker> |
| 496 | </v-menu> | 496 | </v-menu> |
| 497 | </v-flex> | 497 | </v-flex> |
| 498 | </v-layout> | 498 | </v-layout> |
| 499 | </v-flex> | 499 | </v-flex> |
| 500 | <v-flex xs12> | 500 | <v-flex xs12> |
| 501 | <v-layout> | 501 | <v-layout> |
| 502 | <v-flex xs4 class="pt-4 subheading"> | 502 | <v-flex xs4 class="pt-4 subheading"> |
| 503 | <label class="right">Note:</label> | 503 | <label class="right">Note:</label> |
| 504 | </v-flex> | 504 | </v-flex> |
| 505 | <v-flex xs7 class="ml-3"> | 505 | <v-flex xs7 class="ml-3"> |
| 506 | <v-text-field placeholder="fill your Note" v-model="note"></v-text-field> | 506 | <v-text-field placeholder="fill your Note" v-model="note"></v-text-field> |
| 507 | </v-flex> | 507 | </v-flex> |
| 508 | </v-layout> | 508 | </v-layout> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | <v-layout> | 510 | <v-layout> |
| 511 | <v-flex xs12> | 511 | <v-flex xs12> |
| 512 | <v-card-actions> | 512 | <v-card-actions> |
| 513 | <v-spacer></v-spacer> | 513 | <v-spacer></v-spacer> |
| 514 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 514 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 515 | <v-btn | 515 | <v-btn |
| 516 | @click="submit" | 516 | @click="submit" |
| 517 | round | 517 | round |
| 518 | dark | 518 | dark |
| 519 | :loading="loading" | 519 | :loading="loading" |
| 520 | class="add-button" | 520 | class="add-button" |
| 521 | :disabled="disable" | 521 | :disabled="disable" |
| 522 | >Add</v-btn> | 522 | >Add</v-btn> |
| 523 | </v-card-actions> | 523 | </v-card-actions> |
| 524 | </v-flex> | 524 | </v-flex> |
| 525 | </v-layout> | 525 | </v-layout> |
| 526 | </v-container> | 526 | </v-container> |
| 527 | </v-form> | 527 | </v-form> |
| 528 | </v-card> | 528 | </v-card> |
| 529 | </v-dialog> | 529 | </v-dialog> |
| 530 | <div class="loader" v-if="showLoader"> | 530 | <div class="loader" v-if="showLoader"> |
| 531 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 531 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 532 | </div> | 532 | </div> |
| 533 | <v-snackbar | 533 | <v-snackbar |
| 534 | :timeout="timeout" | 534 | :timeout="timeout" |
| 535 | :top="y === 'top'" | 535 | :top="y === 'top'" |
| 536 | :right="x === 'right'" | 536 | :right="x === 'right'" |
| 537 | :vertical="mode === 'vertical'" | 537 | :vertical="mode === 'vertical'" |
| 538 | v-model="snackbar" | 538 | v-model="snackbar" |
| 539 | :color="color" | 539 | :color="color" |
| 540 | >{{ text }}</v-snackbar> | 540 | >{{ text }}</v-snackbar> |
| 541 | </v-container> | 541 | </v-container> |
| 542 | </template> | 542 | </template> |
| 543 | 543 | ||
| 544 | <script> | 544 | <script> |
| 545 | import http from "@/Services/http.js"; | 545 | import http from "@/Services/http.js"; |
| 546 | import moment from "moment"; | 546 | import moment from "moment"; |
| 547 | 547 | ||
| 548 | export default { | 548 | export default { |
| 549 | data: () => ({ | 549 | data: () => ({ |
| 550 | snackbar: false, | 550 | snackbar: false, |
| 551 | date: null, | 551 | date: null, |
| 552 | menu1: false, | 552 | menu1: false, |
| 553 | menu2: false, | 553 | menu2: false, |
| 554 | color: "", | 554 | color: "", |
| 555 | show: true, | 555 | show: true, |
| 556 | showSearch: false, | 556 | showSearch: false, |
| 557 | dueDate: null, | 557 | dueDate: null, |
| 558 | y: "top", | 558 | y: "top", |
| 559 | x: "right", | 559 | x: "right", |
| 560 | mode: "", | 560 | mode: "", |
| 561 | timeout: 10000, | 561 | timeout: 10000, |
| 562 | text: "", | 562 | text: "", |
| 563 | libraryId: "", | 563 | libraryId: "", |
| 564 | loading: false, | 564 | loading: false, |
| 565 | loadingSearch: false, | 565 | loadingSearch: false, |
| 566 | date: null, | 566 | date: null, |
| 567 | search: "", | 567 | search: "", |
| 568 | addIssueDialog: false, | 568 | addIssueDialog: false, |
| 569 | viewIssueDialog: false, | 569 | viewIssueDialog: false, |
| 570 | showLoader: false, | 570 | showLoader: false, |
| 571 | editIssueDialog: false, | 571 | editIssueDialog: false, |
| 572 | dialog1: false, | 572 | dialog1: false, |
| 573 | valid: true, | 573 | valid: true, |
| 574 | isActive: true, | 574 | isActive: true, |
| 575 | newActive: false, | 575 | newActive: false, |
| 576 | addclass: [], | 576 | addclass: [], |
| 577 | addSection: [], | 577 | addSection: [], |
| 578 | pagination: { | 578 | pagination: { |
| 579 | rowsPerPage: 10, | 579 | rowsPerPage: 10, |
| 580 | }, | 580 | }, |
| 581 | libraryIDRules: [(v) => !!v || " Library ID is required"], | 581 | libraryIDRules: [(v) => !!v || " Library ID is required"], |
| 582 | bookRules: [(v) => !!v || " book Name is required"], | 582 | bookRules: [(v) => !!v || " book Name is required"], |
| 583 | authorRules: [(v) => !!v || "Author Name is required"], | 583 | authorRules: [(v) => !!v || "Author Name is required"], |
| 584 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], | 584 | subjectCodeRules: [(v) => !!v || "Subject Code is required"], |
| 585 | authorRules: [(v) => !!v || "Author is required"], | 585 | authorRules: [(v) => !!v || "Author is required"], |
| 586 | noteRules: [(v) => !!v || "Note is required"], | 586 | noteRules: [(v) => !!v || "Note is required"], |
| 587 | dueDateRule: [(v) => !!v || "Due Date is required"], | 587 | dueDateRule: [(v) => !!v || "Due Date is required"], |
| 588 | headers: [ | 588 | headers: [ |
| 589 | { | 589 | { |
| 590 | align: "justify-center", | 590 | align: "justify-center", |
| 591 | text: "No", | 591 | text: "No", |
| 592 | sortable: false, | 592 | sortable: false, |
| 593 | value: "No", | 593 | value: "No", |
| 594 | }, | 594 | }, |
| 595 | { text: "Book", vaue: "name", sortable: false, align: "center" }, | 595 | { text: "Book", vaue: "name", sortable: false, align: "center" }, |
| 596 | { | 596 | { |
| 597 | text: "Serial Number", | 597 | text: "Serial Number", |
| 598 | value: "serialNumber", | 598 | value: "serialNumber", |
| 599 | sortable: false, | 599 | sortable: false, |
| 600 | align: "center", | 600 | align: "center", |
| 601 | }, | 601 | }, |
| 602 | { | 602 | { |
| 603 | text: "Issue Date", | 603 | text: "Issue Date", |
| 604 | value: "created", | 604 | value: "created", |
| 605 | sortable: false, | 605 | sortable: false, |
| 606 | align: "center", | 606 | align: "center", |
| 607 | }, | 607 | }, |
| 608 | { | 608 | { |
| 609 | text: "Due Date", | 609 | text: "Due Date", |
| 610 | value: "dueDate", | 610 | value: "dueDate", |
| 611 | sortable: false, | 611 | sortable: false, |
| 612 | align: "center", | 612 | align: "center", |
| 613 | }, | 613 | }, |
| 614 | { | 614 | { |
| 615 | text: "Status", | 615 | text: "Status", |
| 616 | value: "status", | 616 | value: "status", |
| 617 | sortable: false, | 617 | sortable: false, |
| 618 | align: "center", | 618 | align: "center", |
| 619 | }, | 619 | }, |
| 620 | { text: "Action", value: "", sortable: false, align: "center" }, | 620 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 621 | ], | 621 | ], |
| 622 | desserts: [], | 622 | desserts: [], |
| 623 | addIssue: {}, | 623 | addIssue: {}, |
| 624 | bookId: "", | 624 | bookId: "", |
| 625 | libraryID: "", | 625 | libraryID: "", |
| 626 | serialNo: "", | 626 | serialNo: "", |
| 627 | note: "", | 627 | note: "", |
| 628 | editedItem: {}, | 628 | editedItem: {}, |
| 629 | books: [], | 629 | books: [], |
| 630 | token: "", | 630 | token: "", |
| 631 | disable: false, | 631 | disable: false, |
| 632 | }), | 632 | }), |
| 633 | watch: { | 633 | watch: { |
| 634 | addIssueDialog: function (val) { | 634 | addIssueDialog: function (val) { |
| 635 | if (!val) { | 635 | if (!val) { |
| 636 | this.addIssue = []; | 636 | this.addIssue = []; |
| 637 | this.libraryID = ""; | 637 | this.libraryID = ""; |
| 638 | this.bookId = ""; | 638 | this.bookId = ""; |
| 639 | this.serialNo = ""; | 639 | this.serialNo = ""; |
| 640 | this.menu2 = false; | 640 | this.menu2 = false; |
| 641 | this.date = null; | 641 | this.date = null; |
| 642 | this.note = ""; | 642 | this.note = ""; |
| 643 | } | 643 | } |
| 644 | }, | 644 | }, |
| 645 | }, | 645 | }, |
| 646 | methods: { | 646 | methods: { |
| 647 | dates: function (date) { | 647 | dates: function (date) { |
| 648 | return moment(date).format("MMMM DD, YYYY"); | 648 | return moment(date).format("MMMM DD, YYYY"); |
| 649 | }, | 649 | }, |
| 650 | pickFile() { | 650 | pickFile() { |
| 651 | this.$refs.image.click(); | 651 | this.$refs.image.click(); |
| 652 | }, | 652 | }, |
| 653 | getIssueList() { | 653 | getIssueList() { |
| 654 | this.showLoader = true; | 654 | this.showLoader = true; |
| 655 | this.loadingSearch = true; | 655 | this.loadingSearch = true; |
| 656 | if (this.libraryID) { | 656 | if (this.libraryID) { |
| 657 | this.libraryId = this.libraryID; | 657 | this.libraryId = this.libraryID; |
| 658 | } | 658 | } |
| 659 | http() | 659 | http() |
| 660 | .get( | 660 | .get( |
| 661 | "/getBooksIssueList", | 661 | "/getBooksIssueList", |
| 662 | { | 662 | { |
| 663 | params: { | 663 | params: { |
| 664 | libraryId: this.libraryId, | 664 | libraryId: this.libraryId, |
| 665 | schoolId: this.$store.state.schoolId, | 665 | schoolId: this.$store.state.schoolId, |
| 666 | }, | 666 | }, |
| 667 | }, | 667 | }, |
| 668 | { | 668 | { |
| 669 | headers: { Authorization: "Bearer " + this.token }, | 669 | headers: { Authorization: "Bearer " + this.token }, |
| 670 | } | 670 | } |
| 671 | ) | 671 | ) |
| 672 | .then((response) => { | 672 | .then((response) => { |
| 673 | this.desserts = response.data.data; | 673 | this.desserts = response.data.data; |
| 674 | this.showLoader = false; | 674 | this.showLoader = false; |
| 675 | this.loadingSearch = false; | 675 | this.loadingSearch = false; |
| 676 | }) | 676 | }) |
| 677 | .catch((error) => { | 677 | .catch((error) => { |
| 678 | this.showLoader = false; | 678 | this.showLoader = false; |
| 679 | this.loadingSearch = false; | 679 | this.loadingSearch = false; |
| 680 | this.snackbar = true; | 680 | this.snackbar = true; |
| 681 | this.text = error.response.data.message; | 681 | this.text = error.response.data.message; |
| 682 | if (error.response.status === 401) { | 682 | if (error.response.status === 401) { |
| 683 | this.$router.replace({ path: "/" }); | 683 | this.$router.replace({ path: "/" }); |
| 684 | this.$store.dispatch("setToken", null); | 684 | this.$store.dispatch("setToken", null); |
| 685 | this.$store.dispatch("Id", null); | 685 | this.$store.dispatch("Id", null); |
| 686 | this.$store.dispatch("Role", null); | 686 | this.$store.dispatch("Role", null); |
| 687 | } | 687 | } |
| 688 | }); | 688 | }); |
| 689 | }, | 689 | }, |
| 690 | editItem(item) { | 690 | editItem(item) { |
| 691 | this.editedIndex = this.desserts.indexOf(item); | 691 | this.editedIndex = this.desserts.indexOf(item); |
| 692 | this.editedItem = Object.assign({}, item); | 692 | this.editedItem = Object.assign({}, item); |
| 693 | this.editedItem.name = item.bookId.name; | 693 | this.editedItem.name = item.bookId.name; |
| 694 | this.editedItem.status = item.bookId.status; | 694 | this.editedItem.status = item.bookId.status; |
| 695 | this.editedItem.dueDate = | 695 | this.editedItem.dueDate = |
| 696 | this.editedItem.dueDate != undefined | 696 | this.editedItem.dueDate != undefined |
| 697 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) | 697 | ? (this.editedItem.dueDate = this.editedItem.dueDate.substring(0, 10)) |
| 698 | : (this.editedItem.dueDate = ""); | 698 | : (this.editedItem.dueDate = ""); |
| 699 | this.editIssueDialog = true; | 699 | this.editIssueDialog = true; |
| 700 | }, | 700 | }, |
| 701 | profile(item) { | 701 | profile(item) { |
| 702 | this.editedIndex = this.desserts.indexOf(item); | 702 | this.editedIndex = this.desserts.indexOf(item); |
| 703 | this.editedItem = Object.assign({}, item); | 703 | this.editedItem = Object.assign({}, item); |
| 704 | this.editedItem.name = item.bookId.name; | 704 | this.editedItem.name = item.bookId.name; |
| 705 | this.editedItem.status = item.bookId.status; | 705 | this.editedItem.status = item.bookId.status; |
| 706 | 706 | ||
| 707 | this.viewIssueDialog = true; | 707 | this.viewIssueDialog = true; |
| 708 | }, | 708 | }, |
| 709 | deleteItem(item) { | 709 | deleteItem(item) { |
| 710 | let deleteParticularIssue = { | 710 | let deleteParticularIssue = { |
| 711 | bookIssueId: item._id, | 711 | bookIssueId: item._id, |
| 712 | }; | 712 | }; |
| 713 | http() | 713 | http() |
| 714 | .delete( | 714 | .delete( |
| 715 | "/deleteBookIssue", | 715 | "/deleteBookIssue", |
| 716 | confirm("Are you sure you want to delete this?") && { | 716 | confirm("Are you sure you want to delete this?") && { |
| 717 | params: deleteParticularIssue, | 717 | params: deleteParticularIssue, |
| 718 | } | 718 | } |
| 719 | ) | 719 | ) |
| 720 | .then((response) => { | 720 | .then((response) => { |
| 721 | this.snackbar = true; | 721 | this.snackbar = true; |
| 722 | this.text = "Delete Successfully"; | 722 | this.text = "Delete Successfully"; |
| 723 | this.getIssueList(); | 723 | this.getIssueList(); |
| 724 | if (this.libraryID) { | 724 | if (this.libraryID) { |
| 725 | this.libraryId = this.libraryID; | 725 | this.libraryId = this.libraryID; |
| 726 | } | 726 | } |
| 727 | if (this.libraryId) { | 727 | if (this.libraryId) { |
| 728 | this.libraryId = this.libraryId; | 728 | this.libraryId = this.libraryId; |
| 729 | } | 729 | } |
| 730 | this.snackbar = true; | 730 | this.snackbar = true; |
| 731 | this.text = response.data.message; | 731 | this.text = response.data.message; |
| 732 | this.color = "green"; | 732 | this.color = "green"; |
| 733 | this.loading = false; | 733 | this.loading = false; |
| 734 | }) | 734 | }) |
| 735 | .catch((error) => { | 735 | .catch((error) => { |
| 736 | // console.log(error); | 736 | // console.log(error); |
| 737 | this.snackbar = true; | 737 | this.snackbar = true; |
| 738 | this.text = error.response.data.message; | 738 | this.text = error.response.data.message; |
| 739 | this.color = "red"; | 739 | this.color = "red"; |
| 740 | }); | 740 | }); |
| 741 | }, | 741 | }, |
| 742 | returnBook(item) { | 742 | returnBook(item) { |
| 743 | let returnBook = { | 743 | let returnBook = { |
| 744 | bookIssueId: item._id, | 744 | bookIssueId: item._id, |
| 745 | }; | 745 | }; |
| 746 | http() | 746 | http() |
| 747 | .put( | 747 | .put( |
| 748 | "/returnBook", | 748 | "/returnBook", |
| 749 | confirm("Are you sure you want to return this?") && returnBook | 749 | confirm("Are you sure you want to return this?") && returnBook |
| 750 | ) | 750 | ) |
| 751 | .then((response) => { | 751 | .then((response) => { |
| 752 | this.snackbar = true; | 752 | this.snackbar = true; |
| 753 | this.text = "Successfully return Issue a Book "; | 753 | this.text = "Successfully return Issue a Book "; |
| 754 | this.getIssueList(); | 754 | this.getIssueList(); |
| 755 | }) | 755 | }) |
| 756 | .catch((error) => {}); | 756 | .catch((error) => {}); |
| 757 | }, | 757 | }, |
| 758 | close() { | 758 | close() { |
| 759 | this.editIssueDialog = false; | 759 | this.editIssueDialog = false; |
| 760 | }, | 760 | }, |
| 761 | close1() { | 761 | close1() { |
| 762 | this.viewIssueDialog = false; | 762 | this.viewIssueDialog = false; |
| 763 | }, | 763 | }, |
| 764 | closeAddIssueModel() { | 764 | closeAddIssueModel() { |
| 765 | this.addIssueDialog = false; | 765 | this.addIssueDialog = false; |
| 766 | this.desserts = []; | 766 | this.desserts = []; |
| 767 | this.addIssue = []; | 767 | this.addIssue = []; |
| 768 | this.libraryID = ""; | 768 | this.libraryID = ""; |
| 769 | this.bookId = ""; | 769 | this.bookId = ""; |
| 770 | this.serialNo = ""; | 770 | this.serialNo = ""; |
| 771 | this.menu2 = false; | 771 | this.menu2 = false; |
| 772 | this.date = null; | 772 | this.date = null; |
| 773 | this.note = ""; | 773 | this.note = ""; |
| 774 | }, | 774 | }, |
| 775 | submit() { | 775 | submit() { |
| 776 | if (this.$refs.form.validate()) { | 776 | if (this.$refs.form.validate()) { |
| 777 | let createBook = { | 777 | let createBook = { |
| 778 | bookId: this.bookId, | 778 | bookId: this.bookId, |
| 779 | author: this.addIssue.author, | 779 | author: this.addIssue.author, |
| 780 | subjectCode: this.addIssue.subjectCode, | 780 | subjectCode: this.addIssue.subjectCode, |
| 781 | libraryId: this.libraryID, | 781 | libraryId: this.libraryID, |
| 782 | serialNumber: this.serialNo, | 782 | serialNumber: this.serialNo, |
| 783 | note: this.note, | 783 | note: this.note, |
| 784 | dueDate: this.date, | 784 | dueDate: this.date, |
| 785 | schoolId: this.$store.state.schoolId, | 785 | schoolId: this.$store.state.schoolId, |
| 786 | }; | 786 | }; |
| 787 | this.loading = true; | 787 | this.loading = true; |
| 788 | http() | 788 | http() |
| 789 | .post("/createBookIssue", createBook) | 789 | .post("/createBookIssue", createBook) |
| 790 | .then((response) => { | 790 | .then((response) => { |
| 791 | this.getIssueList(); | 791 | this.getIssueList(); |
| 792 | this.snackbar = true; | 792 | this.snackbar = true; |
| 793 | this.text = response.data.message; | 793 | this.text = response.data.message; |
| 794 | this.addIssueDialog = false; | 794 | this.addIssueDialog = false; |
| 795 | this.color = "green"; | 795 | this.color = "green"; |
| 796 | this.loading = false; | 796 | this.loading = false; |
| 797 | this.clear(); | 797 | this.clear(); |
| 798 | }) | 798 | }) |
| 799 | .catch((error) => { | 799 | .catch((error) => { |
| 800 | this.snackbar = true; | 800 | this.snackbar = true; |
| 801 | this.text = error.response.data.message; | 801 | this.text = error.response.data.message; |
| 802 | this.color = "red"; | 802 | this.color = "red"; |
| 803 | this.loading = false; | 803 | this.loading = false; |
| 804 | }); | 804 | }); |
| 805 | } | 805 | } |
| 806 | }, | 806 | }, |
| 807 | clear() { | 807 | clear() { |
| 808 | this.$refs.form.reset(); | 808 | this.$refs.form.reset(); |
| 809 | this.disable = false; | 809 | this.disable = false; |
| 810 | }, | 810 | }, |
| 811 | save() { | 811 | save() { |
| 812 | this.editedItem.bookIssueId = this.editedItem._id; | 812 | this.editedItem.bookIssueId = this.editedItem._id; |
| 813 | this.editedItem.bookId = this.editedItem.bookId._id; | 813 | this.editedItem.bookId = this.editedItem.bookId._id; |
| 814 | http() | 814 | http() |
| 815 | .put("/updateBookIssue", this.editedItem) | 815 | .put("/updateBookIssue", this.editedItem) |
| 816 | .then((response) => { | 816 | .then((response) => { |
| 817 | this.editIssueDialog = false; | 817 | this.editIssueDialog = false; |
| 818 | this.snackbar = true; | 818 | this.snackbar = true; |
| 819 | this.text = "Successfully Edit Issue a Book"; | 819 | this.text = "Successfully Edit Issue a Book"; |
| 820 | this.color = "green"; | 820 | this.color = "green"; |
| 821 | this.getIssueList(); | 821 | this.getIssueList(); |
| 822 | this.close(); | 822 | this.close(); |
| 823 | }) | 823 | }) |
| 824 | .catch((error) => { | 824 | .catch((error) => { |
| 825 | this.snackbar = true; | 825 | this.snackbar = true; |
| 826 | this.text = error.response.data.message; | 826 | this.text = error.response.data.message; |
| 827 | this.color = "red"; | 827 | this.color = "red"; |
| 828 | }); | 828 | }); |
| 829 | }, | 829 | }, |
| 830 | getBookData() { | 830 | getBookData() { |
| 831 | this.showLoader = true; | 831 | this.showLoader = true; |
| 832 | http() | 832 | http() |
| 833 | .get("/getBooksList", { | 833 | .get("/getBooksList", { |
| 834 | params: { | 834 | params: { |
| 835 | schoolId: this.$store.state.schoolId, | 835 | schoolId: this.$store.state.schoolId, |
| 836 | }, | 836 | }, |
| 837 | headers: { Authorization: "Bearer " + this.token }, | 837 | headers: { Authorization: "Bearer " + this.token }, |
| 838 | }) | 838 | }) |
| 839 | .then((response) => { | 839 | .then((response) => { |
| 840 | this.books = response.data.data; | 840 | this.books = response.data.data; |
| 841 | this.showLoader = false; | 841 | this.showLoader = false; |
| 842 | }) | 842 | }) |
| 843 | .catch((error) => { | 843 | .catch((error) => { |
| 844 | this.showLoader = false; | 844 | this.showLoader = false; |
| 845 | if (error.response.status === 401) { | 845 | if (error.response.status === 401) { |
| 846 | this.$router.replace({ path: "/" }); | 846 | this.$router.replace({ path: "/" }); |
| 847 | this.$store.dispatch("setToken", null); | 847 | this.$store.dispatch("setToken", null); |
| 848 | this.$store.dispatch("Id", null); | 848 | this.$store.dispatch("Id", null); |
| 849 | } | 849 | } |
| 850 | }); | 850 | }); |
| 851 | }, | 851 | }, |
| 852 | getParticularBookData(books) { | 852 | getParticularBookData(books) { |
| 853 | for (let i = 0; i < this.books.length; i++) { | 853 | for (let i = 0; i < this.books.length; i++) { |
| 854 | if (books == this.books[i]._id) { | 854 | if (books == this.books[i]._id) { |
| 855 | if (this.books[i].remaining <= 0) { | 855 | if (this.books[i].remaining <= 0) { |
| 856 | this.snackbar = true; | 856 | this.snackbar = true; |
| 857 | this.text = "Book is unavailable"; | 857 | this.text = "Book is unavailable"; |
| 858 | this.color = "red"; | 858 | this.color = "red"; |
| 859 | this.disable = true; | 859 | this.disable = true; |
| 860 | } else if (this.books[i].remaining > 0) { | 860 | } else if (this.books[i].remaining > 0) { |
| 861 | this.disable = false; | 861 | this.disable = false; |
| 862 | } | 862 | } |
| 863 | this.addIssue = { | 863 | this.addIssue = { |
| 864 | author: this.books[i].author, | 864 | author: this.books[i].author, |
| 865 | subjectCode: this.books[i].subjectCode, | 865 | subjectCode: this.books[i].subjectCode, |
| 866 | }; | 866 | }; |
| 867 | } | 867 | } |
| 868 | } | 868 | } |
| 869 | this.addIssue.boojk = books; | 869 | this.addIssue.boojk = books; |
| 870 | }, | 870 | }, |
| 871 | displaySearch() { | 871 | displaySearch() { |
| 872 | (this.show = false), (this.showSearch = true); | 872 | (this.show = false), (this.showSearch = true); |
| 873 | }, | 873 | }, |
| 874 | closeSearch() { | 874 | closeSearch() { |
| 875 | this.showSearch = false; | 875 | this.showSearch = false; |
| 876 | this.show = true; | 876 | this.show = true; |
| 877 | this.search = ""; | 877 | this.search = ""; |
| 878 | }, | 878 | }, |
| 879 | }, | 879 | }, |
| 880 | mounted() { | 880 | mounted() { |
| 881 | this.token = this.$store.state.token; | 881 | this.token = this.$store.state.token; |
| 882 | this.getBookData(); | 882 | this.getBookData(); |
| 883 | }, | 883 | }, |
| 884 | }; | 884 | }; |
| 885 | </script> | 885 | </script> |
| 886 | <style scoped> | 886 | <style scoped> |
| 887 | .active { | 887 | .active { |
| 888 | background-color: gray; | 888 | background-color: gray; |
| 889 | color: white !important; | 889 | color: white !important; |
| 890 | } | 890 | } |
| 891 | .activebtn { | 891 | .activebtn { |
| 892 | color: black !important; | 892 | color: black !important; |
| 893 | } | 893 | } |
| 894 | </style> | 894 | </style> |
src/pages/Library/member.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <v-snackbar | 3 | <v-snackbar |
| 4 | :timeout="timeout" | 4 | :timeout="timeout" |
| 5 | :top="y === 'top'" | 5 | :top="y === 'top'" |
| 6 | :right="x === 'right'" | 6 | :right="x === 'right'" |
| 7 | :vertical="mode === 'vertical'" | 7 | :vertical="mode === 'vertical'" |
| 8 | v-model="snackbar" | 8 | v-model="snackbar" |
| 9 | color="success" | 9 | color="success" |
| 10 | >{{ text }}</v-snackbar> | 10 | >{{ text }}</v-snackbar> |
| 11 | 11 | ||
| 12 | <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> | 12 | <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> |
| 13 | 13 | ||
| 14 | <v-dialog v-model="dialogStudents" max-width="1100px" scrollable> | 14 | <v-dialog v-model="dialogStudents" max-width="1100px" scrollable persistent> |
| 15 | <v-card> | 15 | <v-card> |
| 16 | <v-toolbar dark class="card-styles" flat> | 16 | <v-toolbar dark class="card-styles" flat> |
| 17 | <v-spacer></v-spacer> | 17 | <v-spacer></v-spacer> |
| 18 | <v-toolbar-title>View Student Profile</v-toolbar-title> | 18 | <v-toolbar-title>View Student Profile</v-toolbar-title> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <v-icon @click="closeViewStudent">close</v-icon> | 20 | <v-icon @click="closeViewStudent">close</v-icon> |
| 21 | </v-toolbar> | 21 | </v-toolbar> |
| 22 | <v-card-text style="height: 700px;"> | 22 | <v-card-text style="height: 700px;"> |
| 23 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 23 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 24 | <v-avatar size="160px"> | 24 | <v-avatar size="160px"> |
| 25 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 25 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 26 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 26 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-container grid-list-md> | 29 | <v-container grid-list-md> |
| 30 | <v-layout wrap> | 30 | <v-layout wrap> |
| 31 | <v-flex xs12> | 31 | <v-flex xs12> |
| 32 | <v-layout wrap> | 32 | <v-layout wrap> |
| 33 | <v-flex xs12 sm6> | 33 | <v-flex xs12 sm6> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs6 sm5> | 35 | <v-flex xs6 sm5> |
| 36 | <h5 class="right my-1"> | 36 | <h5 class="right my-1"> |
| 37 | <b>Full Name:</b> | 37 | <b>Full Name:</b> |
| 38 | </h5> | 38 | </h5> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex sm7 xs6> | 40 | <v-flex sm7 xs6> |
| 41 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 41 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | <v-flex xs12 sm6> | 45 | <v-flex xs12 sm6> |
| 46 | <v-layout> | 46 | <v-layout> |
| 47 | <v-flex xs6 sm4> | 47 | <v-flex xs6 sm4> |
| 48 | <h5 class="right my-1"> | 48 | <h5 class="right my-1"> |
| 49 | <b>Email:</b> | 49 | <b>Email:</b> |
| 50 | </h5> | 50 | </h5> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | <v-flex sm8 xs6> | 52 | <v-flex sm8 xs6> |
| 53 | <h5 class="my-1 left">{{ editedItem.email }}</h5> | 53 | <h5 class="my-1 left">{{ editedItem.email }}</h5> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | <v-layout wrap> | 58 | <v-layout wrap> |
| 59 | <v-flex xs12 sm6> | 59 | <v-flex xs12 sm6> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs6 sm5> | 61 | <v-flex xs6 sm5> |
| 62 | <b> | 62 | <b> |
| 63 | <h5 class="right my-1"> | 63 | <h5 class="right my-1"> |
| 64 | <b>Gender:</b> | 64 | <b>Gender:</b> |
| 65 | </h5> | 65 | </h5> |
| 66 | </b> | 66 | </b> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <v-flex sm7 xs6> | 68 | <v-flex sm7 xs6> |
| 69 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> | 69 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-layout> | 71 | </v-layout> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs12 sm6> | 73 | <v-flex xs12 sm6> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs6 sm4> | 75 | <v-flex xs6 sm4> |
| 76 | <b> | 76 | <b> |
| 77 | <h5 class="right my-1"> | 77 | <h5 class="right my-1"> |
| 78 | <b>D.O.B:</b> | 78 | <b>D.O.B:</b> |
| 79 | </h5> | 79 | </h5> |
| 80 | </b> | 80 | </b> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm7 xs6> | 82 | <v-flex sm7 xs6> |
| 83 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 83 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-flex> | 86 | </v-flex> |
| 87 | </v-layout> | 87 | </v-layout> |
| 88 | <v-layout wrap> | 88 | <v-layout wrap> |
| 89 | <v-flex xs12 sm6> | 89 | <v-flex xs12 sm6> |
| 90 | <v-layout> | 90 | <v-layout> |
| 91 | <v-flex xs6 sm5> | 91 | <v-flex xs6 sm5> |
| 92 | <b> | 92 | <b> |
| 93 | <h5 class="right my-1"> | 93 | <h5 class="right my-1"> |
| 94 | <b>Blood Group:</b> | 94 | <b>Blood Group:</b> |
| 95 | </h5> | 95 | </h5> |
| 96 | </b> | 96 | </b> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex sm7 xs6> | 98 | <v-flex sm7 xs6> |
| 99 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> | 99 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | </v-layout> | 101 | </v-layout> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm6> | 103 | <v-flex xs12 sm6> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs6 sm4> | 105 | <v-flex xs6 sm4> |
| 106 | <b> | 106 | <b> |
| 107 | <h5 class="right my-1"> | 107 | <h5 class="right my-1"> |
| 108 | <b>Allergies:</b> | 108 | <b>Allergies:</b> |
| 109 | </h5> | 109 | </h5> |
| 110 | </b> | 110 | </b> |
| 111 | </v-flex> | 111 | </v-flex> |
| 112 | <v-flex sm8 xs6> | 112 | <v-flex sm8 xs6> |
| 113 | <h5 class="my-1">{{ editedItem.allergies }}</h5> | 113 | <h5 class="my-1">{{ editedItem.allergies }}</h5> |
| 114 | </v-flex> | 114 | </v-flex> |
| 115 | </v-layout> | 115 | </v-layout> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | </v-layout> | 117 | </v-layout> |
| 118 | <v-layout wrap> | 118 | <v-layout wrap> |
| 119 | <v-flex xs12 sm6> | 119 | <v-flex xs12 sm6> |
| 120 | <v-layout> | 120 | <v-layout> |
| 121 | <v-flex xs6 sm5> | 121 | <v-flex xs6 sm5> |
| 122 | <b> | 122 | <b> |
| 123 | <h5 class="right my-1"> | 123 | <h5 class="right my-1"> |
| 124 | <b>Height:</b> | 124 | <b>Height:</b> |
| 125 | </h5> | 125 | </h5> |
| 126 | </b> | 126 | </b> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex sm7 xs6> | 128 | <v-flex sm7 xs6> |
| 129 | <h5 class="my-1 left">{{ editedItem.height }}</h5> | 129 | <h5 class="my-1 left">{{ editedItem.height }}</h5> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | </v-layout> | 131 | </v-layout> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | <v-flex xs12 sm6> | 133 | <v-flex xs12 sm6> |
| 134 | <v-layout> | 134 | <v-layout> |
| 135 | <v-flex xs6 sm4> | 135 | <v-flex xs6 sm4> |
| 136 | <b> | 136 | <b> |
| 137 | <h5 class="right my-1"> | 137 | <h5 class="right my-1"> |
| 138 | <b>Weight:</b> | 138 | <b>Weight:</b> |
| 139 | </h5> | 139 | </h5> |
| 140 | </b> | 140 | </b> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | <v-flex sm8 xs6> | 142 | <v-flex sm8 xs6> |
| 143 | <h5 class="my-1">{{ editedItem.weight }}</h5> | 143 | <h5 class="my-1">{{ editedItem.weight }}</h5> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-layout> | 145 | </v-layout> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | <v-layout wrap> | 148 | <v-layout wrap> |
| 149 | <v-flex xs12 sm6> | 149 | <v-flex xs12 sm6> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs6 sm5> | 151 | <v-flex xs6 sm5> |
| 152 | <b> | 152 | <b> |
| 153 | <h5 class="right my-1"> | 153 | <h5 class="right my-1"> |
| 154 | <b>City:</b> | 154 | <b>City:</b> |
| 155 | </h5> | 155 | </h5> |
| 156 | </b> | 156 | </b> |
| 157 | </v-flex> | 157 | </v-flex> |
| 158 | <v-flex sm7 xs6> | 158 | <v-flex sm7 xs6> |
| 159 | <h5 class="my-1 left">{{ editedItem.city }}</h5> | 159 | <h5 class="my-1 left">{{ editedItem.city }}</h5> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | </v-layout> | 161 | </v-layout> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex xs12 sm6> | 163 | <v-flex xs12 sm6> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs6 sm4> | 165 | <v-flex xs6 sm4> |
| 166 | <b> | 166 | <b> |
| 167 | <h5 class="right my-1"> | 167 | <h5 class="right my-1"> |
| 168 | <b>State:</b> | 168 | <b>State:</b> |
| 169 | </h5> | 169 | </h5> |
| 170 | </b> | 170 | </b> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | <v-flex sm8 xs6> | 172 | <v-flex sm8 xs6> |
| 173 | <h5 class="my-1">{{ editedItem.state }}</h5> | 173 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-flex> | 176 | </v-flex> |
| 177 | </v-layout> | 177 | </v-layout> |
| 178 | <v-layout wrap> | 178 | <v-layout wrap> |
| 179 | <v-flex xs12 sm6> | 179 | <v-flex xs12 sm6> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex xs6 sm5> | 181 | <v-flex xs6 sm5> |
| 182 | <b> | 182 | <b> |
| 183 | <h5 class="right my-1"> | 183 | <h5 class="right my-1"> |
| 184 | <b>Pincode:</b> | 184 | <b>Pincode:</b> |
| 185 | </h5> | 185 | </h5> |
| 186 | </b> | 186 | </b> |
| 187 | </v-flex> | 187 | </v-flex> |
| 188 | <v-flex sm7 xs6> | 188 | <v-flex sm7 xs6> |
| 189 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 189 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | </v-layout> | 191 | </v-layout> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex xs12 sm5> | 193 | <v-flex xs12 sm5> |
| 194 | <v-layout> | 194 | <v-layout> |
| 195 | <v-flex xs6 sm5> | 195 | <v-flex xs6 sm5> |
| 196 | <b> | 196 | <b> |
| 197 | <h5 class="right my-1"> | 197 | <h5 class="right my-1"> |
| 198 | <b>Country:</b> | 198 | <b>Country:</b> |
| 199 | </h5> | 199 | </h5> |
| 200 | </b> | 200 | </b> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex sm7 xs6> | 202 | <v-flex sm7 xs6> |
| 203 | <h5 class="my-1">{{ editedItem.country }}</h5> | 203 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | <v-layout wrap> | 208 | <v-layout wrap> |
| 209 | <v-flex xs12 sm6> | 209 | <v-flex xs12 sm6> |
| 210 | <v-layout> | 210 | <v-layout> |
| 211 | <v-flex sm5 xs6> | 211 | <v-flex sm5 xs6> |
| 212 | <b> | 212 | <b> |
| 213 | <h5 class="right my-1"> | 213 | <h5 class="right my-1"> |
| 214 | <b>Mobile No:</b> | 214 | <b>Mobile No:</b> |
| 215 | </h5> | 215 | </h5> |
| 216 | </b> | 216 | </b> |
| 217 | </v-flex> | 217 | </v-flex> |
| 218 | <v-flex sm6 xs6> | 218 | <v-flex sm6 xs6> |
| 219 | <h5 class="my-1">{{ editedItem.mobile }}</h5> | 219 | <h5 class="my-1">{{ editedItem.mobile }}</h5> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | </v-layout> | 221 | </v-layout> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | <v-flex xs12 sm6> | 223 | <v-flex xs12 sm6> |
| 224 | <v-layout> | 224 | <v-layout> |
| 225 | <v-flex xs6 sm4> | 225 | <v-flex xs6 sm4> |
| 226 | <b> | 226 | <b> |
| 227 | <h5 class="right my-1"> | 227 | <h5 class="right my-1"> |
| 228 | <b>Library ID :</b> | 228 | <b>Library ID :</b> |
| 229 | </h5> | 229 | </h5> |
| 230 | </b> | 230 | </b> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex sm8 xs6> | 232 | <v-flex sm8 xs6> |
| 233 | <h5 class="my-1">{{ editedItem.libraryId }}</h5> | 233 | <h5 class="my-1">{{ editedItem.libraryId }}</h5> |
| 234 | </v-flex> | 234 | </v-flex> |
| 235 | </v-layout> | 235 | </v-layout> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | </v-layout> | 237 | </v-layout> |
| 238 | <v-layout wrap> | 238 | <v-layout wrap> |
| 239 | <v-flex xs12 sm5> | 239 | <v-flex xs12 sm5> |
| 240 | <v-layout> | 240 | <v-layout> |
| 241 | <v-flex xs6 sm6> | 241 | <v-flex xs6 sm6> |
| 242 | <b> | 242 | <b> |
| 243 | <h5 class="right my-1"> | 243 | <h5 class="right my-1"> |
| 244 | <b>Library Fee:</b> | 244 | <b>Library Fee:</b> |
| 245 | </h5> | 245 | </h5> |
| 246 | </b> | 246 | </b> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | <v-flex sm6 xs6> | 248 | <v-flex sm6 xs6> |
| 249 | <h5 class="my-1">{{ editedItem.libraryFee }}</h5> | 249 | <h5 class="my-1">{{ editedItem.libraryFee }}</h5> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs12 sm6> | 253 | <v-flex xs12 sm6> |
| 254 | <v-layout> | 254 | <v-layout> |
| 255 | <v-flex xs6 sm6> | 255 | <v-flex xs6 sm6> |
| 256 | <b> | 256 | <b> |
| 257 | <h5 class="my-1 right"> | 257 | <h5 class="my-1 right"> |
| 258 | <b>Academic Year:</b> | 258 | <b>Academic Year:</b> |
| 259 | </h5> | 259 | </h5> |
| 260 | </b> | 260 | </b> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | <v-flex sm5 xs6> | 262 | <v-flex sm5 xs6> |
| 263 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> | 263 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | </v-layout> | 265 | </v-layout> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-layout> | 267 | </v-layout> |
| 268 | <v-layout wrap> | 268 | <v-layout wrap> |
| 269 | <v-flex xs12 sm5> | 269 | <v-flex xs12 sm5> |
| 270 | <v-layout> | 270 | <v-layout> |
| 271 | <v-flex xs6 sm6> | 271 | <v-flex xs6 sm6> |
| 272 | <b> | 272 | <b> |
| 273 | <h5 class="my-1 right"> | 273 | <h5 class="my-1 right"> |
| 274 | <b>Medical Notes:</b> | 274 | <b>Medical Notes:</b> |
| 275 | </h5> | 275 | </h5> |
| 276 | </b> | 276 | </b> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-flex sm5 xs6> | 278 | <v-flex sm5 xs6> |
| 279 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> | 279 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | </v-layout> | 281 | </v-layout> |
| 282 | </v-flex> | 282 | </v-flex> |
| 283 | <v-flex xs12 sm6> | 283 | <v-flex xs12 sm6> |
| 284 | <v-layout> | 284 | <v-layout> |
| 285 | <v-flex xs6 sm6> | 285 | <v-flex xs6 sm6> |
| 286 | <b> | 286 | <b> |
| 287 | <h5 class="right my-1"> | 287 | <h5 class="right my-1"> |
| 288 | <b>Roll No. :</b> | 288 | <b>Roll No. :</b> |
| 289 | </h5> | 289 | </h5> |
| 290 | </b> | 290 | </b> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | <v-flex sm6 xs8> | 292 | <v-flex sm6 xs8> |
| 293 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> | 293 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-layout wrap> | 298 | <v-layout wrap> |
| 299 | <v-flex xs12 sm5> | 299 | <v-flex xs12 sm5> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs6 sm6> | 301 | <v-flex xs6 sm6> |
| 302 | <b> | 302 | <b> |
| 303 | <h5 class="my-1 right"> | 303 | <h5 class="my-1 right"> |
| 304 | <b>present Address:</b> | 304 | <b>present Address:</b> |
| 305 | </h5> | 305 | </h5> |
| 306 | </b> | 306 | </b> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex sm5 xs6> | 308 | <v-flex sm5 xs6> |
| 309 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 309 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | <v-flex xs12 sm6> | 313 | <v-flex xs12 sm6> |
| 314 | <v-layout> | 314 | <v-layout> |
| 315 | <v-flex xs6 sm6> | 315 | <v-flex xs6 sm6> |
| 316 | <b> | 316 | <b> |
| 317 | <h5 class="right my-1"> | 317 | <h5 class="right my-1"> |
| 318 | <b>present Address:</b> | 318 | <b>present Address:</b> |
| 319 | </h5> | 319 | </h5> |
| 320 | </b> | 320 | </b> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | <v-flex sm6 xs8> | 322 | <v-flex sm6 xs8> |
| 323 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 323 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-container> | 330 | </v-container> |
| 331 | </v-card-text> | 331 | </v-card-text> |
| 332 | </v-card> | 332 | </v-card> |
| 333 | </v-dialog> | 333 | </v-dialog> |
| 334 | 334 | ||
| 335 | <!-- Edit Student Library Member Dialog --> | 335 | <!-- Edit Student Library Member Dialog --> |
| 336 | 336 | ||
| 337 | <v-dialog v-model="editStudentdialog" max-width="600px" scrollable> | 337 | <v-dialog v-model="editStudentdialog" max-width="600px" scrollable persistent> |
| 338 | <v-card flat> | 338 | <v-card flat> |
| 339 | <v-toolbar dark class="card-styles" flat> | 339 | <v-toolbar dark class="card-styles" flat> |
| 340 | <v-spacer></v-spacer> | 340 | <v-spacer></v-spacer> |
| 341 | <v-toolbar-title> | 341 | <v-toolbar-title> |
| 342 | <h3>Edit Student Profile</h3> | 342 | <h3>Edit Student Profile</h3> |
| 343 | </v-toolbar-title> | 343 | </v-toolbar-title> |
| 344 | <v-spacer></v-spacer> | 344 | <v-spacer></v-spacer> |
| 345 | </v-toolbar> | 345 | </v-toolbar> |
| 346 | <v-card-text style="height: 426px;"> | 346 | <v-card-text style="height: 426px;"> |
| 347 | <v-form ref="form"> | 347 | <v-form ref="form"> |
| 348 | <v-container fluid> | 348 | <v-container fluid> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex | 350 | <v-flex |
| 351 | xs12 | 351 | xs12 |
| 352 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" | 352 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" |
| 353 | > | 353 | > |
| 354 | <v-avatar size="160px"> | 354 | <v-avatar size="160px"> |
| 355 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 355 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 356 | <img | 356 | <img |
| 357 | :src="editedItem.profilePicUrl" | 357 | :src="editedItem.profilePicUrl" |
| 358 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 358 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 359 | /> | 359 | /> |
| 360 | <img | 360 | <img |
| 361 | v-if="imageUrl" | 361 | v-if="imageUrl" |
| 362 | :src="imageUrl" | 362 | :src="imageUrl" |
| 363 | height="150" | 363 | height="150" |
| 364 | style="border-radius:50%; width:200px" | 364 | style="border-radius:50%; width:200px" |
| 365 | /> | 365 | /> |
| 366 | </v-avatar> | 366 | </v-avatar> |
| 367 | </v-flex> | 367 | </v-flex> |
| 368 | </v-layout> | 368 | </v-layout> |
| 369 | <v-layout wrap> | 369 | <v-layout wrap> |
| 370 | <v-flex xs12 sm12 md10> | 370 | <v-flex xs12 sm12 md10> |
| 371 | <v-layout> | 371 | <v-layout> |
| 372 | <v-flex xs4 class="pt-4 subheading"> | 372 | <v-flex xs4 class="pt-4 subheading"> |
| 373 | <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> | 373 | <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> |
| 374 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> | 374 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> |
| 375 | </v-flex> | 375 | </v-flex> |
| 376 | <v-flex xs8 class="ml-3"> | 376 | <v-flex xs8 class="ml-3"> |
| 377 | <v-text-field | 377 | <v-text-field |
| 378 | v-model="editedItem.libraryId" | 378 | v-model="editedItem.libraryId" |
| 379 | placeholder="fill your Library ID" | 379 | placeholder="fill your Library ID" |
| 380 | ></v-text-field> | 380 | ></v-text-field> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | </v-flex> | 383 | </v-flex> |
| 384 | <v-flex xs12 sm12 md10> | 384 | <v-flex xs12 sm12 md10> |
| 385 | <v-layout> | 385 | <v-layout> |
| 386 | <v-flex xs4 class="pt-4 subheading"> | 386 | <v-flex xs4 class="pt-4 subheading"> |
| 387 | <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> | 387 | <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> |
| 388 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> | 388 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | <v-flex xs8 class="ml-3"> | 390 | <v-flex xs8 class="ml-3"> |
| 391 | <v-text-field | 391 | <v-text-field |
| 392 | v-model="editedItem.libraryFee" | 392 | v-model="editedItem.libraryFee" |
| 393 | placeholder="fill your Library Fee" | 393 | placeholder="fill your Library Fee" |
| 394 | ></v-text-field> | 394 | ></v-text-field> |
| 395 | </v-flex> | 395 | </v-flex> |
| 396 | </v-layout> | 396 | </v-layout> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | </v-layout> | 398 | </v-layout> |
| 399 | <v-layout> | 399 | <v-layout> |
| 400 | <v-flex xs12 sm12> | 400 | <v-flex xs12 sm12> |
| 401 | <v-layout class="right"> | 401 | <v-layout class="right"> |
| 402 | <v-flex xs6> | 402 | <v-flex xs6> |
| 403 | <v-btn | 403 | <v-btn |
| 404 | round | 404 | round |
| 405 | dark | 405 | dark |
| 406 | class="clear-button" | 406 | class="clear-button" |
| 407 | @click.native="closeEditStudentDialog" | 407 | @click.native="closeEditStudentDialog" |
| 408 | >Cancel</v-btn> | 408 | >Cancel</v-btn> |
| 409 | </v-flex> | 409 | </v-flex> |
| 410 | <v-flex xs6> | 410 | <v-flex xs6> |
| 411 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> | 411 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> |
| 412 | </v-flex> | 412 | </v-flex> |
| 413 | </v-layout> | 413 | </v-layout> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-layout> | 415 | </v-layout> |
| 416 | </v-container> | 416 | </v-container> |
| 417 | </v-form> | 417 | </v-form> |
| 418 | </v-card-text> | 418 | </v-card-text> |
| 419 | </v-card> | 419 | </v-card> |
| 420 | </v-dialog> | 420 | </v-dialog> |
| 421 | <!-- Add Student Library Member Dialog --> | 421 | <!-- Add Student Library Member Dialog --> |
| 422 | 422 | ||
| 423 | <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary"> | 423 | <v-dialog v-model="addLibrary" max-width="600px" v-if="addLibrary" persistent> |
| 424 | <v-card flat class="card-style pa-2" dark> | 424 | <v-card flat class="card-style pa-2" dark> |
| 425 | <v-layout> | 425 | <v-layout> |
| 426 | <v-flex xs12> | 426 | <v-flex xs12> |
| 427 | <label class="title text-xs-center">Add Library Member</label> | 427 | <label class="title text-xs-center">Add Library Member</label> |
| 428 | <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon> | 428 | <v-icon size="24" class="right" @click="closeAddLibraryModel">cancel</v-icon> |
| 429 | </v-flex> | 429 | </v-flex> |
| 430 | </v-layout> | 430 | </v-layout> |
| 431 | <v-card-text> | 431 | <v-card-text> |
| 432 | <v-layout wrap justify-center> | 432 | <v-layout wrap justify-center> |
| 433 | <v-flex xs12 sm12 md10> | 433 | <v-flex xs12 sm12 md10> |
| 434 | <v-form ref="form" v-model="valid" lazy-validation> | 434 | <v-form ref="form" v-model="valid" lazy-validation> |
| 435 | <v-layout> | 435 | <v-layout> |
| 436 | <v-flex xs4 class="pt-4 subheading"> | 436 | <v-flex xs4 class="pt-4 subheading"> |
| 437 | <label class="right pr-3">Library Id:</label> | 437 | <label class="right pr-3">Library Id:</label> |
| 438 | </v-flex> | 438 | </v-flex> |
| 439 | <v-flex xs8> | 439 | <v-flex xs8> |
| 440 | <v-text-field | 440 | <v-text-field |
| 441 | v-model="addBook.libraryId" | 441 | v-model="addBook.libraryId" |
| 442 | :rules="libraryIdRules" | 442 | :rules="libraryIdRules" |
| 443 | type="number" | 443 | type="number" |
| 444 | placeholder="fill your Library ID" | 444 | placeholder="fill your Library ID" |
| 445 | ></v-text-field> | 445 | ></v-text-field> |
| 446 | </v-flex> | 446 | </v-flex> |
| 447 | </v-layout> | 447 | </v-layout> |
| 448 | <v-layout> | 448 | <v-layout> |
| 449 | <v-flex xs4 class="pt-4 subheading"> | 449 | <v-flex xs4 class="pt-4 subheading"> |
| 450 | <label class="right pr-3">Library Fee:</label> | 450 | <label class="right pr-3">Library Fee:</label> |
| 451 | </v-flex> | 451 | </v-flex> |
| 452 | <v-flex xs8> | 452 | <v-flex xs8> |
| 453 | <v-text-field | 453 | <v-text-field |
| 454 | v-model="addBook.libraryFee" | 454 | v-model="addBook.libraryFee" |
| 455 | type="number" | 455 | type="number" |
| 456 | :rules="libraryFeeRules" | 456 | :rules="libraryFeeRules" |
| 457 | placeholder="fill your Library Fee" | 457 | placeholder="fill your Library Fee" |
| 458 | ></v-text-field> | 458 | ></v-text-field> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | </v-layout> | 460 | </v-layout> |
| 461 | <v-layout> | 461 | <v-layout> |
| 462 | <v-flex xs12 sm12> | 462 | <v-flex xs12 sm12> |
| 463 | <v-layout class="right"> | 463 | <v-layout class="right"> |
| 464 | <v-btn | 464 | <v-btn |
| 465 | round | 465 | round |
| 466 | dark | 466 | dark |
| 467 | class="clear-button" | 467 | class="clear-button" |
| 468 | @click.native="addLibrary = false" | 468 | @click.native="addLibrary = false" |
| 469 | >Cancel</v-btn> | 469 | >Cancel</v-btn> |
| 470 | <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn> | 470 | <v-btn round dark :loading="loading" class="add-button" @click="submit">Add</v-btn> |
| 471 | </v-layout> | 471 | </v-layout> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | </v-layout> | 473 | </v-layout> |
| 474 | </v-form> | 474 | </v-form> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | </v-card-text> | 477 | </v-card-text> |
| 478 | </v-card> | 478 | </v-card> |
| 479 | </v-dialog> | 479 | </v-dialog> |
| 480 | <!-- ****** EXISTING MEMBER TABLE ****** --> | 480 | <!-- ****** EXISTING MEMBER TABLE ****** --> |
| 481 | <v-card flat> | 481 | <v-card flat> |
| 482 | <!-- <h4 | 482 | <!-- <h4 |
| 483 | class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" | 483 | class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" |
| 484 | >Library Member</h4>--> | 484 | >Library Member</h4>--> |
| 485 | <v-card-actions> | 485 | <v-card-actions> |
| 486 | <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> | 486 | <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> |
| 487 | <v-spacer></v-spacer> | 487 | <v-spacer></v-spacer> |
| 488 | <v-flex xs12 sm4 md2> | 488 | <v-flex xs12 sm4 md2> |
| 489 | <v-select | 489 | <v-select |
| 490 | outline | 490 | outline |
| 491 | small | 491 | small |
| 492 | :items="addclass" | 492 | :items="addclass" |
| 493 | label="Select Class" | 493 | label="Select Class" |
| 494 | v-model="selectStudents" | 494 | v-model="selectStudents" |
| 495 | item-text="classNum" | 495 | item-text="classNum" |
| 496 | item-value="_id" | 496 | item-value="_id" |
| 497 | name="Select Class" | 497 | name="Select Class" |
| 498 | @change="getAllStudents(selectStudents)" | 498 | @change="getAllStudents(selectStudents)" |
| 499 | class="px-2" | 499 | class="px-2" |
| 500 | required | 500 | required |
| 501 | ></v-select> | 501 | ></v-select> |
| 502 | </v-flex> | 502 | </v-flex> |
| 503 | </v-card-actions> | 503 | </v-card-actions> |
| 504 | </v-card> | 504 | </v-card> |
| 505 | <v-card class="transparent"> | 505 | <v-card class="transparent"> |
| 506 | <v-data-table | 506 | <v-data-table |
| 507 | :headers="headers" | 507 | :headers="headers" |
| 508 | :items="studentData" | 508 | :items="studentData" |
| 509 | :pagination.sync="pagination" | 509 | :pagination.sync="pagination" |
| 510 | :search="search" | 510 | :search="search" |
| 511 | > | 511 | > |
| 512 | <template slot="items" slot-scope="props"> | 512 | <template slot="items" slot-scope="props"> |
| 513 | <tr class="tr"> | 513 | <tr class="tr"> |
| 514 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> | 514 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> |
| 515 | <td class="td td-row text-xs-center"> | 515 | <td class="td td-row text-xs-center"> |
| 516 | <v-avatar> | 516 | <v-avatar> |
| 517 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 517 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 518 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 518 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 519 | </v-avatar> | 519 | </v-avatar> |
| 520 | </td> | 520 | </td> |
| 521 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 521 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 522 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> | 522 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> |
| 523 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 523 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 524 | <td class="td td-row text-xs-center"> | 524 | <td class="td td-row text-xs-center"> |
| 525 | <v-tooltip top> | 525 | <v-tooltip top> |
| 526 | <img | 526 | <img |
| 527 | slot="activator" | 527 | slot="activator" |
| 528 | v-if="!props.item.libraryId" | 528 | v-if="!props.item.libraryId" |
| 529 | style="cursor:pointer; width:25px; height:18px; " | 529 | style="cursor:pointer; width:25px; height:18px; " |
| 530 | @click="addLibraryData(props.item)" | 530 | @click="addLibraryData(props.item)" |
| 531 | src="/static/icon/add.png" | 531 | src="/static/icon/add.png" |
| 532 | /> | 532 | /> |
| 533 | <span>Add</span> | 533 | <span>Add</span> |
| 534 | </v-tooltip> | 534 | </v-tooltip> |
| 535 | <span v-if="props.item.libraryId"> | 535 | <span v-if="props.item.libraryId"> |
| 536 | <v-tooltip top> | 536 | <v-tooltip top> |
| 537 | <img | 537 | <img |
| 538 | slot="activator" | 538 | slot="activator" |
| 539 | style="cursor:pointer; width:25px; height:18px; " | 539 | style="cursor:pointer; width:25px; height:18px; " |
| 540 | class="mr5" | 540 | class="mr5" |
| 541 | @click="profile(props.item)" | 541 | @click="profile(props.item)" |
| 542 | src="/static/icon/eye1.png" | 542 | src="/static/icon/eye1.png" |
| 543 | /> | 543 | /> |
| 544 | <span>View</span> | 544 | <span>View</span> |
| 545 | </v-tooltip> | 545 | </v-tooltip> |
| 546 | <v-tooltip top> | 546 | <v-tooltip top> |
| 547 | <img | 547 | <img |
| 548 | slot="activator" | 548 | slot="activator" |
| 549 | style="cursor:pointer; width:20px; height:18px; " | 549 | style="cursor:pointer; width:20px; height:18px; " |
| 550 | class="mr5" | 550 | class="mr5" |
| 551 | @click="editItem(props.item)" | 551 | @click="editItem(props.item)" |
| 552 | src="/static/icon/edit1.png" | 552 | src="/static/icon/edit1.png" |
| 553 | /> | 553 | /> |
| 554 | <span>Edit</span> | 554 | <span>Edit</span> |
| 555 | </v-tooltip> | 555 | </v-tooltip> |
| 556 | <v-tooltip top> | 556 | <v-tooltip top> |
| 557 | <img | 557 | <img |
| 558 | slot="activator" | 558 | slot="activator" |
| 559 | style="cursor:pointer; width:20px; height:20px; " | 559 | style="cursor:pointer; width:20px; height:20px; " |
| 560 | class="mr5" | 560 | class="mr5" |
| 561 | @click="deleteItem(props.item)" | 561 | @click="deleteItem(props.item)" |
| 562 | src="/static/icon/delete1.png" | 562 | src="/static/icon/delete1.png" |
| 563 | /> | 563 | /> |
| 564 | <span>Delete</span> | 564 | <span>Delete</span> |
| 565 | </v-tooltip> | 565 | </v-tooltip> |
| 566 | </span> | 566 | </span> |
| 567 | </td> | 567 | </td> |
| 568 | </tr> | 568 | </tr> |
| 569 | </template> | 569 | </template> |
| 570 | <v-alert | 570 | <v-alert |
| 571 | slot="no-results" | 571 | slot="no-results" |
| 572 | :value="true" | 572 | :value="true" |
| 573 | color="error" | 573 | color="error" |
| 574 | icon="warning" | 574 | icon="warning" |
| 575 | >Your search for "{{ search }}" found no results.</v-alert> | 575 | >Your search for "{{ search }}" found no results.</v-alert> |
| 576 | </v-data-table> | 576 | </v-data-table> |
| 577 | </v-card> | 577 | </v-card> |
| 578 | <div class="loader" v-if="showLoader"> | 578 | <div class="loader" v-if="showLoader"> |
| 579 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 579 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 580 | </div> | 580 | </div> |
| 581 | </div> | 581 | </div> |
| 582 | </template> | 582 | </template> |
| 583 | 583 | ||
| 584 | <script> | 584 | <script> |
| 585 | import http from "@/Services/http.js"; | 585 | import http from "@/Services/http.js"; |
| 586 | import Util from "@/util"; | 586 | import Util from "@/util"; |
| 587 | import moment from "moment"; | 587 | import moment from "moment"; |
| 588 | 588 | ||
| 589 | export default { | 589 | export default { |
| 590 | data: () => ({ | 590 | data: () => ({ |
| 591 | snackbar: false, | 591 | snackbar: false, |
| 592 | y: "top", | 592 | y: "top", |
| 593 | x: "right", | 593 | x: "right", |
| 594 | mode: "", | 594 | mode: "", |
| 595 | timeout: 3000, | 595 | timeout: 3000, |
| 596 | text: "", | 596 | text: "", |
| 597 | showLoader: false, | 597 | showLoader: false, |
| 598 | loading: false, | 598 | loading: false, |
| 599 | addLibrary: false, | 599 | addLibrary: false, |
| 600 | dialogStudents: false, | 600 | dialogStudents: false, |
| 601 | editStudentdialog: false, | 601 | editStudentdialog: false, |
| 602 | valid: true, | 602 | valid: true, |
| 603 | libraryIdRules: [(v) => !!v || "Library Id Fee is required"], | 603 | libraryIdRules: [(v) => !!v || "Library Id Fee is required"], |
| 604 | libraryFeeRules: [(v) => !!v || "Library Fee is required"], | 604 | libraryFeeRules: [(v) => !!v || "Library Fee is required"], |
| 605 | date: null, | 605 | date: null, |
| 606 | search: "", | 606 | search: "", |
| 607 | addclass: [], | 607 | addclass: [], |
| 608 | pagination: { | 608 | pagination: { |
| 609 | rowsPerPage: 15, | 609 | rowsPerPage: 15, |
| 610 | }, | 610 | }, |
| 611 | addBook: {}, | 611 | addBook: {}, |
| 612 | imageName: "", | 612 | imageName: "", |
| 613 | imageUrl: "", | 613 | imageUrl: "", |
| 614 | imageFile: "", | 614 | imageFile: "", |
| 615 | headers: [ | 615 | headers: [ |
| 616 | { | 616 | { |
| 617 | text: "No", | 617 | text: "No", |
| 618 | align: "center", | 618 | align: "center", |
| 619 | sortable: false, | 619 | sortable: false, |
| 620 | value: "index", | 620 | value: "index", |
| 621 | }, | 621 | }, |
| 622 | { | 622 | { |
| 623 | text: "Photo", | 623 | text: "Photo", |
| 624 | value: "uploadCover", | 624 | value: "uploadCover", |
| 625 | sortable: false, | 625 | sortable: false, |
| 626 | align: "center", | 626 | align: "center", |
| 627 | }, | 627 | }, |
| 628 | { text: "Name", value: "name", sortable: false, align: "center" }, | 628 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 629 | { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, | 629 | { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, |
| 630 | { text: "Email", value: "email", sortable: false, align: "center" }, | 630 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 631 | { text: "Action", value: "", sortable: false, align: "center" }, | 631 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 632 | ], | 632 | ], |
| 633 | studentData: [], | 633 | studentData: [], |
| 634 | editedItem: {}, | 634 | editedItem: {}, |
| 635 | parentId: "", | 635 | parentId: "", |
| 636 | token: "", | 636 | token: "", |
| 637 | selectStudents: {}, | 637 | selectStudents: {}, |
| 638 | editedIndex: -1, | 638 | editedIndex: -1, |
| 639 | }), | 639 | }), |
| 640 | watch: { | 640 | watch: { |
| 641 | addLibrary: function (val) { | 641 | addLibrary: function (val) { |
| 642 | if (!val) { | 642 | if (!val) { |
| 643 | this.addBook = []; | 643 | this.addBook = []; |
| 644 | } | 644 | } |
| 645 | }, | 645 | }, |
| 646 | }, | 646 | }, |
| 647 | methods: { | 647 | methods: { |
| 648 | getAllStudents() { | 648 | getAllStudents() { |
| 649 | this.showLoader = true; | 649 | this.showLoader = true; |
| 650 | http() | 650 | http() |
| 651 | .get("/getStudentsList", { | 651 | .get("/getStudentsList", { |
| 652 | params: { | 652 | params: { |
| 653 | classId: this.selectStudents, | 653 | classId: this.selectStudents, |
| 654 | schoolId: this.$store.state.schoolId, | 654 | schoolId: this.$store.state.schoolId, |
| 655 | }, | 655 | }, |
| 656 | headers: { Authorization: "Bearer " + this.token }, | 656 | headers: { Authorization: "Bearer " + this.token }, |
| 657 | }) | 657 | }) |
| 658 | .then((response) => { | 658 | .then((response) => { |
| 659 | this.studentData = response.data.data; | 659 | this.studentData = response.data.data; |
| 660 | this.showLoader = false; | 660 | this.showLoader = false; |
| 661 | }) | 661 | }) |
| 662 | .catch((error) => { | 662 | .catch((error) => { |
| 663 | // console.log("err====>", err); | 663 | // console.log("err====>", err); |
| 664 | if (error.response.status === 401) { | 664 | if (error.response.status === 401) { |
| 665 | this.$router.replace({ path: "/" }); | 665 | this.$router.replace({ path: "/" }); |
| 666 | this.$store.dispatch("setToken", null); | 666 | this.$store.dispatch("setToken", null); |
| 667 | this.$store.dispatch("Id", null); | 667 | this.$store.dispatch("Id", null); |
| 668 | this.$store.dispatch("Role", null); | 668 | this.$store.dispatch("Role", null); |
| 669 | } | 669 | } |
| 670 | }); | 670 | }); |
| 671 | }, | 671 | }, |
| 672 | addLibraryData(item) { | 672 | addLibraryData(item) { |
| 673 | this.addBook.studentId = item._id; | 673 | this.addBook.studentId = item._id; |
| 674 | this.addLibrary = true; | 674 | this.addLibrary = true; |
| 675 | }, | 675 | }, |
| 676 | editItem(item) { | 676 | editItem(item) { |
| 677 | this.editedIndex = this.studentData.indexOf(item); | 677 | this.editedIndex = this.studentData.indexOf(item); |
| 678 | this.editedItem = Object.assign({}, item); | 678 | this.editedItem = Object.assign({}, item); |
| 679 | this.editStudentdialog = true; | 679 | this.editStudentdialog = true; |
| 680 | }, | 680 | }, |
| 681 | dates: function (date) { | 681 | dates: function (date) { |
| 682 | return moment(date).format("MMMM DD, YYYY"); | 682 | return moment(date).format("MMMM DD, YYYY"); |
| 683 | }, | 683 | }, |
| 684 | profile(item) { | 684 | profile(item) { |
| 685 | console.log("item", item); | 685 | console.log("item", item); |
| 686 | this.editedIndex = this.studentData.indexOf(item); | 686 | this.editedIndex = this.studentData.indexOf(item); |
| 687 | this.editedItem = Object.assign({}, item); | 687 | this.editedItem = Object.assign({}, item); |
| 688 | this.dialogStudents = true; | 688 | this.dialogStudents = true; |
| 689 | }, | 689 | }, |
| 690 | deleteItem(item) { | 690 | deleteItem(item) { |
| 691 | let deleteStudentLibraryData = { | 691 | let deleteStudentLibraryData = { |
| 692 | studentId: item._id, | 692 | studentId: item._id, |
| 693 | libraryId: item.libraryId, | 693 | libraryId: item.libraryId, |
| 694 | }; | 694 | }; |
| 695 | http() | 695 | http() |
| 696 | .put( | 696 | .put( |
| 697 | "/deleteLibrary", | 697 | "/deleteLibrary", |
| 698 | confirm("Are you sure you want to delete this?") && | 698 | confirm("Are you sure you want to delete this?") && |
| 699 | deleteStudentLibraryData | 699 | deleteStudentLibraryData |
| 700 | ) | 700 | ) |
| 701 | .then((response) => { | 701 | .then((response) => { |
| 702 | this.snackbar = true; | 702 | this.snackbar = true; |
| 703 | this.text = "Delete Successfully"; | 703 | this.text = "Delete Successfully"; |
| 704 | this.getAllStudents(); | 704 | this.getAllStudents(); |
| 705 | }) | 705 | }) |
| 706 | .catch((error) => { | 706 | .catch((error) => { |
| 707 | // console.log(error); | 707 | // console.log(error); |
| 708 | }); | 708 | }); |
| 709 | }, | 709 | }, |
| 710 | close() { | 710 | close() { |
| 711 | this.dialog = false; | 711 | this.dialog = false; |
| 712 | }, | 712 | }, |
| 713 | closeEditStudentDialog() { | 713 | closeEditStudentDialog() { |
| 714 | this.editStudentdialog = false; | 714 | this.editStudentdialog = false; |
| 715 | }, | 715 | }, |
| 716 | closeViewStudent() { | 716 | closeViewStudent() { |
| 717 | this.dialogStudents = false; | 717 | this.dialogStudents = false; |
| 718 | }, | 718 | }, |
| 719 | closeAddLibraryModel() { | 719 | closeAddLibraryModel() { |
| 720 | this.addLibrary = false; | 720 | this.addLibrary = false; |
| 721 | this.addclass = []; | 721 | this.addclass = []; |
| 722 | this.addBook = []; | 722 | this.addBook = []; |
| 723 | }, | 723 | }, |
| 724 | submit() { | 724 | submit() { |
| 725 | if (this.$refs.form.validate()) { | 725 | if (this.$refs.form.validate()) { |
| 726 | this.loading = true; | 726 | this.loading = true; |
| 727 | this.addBook.schoolId = this.$store.state.schoolId; | 727 | this.addBook.schoolId = this.$store.state.schoolId; |
| 728 | http() | 728 | http() |
| 729 | .put("/addLibrary", this.addBook) | 729 | .put("/addLibrary", this.addBook) |
| 730 | .then((response) => { | 730 | .then((response) => { |
| 731 | this.snackbar = true; | 731 | this.snackbar = true; |
| 732 | this.text = "New Library Member added successfully"; | 732 | this.text = "New Library Member added successfully"; |
| 733 | this.getAllStudents(); | 733 | this.getAllStudents(); |
| 734 | this.clear(); | 734 | this.clear(); |
| 735 | this.addLibrary = false; | 735 | this.addLibrary = false; |
| 736 | this.loading = false; | 736 | this.loading = false; |
| 737 | }) | 737 | }) |
| 738 | .catch((error) => { | 738 | .catch((error) => { |
| 739 | // console.log(error); | 739 | // console.log(error); |
| 740 | this.snackbar = true; | 740 | this.snackbar = true; |
| 741 | this.text = error.response.data.message; | 741 | this.text = error.response.data.message; |
| 742 | this.loading = false; | 742 | this.loading = false; |
| 743 | }); | 743 | }); |
| 744 | } | 744 | } |
| 745 | }, | 745 | }, |
| 746 | clear() { | 746 | clear() { |
| 747 | this.$refs.form.reset(); | 747 | this.$refs.form.reset(); |
| 748 | }, | 748 | }, |
| 749 | save() { | 749 | save() { |
| 750 | this.editedItem.studentId = this.editedItem._id; | 750 | this.editedItem.studentId = this.editedItem._id; |
| 751 | http() | 751 | http() |
| 752 | .put("/updateLibrary", this.editedItem) | 752 | .put("/updateLibrary", this.editedItem) |
| 753 | .then((response) => { | 753 | .then((response) => { |
| 754 | this.snackbar = true; | 754 | this.snackbar = true; |
| 755 | this.text = "Edit Library Member Successfully"; | 755 | this.text = "Edit Library Member Successfully"; |
| 756 | this.getAllStudents(); | 756 | this.getAllStudents(); |
| 757 | this.closeEditStudentDialog(); | 757 | this.closeEditStudentDialog(); |
| 758 | }) | 758 | }) |
| 759 | .catch((error) => { | 759 | .catch((error) => { |
| 760 | this.snackbar = true; | 760 | this.snackbar = true; |
| 761 | this.text = error.response.data.statusText; | 761 | this.text = error.response.data.statusText; |
| 762 | }); | 762 | }); |
| 763 | }, | 763 | }, |
| 764 | getAllClass() { | 764 | getAllClass() { |
| 765 | http() | 765 | http() |
| 766 | .get("/getClassesList", { | 766 | .get("/getClassesList", { |
| 767 | params: { | 767 | params: { |
| 768 | schoolId: this.$store.state.schoolId, | 768 | schoolId: this.$store.state.schoolId, |
| 769 | }, | 769 | }, |
| 770 | headers: { Authorization: "Bearer " + this.token }, | 770 | headers: { Authorization: "Bearer " + this.token }, |
| 771 | }) | 771 | }) |
| 772 | .then((response) => { | 772 | .then((response) => { |
| 773 | this.addclass = response.data.data; | 773 | this.addclass = response.data.data; |
| 774 | }) | 774 | }) |
| 775 | .catch((err) => { | 775 | .catch((err) => { |
| 776 | // console.log("err====>", err); | 776 | // console.log("err====>", err); |
| 777 | this.$router.replace({ path: "/" }); | 777 | this.$router.replace({ path: "/" }); |
| 778 | }); | 778 | }); |
| 779 | }, | 779 | }, |
| 780 | }, | 780 | }, |
| 781 | mounted() { | 781 | mounted() { |
| 782 | // this.getStudentList(); | 782 | // this.getStudentList(); |
| 783 | this.token = this.$store.state.token; | 783 | this.token = this.$store.state.token; |
| 784 | this.getAllClass(); | 784 | this.getAllClass(); |
| 785 | }, | 785 | }, |
| 786 | created() { | 786 | created() { |
| 787 | this.$root.$on("app:search", (search) => { | 787 | this.$root.$on("app:search", (search) => { |
| 788 | this.search = search; | 788 | this.search = search; |
| 789 | }); | 789 | }); |
| 790 | }, | 790 | }, |
| 791 | beforeDestroy() { | 791 | beforeDestroy() { |
| 792 | // dont forget to remove the listener | 792 | // dont forget to remove the listener |
| 793 | this.$root.$off("app:search"); | 793 | this.$root.$off("app:search"); |
| 794 | }, | 794 | }, |
| 795 | }; | 795 | }; |
| 796 | </script> | 796 | </script> |
| 797 | <style scoped> | 797 | <style scoped> |
| 798 | .active { | 798 | .active { |
| 799 | background-color: gray; | 799 | background-color: gray; |
| 800 | color: white !important; | 800 | color: white !important; |
| 801 | } | 801 | } |
| 802 | .activebtn { | 802 | .activebtn { |
| 803 | color: black !important; | 803 | color: black !important; |
| 804 | } | 804 | } |
| 805 | </style> | 805 | </style> |
src/pages/Mark/mark.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EXISTING MARK TABLE ****** --> | 3 | <!-- ****** EXISTING MARK TABLE ****** --> |
| 4 | <v-toolbar color="transparent" flat> | 4 | <v-toolbar color="transparent" flat> |
| 5 | <v-btn | 5 | <v-btn |
| 6 | fab | 6 | fab |
| 7 | dark | 7 | dark |
| 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 8 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 9 | small | 9 | small |
| 10 | @click="addMarkDialog = true" | 10 | @click="addMarkDialog = true" |
| 11 | > | 11 | > |
| 12 | <v-icon dark>add</v-icon> | 12 | <v-icon dark>add</v-icon> |
| 13 | </v-btn> | 13 | </v-btn> |
| 14 | <v-btn | 14 | <v-btn |
| 15 | round | 15 | round |
| 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 16 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 17 | dark | 17 | dark |
| 18 | @click="addMarkDialog = true" | 18 | @click="addMarkDialog = true" |
| 19 | > | 19 | > |
| 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark | 20 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark |
| 21 | </v-btn> | 21 | </v-btn> |
| 22 | <v-layout class="hidden-sm-only hidden-xs-only"> | 22 | <v-layout class="hidden-sm-only hidden-xs-only"> |
| 23 | <v-flex md3 lg2 class="ml-2"> | 23 | <v-flex md3 lg2 class="ml-2"> |
| 24 | <v-select | 24 | <v-select |
| 25 | v-model="getMark.classId" | 25 | v-model="getMark.classId" |
| 26 | label="Select your class" | 26 | label="Select your class" |
| 27 | type="text" | 27 | type="text" |
| 28 | :items="classList" | 28 | :items="classList" |
| 29 | item-text="classNum" | 29 | item-text="classNum" |
| 30 | item-value="_id" | 30 | item-value="_id" |
| 31 | @change="getSections(getMark.classId)" | 31 | @change="getSections(getMark.classId)" |
| 32 | required | 32 | required |
| 33 | ></v-select> | 33 | ></v-select> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | <v-flex md3 lg2 class="ml-2"> | 35 | <v-flex md3 lg2 class="ml-2"> |
| 36 | <v-select | 36 | <v-select |
| 37 | :items="addSection" | 37 | :items="addSection" |
| 38 | label="Select your Section" | 38 | label="Select your Section" |
| 39 | v-model="getMark.sectionId" | 39 | v-model="getMark.sectionId" |
| 40 | item-text="name" | 40 | item-text="name" |
| 41 | item-value="_id" | 41 | item-value="_id" |
| 42 | name="Select Section" | 42 | name="Select Section" |
| 43 | required | 43 | required |
| 44 | ></v-select> | 44 | ></v-select> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-spacer></v-spacer> | 46 | <v-spacer></v-spacer> |
| 47 | <v-btn | 47 | <v-btn |
| 48 | @click="getStudents" | 48 | @click="getStudents" |
| 49 | round | 49 | round |
| 50 | dark | 50 | dark |
| 51 | :loading="loading" | 51 | :loading="loading" |
| 52 | class="right open-dialog-button mt-2" | 52 | class="right open-dialog-button mt-2" |
| 53 | >Mark</v-btn> | 53 | >Mark</v-btn> |
| 54 | </v-layout> | 54 | </v-layout> |
| 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> | 55 | <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> |
| 56 | <v-card-title class="body-1" v-show="show"> | 56 | <v-card-title class="body-1" v-show="show"> |
| 57 | <v-btn icon large flat @click="displaySearch"> | 57 | <v-btn icon large flat @click="displaySearch"> |
| 58 | <v-avatar size="27"> | 58 | <v-avatar size="27"> |
| 59 | <img src="/static/icon/search.png" alt="icon" /> | 59 | <img src="/static/icon/search.png" alt="icon" /> |
| 60 | </v-avatar> | 60 | </v-avatar> |
| 61 | </v-btn> | 61 | </v-btn> |
| 62 | </v-card-title> | 62 | </v-card-title> |
| 63 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 63 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 64 | <v-layout> | 64 | <v-layout> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | autofocus | 66 | autofocus |
| 67 | v-model="search" | 67 | v-model="search" |
| 68 | label="Search" | 68 | label="Search" |
| 69 | prepend-inner-icon="search" | 69 | prepend-inner-icon="search" |
| 70 | color="primary" | 70 | color="primary" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | <v-icon @click="closeSearch" color="error">close</v-icon> | 72 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-toolbar> | 75 | </v-toolbar> |
| 76 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> | 76 | <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> |
| 77 | <v-flex xs12 sm12 lg12> | 77 | <v-flex xs12 sm12 lg12> |
| 78 | <v-layout wrap> | 78 | <v-layout wrap> |
| 79 | <v-flex xs12 sm12 lg3> | 79 | <v-flex xs12 sm12 lg3> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 81 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 82 | <label class="right">Class:</label> | 82 | <label class="right">Class:</label> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | <v-flex xs12 sm12 lg8 class="ml-2"> | 84 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 85 | <v-select | 85 | <v-select |
| 86 | v-model="getMark.classId" | 86 | v-model="getMark.classId" |
| 87 | label="Select your class" | 87 | label="Select your class" |
| 88 | type="text" | 88 | type="text" |
| 89 | :items="classList" | 89 | :items="classList" |
| 90 | item-text="classNum" | 90 | item-text="classNum" |
| 91 | item-value="_id" | 91 | item-value="_id" |
| 92 | @change="getSections(getMark.classId)" | 92 | @change="getSections(getMark.classId)" |
| 93 | required | 93 | required |
| 94 | ></v-select> | 94 | ></v-select> |
| 95 | </v-flex> | 95 | </v-flex> |
| 96 | </v-layout> | 96 | </v-layout> |
| 97 | </v-flex> | 97 | </v-flex> |
| 98 | <v-flex xs12 sm12 lg3> | 98 | <v-flex xs12 sm12 lg3> |
| 99 | <v-layout> | 99 | <v-layout> |
| 100 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> | 100 | <v-flex xs3 sm6 lg2 class="subheading mt-4"> |
| 101 | <label class="right">Section:</label> | 101 | <label class="right">Section:</label> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm12 lg8 class="ml-2"> | 103 | <v-flex xs12 sm12 lg8 class="ml-2"> |
| 104 | <v-select | 104 | <v-select |
| 105 | :items="addSection" | 105 | :items="addSection" |
| 106 | label="Select your Section" | 106 | label="Select your Section" |
| 107 | v-model="getMark.sectionId" | 107 | v-model="getMark.sectionId" |
| 108 | item-text="name" | 108 | item-text="name" |
| 109 | item-value="_id" | 109 | item-value="_id" |
| 110 | name="Select Section" | 110 | name="Select Section" |
| 111 | required | 111 | required |
| 112 | ></v-select> | 112 | ></v-select> |
| 113 | </v-flex> | 113 | </v-flex> |
| 114 | </v-layout> | 114 | </v-layout> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs12 sm12 lg6> | 116 | <v-flex xs12 sm12 lg6> |
| 117 | <v-btn | 117 | <v-btn |
| 118 | @click="getStudents" | 118 | @click="getStudents" |
| 119 | round | 119 | round |
| 120 | dark | 120 | dark |
| 121 | :loading="loading" | 121 | :loading="loading" |
| 122 | class="right mt-3 open-dialog-button" | 122 | class="right mt-3 open-dialog-button" |
| 123 | >Mark</v-btn> | 123 | >Mark</v-btn> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | </v-card> | 127 | </v-card> |
| 128 | <v-data-table | 128 | <v-data-table |
| 129 | :headers="headers" | 129 | :headers="headers" |
| 130 | :items="getStudentsList" | 130 | :items="getStudentsList" |
| 131 | :pagination.sync="pagination" | 131 | :pagination.sync="pagination" |
| 132 | :search="search" | 132 | :search="search" |
| 133 | > | 133 | > |
| 134 | <template slot="items" slot-scope="props"> | 134 | <template slot="items" slot-scope="props"> |
| 135 | <tr class="tr"> | 135 | <tr class="tr"> |
| 136 | <td class="td td-row">{{ props.index + 1}}</td> | 136 | <td class="td td-row">{{ props.index + 1}}</td> |
| 137 | <td class="td td-row text-xs-center"> | 137 | <td class="td td-row text-xs-center"> |
| 138 | <v-avatar size="40"> | 138 | <v-avatar size="40"> |
| 139 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 139 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 140 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 140 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 141 | </v-avatar> | 141 | </v-avatar> |
| 142 | </td> | 142 | </td> |
| 143 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 143 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 144 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> | 144 | <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> |
| 145 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 145 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 146 | <td class="td td-row text-xs-center"> | 146 | <td class="td td-row text-xs-center"> |
| 147 | <span> | 147 | <span> |
| 148 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> | 148 | <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> |
| 149 | <v-tooltip top> | 149 | <v-tooltip top> |
| 150 | <img | 150 | <img |
| 151 | slot="activator" | 151 | slot="activator" |
| 152 | style="cursor:pointer; width:25px; height:25px; " | 152 | style="cursor:pointer; width:25px; height:25px; " |
| 153 | src="/static/icon/view.png" | 153 | src="/static/icon/view.png" |
| 154 | /> | 154 | /> |
| 155 | <span>View</span> | 155 | <span>View</span> |
| 156 | </v-tooltip> | 156 | </v-tooltip> |
| 157 | </router-link> | 157 | </router-link> |
| 158 | </span> | 158 | </span> |
| 159 | </td> | 159 | </td> |
| 160 | </tr> | 160 | </tr> |
| 161 | </template> | 161 | </template> |
| 162 | <v-alert | 162 | <v-alert |
| 163 | slot="no-results" | 163 | slot="no-results" |
| 164 | :value="true" | 164 | :value="true" |
| 165 | color="error" | 165 | color="error" |
| 166 | icon="warning" | 166 | icon="warning" |
| 167 | >Your search for "{{ search }}" found no results.</v-alert> | 167 | >Your search for "{{ search }}" found no results.</v-alert> |
| 168 | </v-data-table> | 168 | </v-data-table> |
| 169 | <!-- ****** ADD Mark Schedule ****** --> | 169 | <!-- ****** ADD Mark Schedule ****** --> |
| 170 | <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog"> | 170 | <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent> |
| 171 | <v-card flat class> | 171 | <v-card flat class> |
| 172 | <v-layout class="pa-3 card-style white--text"> | 172 | <v-layout class="pa-3 card-style white--text"> |
| 173 | <v-flex xs12> | 173 | <v-flex xs12> |
| 174 | <label class="title text-xs-center">Add Mark</label> | 174 | <label class="title text-xs-center">Add Mark</label> |
| 175 | <v-icon | 175 | <v-icon |
| 176 | size="24" | 176 | size="24" |
| 177 | class="right white--text" | 177 | class="right white--text" |
| 178 | @click="$refs.form.reset();addMarkDialog = false" | 178 | @click="$refs.form.reset();addMarkDialog = false" |
| 179 | >cancel</v-icon> | 179 | >cancel</v-icon> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | </v-layout> | 181 | </v-layout> |
| 182 | <v-form ref="form" v-model="valid" lazy-validation> | 182 | <v-form ref="form" v-model="valid" lazy-validation> |
| 183 | <v-container fluid> | 183 | <v-container fluid> |
| 184 | <v-flex xs12 sm12 lg12> | 184 | <v-flex xs12 sm12 lg12> |
| 185 | <v-layout wrap> | 185 | <v-layout wrap> |
| 186 | <v-flex xs12 sm12 lg10> | 186 | <v-flex xs12 sm12 lg10> |
| 187 | <v-layout wrap> | 187 | <v-layout wrap> |
| 188 | <v-flex xs12 sm12 lg3> | 188 | <v-flex xs12 sm12 lg3> |
| 189 | <v-flex xs3 sm2 lg2 class="subheading"> | 189 | <v-flex xs3 sm2 lg2 class="subheading"> |
| 190 | <label>Exam:</label> | 190 | <label>Exam:</label> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | <v-flex xs12 sm12 lg10> | 192 | <v-flex xs12 sm12 lg10> |
| 193 | <v-select | 193 | <v-select |
| 194 | label="Select your Exam Name" | 194 | label="Select your Exam Name" |
| 195 | :items="examList" | 195 | :items="examList" |
| 196 | v-model="addMark.examId" | 196 | v-model="addMark.examId" |
| 197 | :rules="examRules" | 197 | :rules="examRules" |
| 198 | item-text="examName" | 198 | item-text="examName" |
| 199 | item-value="_id" | 199 | item-value="_id" |
| 200 | ></v-select> | 200 | ></v-select> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | <v-flex xs12 sm12 lg3> | 203 | <v-flex xs12 sm12 lg3> |
| 204 | <v-flex xs3 sm6 lg2 class="subheading"> | 204 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 205 | <label>Class:</label> | 205 | <label>Class:</label> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | <v-flex xs12 sm12 lg10 class> | 207 | <v-flex xs12 sm12 lg10 class> |
| 208 | <v-select | 208 | <v-select |
| 209 | v-model="addMark.classId" | 209 | v-model="addMark.classId" |
| 210 | label="Select your class" | 210 | label="Select your class" |
| 211 | type="text" | 211 | type="text" |
| 212 | :items="classList" | 212 | :items="classList" |
| 213 | item-text="classNum" | 213 | item-text="classNum" |
| 214 | item-value="_id" | 214 | item-value="_id" |
| 215 | :rules="classRules" | 215 | :rules="classRules" |
| 216 | @change="getSections(addMark.classId)" | 216 | @change="getSections(addMark.classId)" |
| 217 | required | 217 | required |
| 218 | ></v-select> | 218 | ></v-select> |
| 219 | </v-flex> | 219 | </v-flex> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex xs12 sm12 lg3> | 221 | <v-flex xs12 sm12 lg3> |
| 222 | <v-flex xs3 sm6 lg2 class="subheading"> | 222 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 223 | <label>Section:</label> | 223 | <label>Section:</label> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | <v-flex xs12 sm12 lg10 class> | 225 | <v-flex xs12 sm12 lg10 class> |
| 226 | <v-select | 226 | <v-select |
| 227 | :items="addSection" | 227 | :items="addSection" |
| 228 | label="Select your Section" | 228 | label="Select your Section" |
| 229 | v-model="addMark.sectionId" | 229 | v-model="addMark.sectionId" |
| 230 | item-text="name" | 230 | item-text="name" |
| 231 | item-value="_id" | 231 | item-value="_id" |
| 232 | name="Select Section" | 232 | name="Select Section" |
| 233 | :rules="sectionRules" | 233 | :rules="sectionRules" |
| 234 | required | 234 | required |
| 235 | ></v-select> | 235 | ></v-select> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | <v-flex xs12 sm12 lg3> | 238 | <v-flex xs12 sm12 lg3> |
| 239 | <v-flex xs3 sm6 lg2 class="subheading"> | 239 | <v-flex xs3 sm6 lg2 class="subheading"> |
| 240 | <label>Subject:</label> | 240 | <label>Subject:</label> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | <v-flex xs12 sm12 lg10 class> | 242 | <v-flex xs12 sm12 lg10 class> |
| 243 | <v-select | 243 | <v-select |
| 244 | :items="subjects" | 244 | :items="subjects" |
| 245 | label="Select your Subject" | 245 | label="Select your Subject" |
| 246 | v-model="addMark.subjectId" | 246 | v-model="addMark.subjectId" |
| 247 | item-text="subjectName" | 247 | item-text="subjectName" |
| 248 | item-value="_id" | 248 | item-value="_id" |
| 249 | name="Select Section" | 249 | name="Select Section" |
| 250 | :rules="subjectRules" | 250 | :rules="subjectRules" |
| 251 | required | 251 | required |
| 252 | ></v-select> | 252 | ></v-select> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-layout> | 255 | </v-layout> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | <v-flex xs12 sm12 lg2> | 257 | <v-flex xs12 sm12 lg2> |
| 258 | <v-flex xs12 sm12 lg12> | 258 | <v-flex xs12 sm12 lg12> |
| 259 | <v-btn | 259 | <v-btn |
| 260 | @click="findStudents" | 260 | @click="findStudents" |
| 261 | round | 261 | round |
| 262 | dark | 262 | dark |
| 263 | :loading="loading" | 263 | :loading="loading" |
| 264 | class="right mt-4 open-dialog-button" | 264 | class="right mt-4 open-dialog-button" |
| 265 | >Mark</v-btn> | 265 | >Mark</v-btn> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <!-- ****** ADD MARK TABLE DATA ****** --> | 270 | <!-- ****** ADD MARK TABLE DATA ****** --> |
| 271 | <v-card class="mt-4 elevation-0 body-color"> | 271 | <v-card class="mt-4 elevation-0 body-color"> |
| 272 | <v-data-table | 272 | <v-data-table |
| 273 | :headers="headerOfMark" | 273 | :headers="headerOfMark" |
| 274 | :items="getStudentData" | 274 | :items="getStudentData" |
| 275 | :pagination.sync="pagination" | 275 | :pagination.sync="pagination" |
| 276 | :search="search" | 276 | :search="search" |
| 277 | class="body-color" | 277 | class="body-color" |
| 278 | > | 278 | > |
| 279 | <template slot="items" slot-scope="props"> | 279 | <template slot="items" slot-scope="props"> |
| 280 | <tr class="tr"> | 280 | <tr class="tr"> |
| 281 | <td class="td td-row">{{ props.index + 1}}</td> | 281 | <td class="td td-row">{{ props.index + 1}}</td> |
| 282 | <td class="text-xs-center td td-row"> | 282 | <td class="text-xs-center td td-row"> |
| 283 | <v-avatar size="40"> | 283 | <v-avatar size="40"> |
| 284 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 284 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 285 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 285 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 286 | </v-avatar> | 286 | </v-avatar> |
| 287 | </td> | 287 | </td> |
| 288 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 288 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 289 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> | 289 | <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> |
| 290 | <td | 290 | <td |
| 291 | class="text-xs-center markTable td td-row" | 291 | class="text-xs-center markTable td td-row" |
| 292 | v-for="(marks, index) in props.item.marksObtained" | 292 | v-for="(marks, index) in props.item.marksObtained" |
| 293 | :key="'A'+ index" | 293 | :key="'A'+ index" |
| 294 | > | 294 | > |
| 295 | <v-text-field v-model="marks.marksScored"></v-text-field> | 295 | <v-text-field v-model="marks.marksScored"></v-text-field> |
| 296 | </td> | 296 | </td> |
| 297 | </tr> | 297 | </tr> |
| 298 | </template> | 298 | </template> |
| 299 | <v-alert | 299 | <v-alert |
| 300 | slot="no-results" | 300 | slot="no-results" |
| 301 | :value="true" | 301 | :value="true" |
| 302 | color="error" | 302 | color="error" |
| 303 | icon="warning" | 303 | icon="warning" |
| 304 | >Your search for "{{ search }}" found no results.</v-alert> | 304 | >Your search for "{{ search }}" found no results.</v-alert> |
| 305 | </v-data-table> | 305 | </v-data-table> |
| 306 | </v-card> | 306 | </v-card> |
| 307 | <v-layout class="mt-2"> | 307 | <v-layout class="mt-2"> |
| 308 | <v-flex xs12 sm12> | 308 | <v-flex xs12 sm12> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs12> | 310 | <v-flex xs12> |
| 311 | <v-btn | 311 | <v-btn |
| 312 | @click="submit" | 312 | @click="submit" |
| 313 | round | 313 | round |
| 314 | dark | 314 | dark |
| 315 | :loading="loading" | 315 | :loading="loading" |
| 316 | class="right add-button" | 316 | class="right add-button" |
| 317 | >Add Mark</v-btn> | 317 | >Add Mark</v-btn> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | </v-layout> | 319 | </v-layout> |
| 320 | </v-flex> | 320 | </v-flex> |
| 321 | </v-layout> | 321 | </v-layout> |
| 322 | </v-container> | 322 | </v-container> |
| 323 | </v-form> | 323 | </v-form> |
| 324 | </v-card> | 324 | </v-card> |
| 325 | </v-dialog> | 325 | </v-dialog> |
| 326 | <div class="loader" v-if="showLoader"> | 326 | <div class="loader" v-if="showLoader"> |
| 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 327 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 328 | </div> | 328 | </div> |
| 329 | <v-snackbar | 329 | <v-snackbar |
| 330 | :timeout="timeout" | 330 | :timeout="timeout" |
| 331 | :top="y === 'top'" | 331 | :top="y === 'top'" |
| 332 | :right="x === 'right'" | 332 | :right="x === 'right'" |
| 333 | :vertical="mode === 'vertical'" | 333 | :vertical="mode === 'vertical'" |
| 334 | v-model="snackbar" | 334 | v-model="snackbar" |
| 335 | :color="color" | 335 | :color="color" |
| 336 | >{{ text }}</v-snackbar> | 336 | >{{ text }}</v-snackbar> |
| 337 | </v-container> | 337 | </v-container> |
| 338 | </template> | 338 | </template> |
| 339 | 339 | ||
| 340 | <script> | 340 | <script> |
| 341 | import http from "@/Services/http.js"; | 341 | import http from "@/Services/http.js"; |
| 342 | import moment from "moment"; | 342 | import moment from "moment"; |
| 343 | 343 | ||
| 344 | export default { | 344 | export default { |
| 345 | data: () => ({ | 345 | data: () => ({ |
| 346 | show: true, | 346 | show: true, |
| 347 | showSearch: false, | 347 | showSearch: false, |
| 348 | snackbar: false, | 348 | snackbar: false, |
| 349 | date: null, | 349 | date: null, |
| 350 | color: "", | 350 | color: "", |
| 351 | y: "top", | 351 | y: "top", |
| 352 | x: "right", | 352 | x: "right", |
| 353 | mode: "", | 353 | mode: "", |
| 354 | timeout: 10000, | 354 | timeout: 10000, |
| 355 | text: "", | 355 | text: "", |
| 356 | loading: false, | 356 | loading: false, |
| 357 | search: "", | 357 | search: "", |
| 358 | show: true, | 358 | show: true, |
| 359 | showSearch: false, | 359 | showSearch: false, |
| 360 | showLoader: false, | 360 | showLoader: false, |
| 361 | dialog: false, | 361 | dialog: false, |
| 362 | dialog1: false, | 362 | dialog1: false, |
| 363 | valid: true, | 363 | valid: true, |
| 364 | 364 | ||
| 365 | addMarkDialog: false, | 365 | addMarkDialog: false, |
| 366 | addSection: [], | 366 | addSection: [], |
| 367 | pagination: { | 367 | pagination: { |
| 368 | rowsPerPage: 10, | 368 | rowsPerPage: 10, |
| 369 | }, | 369 | }, |
| 370 | classRules: [(v) => !!v || "Class is required"], | 370 | classRules: [(v) => !!v || "Class is required"], |
| 371 | sectionRules: [(v) => !!v || "section is required"], | 371 | sectionRules: [(v) => !!v || "section is required"], |
| 372 | subjectRules: [(v) => !!v || "Subject is required"], | 372 | subjectRules: [(v) => !!v || "Subject is required"], |
| 373 | examRules: [(v) => !!v || "Exam is required"], | 373 | examRules: [(v) => !!v || "Exam is required"], |
| 374 | 374 | ||
| 375 | headerOfMark: [ | 375 | headerOfMark: [ |
| 376 | { | 376 | { |
| 377 | align: "", | 377 | align: "", |
| 378 | text: "No", | 378 | text: "No", |
| 379 | sortable: false, | 379 | sortable: false, |
| 380 | value: "No", | 380 | value: "No", |
| 381 | }, | 381 | }, |
| 382 | { | 382 | { |
| 383 | text: "Profile Pic", | 383 | text: "Profile Pic", |
| 384 | vaue: "profilePicUrl", | 384 | vaue: "profilePicUrl", |
| 385 | sortable: false, | 385 | sortable: false, |
| 386 | align: "center", | 386 | align: "center", |
| 387 | }, | 387 | }, |
| 388 | { | 388 | { |
| 389 | text: "Name", | 389 | text: "Name", |
| 390 | vaue: "name", | 390 | vaue: "name", |
| 391 | sortable: false, | 391 | sortable: false, |
| 392 | align: "center", | 392 | align: "center", |
| 393 | }, | 393 | }, |
| 394 | { | 394 | { |
| 395 | text: "Roll No.", | 395 | text: "Roll No.", |
| 396 | value: "rollNo", | 396 | value: "rollNo", |
| 397 | sortable: false, | 397 | sortable: false, |
| 398 | align: "center", | 398 | align: "center", |
| 399 | }, | 399 | }, |
| 400 | ], | 400 | ], |
| 401 | headers: [ | 401 | headers: [ |
| 402 | { | 402 | { |
| 403 | align: "", | 403 | align: "", |
| 404 | text: "No", | 404 | text: "No", |
| 405 | sortable: false, | 405 | sortable: false, |
| 406 | value: "No", | 406 | value: "No", |
| 407 | }, | 407 | }, |
| 408 | { | 408 | { |
| 409 | text: "Profile Pic", | 409 | text: "Profile Pic", |
| 410 | vaue: "profilePicUrl", | 410 | vaue: "profilePicUrl", |
| 411 | sortable: false, | 411 | sortable: false, |
| 412 | align: "center", | 412 | align: "center", |
| 413 | }, | 413 | }, |
| 414 | { | 414 | { |
| 415 | text: "Name", | 415 | text: "Name", |
| 416 | vaue: "name", | 416 | vaue: "name", |
| 417 | sortable: false, | 417 | sortable: false, |
| 418 | align: "center", | 418 | align: "center", |
| 419 | }, | 419 | }, |
| 420 | { | 420 | { |
| 421 | text: "Roll No.", | 421 | text: "Roll No.", |
| 422 | value: "rollNo", | 422 | value: "rollNo", |
| 423 | sortable: false, | 423 | sortable: false, |
| 424 | align: "center", | 424 | align: "center", |
| 425 | }, | 425 | }, |
| 426 | { | 426 | { |
| 427 | text: "Email", | 427 | text: "Email", |
| 428 | value: "email", | 428 | value: "email", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | align: "center", | 430 | align: "center", |
| 431 | }, | 431 | }, |
| 432 | { text: "Action", value: "", sortable: false, align: "center" }, | 432 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 433 | ], | 433 | ], |
| 434 | classList: [], | 434 | classList: [], |
| 435 | examList: [], | 435 | examList: [], |
| 436 | subjects: [], | 436 | subjects: [], |
| 437 | addMark: {}, | 437 | addMark: {}, |
| 438 | getMark: {}, | 438 | getMark: {}, |
| 439 | getScheduleData: {}, | 439 | getScheduleData: {}, |
| 440 | markData: [], | 440 | markData: [], |
| 441 | getStudentData: [], | 441 | getStudentData: [], |
| 442 | getStudentsList: [], | 442 | getStudentsList: [], |
| 443 | token: "", | 443 | token: "", |
| 444 | }), | 444 | }), |
| 445 | watch: { | 445 | watch: { |
| 446 | addMarkDialog: function (val) { | 446 | addMarkDialog: function (val) { |
| 447 | if (!val) { | 447 | if (!val) { |
| 448 | this.addMark = []; | 448 | this.addMark = []; |
| 449 | this.getStudentData = []; | 449 | this.getStudentData = []; |
| 450 | } | 450 | } |
| 451 | }, | 451 | }, |
| 452 | }, | 452 | }, |
| 453 | methods: { | 453 | methods: { |
| 454 | getClass() { | 454 | getClass() { |
| 455 | this.showLoader = true; | 455 | this.showLoader = true; |
| 456 | http() | 456 | http() |
| 457 | .get("/getClassesList", { | 457 | .get("/getClassesList", { |
| 458 | headers: { Authorization: "Bearer " + this.token }, | 458 | headers: { Authorization: "Bearer " + this.token }, |
| 459 | }) | 459 | }) |
| 460 | .then((response) => { | 460 | .then((response) => { |
| 461 | this.classList = response.data.data; | 461 | this.classList = response.data.data; |
| 462 | this.showLoader = false; | 462 | this.showLoader = false; |
| 463 | }) | 463 | }) |
| 464 | .catch((err) => { | 464 | .catch((err) => { |
| 465 | // console.log("err====>", err); | 465 | // console.log("err====>", err); |
| 466 | this.showLoader = false; | 466 | this.showLoader = false; |
| 467 | }); | 467 | }); |
| 468 | }, | 468 | }, |
| 469 | getSections(_id) { | 469 | getSections(_id) { |
| 470 | this.showLoader = true; | 470 | this.showLoader = true; |
| 471 | for (let i = 0; i < this.classList.length; i++) { | 471 | for (let i = 0; i < this.classList.length; i++) { |
| 472 | if (_id == this.classList[i]._id) { | 472 | if (_id == this.classList[i]._id) { |
| 473 | this.subjects = this.classList[i].subjects; | 473 | this.subjects = this.classList[i].subjects; |
| 474 | } | 474 | } |
| 475 | } | 475 | } |
| 476 | http() | 476 | http() |
| 477 | .get( | 477 | .get( |
| 478 | "/getSectionsList", | 478 | "/getSectionsList", |
| 479 | { params: { classId: _id } }, | 479 | { params: { classId: _id } }, |
| 480 | { | 480 | { |
| 481 | headers: { Authorization: "Bearer " + this.token }, | 481 | headers: { Authorization: "Bearer " + this.token }, |
| 482 | } | 482 | } |
| 483 | ) | 483 | ) |
| 484 | .then((response) => { | 484 | .then((response) => { |
| 485 | this.addSection = response.data.data; | 485 | this.addSection = response.data.data; |
| 486 | this.showLoader = false; | 486 | this.showLoader = false; |
| 487 | }) | 487 | }) |
| 488 | .catch((err) => { | 488 | .catch((err) => { |
| 489 | this.showLoader = false; | 489 | this.showLoader = false; |
| 490 | // console.log("err====>", err); | 490 | // console.log("err====>", err); |
| 491 | }); | 491 | }); |
| 492 | }, | 492 | }, |
| 493 | getExamList() { | 493 | getExamList() { |
| 494 | this.showLoader = true; | 494 | this.showLoader = true; |
| 495 | this.loadingSearch = true; | 495 | this.loadingSearch = true; |
| 496 | http() | 496 | http() |
| 497 | .get("/getExamsList", { | 497 | .get("/getExamsList", { |
| 498 | headers: { Authorization: "Bearer " + this.token }, | 498 | headers: { Authorization: "Bearer " + this.token }, |
| 499 | }) | 499 | }) |
| 500 | .then((response) => { | 500 | .then((response) => { |
| 501 | this.examList = response.data.data; | 501 | this.examList = response.data.data; |
| 502 | this.showLoader = false; | 502 | this.showLoader = false; |
| 503 | this.loadingSearch = false; | 503 | this.loadingSearch = false; |
| 504 | }) | 504 | }) |
| 505 | .catch((error) => { | 505 | .catch((error) => { |
| 506 | // console.log("err====>", err); | 506 | // console.log("err====>", err); |
| 507 | this.showLoader = false; | 507 | this.showLoader = false; |
| 508 | this.loadingSearch = false; | 508 | this.loadingSearch = false; |
| 509 | this.snackbar = true; | 509 | this.snackbar = true; |
| 510 | this.text = error.response.data.message; | 510 | this.text = error.response.data.message; |
| 511 | if (error.response.status === 401) { | 511 | if (error.response.status === 401) { |
| 512 | this.$router.replace({ path: "/" }); | 512 | this.$router.replace({ path: "/" }); |
| 513 | this.$store.dispatch("setToken", null); | 513 | this.$store.dispatch("setToken", null); |
| 514 | this.$store.dispatch("Id", null); | 514 | this.$store.dispatch("Id", null); |
| 515 | this.$store.dispatch("Role", null); | 515 | this.$store.dispatch("Role", null); |
| 516 | } | 516 | } |
| 517 | }); | 517 | }); |
| 518 | }, | 518 | }, |
| 519 | findStudents() { | 519 | findStudents() { |
| 520 | this.getStudentData = []; | 520 | this.getStudentData = []; |
| 521 | if (this.$refs.form.validate()) { | 521 | if (this.$refs.form.validate()) { |
| 522 | this.showLoader = true; | 522 | this.showLoader = true; |
| 523 | http() | 523 | http() |
| 524 | .get("/getStudentWithClass", { | 524 | .get("/getStudentWithClass", { |
| 525 | params: { | 525 | params: { |
| 526 | classId: this.addMark.classId, | 526 | classId: this.addMark.classId, |
| 527 | sectionId: this.addMark.sectionId, | 527 | sectionId: this.addMark.sectionId, |
| 528 | }, | 528 | }, |
| 529 | }) | 529 | }) |
| 530 | .then((response) => { | 530 | .then((response) => { |
| 531 | this.getStudentData = response.data.data; | 531 | this.getStudentData = response.data.data; |
| 532 | // this.showLoader = false; | 532 | // this.showLoader = false; |
| 533 | this.showLoader = true; | 533 | this.showLoader = true; |
| 534 | http() | 534 | http() |
| 535 | .get("/getMarkDistributionsList", { | 535 | .get("/getMarkDistributionsList", { |
| 536 | params: this.addMark, | 536 | params: this.addMark, |
| 537 | }) | 537 | }) |
| 538 | .then((response) => { | 538 | .then((response) => { |
| 539 | this.showLoader = false; | 539 | this.showLoader = false; |
| 540 | this.headerOfMark.length = 4; | 540 | this.headerOfMark.length = 4; |
| 541 | for (var i = 0; i < response.data.data.length; i++) { | 541 | for (var i = 0; i < response.data.data.length; i++) { |
| 542 | this.headerOfMark.push({ | 542 | this.headerOfMark.push({ |
| 543 | text: | 543 | text: |
| 544 | response.data.data[i].distributionType + | 544 | response.data.data[i].distributionType + |
| 545 | " (" + | 545 | " (" + |
| 546 | response.data.data[i].markValue + | 546 | response.data.data[i].markValue + |
| 547 | ")", | 547 | ")", |
| 548 | sortable: false, | 548 | sortable: false, |
| 549 | align: "center", | 549 | align: "center", |
| 550 | }); | 550 | }); |
| 551 | } | 551 | } |
| 552 | for (var n = 0; n < this.getStudentData.length; n++) { | 552 | for (var n = 0; n < this.getStudentData.length; n++) { |
| 553 | this.getStudentData[n].marksObtained = []; | 553 | this.getStudentData[n].marksObtained = []; |
| 554 | for (var j = 0; j < response.data.data.length; j++) { | 554 | for (var j = 0; j < response.data.data.length; j++) { |
| 555 | this.getStudentData[n].marksObtained.push({ | 555 | this.getStudentData[n].marksObtained.push({ |
| 556 | markDistributionId: response.data.data[j]._id, | 556 | markDistributionId: response.data.data[j]._id, |
| 557 | marksScored: 0, | 557 | marksScored: 0, |
| 558 | markValue: response.data.data[j].markValue, | 558 | markValue: response.data.data[j].markValue, |
| 559 | distributionType: response.data.data[j].distributionType, | 559 | distributionType: response.data.data[j].distributionType, |
| 560 | }); | 560 | }); |
| 561 | } | 561 | } |
| 562 | // if (marks.marksScored > marks.marksObtained) { | 562 | // if (marks.marksScored > marks.marksObtained) { |
| 563 | // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; | 563 | // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; |
| 564 | // this.marks.marksScored = marks.marksObtained; | 564 | // this.marks.marksScored = marks.marksObtained; |
| 565 | // } | 565 | // } |
| 566 | } | 566 | } |
| 567 | }) | 567 | }) |
| 568 | .catch((error) => { | 568 | .catch((error) => { |
| 569 | this.showLoader = false; | 569 | this.showLoader = false; |
| 570 | }); | 570 | }); |
| 571 | }) | 571 | }) |
| 572 | .catch((error) => { | 572 | .catch((error) => { |
| 573 | this.showLoader = false; | 573 | this.showLoader = false; |
| 574 | }); | 574 | }); |
| 575 | } | 575 | } |
| 576 | }, | 576 | }, |
| 577 | async submit() { | 577 | async submit() { |
| 578 | for (let [j, item] of this.getStudentData.entries()) { | 578 | for (let [j, item] of this.getStudentData.entries()) { |
| 579 | for (var k = 0; k < item.marksObtained.length; k++) { | 579 | for (var k = 0; k < item.marksObtained.length; k++) { |
| 580 | if ( | 580 | if ( |
| 581 | item.marksObtained[k].marksScored > item.marksObtained[k].markValue | 581 | item.marksObtained[k].marksScored > item.marksObtained[k].markValue |
| 582 | ) { | 582 | ) { |
| 583 | this.snackbar = true; | 583 | this.snackbar = true; |
| 584 | this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in | 584 | this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in |
| 585 | "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; | 585 | "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; |
| 586 | this.color = "error"; | 586 | this.color = "error"; |
| 587 | return; | 587 | return; |
| 588 | } | 588 | } |
| 589 | } | 589 | } |
| 590 | let data = { | 590 | let data = { |
| 591 | examId: this.addMark.examId, | 591 | examId: this.addMark.examId, |
| 592 | classId: this.addMark.classId, | 592 | classId: this.addMark.classId, |
| 593 | sectionId: this.addMark.sectionId, | 593 | sectionId: this.addMark.sectionId, |
| 594 | subjectId: this.addMark.subjectId, | 594 | subjectId: this.addMark.subjectId, |
| 595 | studentId: item._id, | 595 | studentId: item._id, |
| 596 | studentsMarks: item.marksObtained, | 596 | studentsMarks: item.marksObtained, |
| 597 | }; | 597 | }; |
| 598 | try { | 598 | try { |
| 599 | let response = await http().post("/createMark", data); | 599 | let response = await http().post("/createMark", data); |
| 600 | if (j + 1 === this.getStudentData.length) { | 600 | if (j + 1 === this.getStudentData.length) { |
| 601 | this.getStudentData = []; | 601 | this.getStudentData = []; |
| 602 | this.snackbar = true; | 602 | this.snackbar = true; |
| 603 | this.addMarkDialog = false; | 603 | this.addMarkDialog = false; |
| 604 | this.text = response.data.message; | 604 | this.text = response.data.message; |
| 605 | this.color = "green"; | 605 | this.color = "green"; |
| 606 | this.$refs.form.reset(); | 606 | this.$refs.form.reset(); |
| 607 | } | 607 | } |
| 608 | } catch (error) { | 608 | } catch (error) { |
| 609 | this.snackbar = true; | 609 | this.snackbar = true; |
| 610 | this.text = error.response.data.message; | 610 | this.text = error.response.data.message; |
| 611 | this.color = "red"; | 611 | this.color = "red"; |
| 612 | } | 612 | } |
| 613 | } | 613 | } |
| 614 | }, | 614 | }, |
| 615 | getStudents() { | 615 | getStudents() { |
| 616 | this.showLoader = true; | 616 | this.showLoader = true; |
| 617 | http() | 617 | http() |
| 618 | .get("/getStudentWithClass", { | 618 | .get("/getStudentWithClass", { |
| 619 | params: { | 619 | params: { |
| 620 | classId: this.getMark.classId, | 620 | classId: this.getMark.classId, |
| 621 | sectionId: this.getMark.sectionId, | 621 | sectionId: this.getMark.sectionId, |
| 622 | }, | 622 | }, |
| 623 | }) | 623 | }) |
| 624 | .then((response) => { | 624 | .then((response) => { |
| 625 | this.getStudentsList = response.data.data; | 625 | this.getStudentsList = response.data.data; |
| 626 | this.showLoader = false; | 626 | this.showLoader = false; |
| 627 | }) | 627 | }) |
| 628 | .catch((error) => { | 628 | .catch((error) => { |
| 629 | console.log("err====>", error); | 629 | console.log("err====>", error); |
| 630 | this.showLoader = false; | 630 | this.showLoader = false; |
| 631 | }); | 631 | }); |
| 632 | }, | 632 | }, |
| 633 | displaySearch() { | 633 | displaySearch() { |
| 634 | (this.show = false), (this.showSearch = true); | 634 | (this.show = false), (this.showSearch = true); |
| 635 | }, | 635 | }, |
| 636 | closeSearch() { | 636 | closeSearch() { |
| 637 | this.showSearch = false; | 637 | this.showSearch = false; |
| 638 | this.show = true; | 638 | this.show = true; |
| 639 | this.search = ""; | 639 | this.search = ""; |
| 640 | }, | 640 | }, |
| 641 | }, | 641 | }, |
| 642 | mounted() { | 642 | mounted() { |
| 643 | this.token = this.$store.state.token; | 643 | this.token = this.$store.state.token; |
| 644 | this.getClass(); | 644 | this.getClass(); |
| 645 | this.getExamList(); | 645 | this.getExamList(); |
| 646 | }, | 646 | }, |
| 647 | }; | 647 | }; |
| 648 | </script> | 648 | </script> |
| 649 | <style scoped> | 649 | <style scoped> |
| 650 | .markTable { | 650 | .markTable { |
| 651 | max-width: 80px !important; | 651 | max-width: 80px !important; |
| 652 | } | 652 | } |
| 653 | </style> | 653 | </style> |
| 654 | 654 | ||
| 655 | 655 | ||
| 656 | 656 | ||
| 657 | 657 | ||
| 658 | 658 | ||
| 659 | 659 | ||
| 660 | 660 | ||
| 661 | 661 | ||
| 662 | 662 | ||
| 663 | 663 | ||
| 664 | 664 | ||
| 665 | 665 | ||
| 666 | 666 | ||
| 667 | 667 | ||
| 668 | 668 | ||
| 669 | 669 | ||
| 670 | 670 | ||
| 671 | 671 | ||
| 672 | 672 | ||
| 673 | 673 | ||
| 674 | 674 | ||
| 675 | 675 |
src/pages/Mark/markDistribution.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Mark Distribution ****** --> | 3 | <!-- ****** EDIT Mark Distribution ****** --> |
| 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px"> | 4 | <v-dialog v-model="editMarkDistributionDialog" max-width="500px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Mark Distribution</label> | 8 | <label class="title text-xs-center">Edit Mark Distribution</label> |
| 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Mark Distribution:</label> | 17 | <label class="right">Mark Distribution:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm6 class="ml-3"> | 19 | <v-flex xs8 sm6 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.distributionType" | 21 | v-model="editedItem.distributionType" |
| 22 | placeholder="fill your Distribution Type" | 22 | placeholder="fill your Distribution Type" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs4 class="pt-4 subheading"> | 29 | <v-flex xs4 class="pt-4 subheading"> |
| 30 | <label class="right">Mark Value:</label> | 30 | <label class="right">Mark Value:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm6 class="ml-3"> | 32 | <v-flex xs8 sm6 class="ml-3"> |
| 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> | 33 | <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout> | 35 | </v-layout> |
| 36 | </v-flex> | 36 | </v-flex> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex xs12 sm11> | 38 | <v-flex xs12 sm11> |
| 39 | <v-card-actions> | 39 | <v-card-actions> |
| 40 | <v-spacer></v-spacer> | 40 | <v-spacer></v-spacer> |
| 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 41 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 42 | </v-card-actions> | 42 | </v-card-actions> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | </v-layout> | 44 | </v-layout> |
| 45 | </v-container> | 45 | </v-container> |
| 46 | </v-form> | 46 | </v-form> |
| 47 | </v-card> | 47 | </v-card> |
| 48 | </v-dialog> | 48 | </v-dialog> |
| 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> | 49 | <!-- ****** MARK DISTRIBUTATION TABLE ****** --> |
| 50 | <v-toolbar color="transparent" flat> | 50 | <v-toolbar color="transparent" flat> |
| 51 | <v-btn | 51 | <v-btn |
| 52 | fab | 52 | fab |
| 53 | dark | 53 | dark |
| 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 54 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 55 | small | 55 | small |
| 56 | @click="addMarkDistributionDialog = true" | 56 | @click="addMarkDistributionDialog = true" |
| 57 | > | 57 | > |
| 58 | <v-icon dark>add</v-icon> | 58 | <v-icon dark>add</v-icon> |
| 59 | </v-btn> | 59 | </v-btn> |
| 60 | <v-btn | 60 | <v-btn |
| 61 | round | 61 | round |
| 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 62 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 63 | dark | 63 | dark |
| 64 | @click="addMarkDistributionDialog = true" | 64 | @click="addMarkDistributionDialog = true" |
| 65 | > | 65 | > |
| 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution | 66 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution |
| 67 | </v-btn> | 67 | </v-btn> |
| 68 | <v-spacer></v-spacer> | 68 | <v-spacer></v-spacer> |
| 69 | <v-card-title class="body-1" v-show="show"> | 69 | <v-card-title class="body-1" v-show="show"> |
| 70 | <v-btn icon large flat @click="displaySearch"> | 70 | <v-btn icon large flat @click="displaySearch"> |
| 71 | <v-avatar size="27"> | 71 | <v-avatar size="27"> |
| 72 | <img src="/static/icon/search.png" alt="icon" /> | 72 | <img src="/static/icon/search.png" alt="icon" /> |
| 73 | </v-avatar> | 73 | </v-avatar> |
| 74 | </v-btn> | 74 | </v-btn> |
| 75 | </v-card-title> | 75 | </v-card-title> |
| 76 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 76 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 77 | <v-layout> | 77 | <v-layout> |
| 78 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> | 78 | <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> |
| 79 | <v-icon @click="closeSearch" color="error">close</v-icon> | 79 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 80 | </v-layout> | 80 | </v-layout> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-toolbar> | 82 | </v-toolbar> |
| 83 | <v-data-table | 83 | <v-data-table |
| 84 | :headers="headers" | 84 | :headers="headers" |
| 85 | :items="markList" | 85 | :items="markList" |
| 86 | :pagination.sync="pagination" | 86 | :pagination.sync="pagination" |
| 87 | :search="search" | 87 | :search="search" |
| 88 | > | 88 | > |
| 89 | <template slot="items" slot-scope="props"> | 89 | <template slot="items" slot-scope="props"> |
| 90 | <tr class="tr"> | 90 | <tr class="tr"> |
| 91 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> | 91 | <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> |
| 92 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> | 92 | <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> |
| 93 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> | 93 | <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> |
| 94 | <td class="td td-row text-xs-center"> | 94 | <td class="td td-row text-xs-center"> |
| 95 | <span> | 95 | <span> |
| 96 | <img | 96 | <img |
| 97 | style="cursor:pointer; width:20px; height:18px; " | 97 | style="cursor:pointer; width:20px; height:18px; " |
| 98 | class="mr-3" | 98 | class="mr-3" |
| 99 | @click="editItem(props.item)" | 99 | @click="editItem(props.item)" |
| 100 | src="/static/icon/edit.png" | 100 | src="/static/icon/edit.png" |
| 101 | /> | 101 | /> |
| 102 | <img | 102 | <img |
| 103 | style="cursor:pointer; width:20px; height:20px; " | 103 | style="cursor:pointer; width:20px; height:20px; " |
| 104 | @click="deleteItem(props.item)" | 104 | @click="deleteItem(props.item)" |
| 105 | src="/static/icon/delete.png" | 105 | src="/static/icon/delete.png" |
| 106 | /> | 106 | /> |
| 107 | </span> | 107 | </span> |
| 108 | </td> | 108 | </td> |
| 109 | </tr> | 109 | </tr> |
| 110 | </template> | 110 | </template> |
| 111 | <v-alert | 111 | <v-alert |
| 112 | slot="no-results" | 112 | slot="no-results" |
| 113 | :value="true" | 113 | :value="true" |
| 114 | color="error" | 114 | color="error" |
| 115 | icon="warning" | 115 | icon="warning" |
| 116 | >Your search for "{{ search }}" found no results.</v-alert> | 116 | >Your search for "{{ search }}" found no results.</v-alert> |
| 117 | </v-data-table> | 117 | </v-data-table> |
| 118 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 118 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 119 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px"> | 119 | <v-dialog v-model="addMarkDistributionDialog" max-width="500px" persistent> |
| 120 | <v-card flat class="card-style pa-2" dark> | 120 | <v-card flat class="card-style pa-2" dark> |
| 121 | <v-layout> | 121 | <v-layout> |
| 122 | <v-flex xs12> | 122 | <v-flex xs12> |
| 123 | <label class="title text-xs-center">Add Mark Distribution</label> | 123 | <label class="title text-xs-center">Add Mark Distribution</label> |
| 124 | <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDistributionDialog = false">cancel</v-icon> | 124 | <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDistributionDialog = false">cancel</v-icon> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-layout> | 126 | </v-layout> |
| 127 | <v-form ref="form" v-model="valid" lazy-validation> | 127 | <v-form ref="form" v-model="valid" lazy-validation> |
| 128 | <v-container fluid> | 128 | <v-container fluid> |
| 129 | <v-flex xs12> | 129 | <v-flex xs12> |
| 130 | <v-layout wrap> | 130 | <v-layout wrap> |
| 131 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 131 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 132 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> | 132 | <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> |
| 133 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> | 133 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | <v-flex xs12 sm12 md7 class="ml-3"> | 135 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 136 | <v-text-field | 136 | <v-text-field |
| 137 | v-model="mark.distributionType" | 137 | v-model="mark.distributionType" |
| 138 | placeholder="fill your Mark Distribution" | 138 | placeholder="fill your Mark Distribution" |
| 139 | :rules="markDistributionRules" | 139 | :rules="markDistributionRules" |
| 140 | ></v-text-field> | 140 | ></v-text-field> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | </v-flex> | 143 | </v-flex> |
| 144 | <v-flex xs12> | 144 | <v-flex xs12> |
| 145 | <v-layout wrap> | 145 | <v-layout wrap> |
| 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> | 146 | <v-flex xs12 sm12 md4 class="pt-4 subheading"> |
| 147 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> | 147 | <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> |
| 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> | 148 | <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-flex xs12 sm12 md7 class="ml-3"> | 150 | <v-flex xs12 sm12 md7 class="ml-3"> |
| 151 | <v-text-field | 151 | <v-text-field |
| 152 | placeholder="fill your Mark Value" | 152 | placeholder="fill your Mark Value" |
| 153 | :rules="markValueRules" | 153 | :rules="markValueRules" |
| 154 | v-model="mark.markValue" | 154 | v-model="mark.markValue" |
| 155 | type="text" | 155 | type="text" |
| 156 | required | 156 | required |
| 157 | ></v-text-field> | 157 | ></v-text-field> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-layout> | 161 | <v-layout> |
| 162 | <v-flex xs12 sm12> | 162 | <v-flex xs12 sm12> |
| 163 | <v-layout> | 163 | <v-layout> |
| 164 | <v-spacer></v-spacer> | 164 | <v-spacer></v-spacer> |
| 165 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 165 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 166 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 166 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 167 | </v-layout> | 167 | </v-layout> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | </v-layout> | 169 | </v-layout> |
| 170 | </v-container> | 170 | </v-container> |
| 171 | </v-form> | 171 | </v-form> |
| 172 | </v-card> | 172 | </v-card> |
| 173 | </v-dialog> | 173 | </v-dialog> |
| 174 | <v-snackbar | 174 | <v-snackbar |
| 175 | :timeout="timeout" | 175 | :timeout="timeout" |
| 176 | :top="y === 'top'" | 176 | :top="y === 'top'" |
| 177 | :right="x === 'right'" | 177 | :right="x === 'right'" |
| 178 | :vertical="mode === 'vertical'" | 178 | :vertical="mode === 'vertical'" |
| 179 | v-model="snackbar" | 179 | v-model="snackbar" |
| 180 | :color="color" | 180 | :color="color" |
| 181 | >{{ text }}</v-snackbar> | 181 | >{{ text }}</v-snackbar> |
| 182 | <div class="loader" v-if="showLoader"> | 182 | <div class="loader" v-if="showLoader"> |
| 183 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 183 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 184 | </div> | 184 | </div> |
| 185 | </v-container> | 185 | </v-container> |
| 186 | </template> | 186 | </template> |
| 187 | 187 | ||
| 188 | <script> | 188 | <script> |
| 189 | import http from "@/Services/http.js"; | 189 | import http from "@/Services/http.js"; |
| 190 | import Util from "@/util"; | 190 | import Util from "@/util"; |
| 191 | 191 | ||
| 192 | export default { | 192 | export default { |
| 193 | data: () => ({ | 193 | data: () => ({ |
| 194 | snackbar: false, | 194 | snackbar: false, |
| 195 | y: "top", | 195 | y: "top", |
| 196 | x: "right", | 196 | x: "right", |
| 197 | mode: "", | 197 | mode: "", |
| 198 | color: "", | 198 | color: "", |
| 199 | timeout: 5000, | 199 | timeout: 5000, |
| 200 | text: "", | 200 | text: "", |
| 201 | loading: false, | 201 | loading: false, |
| 202 | search: "", | 202 | search: "", |
| 203 | showLoader: false, | 203 | showLoader: false, |
| 204 | show: true, | 204 | show: true, |
| 205 | showSearch: false, | 205 | showSearch: false, |
| 206 | editMarkDistributionDialog: false, | 206 | editMarkDistributionDialog: false, |
| 207 | addMarkDistributionDialog: false, | 207 | addMarkDistributionDialog: false, |
| 208 | valid: true, | 208 | valid: true, |
| 209 | isActive: true, | 209 | isActive: true, |
| 210 | newActive: false, | 210 | newActive: false, |
| 211 | pagination: { | 211 | pagination: { |
| 212 | rowsPerPage: 15 | 212 | rowsPerPage: 15 |
| 213 | }, | 213 | }, |
| 214 | markDistributionRules: [v => !!v || " Mark Distribution type is required"], | 214 | markDistributionRules: [v => !!v || " Mark Distribution type is required"], |
| 215 | markValueRules: [v => !!v || "Mark Value is required"], | 215 | markValueRules: [v => !!v || "Mark Value is required"], |
| 216 | headers: [ | 216 | headers: [ |
| 217 | { | 217 | { |
| 218 | text: "No", | 218 | text: "No", |
| 219 | align: "center", | 219 | align: "center", |
| 220 | sortable: false, | 220 | sortable: false, |
| 221 | value: "No" | 221 | value: "No" |
| 222 | }, | 222 | }, |
| 223 | { | 223 | { |
| 224 | text: " Mark Distribution Type", | 224 | text: " Mark Distribution Type", |
| 225 | value: " distributionType", | 225 | value: " distributionType", |
| 226 | sortable: false, | 226 | sortable: false, |
| 227 | align: "center" | 227 | align: "center" |
| 228 | }, | 228 | }, |
| 229 | { | 229 | { |
| 230 | text: " Mark Value", | 230 | text: " Mark Value", |
| 231 | value: "markValue", | 231 | value: "markValue", |
| 232 | sortable: false, | 232 | sortable: false, |
| 233 | align: "center" | 233 | align: "center" |
| 234 | }, | 234 | }, |
| 235 | { text: "Action", value: "", sortable: false, align: "center" } | 235 | { text: "Action", value: "", sortable: false, align: "center" } |
| 236 | ], | 236 | ], |
| 237 | markList: [], | 237 | markList: [], |
| 238 | editedIndex: -1, | 238 | editedIndex: -1, |
| 239 | mark: {}, | 239 | mark: {}, |
| 240 | editedItem: {}, | 240 | editedItem: {}, |
| 241 | token: "" | 241 | token: "" |
| 242 | }), | 242 | }), |
| 243 | methods: { | 243 | methods: { |
| 244 | getMarkDistributions() { | 244 | getMarkDistributions() { |
| 245 | this.showLoader = true; | 245 | this.showLoader = true; |
| 246 | http() | 246 | http() |
| 247 | .get("/getMarkDistributionsList", { | 247 | .get("/getMarkDistributionsList", { |
| 248 | headers: { Authorization: "Bearer " + this.token } | 248 | headers: { Authorization: "Bearer " + this.token } |
| 249 | }) | 249 | }) |
| 250 | .then(response => { | 250 | .then(response => { |
| 251 | this.markList = response.data.data; | 251 | this.markList = response.data.data; |
| 252 | this.showLoader = false; | 252 | this.showLoader = false; |
| 253 | }) | 253 | }) |
| 254 | .catch(error => { | 254 | .catch(error => { |
| 255 | this.showLoader = false; | 255 | this.showLoader = false; |
| 256 | // if (error.response.status === 401) { | 256 | // if (error.response.status === 401) { |
| 257 | // this.$router.replace({ path: "/" }); | 257 | // this.$router.replace({ path: "/" }); |
| 258 | // this.$store.dispatch("setToken", null); | 258 | // this.$store.dispatch("setToken", null); |
| 259 | // this.$store.dispatch("Id", null); | 259 | // this.$store.dispatch("Id", null); |
| 260 | // } | 260 | // } |
| 261 | }); | 261 | }); |
| 262 | }, | 262 | }, |
| 263 | editItem(item) { | 263 | editItem(item) { |
| 264 | this.editedIndex = this.markList.indexOf(item); | 264 | this.editedIndex = this.markList.indexOf(item); |
| 265 | this.editedItem = Object.assign({}, item); | 265 | this.editedItem = Object.assign({}, item); |
| 266 | this.editMarkDistributionDialog = true; | 266 | this.editMarkDistributionDialog = true; |
| 267 | }, | 267 | }, |
| 268 | deleteItem(item) { | 268 | deleteItem(item) { |
| 269 | let deleteParticularMark = { | 269 | let deleteParticularMark = { |
| 270 | markDistributionId: item._id | 270 | markDistributionId: item._id |
| 271 | }; | 271 | }; |
| 272 | http() | 272 | http() |
| 273 | .delete( | 273 | .delete( |
| 274 | "/deleteMarkDistribution", | 274 | "/deleteMarkDistribution", |
| 275 | confirm("Are you sure you want to delete this?") && { | 275 | confirm("Are you sure you want to delete this?") && { |
| 276 | params: deleteParticularMark | 276 | params: deleteParticularMark |
| 277 | } | 277 | } |
| 278 | ) | 278 | ) |
| 279 | .then(response => { | 279 | .then(response => { |
| 280 | this.snackbar = true; | 280 | this.snackbar = true; |
| 281 | this.text = response.data.message; | 281 | this.text = response.data.message; |
| 282 | this.getMarkDistributions(); | 282 | this.getMarkDistributions(); |
| 283 | }) | 283 | }) |
| 284 | .catch(error => { | 284 | .catch(error => { |
| 285 | console.log(error); | 285 | console.log(error); |
| 286 | }); | 286 | }); |
| 287 | }, | 287 | }, |
| 288 | close() { | 288 | close() { |
| 289 | this.editMarkDistributionDialog = false; | 289 | this.editMarkDistributionDialog = false; |
| 290 | }, | 290 | }, |
| 291 | submit() { | 291 | submit() { |
| 292 | if (this.$refs.form.validate()) { | 292 | if (this.$refs.form.validate()) { |
| 293 | this.loading = true; | 293 | this.loading = true; |
| 294 | http() | 294 | http() |
| 295 | .post("/createMarkDistribution", this.mark) | 295 | .post("/createMarkDistribution", this.mark) |
| 296 | .then(response => { | 296 | .then(response => { |
| 297 | this.snackbar = true; | 297 | this.snackbar = true; |
| 298 | this.text = response.data.message; | 298 | this.text = response.data.message; |
| 299 | this.getMarkDistributions(); | 299 | this.getMarkDistributions(); |
| 300 | this.clear(); | 300 | this.clear(); |
| 301 | this.addMarkDistributionDialog = false; | 301 | this.addMarkDistributionDialog = false; |
| 302 | this.loading = false; | 302 | this.loading = false; |
| 303 | }) | 303 | }) |
| 304 | .catch(error => { | 304 | .catch(error => { |
| 305 | this.snackbar = true; | 305 | this.snackbar = true; |
| 306 | this.text = error.response.data.message; | 306 | this.text = error.response.data.message; |
| 307 | this.loading = false; | 307 | this.loading = false; |
| 308 | }); | 308 | }); |
| 309 | } | 309 | } |
| 310 | }, | 310 | }, |
| 311 | clear() { | 311 | clear() { |
| 312 | this.$refs.form.reset(); | 312 | this.$refs.form.reset(); |
| 313 | }, | 313 | }, |
| 314 | save() { | 314 | save() { |
| 315 | (this.editedItem.markDistributionId = this.editedItem._id), | 315 | (this.editedItem.markDistributionId = this.editedItem._id), |
| 316 | http() | 316 | http() |
| 317 | .put("/updateMarkDistribution", this.editedItem) | 317 | .put("/updateMarkDistribution", this.editedItem) |
| 318 | .then(response => { | 318 | .then(response => { |
| 319 | this.snackbar = true; | 319 | this.snackbar = true; |
| 320 | this.text = "Successfully Edit Notification"; | 320 | this.text = "Successfully Edit Notification"; |
| 321 | this.color = "green"; | 321 | this.color = "green"; |
| 322 | this.getMarkDistributions(); | 322 | this.getMarkDistributions(); |
| 323 | this.close(); | 323 | this.close(); |
| 324 | }) | 324 | }) |
| 325 | .catch(error => { | 325 | .catch(error => { |
| 326 | console.log(error); | 326 | console.log(error); |
| 327 | this.snackbar = true; | 327 | this.snackbar = true; |
| 328 | this.text = error.response.data.message; | 328 | this.text = error.response.data.message; |
| 329 | this.color = "red"; | 329 | this.color = "red"; |
| 330 | }); | 330 | }); |
| 331 | }, | 331 | }, |
| 332 | displaySearch() { | 332 | displaySearch() { |
| 333 | (this.show = false), (this.showSearch = true); | 333 | (this.show = false), (this.showSearch = true); |
| 334 | }, | 334 | }, |
| 335 | closeSearch() { | 335 | closeSearch() { |
| 336 | this.showSearch = false; | 336 | this.showSearch = false; |
| 337 | this.show = true; | 337 | this.show = true; |
| 338 | this.search = ""; | 338 | this.search = ""; |
| 339 | } | 339 | } |
| 340 | }, | 340 | }, |
| 341 | mounted() { | 341 | mounted() { |
| 342 | this.token = this.$store.state.token; | 342 | this.token = this.$store.state.token; |
| 343 | this.getMarkDistributions(); | 343 | this.getMarkDistributions(); |
| 344 | } | 344 | } |
| 345 | }; | 345 | }; |
| 346 | </script> | 346 | </script> |
| 347 | <style scoped> | 347 | <style scoped> |
src/pages/News/news.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT NEWS ****** --> | 3 | <!-- ****** EDIT NEWS ****** --> |
| 4 | <v-dialog v-model="editNewsDialog" max-width="600px"> | 4 | <v-dialog v-model="editNewsDialog" max-width="600px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit News</label> | 8 | <label class="title text-xs-center">Edit News</label> |
| 9 | <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editNewsDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout row> | 13 | <v-layout row> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <input | 15 | <input |
| 16 | type="file" | 16 | type="file" |
| 17 | style="display: none" | 17 | style="display: none" |
| 18 | ref="image" | 18 | ref="image" |
| 19 | accept="image/*" | 19 | accept="image/*" |
| 20 | multiple | 20 | multiple |
| 21 | @change="onFilePicked" | 21 | @change="onFilePicked" |
| 22 | /> | 22 | /> |
| 23 | <v-layout justify-center> | 23 | <v-layout justify-center> |
| 24 | <v-flex | 24 | <v-flex |
| 25 | xs12 | 25 | xs12 |
| 26 | sm12 | 26 | sm12 |
| 27 | md3 | 27 | md3 |
| 28 | v-for="Image in editedItem.newsImageUrl" | 28 | v-for="Image in editedItem.newsImageUrl" |
| 29 | :key="Image._id" | 29 | :key="Image._id" |
| 30 | v-if="editedItem.newsImageUrl" | 30 | v-if="editedItem.newsImageUrl" |
| 31 | class="profile-image-wrapper" | 31 | class="profile-image-wrapper" |
| 32 | > | 32 | > |
| 33 | <img | 33 | <img |
| 34 | :src="Image.imageUrl" | 34 | :src="Image.imageUrl" |
| 35 | height="100" | 35 | height="100" |
| 36 | width="100" | 36 | width="100" |
| 37 | alt="News" | 37 | alt="News" |
| 38 | class="pa-2 imgNews" | 38 | class="pa-2 imgNews" |
| 39 | /> | 39 | /> |
| 40 | <v-icon | 40 | <v-icon |
| 41 | class="red edit-profile-icon" | 41 | class="red edit-profile-icon" |
| 42 | dark | 42 | dark |
| 43 | @click="deleteImage(Image._id,editedItem._id)" | 43 | @click="deleteImage(Image._id,editedItem._id)" |
| 44 | >close</v-icon> | 44 | >close</v-icon> |
| 45 | </v-flex> | 45 | </v-flex> |
| 46 | <v-flex v-for="(file, index) in files" :key="index"> | 46 | <v-flex v-for="(file, index) in files" :key="index"> |
| 47 | <img :src="file" height="100" width="100" class="pa-2" /> | 47 | <img :src="file" height="100" width="100" class="pa-2" /> |
| 48 | </v-flex> | 48 | </v-flex> |
| 49 | <img | 49 | <img |
| 50 | src="/static/icon/user.png" | 50 | src="/static/icon/user.png" |
| 51 | v-if="files == '' && editedItem.newsImageUrl == ''" | 51 | v-if="files == '' && editedItem.newsImageUrl == ''" |
| 52 | height="100" | 52 | height="100" |
| 53 | width="100" | 53 | width="100" |
| 54 | alt="News" | 54 | alt="News" |
| 55 | /> | 55 | /> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | </v-layout> | 58 | </v-layout> |
| 59 | <!-- </v-layout> --> | 59 | <!-- </v-layout> --> |
| 60 | <v-layout wrap> | 60 | <v-layout wrap> |
| 61 | <v-flex xs12 sm12> | 61 | <v-flex xs12 sm12> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right">Title:</label> | 64 | <label class="right">Title:</label> |
| 65 | </v-flex> | 65 | </v-flex> |
| 66 | <v-flex sm6 xs8 class="ml-3"> | 66 | <v-flex sm6 xs8 class="ml-3"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | v-model="editedItem.title" | 68 | v-model="editedItem.title" |
| 69 | placeholder="fill your Title" | 69 | placeholder="fill your Title" |
| 70 | name="name" | 70 | name="name" |
| 71 | type="text" | 71 | type="text" |
| 72 | required | 72 | required |
| 73 | ></v-text-field> | 73 | ></v-text-field> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-flex> | 76 | </v-flex> |
| 77 | <v-flex xs12 sm12> | 77 | <v-flex xs12 sm12> |
| 78 | <v-layout> | 78 | <v-layout> |
| 79 | <v-flex xs4 class="pt-4 subheading"> | 79 | <v-flex xs4 class="pt-4 subheading"> |
| 80 | <label class="right">Description:</label> | 80 | <label class="right">Description:</label> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8 class="ml-3"> | 82 | <v-flex sm6 xs8 class="ml-3"> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | placeholder="fill your Description" | 84 | placeholder="fill your Description" |
| 85 | v-model="editedItem.description" | 85 | v-model="editedItem.description" |
| 86 | type="text" | 86 | type="text" |
| 87 | name="email" | 87 | name="email" |
| 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-flex> | 92 | </v-flex> |
| 93 | <v-flex xs12> | 93 | <v-flex xs12> |
| 94 | <v-layout> | 94 | <v-layout> |
| 95 | <v-flex xs4 class="pt-4 subheading"> | 95 | <v-flex xs4 class="pt-4 subheading"> |
| 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> | 96 | <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> |
| 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 97 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | <v-flex sm6 xs8 class="ml-3"> | 99 | <v-flex sm6 xs8 class="ml-3"> |
| 100 | <v-text-field | 100 | <v-text-field |
| 101 | label="Select Image" | 101 | label="Select Image" |
| 102 | @click="pickFile" | 102 | @click="pickFile" |
| 103 | v-model="imageName" | 103 | v-model="imageName" |
| 104 | append-icon="attach_file" | 104 | append-icon="attach_file" |
| 105 | multiple | 105 | multiple |
| 106 | ></v-text-field> | 106 | ></v-text-field> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> | 112 | <v-flex xs12 sm9 offset-sm2 class="hidden-xs-only hidden-sm-only"> |
| 113 | <v-card-actions> | 113 | <v-card-actions> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 115 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 116 | </v-card-actions> | 116 | </v-card-actions> |
| 117 | </v-flex> | 117 | </v-flex> |
| 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> | 118 | <v-flex xs12 class="hidden-lg-only hidden-md-only hidden-xl-only"> |
| 119 | <v-card-actions> | 119 | <v-card-actions> |
| 120 | <v-spacer></v-spacer> | 120 | <v-spacer></v-spacer> |
| 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 121 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 122 | <v-spacer></v-spacer> | 122 | <v-spacer></v-spacer> |
| 123 | </v-card-actions> | 123 | </v-card-actions> |
| 124 | </v-flex> | 124 | </v-flex> |
| 125 | </v-layout> | 125 | </v-layout> |
| 126 | </v-card-text> | 126 | </v-card-text> |
| 127 | </v-card> | 127 | </v-card> |
| 128 | </v-dialog> | 128 | </v-dialog> |
| 129 | <!-- ****** PROFILE NEWS ****** --> | 129 | <!-- ****** PROFILE NEWS ****** --> |
| 130 | <v-dialog v-model="dialog1" max-width="500px"> | 130 | <v-dialog v-model="dialog1" max-width="500px" persistent> |
| 131 | <v-card flat class="card-style pa-3" dark> | 131 | <v-card flat class="card-style pa-3" dark> |
| 132 | <v-layout> | 132 | <v-layout> |
| 133 | <v-flex xs12> | 133 | <v-flex xs12> |
| 134 | <label class="title text-xs-center">View News</label> | 134 | <label class="title text-xs-center">View News</label> |
| 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> | 135 | <v-icon size="24" class="right" @click="dialog1 = false">cancel</v-icon> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | </v-layout> | 137 | </v-layout> |
| 138 | <v-card-text> | 138 | <v-card-text> |
| 139 | <v-flex align-center justify-center layout text-xs-center> | 139 | <v-flex align-center justify-center layout text-xs-center> |
| 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> | 140 | <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="pa-2"> |
| 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> | 141 | <img :src="image.imageUrl" alt="News" width="100" height="100" class="imgNews" /> |
| 142 | </span> | 142 | </span> |
| 143 | <img | 143 | <img |
| 144 | src="/static/icon/user.png" | 144 | src="/static/icon/user.png" |
| 145 | v-if="editedItem.newsImageUrl == ''" | 145 | v-if="editedItem.newsImageUrl == ''" |
| 146 | height="80" | 146 | height="80" |
| 147 | width="80" | 147 | width="80" |
| 148 | alt="News" | 148 | alt="News" |
| 149 | /> | 149 | /> |
| 150 | </v-flex> | 150 | </v-flex> |
| 151 | <v-container grid-list-md> | 151 | <v-container grid-list-md> |
| 152 | <v-layout wrap> | 152 | <v-layout wrap> |
| 153 | <v-flex> | 153 | <v-flex> |
| 154 | <v-layout> | 154 | <v-layout> |
| 155 | <v-flex xs5 sm6> | 155 | <v-flex xs5 sm6> |
| 156 | <h5 class="right my-1"> | 156 | <h5 class="right my-1"> |
| 157 | <b>Title:</b> | 157 | <b>Title:</b> |
| 158 | </h5> | 158 | </h5> |
| 159 | </v-flex> | 159 | </v-flex> |
| 160 | <v-flex sm6 xs8> | 160 | <v-flex sm6 xs8> |
| 161 | <h5 class="my-1">{{ editedItem.title }}</h5> | 161 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | </v-layout> | 163 | </v-layout> |
| 164 | <v-layout> | 164 | <v-layout> |
| 165 | <v-flex xs5 sm6> | 165 | <v-flex xs5 sm6> |
| 166 | <h5 class="right my-1"> | 166 | <h5 class="right my-1"> |
| 167 | <b>Description:</b> | 167 | <b>Description:</b> |
| 168 | </h5> | 168 | </h5> |
| 169 | </v-flex> | 169 | </v-flex> |
| 170 | <v-flex sm6 xs8> | 170 | <v-flex sm6 xs8> |
| 171 | <h5 class="my-1">{{ editedItem.description }}</h5> | 171 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-container> | 176 | </v-container> |
| 177 | </v-card-text> | 177 | </v-card-text> |
| 178 | </v-card> | 178 | </v-card> |
| 179 | </v-dialog> | 179 | </v-dialog> |
| 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> | 180 | <!-- ****** EXISTING-USERS NEWS TABLE ****** --> |
| 181 | <v-toolbar color="transparent" flat> | 181 | <v-toolbar color="transparent" flat> |
| 182 | <v-btn | 182 | <v-btn |
| 183 | fab | 183 | fab |
| 184 | dark | 184 | dark |
| 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 185 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 186 | small | 186 | small |
| 187 | @click="addNewsDialog = true" | 187 | @click="addNewsDialog = true" |
| 188 | > | 188 | > |
| 189 | <v-icon dark>add</v-icon> | 189 | <v-icon dark>add</v-icon> |
| 190 | </v-btn> | 190 | </v-btn> |
| 191 | <v-btn | 191 | <v-btn |
| 192 | round | 192 | round |
| 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 193 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 194 | dark | 194 | dark |
| 195 | @click="addNewsDialog = true" | 195 | @click="addNewsDialog = true" |
| 196 | > | 196 | > |
| 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News | 197 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add News |
| 198 | </v-btn> | 198 | </v-btn> |
| 199 | <v-spacer></v-spacer> | 199 | <v-spacer></v-spacer> |
| 200 | <v-card-title class="body-1" v-show="show"> | 200 | <v-card-title class="body-1" v-show="show"> |
| 201 | <v-btn icon large flat @click="displaySearch"> | 201 | <v-btn icon large flat @click="displaySearch"> |
| 202 | <v-avatar size="27"> | 202 | <v-avatar size="27"> |
| 203 | <img src="/static/icon/search.png" alt="icon" /> | 203 | <img src="/static/icon/search.png" alt="icon" /> |
| 204 | </v-avatar> | 204 | </v-avatar> |
| 205 | </v-btn> | 205 | </v-btn> |
| 206 | </v-card-title> | 206 | </v-card-title> |
| 207 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 207 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 208 | <v-layout> | 208 | <v-layout> |
| 209 | <v-text-field | 209 | <v-text-field |
| 210 | autofocus | 210 | autofocus |
| 211 | v-model="search" | 211 | v-model="search" |
| 212 | label="Search" | 212 | label="Search" |
| 213 | prepend-inner-icon="search" | 213 | prepend-inner-icon="search" |
| 214 | color="primary" | 214 | color="primary" |
| 215 | ></v-text-field> | 215 | ></v-text-field> |
| 216 | <v-icon @click="closeSearch" color="error">close</v-icon> | 216 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 217 | </v-layout> | 217 | </v-layout> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | </v-toolbar> | 219 | </v-toolbar> |
| 220 | <v-data-table | 220 | <v-data-table |
| 221 | :headers="headers" | 221 | :headers="headers" |
| 222 | :items="desserts" | 222 | :items="desserts" |
| 223 | :pagination.sync="pagination" | 223 | :pagination.sync="pagination" |
| 224 | :search="search" | 224 | :search="search" |
| 225 | > | 225 | > |
| 226 | <template slot="items" slot-scope="props"> | 226 | <template slot="items" slot-scope="props"> |
| 227 | <tr class="tr"> | 227 | <tr class="tr"> |
| 228 | <td class="td td-row">{{ props.index + 1}}</td> | 228 | <td class="td td-row">{{ props.index + 1}}</td> |
| 229 | <td class="td td-row text-xs-center"> | 229 | <td class="td td-row text-xs-center"> |
| 230 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> | 230 | <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2"> |
| 231 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> | 231 | <img :src="image.imageUrl" alt="newsImage" width="40" height="40" /> |
| 232 | </span> | 232 | </span> |
| 233 | <img | 233 | <img |
| 234 | src="/static/icon/user.png" | 234 | src="/static/icon/user.png" |
| 235 | v-if="props.item.newsImageUrl == ''" | 235 | v-if="props.item.newsImageUrl == ''" |
| 236 | width="40" | 236 | width="40" |
| 237 | alt="News" | 237 | alt="News" |
| 238 | /> | 238 | /> |
| 239 | </td> | 239 | </td> |
| 240 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 240 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 241 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 241 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 242 | 242 | ||
| 243 | <td class="td td-row text-xs-center"> | 243 | <td class="td td-row text-xs-center"> |
| 244 | <span> | 244 | <span> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:25px; height:25px; " | 248 | style="cursor:pointer; width:25px; height:25px; " |
| 249 | class="mr-3" | 249 | class="mr-3" |
| 250 | @click="profile(props.item)" | 250 | @click="profile(props.item)" |
| 251 | src="/static/icon/view.png" | 251 | src="/static/icon/view.png" |
| 252 | /> | 252 | /> |
| 253 | <span>View</span> | 253 | <span>View</span> |
| 254 | </v-tooltip> | 254 | </v-tooltip> |
| 255 | <v-tooltip top> | 255 | <v-tooltip top> |
| 256 | <img | 256 | <img |
| 257 | slot="activator" | 257 | slot="activator" |
| 258 | style="cursor:pointer; width:20px; height:18px; " | 258 | style="cursor:pointer; width:20px; height:18px; " |
| 259 | class="mr-3" | 259 | class="mr-3" |
| 260 | @click="editItem(props.item)" | 260 | @click="editItem(props.item)" |
| 261 | src="/static/icon/edit.png" | 261 | src="/static/icon/edit.png" |
| 262 | /> | 262 | /> |
| 263 | <span>Edit</span> | 263 | <span>Edit</span> |
| 264 | </v-tooltip> | 264 | </v-tooltip> |
| 265 | <v-tooltip top> | 265 | <v-tooltip top> |
| 266 | <img | 266 | <img |
| 267 | slot="activator" | 267 | slot="activator" |
| 268 | style="cursor:pointer; width:20px; height:20px; " | 268 | style="cursor:pointer; width:20px; height:20px; " |
| 269 | @click="deleteItem(props.item)" | 269 | @click="deleteItem(props.item)" |
| 270 | src="/static/icon/delete.png" | 270 | src="/static/icon/delete.png" |
| 271 | /> | 271 | /> |
| 272 | <span>Delete</span> | 272 | <span>Delete</span> |
| 273 | </v-tooltip> | 273 | </v-tooltip> |
| 274 | </span> | 274 | </span> |
| 275 | </td> | 275 | </td> |
| 276 | </tr> | 276 | </tr> |
| 277 | </template> | 277 | </template> |
| 278 | <v-alert | 278 | <v-alert |
| 279 | slot="no-results" | 279 | slot="no-results" |
| 280 | :value="true" | 280 | :value="true" |
| 281 | color="error" | 281 | color="error" |
| 282 | icon="warning" | 282 | icon="warning" |
| 283 | >Your search for "{{ search }}" found no results.</v-alert> | 283 | >Your search for "{{ search }}" found no results.</v-alert> |
| 284 | </v-data-table> | 284 | </v-data-table> |
| 285 | <!-- ****** ADD NEWS ****** --> | 285 | <!-- ****** ADD NEWS ****** --> |
| 286 | <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog"> | 286 | <v-dialog v-model="addNewsDialog" max-width="600px" v-if="addNewsDialog" persistent> |
| 287 | <v-card flat class="card-style pa-2" dark> | 287 | <v-card flat class="card-style pa-2" dark> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs12> | 289 | <v-flex xs12> |
| 290 | <label class="title text-xs-center">Add News</label> | 290 | <label class="title text-xs-center">Add News</label> |
| 291 | <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon> | 291 | <v-icon size="24" class="right" @click="closeAddNewsModel">cancel</v-icon> |
| 292 | </v-flex> | 292 | </v-flex> |
| 293 | </v-layout> | 293 | </v-layout> |
| 294 | <v-form ref="form" v-model="valid" lazy-validation> | 294 | <v-form ref="form" v-model="valid" lazy-validation> |
| 295 | <v-container fluid> | 295 | <v-container fluid> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 297 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 298 | <input | 298 | <input |
| 299 | type="file" | 299 | type="file" |
| 300 | style="display: none" | 300 | style="display: none" |
| 301 | ref="image" | 301 | ref="image" |
| 302 | accept="image/*" | 302 | accept="image/*" |
| 303 | multiple | 303 | multiple |
| 304 | @change="onFilePicked" | 304 | @change="onFilePicked" |
| 305 | /> | 305 | /> |
| 306 | <v-layout justify-center> | 306 | <v-layout justify-center> |
| 307 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> | 307 | <v-flex v-for="(file,index) in files" :key="index" v-if="files"> |
| 308 | <img :src="file" height="100" width="100;" class="imgNews" /> | 308 | <img :src="file" height="100" width="100;" class="imgNews" /> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | </v-layout> | 310 | </v-layout> |
| 311 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> | 311 | <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80" /> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 sm4 class="pt-4 subheading"> | 316 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 317 | <label class="right">Title:</label> | 317 | <label class="right">Title:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex sm6 xs8 class="ml-3"> | 319 | <v-flex sm6 xs8 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="addNews.title" | 321 | v-model="addNews.title" |
| 322 | placeholder="fill your Title" | 322 | placeholder="fill your Title" |
| 323 | name="name" | 323 | name="name" |
| 324 | type="text" | 324 | type="text" |
| 325 | :rules="titleRules" | 325 | :rules="titleRules" |
| 326 | required | 326 | required |
| 327 | ></v-text-field> | 327 | ></v-text-field> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | <v-flex xs12> | 331 | <v-flex xs12> |
| 332 | <v-layout> | 332 | <v-layout> |
| 333 | <v-flex xs4 class="pt-4 subheading"> | 333 | <v-flex xs4 class="pt-4 subheading"> |
| 334 | <label class="right">Description:</label> | 334 | <label class="right">Description:</label> |
| 335 | </v-flex> | 335 | </v-flex> |
| 336 | <v-flex sm6 xs8 class="ml-3"> | 336 | <v-flex sm6 xs8 class="ml-3"> |
| 337 | <v-text-field | 337 | <v-text-field |
| 338 | placeholder="fill your Description" | 338 | placeholder="fill your Description" |
| 339 | :rules="descriptionRules" | 339 | :rules="descriptionRules" |
| 340 | v-model="addNews.description" | 340 | v-model="addNews.description" |
| 341 | type="text" | 341 | type="text" |
| 342 | name="email" | 342 | name="email" |
| 343 | required | 343 | required |
| 344 | ></v-text-field> | 344 | ></v-text-field> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | </v-flex> | 347 | </v-flex> |
| 348 | <v-flex xs12> | 348 | <v-flex xs12> |
| 349 | <v-layout> | 349 | <v-layout> |
| 350 | <v-flex xs4 class="pt-4 subheading"> | 350 | <v-flex xs4 class="pt-4 subheading"> |
| 351 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 351 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 352 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 353 | </v-flex> | 353 | </v-flex> |
| 354 | <v-flex xs8 sm6 class="ml-3"> | 354 | <v-flex xs8 sm6 class="ml-3"> |
| 355 | <v-text-field | 355 | <v-text-field |
| 356 | label="Select Image" | 356 | label="Select Image" |
| 357 | @click="pickFile" | 357 | @click="pickFile" |
| 358 | v-model="imageName" | 358 | v-model="imageName" |
| 359 | append-icon="attach_file" | 359 | append-icon="attach_file" |
| 360 | multiple | 360 | multiple |
| 361 | ></v-text-field> | 361 | ></v-text-field> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | <v-layout> | 365 | <v-layout> |
| 366 | <v-flex xs11> | 366 | <v-flex xs11> |
| 367 | <v-layout> | 367 | <v-layout> |
| 368 | <v-spacer></v-spacer> | 368 | <v-spacer></v-spacer> |
| 369 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 369 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 370 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 370 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 371 | </v-layout> | 371 | </v-layout> |
| 372 | </v-flex> | 372 | </v-flex> |
| 373 | </v-layout> | 373 | </v-layout> |
| 374 | </v-container> | 374 | </v-container> |
| 375 | </v-form> | 375 | </v-form> |
| 376 | </v-card> | 376 | </v-card> |
| 377 | </v-dialog> | 377 | </v-dialog> |
| 378 | <div class="loader" v-if="showLoader"> | 378 | <div class="loader" v-if="showLoader"> |
| 379 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 379 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 380 | </div> | 380 | </div> |
| 381 | </v-container> | 381 | </v-container> |
| 382 | </template> | 382 | </template> |
| 383 | 383 | ||
| 384 | <script> | 384 | <script> |
| 385 | import http from "@/Services/http.js"; | 385 | import http from "@/Services/http.js"; |
| 386 | 386 | ||
| 387 | export default { | 387 | export default { |
| 388 | data: () => ({ | 388 | data: () => ({ |
| 389 | snackbar: false, | 389 | snackbar: false, |
| 390 | y: "top", | 390 | y: "top", |
| 391 | x: "right", | 391 | x: "right", |
| 392 | mode: "", | 392 | mode: "", |
| 393 | timeout: 5000, | 393 | timeout: 5000, |
| 394 | color: "", | 394 | color: "", |
| 395 | text: "", | 395 | text: "", |
| 396 | loading: false, | 396 | loading: false, |
| 397 | date: null, | 397 | date: null, |
| 398 | search: "", | 398 | search: "", |
| 399 | show: true, | 399 | show: true, |
| 400 | showSearch: false, | 400 | showSearch: false, |
| 401 | showLoader: false, | 401 | showLoader: false, |
| 402 | editNewsDialog: false, | 402 | editNewsDialog: false, |
| 403 | addNewsDialog: false, | 403 | addNewsDialog: false, |
| 404 | dialog1: false, | 404 | dialog1: false, |
| 405 | valid: true, | 405 | valid: true, |
| 406 | addclass: [], | 406 | addclass: [], |
| 407 | addSection: [], | 407 | addSection: [], |
| 408 | pagination: { | 408 | pagination: { |
| 409 | rowsPerPage: 10, | 409 | rowsPerPage: 10, |
| 410 | }, | 410 | }, |
| 411 | imageName: "", | 411 | imageName: "", |
| 412 | imageUrl: "", | 412 | imageUrl: "", |
| 413 | imageFile: "", | 413 | imageFile: "", |
| 414 | image: [], | 414 | image: [], |
| 415 | upload: "", | 415 | upload: "", |
| 416 | files: [], | 416 | files: [], |
| 417 | titleRules: [(v) => !!v || " Tilte is required"], | 417 | titleRules: [(v) => !!v || " Tilte is required"], |
| 418 | descriptionRules: [(v) => !!v || " Description is required"], | 418 | descriptionRules: [(v) => !!v || " Description is required"], |
| 419 | headers: [ | 419 | headers: [ |
| 420 | { | 420 | { |
| 421 | align: "justify-center", | 421 | align: "justify-center", |
| 422 | text: "No", | 422 | text: "No", |
| 423 | sortable: false, | 423 | sortable: false, |
| 424 | value: "No", | 424 | value: "No", |
| 425 | }, | 425 | }, |
| 426 | { text: "Image", vaue: "image", sortable: false, align: "center" }, | 426 | { text: "Image", vaue: "image", sortable: false, align: "center" }, |
| 427 | { text: "Title", value: "title", sortable: false, align: "center" }, | 427 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 428 | { | 428 | { |
| 429 | text: "Description", | 429 | text: "Description", |
| 430 | value: "description", | 430 | value: "description", |
| 431 | sortable: false, | 431 | sortable: false, |
| 432 | align: "center", | 432 | align: "center", |
| 433 | }, | 433 | }, |
| 434 | { text: "Action", value: "", sortable: false, align: "center" }, | 434 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 435 | ], | 435 | ], |
| 436 | desserts: [], | 436 | desserts: [], |
| 437 | editedIndex: -1, | 437 | editedIndex: -1, |
| 438 | addNews: { | 438 | addNews: { |
| 439 | title: "", | 439 | title: "", |
| 440 | description: "", | 440 | description: "", |
| 441 | }, | 441 | }, |
| 442 | editedItem: { | 442 | editedItem: { |
| 443 | title: "", | 443 | title: "", |
| 444 | description: "", | 444 | description: "", |
| 445 | }, | 445 | }, |
| 446 | defaultItem: { | 446 | defaultItem: { |
| 447 | title: "", | 447 | title: "", |
| 448 | description: "", | 448 | description: "", |
| 449 | }, | 449 | }, |
| 450 | }), | 450 | }), |
| 451 | watch: { | 451 | watch: { |
| 452 | addNewsDialog: function (val) { | 452 | addNewsDialog: function (val) { |
| 453 | if (!val) { | 453 | if (!val) { |
| 454 | this.addNews = []; | 454 | this.addNews = []; |
| 455 | this.imageName = ""; | 455 | this.imageName = ""; |
| 456 | this.imageFile = ""; | 456 | this.imageFile = ""; |
| 457 | this.imageUrl = ""; | 457 | this.imageUrl = ""; |
| 458 | this.files = []; | 458 | this.files = []; |
| 459 | } | 459 | } |
| 460 | }, | 460 | }, |
| 461 | }, | 461 | }, |
| 462 | methods: { | 462 | methods: { |
| 463 | getSections(_id) { | 463 | getSections(_id) { |
| 464 | var token = this.$store.state.token; | 464 | var token = this.$store.state.token; |
| 465 | http() | 465 | http() |
| 466 | .get( | 466 | .get( |
| 467 | "/getSectionsList", | 467 | "/getSectionsList", |
| 468 | { params: { classId: _id } }, | 468 | { params: { classId: _id } }, |
| 469 | { | 469 | { |
| 470 | headers: { Authorization: "Bearer " + token }, | 470 | headers: { Authorization: "Bearer " + token }, |
| 471 | } | 471 | } |
| 472 | ) | 472 | ) |
| 473 | .then((response) => { | 473 | .then((response) => { |
| 474 | this.addSection = response.data.data; | 474 | this.addSection = response.data.data; |
| 475 | }) | 475 | }) |
| 476 | .catch((err) => { | 476 | .catch((err) => { |
| 477 | console.log("err====>", err); | 477 | console.log("err====>", err); |
| 478 | }); | 478 | }); |
| 479 | }, | 479 | }, |
| 480 | pickFile() { | 480 | pickFile() { |
| 481 | this.$refs.image.click(); | 481 | this.$refs.image.click(); |
| 482 | }, | 482 | }, |
| 483 | onFilePicked(e) { | 483 | onFilePicked(e) { |
| 484 | // console.log(e) | 484 | // console.log(e) |
| 485 | const files = e.target.files; | 485 | const files = e.target.files; |
| 486 | /** fetch Image Name **/ | 486 | /** fetch Image Name **/ |
| 487 | if (files[0] !== undefined) { | 487 | if (files[0] !== undefined) { |
| 488 | this.imageName = files[0].name; | 488 | this.imageName = files[0].name; |
| 489 | if (this.imageName.lastIndexOf(".") <= 0) { | 489 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 490 | return; | 490 | return; |
| 491 | } | 491 | } |
| 492 | this.files = []; | 492 | this.files = []; |
| 493 | // console.log("files", this.files); | 493 | // console.log("files", this.files); |
| 494 | /** Select many image and showing many image add to news card **/ | 494 | /** Select many image and showing many image add to news card **/ |
| 495 | const test = Array.from(files).forEach((file, idx) => { | 495 | const test = Array.from(files).forEach((file, idx) => { |
| 496 | const fr = new FileReader(); | 496 | const fr = new FileReader(); |
| 497 | const getResult = new Promise((resolve) => { | 497 | const getResult = new Promise((resolve) => { |
| 498 | fr.onload = (e) => { | 498 | fr.onload = (e) => { |
| 499 | this.files.push( | 499 | this.files.push( |
| 500 | // id: idx, | 500 | // id: idx, |
| 501 | e.target.result | 501 | e.target.result |
| 502 | ); | 502 | ); |
| 503 | }; | 503 | }; |
| 504 | }); | 504 | }); |
| 505 | fr.readAsDataURL(file); | 505 | fr.readAsDataURL(file); |
| 506 | return getResult.then((file) => { | 506 | return getResult.then((file) => { |
| 507 | return file; | 507 | return file; |
| 508 | }); | 508 | }); |
| 509 | }); | 509 | }); |
| 510 | const fr = new FileReader(); | 510 | const fr = new FileReader(); |
| 511 | fr.readAsDataURL(files[0]); | 511 | fr.readAsDataURL(files[0]); |
| 512 | fr.addEventListener("load", () => { | 512 | fr.addEventListener("load", () => { |
| 513 | this.imageFile = files; // this is an image file that can be sent to server... | 513 | this.imageFile = files; // this is an image file that can be sent to server... |
| 514 | // console.log("uploadImage=======>", this.imageFile ); | 514 | // console.log("uploadImage=======>", this.imageFile ); |
| 515 | }); | 515 | }); |
| 516 | } else { | 516 | } else { |
| 517 | this.imageName = ""; | 517 | this.imageName = ""; |
| 518 | this.imageFile = ""; | 518 | this.imageFile = ""; |
| 519 | this.imageUrl = ""; | 519 | this.imageUrl = ""; |
| 520 | } | 520 | } |
| 521 | }, | 521 | }, |
| 522 | getNewsList() { | 522 | getNewsList() { |
| 523 | this.showLoader = true; | 523 | this.showLoader = true; |
| 524 | var token = this.$store.state.token; | 524 | var token = this.$store.state.token; |
| 525 | http() | 525 | http() |
| 526 | .get("/getNewsList", { | 526 | .get("/getNewsList", { |
| 527 | headers: { Authorization: "Bearer " + token }, | 527 | headers: { Authorization: "Bearer " + token }, |
| 528 | }) | 528 | }) |
| 529 | .then((response) => { | 529 | .then((response) => { |
| 530 | this.desserts = response.data.data; | 530 | this.desserts = response.data.data; |
| 531 | this.showLoader = false; | 531 | this.showLoader = false; |
| 532 | }) | 532 | }) |
| 533 | .catch((error) => { | 533 | .catch((error) => { |
| 534 | this.showLoader = false; | 534 | this.showLoader = false; |
| 535 | if (error.response.status === 401) { | 535 | if (error.response.status === 401) { |
| 536 | this.$router.replace({ path: "/" }); | 536 | this.$router.replace({ path: "/" }); |
| 537 | this.$store.dispatch("setToken", null); | 537 | this.$store.dispatch("setToken", null); |
| 538 | this.$store.dispatch("Id", null); | 538 | this.$store.dispatch("Id", null); |
| 539 | } | 539 | } |
| 540 | }); | 540 | }); |
| 541 | }, | 541 | }, |
| 542 | editItem(item) { | 542 | editItem(item) { |
| 543 | this.files = []; | 543 | this.files = []; |
| 544 | this.editedIndex = this.desserts.indexOf(item); | 544 | this.editedIndex = this.desserts.indexOf(item); |
| 545 | this.editedItem = Object.assign({}, item); | 545 | this.editedItem = Object.assign({}, item); |
| 546 | this.editNewsDialog = true; | 546 | this.editNewsDialog = true; |
| 547 | }, | 547 | }, |
| 548 | profile(item) { | 548 | profile(item) { |
| 549 | this.editedIndex = this.desserts.indexOf(item); | 549 | this.editedIndex = this.desserts.indexOf(item); |
| 550 | this.editedItem = Object.assign({}, item); | 550 | this.editedItem = Object.assign({}, item); |
| 551 | this.dialog1 = true; | 551 | this.dialog1 = true; |
| 552 | }, | 552 | }, |
| 553 | deleteItem(item) { | 553 | deleteItem(item) { |
| 554 | let deleteNews = { | 554 | let deleteNews = { |
| 555 | newsId: item._id, | 555 | newsId: item._id, |
| 556 | }; | 556 | }; |
| 557 | http() | 557 | http() |
| 558 | .delete( | 558 | .delete( |
| 559 | "/deleteNews", | 559 | "/deleteNews", |
| 560 | confirm("Are you sure you want to delete this?") && { | 560 | confirm("Are you sure you want to delete this?") && { |
| 561 | params: deleteNews, | 561 | params: deleteNews, |
| 562 | } | 562 | } |
| 563 | ) | 563 | ) |
| 564 | .then((response) => { | 564 | .then((response) => { |
| 565 | this.snackbar = true; | 565 | this.snackbar = true; |
| 566 | this.text = response.data.message; | 566 | this.text = response.data.message; |
| 567 | this.color = "green"; | 567 | this.color = "green"; |
| 568 | this.getNewsList(); | 568 | this.getNewsList(); |
| 569 | }) | 569 | }) |
| 570 | .catch((error) => { | 570 | .catch((error) => { |
| 571 | this.snackbar = true; | 571 | this.snackbar = true; |
| 572 | this.color = "error"; | 572 | this.color = "error"; |
| 573 | this.text = error.response.data.message; | 573 | this.text = error.response.data.message; |
| 574 | }); | 574 | }); |
| 575 | }, | 575 | }, |
| 576 | deleteImage(imageId, newsId) { | 576 | deleteImage(imageId, newsId) { |
| 577 | let deleteImages = { | 577 | let deleteImages = { |
| 578 | newsId: newsId, | 578 | newsId: newsId, |
| 579 | imageId: imageId, | 579 | imageId: imageId, |
| 580 | }; | 580 | }; |
| 581 | http() | 581 | http() |
| 582 | .put("/deleteImages", deleteImages) | 582 | .put("/deleteImages", deleteImages) |
| 583 | .then((response) => { | 583 | .then((response) => { |
| 584 | this.snackbar = true; | 584 | this.snackbar = true; |
| 585 | this.text = response.data.message; | 585 | this.text = response.data.message; |
| 586 | this.color = "green"; | 586 | this.color = "green"; |
| 587 | this.close(); | 587 | this.close(); |
| 588 | }) | 588 | }) |
| 589 | .catch((error) => { | 589 | .catch((error) => { |
| 590 | this.snackbar = true; | 590 | this.snackbar = true; |
| 591 | this.color = "error"; | 591 | this.color = "error"; |
| 592 | this.text = error.response.data.message; | 592 | this.text = error.response.data.message; |
| 593 | }); | 593 | }); |
| 594 | }, | 594 | }, |
| 595 | close() { | 595 | close() { |
| 596 | this.dialog = false; | 596 | this.dialog = false; |
| 597 | }, | 597 | }, |
| 598 | close1() { | 598 | close1() { |
| 599 | this.dialog1 = false; | 599 | this.dialog1 = false; |
| 600 | }, | 600 | }, |
| 601 | closeAddNewsModel() { | 601 | closeAddNewsModel() { |
| 602 | this.addNewsDialog = false; | 602 | this.addNewsDialog = false; |
| 603 | this.addNews = []; | 603 | this.addNews = []; |
| 604 | this.imageName = ""; | 604 | this.imageName = ""; |
| 605 | this.imageFile = ""; | 605 | this.imageFile = ""; |
| 606 | this.imageUrl = ""; | 606 | this.imageUrl = ""; |
| 607 | this.files = []; | 607 | this.files = []; |
| 608 | }, | 608 | }, |
| 609 | submit() { | 609 | submit() { |
| 610 | if (this.$refs.form.validate()) { | 610 | if (this.$refs.form.validate()) { |
| 611 | let newsData = { | 611 | let newsData = { |
| 612 | title: this.addNews.title, | 612 | title: this.addNews.title, |
| 613 | description: this.addNews.description, | 613 | description: this.addNews.description, |
| 614 | }; | 614 | }; |
| 615 | if (this.files) { | 615 | if (this.files) { |
| 616 | var ary = []; | 616 | var ary = []; |
| 617 | var imageData = []; | 617 | var imageData = []; |
| 618 | ary = this.files; | 618 | ary = this.files; |
| 619 | for (let i = 0; i < ary.length; i++) { | 619 | for (let i = 0; i < ary.length; i++) { |
| 620 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 620 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 621 | imageData.push(imageUrl); | 621 | imageData.push(imageUrl); |
| 622 | newsData.upload = imageData; | 622 | newsData.upload = imageData; |
| 623 | } | 623 | } |
| 624 | } | 624 | } |
| 625 | this.loading = true; | 625 | this.loading = true; |
| 626 | http() | 626 | http() |
| 627 | .post("/createNews", newsData) | 627 | .post("/createNews", newsData) |
| 628 | .then((response) => { | 628 | .then((response) => { |
| 629 | this.files = []; | 629 | this.files = []; |
| 630 | this.snackbar = true; | 630 | this.snackbar = true; |
| 631 | this.text = response.data.message; | 631 | this.text = response.data.message; |
| 632 | this.getNewsList(); | 632 | this.getNewsList(); |
| 633 | this.color = "green"; | 633 | this.color = "green"; |
| 634 | this.addNewsDialog = false; | 634 | this.addNewsDialog = false; |
| 635 | this.loading = false; | 635 | this.loading = false; |
| 636 | this.clear(); | 636 | this.clear(); |
| 637 | }) | 637 | }) |
| 638 | .catch((error) => { | 638 | .catch((error) => { |
| 639 | this.snackbar = true; | 639 | this.snackbar = true; |
| 640 | this.text = error.response.data.message; | 640 | this.text = error.response.data.message; |
| 641 | this.color = "error"; | 641 | this.color = "error"; |
| 642 | }); | 642 | }); |
| 643 | } | 643 | } |
| 644 | }, | 644 | }, |
| 645 | clear() { | 645 | clear() { |
| 646 | this.$refs.form.reset(); | 646 | this.$refs.form.reset(); |
| 647 | this.files = []; | 647 | this.files = []; |
| 648 | }, | 648 | }, |
| 649 | save() { | 649 | save() { |
| 650 | let editNews = { | 650 | let editNews = { |
| 651 | title: this.editedItem.title, | 651 | title: this.editedItem.title, |
| 652 | description: this.editedItem.description, | 652 | description: this.editedItem.description, |
| 653 | newsId: this.editedItem._id, | 653 | newsId: this.editedItem._id, |
| 654 | }; | 654 | }; |
| 655 | if (this.files) { | 655 | if (this.files) { |
| 656 | var ary = []; | 656 | var ary = []; |
| 657 | var imageData = []; | 657 | var imageData = []; |
| 658 | ary = this.files; | 658 | ary = this.files; |
| 659 | for (let i = 0; i < ary.length; i++) { | 659 | for (let i = 0; i < ary.length; i++) { |
| 660 | const [baseUrl, imageUrl] = ary[i].split(/,/); | 660 | const [baseUrl, imageUrl] = ary[i].split(/,/); |
| 661 | imageData.push(imageUrl); | 661 | imageData.push(imageUrl); |
| 662 | editNews.upload = imageData; | 662 | editNews.upload = imageData; |
| 663 | } | 663 | } |
| 664 | } | 664 | } |
| 665 | http() | 665 | http() |
| 666 | .put("/updateNews", editNews) | 666 | .put("/updateNews", editNews) |
| 667 | .then((response) => { | 667 | .then((response) => { |
| 668 | this.snackbar = true; | 668 | this.snackbar = true; |
| 669 | this.text = "Successfully updated News"; | 669 | this.text = "Successfully updated News"; |
| 670 | this.color = "green"; | 670 | this.color = "green"; |
| 671 | this.editNewsDialog = false; | 671 | this.editNewsDialog = false; |
| 672 | this.getNewsList(); | 672 | this.getNewsList(); |
| 673 | this.close(); | 673 | this.close(); |
| 674 | }) | 674 | }) |
| 675 | .catch((error) => { | 675 | .catch((error) => { |
| 676 | this.snackbar = true; | 676 | this.snackbar = true; |
| 677 | this.color = "error"; | 677 | this.color = "error"; |
| 678 | this.text = error.response.data.message; | 678 | this.text = error.response.data.message; |
| 679 | }); | 679 | }); |
| 680 | }, | 680 | }, |
| 681 | displaySearch() { | 681 | displaySearch() { |
| 682 | (this.show = false), (this.showSearch = true); | 682 | (this.show = false), (this.showSearch = true); |
| 683 | }, | 683 | }, |
| 684 | closeSearch() { | 684 | closeSearch() { |
| 685 | this.showSearch = false; | 685 | this.showSearch = false; |
| 686 | this.show = true; | 686 | this.show = true; |
| 687 | this.search = ""; | 687 | this.search = ""; |
| 688 | }, | 688 | }, |
| 689 | }, | 689 | }, |
| 690 | mounted() { | 690 | mounted() { |
| 691 | this.getNewsList(); | 691 | this.getNewsList(); |
| 692 | this.editItem; | 692 | this.editItem; |
| 693 | }, | 693 | }, |
| 694 | }; | 694 | }; |
| 695 | </script> | 695 | </script> |
src/pages/NoticeBoard/noticeBoard.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Notice Board ****** --> | 3 | <!-- ****** Edit Notice Board ****** --> |
| 4 | <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable> | 4 | <v-dialog v-model="editNoticeBoardDialog" max-width="500px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Notice Board</label> | 8 | <label class="title text-xs-center">Edit Notice Board</label> |
| 9 | <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editNoticeBoardDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 15 | <img | 15 | <img |
| 16 | src="/static/icon/user.png" | 16 | src="/static/icon/user.png" |
| 17 | v-if="!editedItem.eventImageUrl && !imageUrl" | 17 | v-if="!editedItem.eventImageUrl && !imageUrl" |
| 18 | width="100px" | 18 | width="100px" |
| 19 | /> | 19 | /> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.eventImageUrl" | 21 | :src="editedItem.eventImageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | v-else-if="editedItem.eventImageUrl && !imageUrl" | 23 | v-else-if="editedItem.eventImageUrl && !imageUrl" |
| 24 | width="150px" | 24 | width="150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="imageUrl" | 27 | v-if="imageUrl" |
| 28 | :src="imageUrl" | 28 | :src="imageUrl" |
| 29 | height="150" | 29 | height="150" |
| 30 | style="border-radius:50%; width:150px" | 30 | style="border-radius:50%; width:150px" |
| 31 | /> | 31 | /> |
| 32 | <input | 32 | <input |
| 33 | type="file" | 33 | type="file" |
| 34 | style="display: none" | 34 | style="display: none" |
| 35 | ref="image" | 35 | ref="image" |
| 36 | accept="image/*" | 36 | accept="image/*" |
| 37 | @change="onFilePicked" | 37 | @change="onFilePicked" |
| 38 | /> | 38 | /> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | <v-layout wrap> | 41 | <v-layout wrap> |
| 42 | <v-flex xs12> | 42 | <v-flex xs12> |
| 43 | <v-layout> | 43 | <v-layout> |
| 44 | <v-flex xs4 class="pt-4 subheading"> | 44 | <v-flex xs4 class="pt-4 subheading"> |
| 45 | <label class="right">Title:</label> | 45 | <label class="right">Title:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.title" | 49 | v-model="editedItem.title" |
| 50 | placeholder="fill your Title" | 50 | placeholder="fill your Title" |
| 51 | name="name" | 51 | name="name" |
| 52 | type="text" | 52 | type="text" |
| 53 | required | 53 | required |
| 54 | ></v-text-field> | 54 | ></v-text-field> |
| 55 | </v-flex> | 55 | </v-flex> |
| 56 | </v-layout> | 56 | </v-layout> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | <v-flex xs12> | 58 | <v-flex xs12> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs4 class="pt-4 subheading"> | 60 | <v-flex xs4 class="pt-4 subheading"> |
| 61 | <label class="right">Description:</label> | 61 | <label class="right">Description:</label> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | <v-flex xs7 class="ml-3"> | 63 | <v-flex xs7 class="ml-3"> |
| 64 | <v-text-field | 64 | <v-text-field |
| 65 | placeholder="fill your Description" | 65 | placeholder="fill your Description" |
| 66 | v-model="editedItem.description" | 66 | v-model="editedItem.description" |
| 67 | type="text" | 67 | type="text" |
| 68 | name="email" | 68 | name="email" |
| 69 | required | 69 | required |
| 70 | ></v-text-field> | 70 | ></v-text-field> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | </v-flex> | 73 | </v-flex> |
| 74 | <v-flex xs12> | 74 | <v-flex xs12> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs4 class="pt-4 subheading"> | 76 | <v-flex xs4 class="pt-4 subheading"> |
| 77 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 77 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 78 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 78 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs7 class="ml-3"> | 80 | <v-flex xs7 class="ml-3"> |
| 81 | <v-text-field | 81 | <v-text-field |
| 82 | label="Select Image" | 82 | label="Select Image" |
| 83 | @click="pickFile" | 83 | @click="pickFile" |
| 84 | v-model="imageName" | 84 | v-model="imageName" |
| 85 | append-icon="attach_file" | 85 | append-icon="attach_file" |
| 86 | ></v-text-field> | 86 | ></v-text-field> |
| 87 | <input | 87 | <input |
| 88 | type="file" | 88 | type="file" |
| 89 | style="display: none" | 89 | style="display: none" |
| 90 | ref="image" | 90 | ref="image" |
| 91 | accept="image/*" | 91 | accept="image/*" |
| 92 | @change="onFilePicked" | 92 | @change="onFilePicked" |
| 93 | /> | 93 | /> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs12> | 97 | <v-flex xs12> |
| 98 | <v-card-actions> | 98 | <v-card-actions> |
| 99 | <v-spacer></v-spacer> | 99 | <v-spacer></v-spacer> |
| 100 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 100 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 101 | </v-card-actions> | 101 | </v-card-actions> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | </v-layout> | 103 | </v-layout> |
| 104 | </v-card-text> | 104 | </v-card-text> |
| 105 | </v-card> | 105 | </v-card> |
| 106 | </v-dialog> | 106 | </v-dialog> |
| 107 | 107 | ||
| 108 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 108 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 109 | 109 | ||
| 110 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable> | 110 | <v-dialog v-model="viewNoticeBoardDialog" max-width="600px" scrollable persistent> |
| 111 | <v-card flat class="card-style pa-3" dark> | 111 | <v-card flat class="card-style pa-3" dark> |
| 112 | <v-layout> | 112 | <v-layout> |
| 113 | <v-flex xs12> | 113 | <v-flex xs12> |
| 114 | <label class="title text-xs-center">View Notice Board</label> | 114 | <label class="title text-xs-center">View Notice Board</label> |
| 115 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> | 115 | <v-icon size="24" class="right" @click="viewNoticeBoardDialog = false">cancel</v-icon> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | </v-layout> | 117 | </v-layout> |
| 118 | <v-card-text> | 118 | <v-card-text> |
| 119 | <v-layout> | 119 | <v-layout> |
| 120 | <v-flex align-center justify-center layout text-xs-center> | 120 | <v-flex align-center justify-center layout text-xs-center> |
| 121 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> | 121 | <img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="80" /> |
| 122 | <img | 122 | <img |
| 123 | :src="editedItem.eventImageUrl" | 123 | :src="editedItem.eventImageUrl" |
| 124 | v-else-if="editedItem.eventImageUrl" | 124 | v-else-if="editedItem.eventImageUrl" |
| 125 | class="img" | 125 | class="img" |
| 126 | width="200" | 126 | width="200" |
| 127 | /> | 127 | /> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | <v-container grid-list-md> | 130 | <v-container grid-list-md> |
| 131 | <v-layout wrap> | 131 | <v-layout wrap> |
| 132 | <v-flex> | 132 | <v-flex> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs5 sm6> | 134 | <v-flex xs5 sm6> |
| 135 | <h5 class="right my-1"> | 135 | <h5 class="right my-1"> |
| 136 | <b>Title:</b> | 136 | <b>Title:</b> |
| 137 | </h5> | 137 | </h5> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-flex sm6 xs8> | 139 | <v-flex sm6 xs8> |
| 140 | <h5 class="my-1">{{ editedItem.title }}</h5> | 140 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | <v-layout> | 143 | <v-layout> |
| 144 | <v-flex xs5 sm6> | 144 | <v-flex xs5 sm6> |
| 145 | <h5 class="right my-1"> | 145 | <h5 class="right my-1"> |
| 146 | <b>Description:</b> | 146 | <b>Description:</b> |
| 147 | </h5> | 147 | </h5> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | <v-flex sm6 xs8> | 149 | <v-flex sm6 xs8> |
| 150 | <h5 class="my-1">{{ editedItem.description }}</h5> | 150 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-flex> | 153 | </v-flex> |
| 154 | </v-layout> | 154 | </v-layout> |
| 155 | </v-container> | 155 | </v-container> |
| 156 | </v-card-text> | 156 | </v-card-text> |
| 157 | </v-card> | 157 | </v-card> |
| 158 | </v-dialog> | 158 | </v-dialog> |
| 159 | <!-- ****** EXISTING Notice Board TABLE ****** --> | 159 | <!-- ****** EXISTING Notice Board TABLE ****** --> |
| 160 | <v-toolbar color="transparent" flat> | 160 | <v-toolbar color="transparent" flat> |
| 161 | <v-btn | 161 | <v-btn |
| 162 | fab | 162 | fab |
| 163 | dark | 163 | dark |
| 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 164 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 165 | small | 165 | small |
| 166 | @click="addNoticeBoardDialog = true" | 166 | @click="addNoticeBoardDialog = true" |
| 167 | > | 167 | > |
| 168 | <v-icon dark>add</v-icon> | 168 | <v-icon dark>add</v-icon> |
| 169 | </v-btn> | 169 | </v-btn> |
| 170 | <v-btn | 170 | <v-btn |
| 171 | round | 171 | round |
| 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 172 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 173 | dark | 173 | dark |
| 174 | @click="addNoticeBoardDialog = true" | 174 | @click="addNoticeBoardDialog = true" |
| 175 | > | 175 | > |
| 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board | 176 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notice Board |
| 177 | </v-btn> | 177 | </v-btn> |
| 178 | <v-spacer></v-spacer> | 178 | <v-spacer></v-spacer> |
| 179 | <v-card-title class="body-1" v-show="show"> | 179 | <v-card-title class="body-1" v-show="show"> |
| 180 | <v-btn icon large flat @click="displaySearch"> | 180 | <v-btn icon large flat @click="displaySearch"> |
| 181 | <v-avatar size="27"> | 181 | <v-avatar size="27"> |
| 182 | <img src="/static/icon/search.png" alt="icon" /> | 182 | <img src="/static/icon/search.png" alt="icon" /> |
| 183 | </v-avatar> | 183 | </v-avatar> |
| 184 | </v-btn> | 184 | </v-btn> |
| 185 | </v-card-title> | 185 | </v-card-title> |
| 186 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 186 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-text-field | 188 | <v-text-field |
| 189 | autofocus | 189 | autofocus |
| 190 | v-model="search" | 190 | v-model="search" |
| 191 | label="Search" | 191 | label="Search" |
| 192 | prepend-inner-icon="search" | 192 | prepend-inner-icon="search" |
| 193 | color="primary" | 193 | color="primary" |
| 194 | ></v-text-field> | 194 | ></v-text-field> |
| 195 | <v-icon @click="closeSearch" color="error">close</v-icon> | 195 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 196 | </v-layout> | 196 | </v-layout> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-toolbar> | 198 | </v-toolbar> |
| 199 | <v-data-table | 199 | <v-data-table |
| 200 | :headers="headers" | 200 | :headers="headers" |
| 201 | :items="notices" | 201 | :items="notices" |
| 202 | :pagination.sync="pagination" | 202 | :pagination.sync="pagination" |
| 203 | :search="search" | 203 | :search="search" |
| 204 | > | 204 | > |
| 205 | <template slot="items" slot-scope="props"> | 205 | <template slot="items" slot-scope="props"> |
| 206 | <tr class="tr"> | 206 | <tr class="tr"> |
| 207 | <td class="td td-row">{{ props.index + 1}}</td> | 207 | <td class="td td-row">{{ props.index + 1}}</td> |
| 208 | <td class="td td-row text-xs-center"> | 208 | <td class="td td-row text-xs-center"> |
| 209 | <v-avatar size="40"> | 209 | <v-avatar size="40"> |
| 210 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> | 210 | <img :src="props.item.eventImageUrl" v-if="props.item.eventImageUrl" /> |
| 211 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> | 211 | <img src="/static/icon/user.png" v-else-if="!props.item.eventImageUrl" /> |
| 212 | </v-avatar> | 212 | </v-avatar> |
| 213 | </td> | 213 | </td> |
| 214 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> | 214 | <td class="text-xs-center td td-row">{{ props.item.title}}</td> |
| 215 | <td class="text-xs-center td td-row"> | 215 | <td class="text-xs-center td td-row"> |
| 216 | <v-btn | 216 | <v-btn |
| 217 | class="add-button" | 217 | class="add-button" |
| 218 | @click="generatePDF2Canvas(props.item)" | 218 | @click="generatePDF2Canvas(props.item)" |
| 219 | :loading="loadingPdf" | 219 | :loading="loadingPdf" |
| 220 | dark | 220 | dark |
| 221 | >{{ props.item.fileType }}</v-btn> | 221 | >{{ props.item.fileType }}</v-btn> |
| 222 | </td> | 222 | </td> |
| 223 | <td class="text-xs-center td td-row"> | 223 | <td class="text-xs-center td td-row"> |
| 224 | <span> | 224 | <span> |
| 225 | <v-tooltip top> | 225 | <v-tooltip top> |
| 226 | <img | 226 | <img |
| 227 | slot="activator" | 227 | slot="activator" |
| 228 | style="cursor:pointer; width:25px; height:25px; " | 228 | style="cursor:pointer; width:25px; height:25px; " |
| 229 | class="mr-3" | 229 | class="mr-3" |
| 230 | @click="profile(props.item)" | 230 | @click="profile(props.item)" |
| 231 | src="/static/icon/view.png" | 231 | src="/static/icon/view.png" |
| 232 | /> | 232 | /> |
| 233 | <span>View</span> | 233 | <span>View</span> |
| 234 | </v-tooltip> | 234 | </v-tooltip> |
| 235 | <v-tooltip top> | 235 | <v-tooltip top> |
| 236 | <img | 236 | <img |
| 237 | slot="activator" | 237 | slot="activator" |
| 238 | style="cursor:pointer; width:20px; height:18px; " | 238 | style="cursor:pointer; width:20px; height:18px; " |
| 239 | class="mr-3" | 239 | class="mr-3" |
| 240 | @click="editItem(props.item)" | 240 | @click="editItem(props.item)" |
| 241 | src="/static/icon/edit.png" | 241 | src="/static/icon/edit.png" |
| 242 | /> | 242 | /> |
| 243 | <span>Edit</span> | 243 | <span>Edit</span> |
| 244 | </v-tooltip> | 244 | </v-tooltip> |
| 245 | <v-tooltip top> | 245 | <v-tooltip top> |
| 246 | <img | 246 | <img |
| 247 | slot="activator" | 247 | slot="activator" |
| 248 | style="cursor:pointer; width:20px; height:20px; " | 248 | style="cursor:pointer; width:20px; height:20px; " |
| 249 | @click="deleteItem(props.item)" | 249 | @click="deleteItem(props.item)" |
| 250 | src="/static/icon/delete.png" | 250 | src="/static/icon/delete.png" |
| 251 | /> | 251 | /> |
| 252 | <span>Delete</span> | 252 | <span>Delete</span> |
| 253 | </v-tooltip> | 253 | </v-tooltip> |
| 254 | </span> | 254 | </span> |
| 255 | </td> | 255 | </td> |
| 256 | </tr> | 256 | </tr> |
| 257 | </template> | 257 | </template> |
| 258 | <v-alert | 258 | <v-alert |
| 259 | slot="no-results" | 259 | slot="no-results" |
| 260 | :value="true" | 260 | :value="true" |
| 261 | color="error" | 261 | color="error" |
| 262 | icon="warning" | 262 | icon="warning" |
| 263 | >Your search for "{{ search }}" found no results.</v-alert> | 263 | >Your search for "{{ search }}" found no results.</v-alert> |
| 264 | </v-data-table> | 264 | </v-data-table> |
| 265 | <!-- ****** ADD Notice Board ****** --> | 265 | <!-- ****** ADD Notice Board ****** --> |
| 266 | <v-dialog v-model="addNoticeBoardDialog" max-width="600px" v-if="addNoticeBoardDialog"> | 266 | <v-dialog v-model="addNoticeBoardDialog" max-width="600px" v-if="addNoticeBoardDialog" persistent> |
| 267 | <v-card flat class="card-style pa-2" dark> | 267 | <v-card flat class="card-style pa-2" dark> |
| 268 | <v-layout> | 268 | <v-layout> |
| 269 | <v-flex xs12> | 269 | <v-flex xs12> |
| 270 | <label class="title text-xs-center">Add Notice Board</label> | 270 | <label class="title text-xs-center">Add Notice Board</label> |
| 271 | <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> | 271 | <v-icon size="24" class="right" @click="closeNoticeBoardModel">cancel</v-icon> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | </v-layout> | 273 | </v-layout> |
| 274 | <v-container fluid fill-height> | 274 | <v-container fluid fill-height> |
| 275 | <v-layout align-center> | 275 | <v-layout align-center> |
| 276 | <v-flex xs12> | 276 | <v-flex xs12> |
| 277 | <v-form ref="form" v-model="valid" lazy-validation> | 277 | <v-form ref="form" v-model="valid" lazy-validation> |
| 278 | <v-layout> | 278 | <v-layout> |
| 279 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 279 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 280 | <v-avatar size="80px" v-if="!imageUrl"> | 280 | <v-avatar size="80px" v-if="!imageUrl"> |
| 281 | <img src="/static/icon/user.png" /> | 281 | <img src="/static/icon/user.png" /> |
| 282 | </v-avatar> | 282 | </v-avatar> |
| 283 | <input | 283 | <input |
| 284 | type="file" | 284 | type="file" |
| 285 | style="display: none" | 285 | style="display: none" |
| 286 | ref="image" | 286 | ref="image" |
| 287 | accept="image/*" | 287 | accept="image/*" |
| 288 | @change="onFilePicked" | 288 | @change="onFilePicked" |
| 289 | /> | 289 | /> |
| 290 | 290 | ||
| 291 | <v-avatar size="150px" v-if="imageUrl"> | 291 | <v-avatar size="150px" v-if="imageUrl"> |
| 292 | <img :src="imageUrl" height="150" /> | 292 | <img :src="imageUrl" height="150" /> |
| 293 | </v-avatar> | 293 | </v-avatar> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | <v-layout> | 296 | <v-layout> |
| 297 | <v-flex xs4 class="pt-4 subheading"> | 297 | <v-flex xs4 class="pt-4 subheading"> |
| 298 | <label class="right">Title:</label> | 298 | <label class="right">Title:</label> |
| 299 | </v-flex> | 299 | </v-flex> |
| 300 | <v-flex xs7 class="ml-3"> | 300 | <v-flex xs7 class="ml-3"> |
| 301 | <v-text-field | 301 | <v-text-field |
| 302 | v-model="addNoticeBoard.title" | 302 | v-model="addNoticeBoard.title" |
| 303 | placeholder="fill your Title" | 303 | placeholder="fill your Title" |
| 304 | name="name" | 304 | name="name" |
| 305 | type="text" | 305 | type="text" |
| 306 | :rules="titleRules" | 306 | :rules="titleRules" |
| 307 | required | 307 | required |
| 308 | ></v-text-field> | 308 | ></v-text-field> |
| 309 | </v-flex> | 309 | </v-flex> |
| 310 | </v-layout> | 310 | </v-layout> |
| 311 | <v-layout> | 311 | <v-layout> |
| 312 | <v-flex xs4 class="pt-4 subheading"> | 312 | <v-flex xs4 class="pt-4 subheading"> |
| 313 | <label class="right">Description:</label> | 313 | <label class="right">Description:</label> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | <v-flex xs7 class="ml-3"> | 315 | <v-flex xs7 class="ml-3"> |
| 316 | <v-text-field | 316 | <v-text-field |
| 317 | v-model="addNoticeBoard.description" | 317 | v-model="addNoticeBoard.description" |
| 318 | placeholder="fill your Description" | 318 | placeholder="fill your Description" |
| 319 | name="name" | 319 | name="name" |
| 320 | type="text" | 320 | type="text" |
| 321 | :rules="descriptionRules" | 321 | :rules="descriptionRules" |
| 322 | required | 322 | required |
| 323 | ></v-text-field> | 323 | ></v-text-field> |
| 324 | </v-flex> | 324 | </v-flex> |
| 325 | </v-layout> | 325 | </v-layout> |
| 326 | <v-layout> | 326 | <v-layout> |
| 327 | <v-flex xs4 class="pt-4 subheading"> | 327 | <v-flex xs4 class="pt-4 subheading"> |
| 328 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 328 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 329 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 329 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 330 | </v-flex> | 330 | </v-flex> |
| 331 | <v-flex xs7 class="ml-3"> | 331 | <v-flex xs7 class="ml-3"> |
| 332 | <v-text-field | 332 | <v-text-field |
| 333 | label="Select Image" | 333 | label="Select Image" |
| 334 | @click="pickFile" | 334 | @click="pickFile" |
| 335 | v-model="imageName" | 335 | v-model="imageName" |
| 336 | append-icon="attach_file" | 336 | append-icon="attach_file" |
| 337 | ></v-text-field> | 337 | ></v-text-field> |
| 338 | <input | 338 | <input |
| 339 | type="file" | 339 | type="file" |
| 340 | style="display:none" | 340 | style="display:none" |
| 341 | ref="image" | 341 | ref="image" |
| 342 | accept="image/*" | 342 | accept="image/*" |
| 343 | @change="onFilePicked" | 343 | @change="onFilePicked" |
| 344 | /> | 344 | /> |
| 345 | </v-flex> | 345 | </v-flex> |
| 346 | </v-layout> | 346 | </v-layout> |
| 347 | <v-layout> | 347 | <v-layout> |
| 348 | <v-flex xs12> | 348 | <v-flex xs12> |
| 349 | <v-card-actions> | 349 | <v-card-actions> |
| 350 | <v-spacer></v-spacer> | 350 | <v-spacer></v-spacer> |
| 351 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> | 351 | <v-btn @click="clear" round dark class="clear-button">clear</v-btn> |
| 352 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 352 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 353 | </v-card-actions> | 353 | </v-card-actions> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | </v-layout> | 355 | </v-layout> |
| 356 | </v-form> | 356 | </v-form> |
| 357 | </v-flex> | 357 | </v-flex> |
| 358 | </v-layout> | 358 | </v-layout> |
| 359 | </v-container> | 359 | </v-container> |
| 360 | </v-card> | 360 | </v-card> |
| 361 | </v-dialog> | 361 | </v-dialog> |
| 362 | <v-snackbar | 362 | <v-snackbar |
| 363 | :timeout="timeout" | 363 | :timeout="timeout" |
| 364 | :top="y === 'top'" | 364 | :top="y === 'top'" |
| 365 | :right="x === 'right'" | 365 | :right="x === 'right'" |
| 366 | :vertical="mode === 'vertical'" | 366 | :vertical="mode === 'vertical'" |
| 367 | v-model="snackbar" | 367 | v-model="snackbar" |
| 368 | :color="color" | 368 | :color="color" |
| 369 | >{{ text }}</v-snackbar> | 369 | >{{ text }}</v-snackbar> |
| 370 | <div class="loader" v-if="showLoader"> | 370 | <div class="loader" v-if="showLoader"> |
| 371 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 371 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 372 | </div> | 372 | </div> |
| 373 | </v-container> | 373 | </v-container> |
| 374 | </template> | 374 | </template> |
| 375 | 375 | ||
| 376 | <script> | 376 | <script> |
| 377 | import http from "@/Services/http.js"; | 377 | import http from "@/Services/http.js"; |
| 378 | 378 | ||
| 379 | export default { | 379 | export default { |
| 380 | data: () => ({ | 380 | data: () => ({ |
| 381 | snackbar: false, | 381 | snackbar: false, |
| 382 | y: "top", | 382 | y: "top", |
| 383 | x: "right", | 383 | x: "right", |
| 384 | mode: "", | 384 | mode: "", |
| 385 | timeout: 3000, | 385 | timeout: 3000, |
| 386 | text: "", | 386 | text: "", |
| 387 | color: "", | 387 | color: "", |
| 388 | show: true, | 388 | show: true, |
| 389 | showSearch: false, | 389 | showSearch: false, |
| 390 | showLoader: false, | 390 | showLoader: false, |
| 391 | loading: false, | 391 | loading: false, |
| 392 | date: null, | 392 | date: null, |
| 393 | search: "", | 393 | search: "", |
| 394 | addNoticeBoardDialog: false, | 394 | addNoticeBoardDialog: false, |
| 395 | editNoticeBoardDialog: false, | 395 | editNoticeBoardDialog: false, |
| 396 | viewNoticeBoardDialog: false, | 396 | viewNoticeBoardDialog: false, |
| 397 | valid: true, | 397 | valid: true, |
| 398 | addclass: [], | 398 | addclass: [], |
| 399 | addSection: [], | 399 | addSection: [], |
| 400 | gender: ["Male", "Female"], | 400 | gender: ["Male", "Female"], |
| 401 | pagination: { | 401 | pagination: { |
| 402 | rowsPerPage: 10, | 402 | rowsPerPage: 10, |
| 403 | }, | 403 | }, |
| 404 | imageName: "", | 404 | imageName: "", |
| 405 | imageUrl: "", | 405 | imageUrl: "", |
| 406 | imageFile: "", | 406 | imageFile: "", |
| 407 | upload: "", | 407 | upload: "", |
| 408 | loadingPdf: false, | 408 | loadingPdf: false, |
| 409 | 409 | ||
| 410 | titleRules: [(v) => !!v || " Title is required"], | 410 | titleRules: [(v) => !!v || " Title is required"], |
| 411 | descriptionRules: [(v) => !!v || " Description is required"], | 411 | descriptionRules: [(v) => !!v || " Description is required"], |
| 412 | headers: [ | 412 | headers: [ |
| 413 | { | 413 | { |
| 414 | text: "No", | 414 | text: "No", |
| 415 | align: "", | 415 | align: "", |
| 416 | sortable: false, | 416 | sortable: false, |
| 417 | value: "No", | 417 | value: "No", |
| 418 | }, | 418 | }, |
| 419 | { | 419 | { |
| 420 | text: "Event Image", | 420 | text: "Event Image", |
| 421 | align: "center", | 421 | align: "center", |
| 422 | sortable: false, | 422 | sortable: false, |
| 423 | value: "eventImageUrl", | 423 | value: "eventImageUrl", |
| 424 | }, | 424 | }, |
| 425 | { text: "Title", value: "title", sortable: false, align: "center" }, | 425 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 426 | { | 426 | { |
| 427 | text: "File", | 427 | text: "File", |
| 428 | value: "eventImageUrl", | 428 | value: "eventImageUrl", |
| 429 | sortable: false, | 429 | sortable: false, |
| 430 | align: "center", | 430 | align: "center", |
| 431 | }, | 431 | }, |
| 432 | { text: "Action", value: "", sortable: false, align: "center" }, | 432 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 433 | ], | 433 | ], |
| 434 | notices: [], | 434 | notices: [], |
| 435 | editedIndex: -1, | 435 | editedIndex: -1, |
| 436 | addNoticeBoard: {}, | 436 | addNoticeBoard: {}, |
| 437 | editedItem: { | 437 | editedItem: { |
| 438 | title: "", | 438 | title: "", |
| 439 | description: "", | 439 | description: "", |
| 440 | }, | 440 | }, |
| 441 | }), | 441 | }), |
| 442 | watch: { | 442 | watch: { |
| 443 | addNoticeBoardDialog: function (val) { | 443 | addNoticeBoardDialog: function (val) { |
| 444 | if (!val) { | 444 | if (!val) { |
| 445 | this.addNoticeBoard = []; | 445 | this.addNoticeBoard = []; |
| 446 | this.imageName = ""; | 446 | this.imageName = ""; |
| 447 | this.imageFile = ""; | 447 | this.imageFile = ""; |
| 448 | this.imageUrl = ""; | 448 | this.imageUrl = ""; |
| 449 | } | 449 | } |
| 450 | }, | 450 | }, |
| 451 | }, | 451 | }, |
| 452 | methods: { | 452 | methods: { |
| 453 | pickFile() { | 453 | pickFile() { |
| 454 | this.$refs.image.click(); | 454 | this.$refs.image.click(); |
| 455 | }, | 455 | }, |
| 456 | getNoticeDataList() { | 456 | getNoticeDataList() { |
| 457 | this.showLoader = true; | 457 | this.showLoader = true; |
| 458 | var token = this.$store.state.token; | 458 | var token = this.$store.state.token; |
| 459 | http() | 459 | http() |
| 460 | .get("/getEventsList", { | 460 | .get("/getEventsList", { |
| 461 | headers: { Authorization: "Bearer " + token }, | 461 | headers: { Authorization: "Bearer " + token }, |
| 462 | }) | 462 | }) |
| 463 | .then((response) => { | 463 | .then((response) => { |
| 464 | this.notices = response.data.data; | 464 | this.notices = response.data.data; |
| 465 | this.showLoader = false; | 465 | this.showLoader = false; |
| 466 | }) | 466 | }) |
| 467 | .catch((error) => { | 467 | .catch((error) => { |
| 468 | this.showLoader = false; | 468 | this.showLoader = false; |
| 469 | if (error.response.status === 401) { | 469 | if (error.response.status === 401) { |
| 470 | this.$router.replace({ path: "/" }); | 470 | this.$router.replace({ path: "/" }); |
| 471 | this.$store.dispatch("setToken", null); | 471 | this.$store.dispatch("setToken", null); |
| 472 | this.$store.dispatch("Id", null); | 472 | this.$store.dispatch("Id", null); |
| 473 | } | 473 | } |
| 474 | }); | 474 | }); |
| 475 | }, | 475 | }, |
| 476 | editItem(item) { | 476 | editItem(item) { |
| 477 | this.editedIndex = this.notices.indexOf(item); | 477 | this.editedIndex = this.notices.indexOf(item); |
| 478 | this.editedItem = Object.assign({}, item); | 478 | this.editedItem = Object.assign({}, item); |
| 479 | this.editNoticeBoardDialog = true; | 479 | this.editNoticeBoardDialog = true; |
| 480 | }, | 480 | }, |
| 481 | profile(item) { | 481 | profile(item) { |
| 482 | this.editedIndex = this.notices.indexOf(item); | 482 | this.editedIndex = this.notices.indexOf(item); |
| 483 | this.editedItem = Object.assign({}, item); | 483 | this.editedItem = Object.assign({}, item); |
| 484 | this.viewNoticeBoardDialog = true; | 484 | this.viewNoticeBoardDialog = true; |
| 485 | }, | 485 | }, |
| 486 | deleteItem(item) { | 486 | deleteItem(item) { |
| 487 | let deleteEvent = { | 487 | let deleteEvent = { |
| 488 | eventId: item._id, | 488 | eventId: item._id, |
| 489 | }; | 489 | }; |
| 490 | http() | 490 | http() |
| 491 | .delete( | 491 | .delete( |
| 492 | "/deleteEvent", | 492 | "/deleteEvent", |
| 493 | confirm("Are you sure you want to delete this?") && { | 493 | confirm("Are you sure you want to delete this?") && { |
| 494 | params: deleteEvent, | 494 | params: deleteEvent, |
| 495 | } | 495 | } |
| 496 | ) | 496 | ) |
| 497 | .then((response) => { | 497 | .then((response) => { |
| 498 | // console.log("deleteUers",deleteEvent) | 498 | // console.log("deleteUers",deleteEvent) |
| 499 | if ((this.snackbar = true)) { | 499 | if ((this.snackbar = true)) { |
| 500 | this.text = "Successfully delete Existing Notice Data"; | 500 | this.text = "Successfully delete Existing Notice Data"; |
| 501 | } | 501 | } |
| 502 | this.snackbar = true; | 502 | this.snackbar = true; |
| 503 | this.color = "green"; | 503 | this.color = "green"; |
| 504 | this.getNoticeDataList(); | 504 | this.getNoticeDataList(); |
| 505 | }) | 505 | }) |
| 506 | .catch((error) => { | 506 | .catch((error) => { |
| 507 | // console.log(error); | 507 | // console.log(error); |
| 508 | this.snackbar = true; | 508 | this.snackbar = true; |
| 509 | this.text = error.response.data.message; | 509 | this.text = error.response.data.message; |
| 510 | this.color = "error"; | 510 | this.color = "error"; |
| 511 | }); | 511 | }); |
| 512 | }, | 512 | }, |
| 513 | close() { | 513 | close() { |
| 514 | this.editNoticeBoardDialog = false; | 514 | this.editNoticeBoardDialog = false; |
| 515 | }, | 515 | }, |
| 516 | closeNoticeBoardModel() { | 516 | closeNoticeBoardModel() { |
| 517 | this.addNoticeBoardDialog = false; | 517 | this.addNoticeBoardDialog = false; |
| 518 | this.addNoticeBoard = []; | 518 | this.addNoticeBoard = []; |
| 519 | this.imageName = ""; | 519 | this.imageName = ""; |
| 520 | this.imageFile = ""; | 520 | this.imageFile = ""; |
| 521 | this.imageUrl = ""; | 521 | this.imageUrl = ""; |
| 522 | }, | 522 | }, |
| 523 | submit() { | 523 | submit() { |
| 524 | var signatures = { | 524 | var signatures = { |
| 525 | JVBERi0: "other", | 525 | JVBERi0: "other", |
| 526 | iVBORw0KGgo: "image", | 526 | iVBORw0KGgo: "image", |
| 527 | UEsDBBQ: "other", | 527 | UEsDBBQ: "other", |
| 528 | "/": "image", | 528 | "/": "image", |
| 529 | AAABAA: "image", | 529 | AAABAA: "image", |
| 530 | IywiV2hhdC: "other", | 530 | IywiV2hhdC: "other", |
| 531 | bmFtZSxl: "other", | 531 | bmFtZSxl: "other", |
| 532 | }; | 532 | }; |
| 533 | function detectMimeType(b64) { | 533 | function detectMimeType(b64) { |
| 534 | for (var s in signatures) { | 534 | for (var s in signatures) { |
| 535 | if (b64.indexOf(s) === 0) { | 535 | if (b64.indexOf(s) === 0) { |
| 536 | return signatures[s]; | 536 | return signatures[s]; |
| 537 | } | 537 | } |
| 538 | } | 538 | } |
| 539 | } | 539 | } |
| 540 | if (this.$refs.form.validate()) { | 540 | if (this.$refs.form.validate()) { |
| 541 | if (this.imageUrl) { | 541 | if (this.imageUrl) { |
| 542 | var str = this.imageUrl; | 542 | var str = this.imageUrl; |
| 543 | const [baseUrl, imageUrl] = str.split(/,/); | 543 | const [baseUrl, imageUrl] = str.split(/,/); |
| 544 | this.addNoticeBoard.upload = imageUrl; | 544 | this.addNoticeBoard.upload = imageUrl; |
| 545 | this.addNoticeBoard.fileType = detectMimeType(imageUrl); | 545 | this.addNoticeBoard.fileType = detectMimeType(imageUrl); |
| 546 | this.addNoticeBoard.fileName = this.imageName; | 546 | this.addNoticeBoard.fileName = this.imageName; |
| 547 | } | 547 | } |
| 548 | http() | 548 | http() |
| 549 | .post("/createEvent", this.addNoticeBoard) | 549 | .post("/createEvent", this.addNoticeBoard) |
| 550 | .then((response) => { | 550 | .then((response) => { |
| 551 | this.imageUrl = ""; | 551 | this.imageUrl = ""; |
| 552 | this.snackbar = true; | 552 | this.snackbar = true; |
| 553 | this.color = "green"; | 553 | this.color = "green"; |
| 554 | this.text = response.data.message; | 554 | this.text = response.data.message; |
| 555 | this.getNoticeDataList(); | 555 | this.getNoticeDataList(); |
| 556 | this.addNoticeBoardDialog = false; | 556 | this.addNoticeBoardDialog = false; |
| 557 | this.clear(); | 557 | this.clear(); |
| 558 | }) | 558 | }) |
| 559 | .catch((error) => { | 559 | .catch((error) => { |
| 560 | this.snackbar = true; | 560 | this.snackbar = true; |
| 561 | this.text = error.response.data.message; | 561 | this.text = error.response.data.message; |
| 562 | this.color = "error"; | 562 | this.color = "error"; |
| 563 | }); | 563 | }); |
| 564 | } | 564 | } |
| 565 | }, | 565 | }, |
| 566 | onFilePicked(e) { | 566 | onFilePicked(e) { |
| 567 | const files = e.target.files; | 567 | const files = e.target.files; |
| 568 | this.upload = e.target.files[0]; | 568 | this.upload = e.target.files[0]; |
| 569 | if (files[0] !== undefined) { | 569 | if (files[0] !== undefined) { |
| 570 | this.imageName = files[0].name; | 570 | this.imageName = files[0].name; |
| 571 | if (this.imageName.lastIndexOf(".") <= 0) { | 571 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 572 | return; | 572 | return; |
| 573 | } | 573 | } |
| 574 | const fr = new FileReader(); | 574 | const fr = new FileReader(); |
| 575 | fr.readAsDataURL(files[0]); | 575 | fr.readAsDataURL(files[0]); |
| 576 | fr.addEventListener("load", () => { | 576 | fr.addEventListener("load", () => { |
| 577 | this.imageUrl = fr.result; | 577 | this.imageUrl = fr.result; |
| 578 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 578 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 579 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 579 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 580 | }); | 580 | }); |
| 581 | } else { | 581 | } else { |
| 582 | this.imageName = ""; | 582 | this.imageName = ""; |
| 583 | this.imageFile = ""; | 583 | this.imageFile = ""; |
| 584 | this.imageUrl = ""; | 584 | this.imageUrl = ""; |
| 585 | } | 585 | } |
| 586 | }, | 586 | }, |
| 587 | clear() { | 587 | clear() { |
| 588 | this.$refs.form.reset(); | 588 | this.$refs.form.reset(); |
| 589 | this.imageUrl = ""; | 589 | this.imageUrl = ""; |
| 590 | }, | 590 | }, |
| 591 | save() { | 591 | save() { |
| 592 | let editNoticeBoard = { | 592 | let editNoticeBoard = { |
| 593 | eventId: this.editedItem._id, | 593 | eventId: this.editedItem._id, |
| 594 | title: this.editedItem.title, | 594 | title: this.editedItem.title, |
| 595 | description: this.editedItem.description, | 595 | description: this.editedItem.description, |
| 596 | fileName: this.imageName, | 596 | fileName: this.imageName, |
| 597 | }; | 597 | }; |
| 598 | var signatures = { | 598 | var signatures = { |
| 599 | JVBERi0: "other", | 599 | JVBERi0: "other", |
| 600 | iVBORw0KGgo: "image", | 600 | iVBORw0KGgo: "image", |
| 601 | UEsDBBQ: "other", | 601 | UEsDBBQ: "other", |
| 602 | "/": "image", | 602 | "/": "image", |
| 603 | AAABAA: "image", | 603 | AAABAA: "image", |
| 604 | IywiV2hhdC: "other", | 604 | IywiV2hhdC: "other", |
| 605 | }; | 605 | }; |
| 606 | function detectMimeType(b64) { | 606 | function detectMimeType(b64) { |
| 607 | for (var s in signatures) { | 607 | for (var s in signatures) { |
| 608 | if (b64.indexOf(s) === 0) { | 608 | if (b64.indexOf(s) === 0) { |
| 609 | return signatures[s]; | 609 | return signatures[s]; |
| 610 | } | 610 | } |
| 611 | } | 611 | } |
| 612 | } | 612 | } |
| 613 | if (this.imageUrl) { | 613 | if (this.imageUrl) { |
| 614 | var str = this.imageUrl; | 614 | var str = this.imageUrl; |
| 615 | const [baseUrl, imageUrl] = str.split(/,/); | 615 | const [baseUrl, imageUrl] = str.split(/,/); |
| 616 | editNoticeBoard.upload = imageUrl; | 616 | editNoticeBoard.upload = imageUrl; |
| 617 | editNoticeBoard.fileType = detectMimeType(imageUrl); | 617 | editNoticeBoard.fileType = detectMimeType(imageUrl); |
| 618 | } | 618 | } |
| 619 | http() | 619 | http() |
| 620 | .put("/updateEvent", editNoticeBoard) | 620 | .put("/updateEvent", editNoticeBoard) |
| 621 | .then((response) => { | 621 | .then((response) => { |
| 622 | if ((this.snackbar = true)) { | 622 | if ((this.snackbar = true)) { |
| 623 | this.text = "Successfully Edit Existing Notice Data"; | 623 | this.text = "Successfully Edit Existing Notice Data"; |
| 624 | } | 624 | } |
| 625 | this.color = "green"; | 625 | this.color = "green"; |
| 626 | this.snackbar = true; | 626 | this.snackbar = true; |
| 627 | this.getNoticeDataList(); | 627 | this.getNoticeDataList(); |
| 628 | this.close(); | 628 | this.close(); |
| 629 | }) | 629 | }) |
| 630 | .catch((error) => { | 630 | .catch((error) => { |
| 631 | // console.log(error); | 631 | // console.log(error); |
| 632 | this.snackbar = true; | 632 | this.snackbar = true; |
| 633 | this.text = error.response.data.message; | 633 | this.text = error.response.data.message; |
| 634 | this.color = "red"; | 634 | this.color = "red"; |
| 635 | }); | 635 | }); |
| 636 | }, | 636 | }, |
| 637 | displaySearch() { | 637 | displaySearch() { |
| 638 | (this.show = false), (this.showSearch = true); | 638 | (this.show = false), (this.showSearch = true); |
| 639 | }, | 639 | }, |
| 640 | closeSearch() { | 640 | closeSearch() { |
| 641 | this.showSearch = false; | 641 | this.showSearch = false; |
| 642 | this.show = true; | 642 | this.show = true; |
| 643 | this.search = ""; | 643 | this.search = ""; |
| 644 | }, | 644 | }, |
| 645 | async generatePDF2Canvas(item) { | 645 | async generatePDF2Canvas(item) { |
| 646 | var dataType = ""; | 646 | var dataType = ""; |
| 647 | var type = ""; | 647 | var type = ""; |
| 648 | if (item.fileType == "image") { | 648 | if (item.fileType == "image") { |
| 649 | dataType = "file.jpg"; | 649 | dataType = "file.jpg"; |
| 650 | } else if (item.fileType == "other") { | 650 | } else if (item.fileType == "other") { |
| 651 | dataType = "file.pdf"; | 651 | dataType = "file.pdf"; |
| 652 | type = "application/pdf"; | 652 | type = "application/pdf"; |
| 653 | } | 653 | } |
| 654 | var FileSaver = require("file-saver"); | 654 | var FileSaver = require("file-saver"); |
| 655 | FileSaver.saveAs(item.eventImageUrl, "image.jpg"); | 655 | FileSaver.saveAs(item.eventImageUrl, "image.jpg"); |
| 656 | }, | 656 | }, |
| 657 | }, | 657 | }, |
| 658 | mounted() { | 658 | mounted() { |
| 659 | this.getNoticeDataList(); | 659 | this.getNoticeDataList(); |
| 660 | }, | 660 | }, |
| 661 | }; | 661 | }; |
| 662 | </script> | 662 | </script> |
src/pages/Notification/notification.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> | 3 | <!-- ****** EDITS NOTIFICATION DETAILS ****** --> |
| 4 | <v-dialog v-model="editNotificationDialog" max-width="500px"> | 4 | <v-dialog v-model="editNotificationDialog" max-width="500px" persistent> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-card flat class="card-style pa-3" dark> | 6 | <v-card flat class="card-style pa-3" dark> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Notification</label> | 9 | <label class="title text-xs-center">Edit Notification</label> |
| 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editNotificationDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 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 xs8 sm8 class="ml-3"> | 18 | <v-flex xs8 sm8 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | v-model="editedItem.title" | 20 | v-model="editedItem.title" |
| 21 | placeholder="fill your Title" | 21 | placeholder="fill your Title" |
| 22 | name="name" | 22 | name="name" |
| 23 | type="text" | 23 | type="text" |
| 24 | ></v-text-field> | 24 | ></v-text-field> |
| 25 | </v-flex> | 25 | </v-flex> |
| 26 | </v-layout> | 26 | </v-layout> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs12 sm12> | 28 | <v-flex xs12 sm12> |
| 29 | <v-layout> | 29 | <v-layout> |
| 30 | <v-flex xs4 class="pt-4 subheading"> | 30 | <v-flex xs4 class="pt-4 subheading"> |
| 31 | <label class="right">Description:</label> | 31 | <label class="right">Description:</label> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | <v-flex xs8 sm8 class="ml-3"> | 33 | <v-flex xs8 sm8 class="ml-3"> |
| 34 | <v-text-field | 34 | <v-text-field |
| 35 | placeholder="fill your Description" | 35 | placeholder="fill your Description" |
| 36 | v-model="editedItem.description" | 36 | v-model="editedItem.description" |
| 37 | type="text" | 37 | type="text" |
| 38 | ></v-text-field> | 38 | ></v-text-field> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | </v-layout> | 40 | </v-layout> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-card-actions> | 44 | <v-card-actions> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> | 46 | <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> |
| 47 | <v-spacer></v-spacer> | 47 | <v-spacer></v-spacer> |
| 48 | </v-card-actions> | 48 | </v-card-actions> |
| 49 | </v-flex> | 49 | </v-flex> |
| 50 | </v-layout> | 50 | </v-layout> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-dialog> | 53 | </v-dialog> |
| 54 | 54 | ||
| 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> | 55 | <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> |
| 56 | 56 | ||
| 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px"> | 57 | <v-dialog v-model="profileNotificationDialog" max-width="400px" persistent> |
| 58 | <v-card flat class="card-style pa-3" dark> | 58 | <v-card flat class="card-style pa-3" dark> |
| 59 | <v-layout> | 59 | <v-layout> |
| 60 | <v-flex xs12> | 60 | <v-flex xs12> |
| 61 | <label class="title text-xs-center">View Notification</label> | 61 | <label class="title text-xs-center">View Notification</label> |
| 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> | 62 | <v-icon size="24" class="right" @click="profileNotificationDialog = false">cancel</v-icon> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | </v-layout> | 64 | </v-layout> |
| 65 | <v-card-text> | 65 | <v-card-text> |
| 66 | <v-container grid-list-md> | 66 | <v-container grid-list-md> |
| 67 | <v-layout wrap> | 67 | <v-layout wrap> |
| 68 | <v-flex xs12> | 68 | <v-flex xs12> |
| 69 | <v-layout> | 69 | <v-layout> |
| 70 | <v-flex xs4 sm6> | 70 | <v-flex xs4 sm6> |
| 71 | <h5 class="right my-1"> | 71 | <h5 class="right my-1"> |
| 72 | <b>Title:</b> | 72 | <b>Title:</b> |
| 73 | </h5> | 73 | </h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | <v-flex sm6 xs8> | 75 | <v-flex sm6 xs8> |
| 76 | <h5 class="my-1">{{ editedItem.title }}</h5> | 76 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-layout> | 80 | <v-layout> |
| 81 | <v-flex xs4 sm6> | 81 | <v-flex xs4 sm6> |
| 82 | <h5 class="right my-1"> | 82 | <h5 class="right my-1"> |
| 83 | <b>Description:</b> | 83 | <b>Description:</b> |
| 84 | </h5> | 84 | </h5> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex sm6 xs8> | 86 | <v-flex sm6 xs8> |
| 87 | <h5 class="my-1">{{ editedItem.description }}</h5> | 87 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | </v-layout> | 89 | </v-layout> |
| 90 | </v-layout> | 90 | </v-layout> |
| 91 | </v-container> | 91 | </v-container> |
| 92 | </v-card-text> | 92 | </v-card-text> |
| 93 | </v-card> | 93 | </v-card> |
| 94 | </v-dialog> | 94 | </v-dialog> |
| 95 | <!-- ****** NOTIFICATION TABLE ****** --> | 95 | <!-- ****** NOTIFICATION TABLE ****** --> |
| 96 | <v-toolbar color="transparent" flat> | 96 | <v-toolbar color="transparent" flat> |
| 97 | <v-btn | 97 | <v-btn |
| 98 | fab | 98 | fab |
| 99 | dark | 99 | dark |
| 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 100 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 101 | small | 101 | small |
| 102 | @click="addNotificationDialog = true" | 102 | @click="addNotificationDialog = true" |
| 103 | > | 103 | > |
| 104 | <v-icon dark>add</v-icon> | 104 | <v-icon dark>add</v-icon> |
| 105 | </v-btn> | 105 | </v-btn> |
| 106 | <v-btn | 106 | <v-btn |
| 107 | round | 107 | round |
| 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 108 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 109 | dark | 109 | dark |
| 110 | @click="addNotificationDialog = true" | 110 | @click="addNotificationDialog = true" |
| 111 | > | 111 | > |
| 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification | 112 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Notification |
| 113 | </v-btn> | 113 | </v-btn> |
| 114 | <v-spacer></v-spacer> | 114 | <v-spacer></v-spacer> |
| 115 | <v-card-title class="body-1" v-show="show"> | 115 | <v-card-title class="body-1" v-show="show"> |
| 116 | <v-btn icon large flat @click="displaySearch"> | 116 | <v-btn icon large flat @click="displaySearch"> |
| 117 | <v-avatar size="27"> | 117 | <v-avatar size="27"> |
| 118 | <img src="/static/icon/search.png" alt="icon" /> | 118 | <img src="/static/icon/search.png" alt="icon" /> |
| 119 | </v-avatar> | 119 | </v-avatar> |
| 120 | </v-btn> | 120 | </v-btn> |
| 121 | </v-card-title> | 121 | </v-card-title> |
| 122 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 122 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-text-field | 124 | <v-text-field |
| 125 | autofocus | 125 | autofocus |
| 126 | v-model="search" | 126 | v-model="search" |
| 127 | label="Search" | 127 | label="Search" |
| 128 | prepend-inner-icon="search" | 128 | prepend-inner-icon="search" |
| 129 | color="primary" | 129 | color="primary" |
| 130 | ></v-text-field> | 130 | ></v-text-field> |
| 131 | <v-icon @click="closeSearch" color="error">close</v-icon> | 131 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | </v-flex> | 133 | </v-flex> |
| 134 | </v-toolbar> | 134 | </v-toolbar> |
| 135 | <v-data-table | 135 | <v-data-table |
| 136 | :headers="headers" | 136 | :headers="headers" |
| 137 | :items="notifications" | 137 | :items="notifications" |
| 138 | :pagination.sync="pagination" | 138 | :pagination.sync="pagination" |
| 139 | :search="search" | 139 | :search="search" |
| 140 | > | 140 | > |
| 141 | <template slot="items" slot-scope="props"> | 141 | <template slot="items" slot-scope="props"> |
| 142 | <tr class="tr"> | 142 | <tr class="tr"> |
| 143 | <td class="td td-row">{{ props.index + 1}}</td> | 143 | <td class="td td-row">{{ props.index + 1}}</td> |
| 144 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> | 144 | <td class="td td-row text-xs-center">{{ props.item.title}}</td> |
| 145 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> | 145 | <td class="td td-row text-xs-center">{{ props.item.description}}</td> |
| 146 | <td class="td td-row text-xs-center"> | 146 | <td class="td td-row text-xs-center"> |
| 147 | <span> | 147 | <span> |
| 148 | <v-tooltip top> | 148 | <v-tooltip top> |
| 149 | <img | 149 | <img |
| 150 | slot="activator" | 150 | slot="activator" |
| 151 | style="cursor:pointer; width:25px; height:25px; " | 151 | style="cursor:pointer; width:25px; height:25px; " |
| 152 | class="mr-3" | 152 | class="mr-3" |
| 153 | @click="profile(props.item)" | 153 | @click="profile(props.item)" |
| 154 | src="/static/icon/view.png" | 154 | src="/static/icon/view.png" |
| 155 | /> | 155 | /> |
| 156 | <span>View</span> | 156 | <span>View</span> |
| 157 | </v-tooltip> | 157 | </v-tooltip> |
| 158 | <v-tooltip top> | 158 | <v-tooltip top> |
| 159 | <img | 159 | <img |
| 160 | slot="activator" | 160 | slot="activator" |
| 161 | style="cursor:pointer; width:20px; height:18px; " | 161 | style="cursor:pointer; width:20px; height:18px; " |
| 162 | class="mr-3" | 162 | class="mr-3" |
| 163 | @click="editItem(props.item)" | 163 | @click="editItem(props.item)" |
| 164 | src="/static/icon/edit.png" | 164 | src="/static/icon/edit.png" |
| 165 | /> | 165 | /> |
| 166 | <span>Edit</span> | 166 | <span>Edit</span> |
| 167 | </v-tooltip> | 167 | </v-tooltip> |
| 168 | <v-tooltip top> | 168 | <v-tooltip top> |
| 169 | <img | 169 | <img |
| 170 | slot="activator" | 170 | slot="activator" |
| 171 | style="cursor:pointer; width:20px; height:20px; " | 171 | style="cursor:pointer; width:20px; height:20px; " |
| 172 | class="mr-3" | 172 | class="mr-3" |
| 173 | @click="deleteItem(props.item)" | 173 | @click="deleteItem(props.item)" |
| 174 | src="/static/icon/delete.png" | 174 | src="/static/icon/delete.png" |
| 175 | /> | 175 | /> |
| 176 | <span>Delete</span> | 176 | <span>Delete</span> |
| 177 | </v-tooltip> | 177 | </v-tooltip> |
| 178 | </span> | 178 | </span> |
| 179 | </td> | 179 | </td> |
| 180 | </tr> | 180 | </tr> |
| 181 | </template> | 181 | </template> |
| 182 | <v-alert | 182 | <v-alert |
| 183 | slot="no-results" | 183 | slot="no-results" |
| 184 | :value="true" | 184 | :value="true" |
| 185 | color="error" | 185 | color="error" |
| 186 | icon="warning" | 186 | icon="warning" |
| 187 | >Your search for "{{ search }}" found no results.</v-alert> | 187 | >Your search for "{{ search }}" found no results.</v-alert> |
| 188 | </v-data-table> | 188 | </v-data-table> |
| 189 | 189 | ||
| 190 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> | 190 | <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> |
| 191 | <v-dialog v-model="addNotificationDialog" max-width="480px" v-if="addNotificationDialog"> | 191 | <v-dialog v-model="addNotificationDialog" max-width="480px" v-if="addNotificationDialog" persistent> |
| 192 | <v-card flat class="card-style pa-2" dark> | 192 | <v-card flat class="card-style pa-2" dark> |
| 193 | <v-layout> | 193 | <v-layout> |
| 194 | <v-flex xs12> | 194 | <v-flex xs12> |
| 195 | <label class="title text-xs-center">Add Notification</label> | 195 | <label class="title text-xs-center">Add Notification</label> |
| 196 | <v-icon size="24" class="right" @click="closeAddNotificationModel">cancel</v-icon> | 196 | <v-icon size="24" class="right" @click="closeAddNotificationModel">cancel</v-icon> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-layout> | 198 | </v-layout> |
| 199 | <v-form ref="form" v-model="valid" lazy-validation> | 199 | <v-form ref="form" v-model="valid" lazy-validation> |
| 200 | <v-container fluid fill-height> | 200 | <v-container fluid fill-height> |
| 201 | <v-layout align-center wrap> | 201 | <v-layout align-center wrap> |
| 202 | <v-flex xs12> | 202 | <v-flex xs12> |
| 203 | <v-layout> | 203 | <v-layout> |
| 204 | <v-flex xs4 class="pt-4 subheading"> | 204 | <v-flex xs4 class="pt-4 subheading"> |
| 205 | <label class="right">Title:</label> | 205 | <label class="right">Title:</label> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | <v-flex xs8 sm8 class="ml-3"> | 207 | <v-flex xs8 sm8 class="ml-3"> |
| 208 | <v-text-field | 208 | <v-text-field |
| 209 | v-model="addNotification.title" | 209 | v-model="addNotification.title" |
| 210 | placeholder="fill your Title" | 210 | placeholder="fill your Title" |
| 211 | type="text" | 211 | type="text" |
| 212 | :rules="titleRules" | 212 | :rules="titleRules" |
| 213 | required | 213 | required |
| 214 | ></v-text-field> | 214 | ></v-text-field> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | </v-layout> | 216 | </v-layout> |
| 217 | </v-flex> | 217 | </v-flex> |
| 218 | <v-flex xs12> | 218 | <v-flex xs12> |
| 219 | <v-layout> | 219 | <v-layout> |
| 220 | <v-flex xs4 class="pt-4 subheading"> | 220 | <v-flex xs4 class="pt-4 subheading"> |
| 221 | <label class="right">Description:</label> | 221 | <label class="right">Description:</label> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | <v-flex xs8 sm8 class="ml-3"> | 223 | <v-flex xs8 sm8 class="ml-3"> |
| 224 | <v-text-field | 224 | <v-text-field |
| 225 | placeholder="fill your Description" | 225 | placeholder="fill your Description" |
| 226 | :rules="descriptionRules" | 226 | :rules="descriptionRules" |
| 227 | v-model="addNotification.description" | 227 | v-model="addNotification.description" |
| 228 | type="text" | 228 | type="text" |
| 229 | required | 229 | required |
| 230 | ></v-text-field> | 230 | ></v-text-field> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | </v-layout> | 232 | </v-layout> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-flex xs12 sm12> | 235 | <v-flex xs12 sm12> |
| 236 | <v-layout class="hidden-xs-only hidden-sm-only right"> | 236 | <v-layout class="hidden-xs-only hidden-sm-only right"> |
| 237 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 237 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 238 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 238 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 239 | </v-layout> | 239 | </v-layout> |
| 240 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> | 240 | <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 241 | <v-spacer></v-spacer> | 241 | <v-spacer></v-spacer> |
| 242 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> | 242 | <v-btn @click="clear" round class="clear-button" dark>Clear</v-btn> |
| 243 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 243 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 244 | <v-spacer></v-spacer> | 244 | <v-spacer></v-spacer> |
| 245 | </v-card-actions> | 245 | </v-card-actions> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | </v-layout> | 247 | </v-layout> |
| 248 | </v-layout> | 248 | </v-layout> |
| 249 | </v-container> | 249 | </v-container> |
| 250 | </v-form> | 250 | </v-form> |
| 251 | </v-card> | 251 | </v-card> |
| 252 | </v-dialog> | 252 | </v-dialog> |
| 253 | <v-snackbar | 253 | <v-snackbar |
| 254 | :timeout="timeout" | 254 | :timeout="timeout" |
| 255 | :top="y === 'top'" | 255 | :top="y === 'top'" |
| 256 | :right="x === 'right'" | 256 | :right="x === 'right'" |
| 257 | :vertical="mode === 'vertical'" | 257 | :vertical="mode === 'vertical'" |
| 258 | v-model="snackbar" | 258 | v-model="snackbar" |
| 259 | :color="color" | 259 | :color="color" |
| 260 | >{{ text }}</v-snackbar> | 260 | >{{ text }}</v-snackbar> |
| 261 | <div class="loader" v-if="showLoader"> | 261 | <div class="loader" v-if="showLoader"> |
| 262 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 262 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 263 | </div> | 263 | </div> |
| 264 | </v-container> | 264 | </v-container> |
| 265 | </template> | 265 | </template> |
| 266 | 266 | ||
| 267 | <script> | 267 | <script> |
| 268 | import http from "@/Services/http.js"; | 268 | import http from "@/Services/http.js"; |
| 269 | import Util from "@/util"; | 269 | import Util from "@/util"; |
| 270 | 270 | ||
| 271 | export default { | 271 | export default { |
| 272 | data: () => ({ | 272 | data: () => ({ |
| 273 | snackbar: false, | 273 | snackbar: false, |
| 274 | y: "top", | 274 | y: "top", |
| 275 | x: "right", | 275 | x: "right", |
| 276 | mode: "", | 276 | mode: "", |
| 277 | timeout: 3000, | 277 | timeout: 3000, |
| 278 | text: "", | 278 | text: "", |
| 279 | loading: false, | 279 | loading: false, |
| 280 | editLoading: false, | 280 | editLoading: false, |
| 281 | date: null, | 281 | date: null, |
| 282 | search: "", | 282 | search: "", |
| 283 | color: "", | 283 | color: "", |
| 284 | show: true, | 284 | show: true, |
| 285 | showSearch: false, | 285 | showSearch: false, |
| 286 | showLoader: false, | 286 | showLoader: false, |
| 287 | profileNotificationDialog: false, | 287 | profileNotificationDialog: false, |
| 288 | editNotificationDialog: false, | 288 | editNotificationDialog: false, |
| 289 | valid: true, | 289 | valid: true, |
| 290 | addNotificationDialog: false, | 290 | addNotificationDialog: false, |
| 291 | pagination: { | 291 | pagination: { |
| 292 | rowsPerPage: 10, | 292 | rowsPerPage: 10, |
| 293 | }, | 293 | }, |
| 294 | imageData: {}, | 294 | imageData: {}, |
| 295 | imageName: "", | 295 | imageName: "", |
| 296 | imageUrl: "", | 296 | imageUrl: "", |
| 297 | imageFile: "", | 297 | imageFile: "", |
| 298 | titleRules: [(v) => !!v || " Tilte is required"], | 298 | titleRules: [(v) => !!v || " Tilte is required"], |
| 299 | descriptionRules: [(v) => !!v || " Description is required"], | 299 | descriptionRules: [(v) => !!v || " Description is required"], |
| 300 | headers: [ | 300 | headers: [ |
| 301 | { | 301 | { |
| 302 | text: "No", | 302 | text: "No", |
| 303 | align: "", | 303 | align: "", |
| 304 | sortable: false, | 304 | sortable: false, |
| 305 | value: "No", | 305 | value: "No", |
| 306 | }, | 306 | }, |
| 307 | { text: "Title", value: "title", sortable: false, align: "center" }, | 307 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 308 | { | 308 | { |
| 309 | text: "Description", | 309 | text: "Description", |
| 310 | value: "description", | 310 | value: "description", |
| 311 | sortable: false, | 311 | sortable: false, |
| 312 | align: "center", | 312 | align: "center", |
| 313 | }, | 313 | }, |
| 314 | { text: "Action", value: "", sortable: false, align: "center" }, | 314 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 315 | ], | 315 | ], |
| 316 | notifications: [], | 316 | notifications: [], |
| 317 | editedIndex: -1, | 317 | editedIndex: -1, |
| 318 | addNotification: { | 318 | addNotification: { |
| 319 | title: "", | 319 | title: "", |
| 320 | description: "", | 320 | description: "", |
| 321 | }, | 321 | }, |
| 322 | editedItem: { | 322 | editedItem: { |
| 323 | title: "", | 323 | title: "", |
| 324 | description: "", | 324 | description: "", |
| 325 | }, | 325 | }, |
| 326 | }), | 326 | }), |
| 327 | watch: { | 327 | watch: { |
| 328 | addNotificationDialog: function (val) { | 328 | addNotificationDialog: function (val) { |
| 329 | if (!val) { | 329 | if (!val) { |
| 330 | this.addNotification = []; | 330 | this.addNotification = []; |
| 331 | } | 331 | } |
| 332 | }, | 332 | }, |
| 333 | }, | 333 | }, |
| 334 | methods: { | 334 | methods: { |
| 335 | pickFile() { | 335 | pickFile() { |
| 336 | this.$refs.image.click(); | 336 | this.$refs.image.click(); |
| 337 | }, | 337 | }, |
| 338 | 338 | ||
| 339 | onFilePicked(e) { | 339 | onFilePicked(e) { |
| 340 | const files = e.target.files; | 340 | const files = e.target.files; |
| 341 | this.imageData.upload = e.target.files[0]; | 341 | this.imageData.upload = e.target.files[0]; |
| 342 | if (files[0] !== undefined) { | 342 | if (files[0] !== undefined) { |
| 343 | this.imageName = files[0].name; | 343 | this.imageName = files[0].name; |
| 344 | if (this.imageName.lastIndexOf(".") <= 0) { | 344 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 345 | return; | 345 | return; |
| 346 | } | 346 | } |
| 347 | const fr = new FileReader(); | 347 | const fr = new FileReader(); |
| 348 | fr.readAsDataURL(files[0]); | 348 | fr.readAsDataURL(files[0]); |
| 349 | fr.addEventListener("load", () => { | 349 | fr.addEventListener("load", () => { |
| 350 | this.imageUrl = fr.result; | 350 | this.imageUrl = fr.result; |
| 351 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 351 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 352 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 352 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 353 | }); | 353 | }); |
| 354 | } else { | 354 | } else { |
| 355 | this.imageName = ""; | 355 | this.imageName = ""; |
| 356 | this.imageFile = ""; | 356 | this.imageFile = ""; |
| 357 | this.imageUrl = ""; | 357 | this.imageUrl = ""; |
| 358 | } | 358 | } |
| 359 | }, | 359 | }, |
| 360 | getNotifications() { | 360 | getNotifications() { |
| 361 | this.showLoader = true; | 361 | this.showLoader = true; |
| 362 | var token = this.$store.state.token; | 362 | var token = this.$store.state.token; |
| 363 | http() | 363 | http() |
| 364 | .get("/getNotificationsList", { | 364 | .get("/getNotificationsList", { |
| 365 | headers: { Authorization: "Bearer " + token }, | 365 | headers: { Authorization: "Bearer " + token }, |
| 366 | }) | 366 | }) |
| 367 | .then((response) => { | 367 | .then((response) => { |
| 368 | this.notifications = response.data.data; | 368 | this.notifications = response.data.data; |
| 369 | this.showLoader = false; | 369 | this.showLoader = false; |
| 370 | }) | 370 | }) |
| 371 | .catch((error) => { | 371 | .catch((error) => { |
| 372 | this.showLoader = false; | 372 | this.showLoader = false; |
| 373 | if (error.response.status === 401) { | 373 | if (error.response.status === 401) { |
| 374 | this.$router.replace({ path: "/" }); | 374 | this.$router.replace({ path: "/" }); |
| 375 | this.$store.dispatch("setToken", null); | 375 | this.$store.dispatch("setToken", null); |
| 376 | this.$store.dispatch("Id", null); | 376 | this.$store.dispatch("Id", null); |
| 377 | } | 377 | } |
| 378 | }); | 378 | }); |
| 379 | }, | 379 | }, |
| 380 | editItem(item) { | 380 | editItem(item) { |
| 381 | this.editedIndex = this.notifications.indexOf(item); | 381 | this.editedIndex = this.notifications.indexOf(item); |
| 382 | this.editedItem = Object.assign({}, item); | 382 | this.editedItem = Object.assign({}, item); |
| 383 | this.editNotificationDialog = true; | 383 | this.editNotificationDialog = true; |
| 384 | }, | 384 | }, |
| 385 | profile(item) { | 385 | profile(item) { |
| 386 | this.editedIndex = this.notifications.indexOf(item); | 386 | this.editedIndex = this.notifications.indexOf(item); |
| 387 | this.editedItem = Object.assign({}, item); | 387 | this.editedItem = Object.assign({}, item); |
| 388 | this.profileNotificationDialog = true; | 388 | this.profileNotificationDialog = true; |
| 389 | }, | 389 | }, |
| 390 | 390 | ||
| 391 | deleteItem(item) { | 391 | deleteItem(item) { |
| 392 | let deleteNotification = { | 392 | let deleteNotification = { |
| 393 | notificationId: item._id, | 393 | notificationId: item._id, |
| 394 | }; | 394 | }; |
| 395 | http() | 395 | http() |
| 396 | .delete( | 396 | .delete( |
| 397 | "/deleteNotification", | 397 | "/deleteNotification", |
| 398 | confirm("Are you sure you want to delete this?") && { | 398 | confirm("Are you sure you want to delete this?") && { |
| 399 | params: deleteNotification, | 399 | params: deleteNotification, |
| 400 | } | 400 | } |
| 401 | ) | 401 | ) |
| 402 | .then((response) => { | 402 | .then((response) => { |
| 403 | this.snackbar = true; | 403 | this.snackbar = true; |
| 404 | this.text = response.data.message; | 404 | this.text = response.data.message; |
| 405 | this.color = "green"; | 405 | this.color = "green"; |
| 406 | this.getNotifications(); | 406 | this.getNotifications(); |
| 407 | }) | 407 | }) |
| 408 | .catch((error) => { | 408 | .catch((error) => { |
| 409 | this.snackbar = true; | 409 | this.snackbar = true; |
| 410 | this.text = error.response.data.message; | 410 | this.text = error.response.data.message; |
| 411 | this.color = "error"; | 411 | this.color = "error"; |
| 412 | }); | 412 | }); |
| 413 | }, | 413 | }, |
| 414 | close() { | 414 | close() { |
| 415 | this.editNotificationDialog = false; | 415 | this.editNotificationDialog = false; |
| 416 | }, | 416 | }, |
| 417 | closeNotificationDialog() { | 417 | closeNotificationDialog() { |
| 418 | this.profileNotificationDialog = false; | 418 | this.profileNotificationDialog = false; |
| 419 | }, | 419 | }, |
| 420 | closeAddNotificationModel() { | 420 | closeAddNotificationModel() { |
| 421 | this.addNotificationDialog = false; | 421 | this.addNotificationDialog = false; |
| 422 | this.addNotification = []; | 422 | this.addNotification = []; |
| 423 | }, | 423 | }, |
| 424 | submit() { | 424 | submit() { |
| 425 | if (this.$refs.form.validate()) { | 425 | if (this.$refs.form.validate()) { |
| 426 | let imageData = new FormData(); | 426 | let imageData = new FormData(); |
| 427 | imageData.append("upload", this.imageFile); | 427 | imageData.append("upload", this.imageFile); |
| 428 | let create = { | 428 | let create = { |
| 429 | title: this.addNotification.title, | 429 | title: this.addNotification.title, |
| 430 | description: this.addNotification.description, | 430 | description: this.addNotification.description, |
| 431 | }; | 431 | }; |
| 432 | this.loading = true; | 432 | this.loading = true; |
| 433 | http() | 433 | http() |
| 434 | .post("/createNotification", create) | 434 | .post("/createNotification", create) |
| 435 | .then((response) => { | 435 | .then((response) => { |
| 436 | this.snackbar = true; | 436 | this.snackbar = true; |
| 437 | this.text = response.data.message; | 437 | this.text = response.data.message; |
| 438 | this.color = "green"; | 438 | this.color = "green"; |
| 439 | this.getNotifications(); | 439 | this.getNotifications(); |
| 440 | this.addNotificationDialog = false; | 440 | this.addNotificationDialog = false; |
| 441 | this.clear(); | 441 | this.clear(); |
| 442 | this.loading = false; | 442 | this.loading = false; |
| 443 | }) | 443 | }) |
| 444 | .catch((error) => { | 444 | .catch((error) => { |
| 445 | this.snackbar = true; | 445 | this.snackbar = true; |
| 446 | this.text = error.response.data.message; | 446 | this.text = error.response.data.message; |
| 447 | this.color = "error"; | 447 | this.color = "error"; |
| 448 | this.loading = false; | 448 | this.loading = false; |
| 449 | }); | 449 | }); |
| 450 | } | 450 | } |
| 451 | }, | 451 | }, |
| 452 | clear() { | 452 | clear() { |
| 453 | this.$refs.form.reset(); | 453 | this.$refs.form.reset(); |
| 454 | }, | 454 | }, |
| 455 | save() { | 455 | save() { |
| 456 | let imageData = new FormData(); | 456 | let imageData = new FormData(); |
| 457 | imageData.append("upload", this.imageFile); | 457 | imageData.append("upload", this.imageFile); |
| 458 | let editNotification = { | 458 | let editNotification = { |
| 459 | notificationId: this.editedItem._id, | 459 | notificationId: this.editedItem._id, |
| 460 | title: this.editedItem.title, | 460 | title: this.editedItem.title, |
| 461 | description: this.editedItem.description, | 461 | description: this.editedItem.description, |
| 462 | }; | 462 | }; |
| 463 | this.editLoading = true; | 463 | this.editLoading = true; |
| 464 | http() | 464 | http() |
| 465 | .put("/updateNotification", editNotification) | 465 | .put("/updateNotification", editNotification) |
| 466 | .then((response) => { | 466 | .then((response) => { |
| 467 | this.snackbar = true; | 467 | this.snackbar = true; |
| 468 | this.text = response.data.message; | 468 | this.text = response.data.message; |
| 469 | this.color = "green"; | 469 | this.color = "green"; |
| 470 | this.getNotifications(); | 470 | this.getNotifications(); |
| 471 | this.close(); | 471 | this.close(); |
| 472 | this.editLoading = false; | 472 | this.editLoading = false; |
| 473 | }) | 473 | }) |
| 474 | .catch((error) => { | 474 | .catch((error) => { |
| 475 | this.editLoading = false; | 475 | this.editLoading = false; |
| 476 | this.snackbar = true; | 476 | this.snackbar = true; |
| 477 | this.color = "error"; | 477 | this.color = "error"; |
| 478 | this.text = error.response.data.message; | 478 | this.text = error.response.data.message; |
| 479 | }); | 479 | }); |
| 480 | }, | 480 | }, |
| 481 | displaySearch() { | 481 | displaySearch() { |
| 482 | (this.show = false), (this.showSearch = true); | 482 | (this.show = false), (this.showSearch = true); |
| 483 | }, | 483 | }, |
| 484 | closeSearch() { | 484 | closeSearch() { |
| 485 | this.showSearch = false; | 485 | this.showSearch = false; |
| 486 | this.show = true; | 486 | this.show = true; |
| 487 | this.search = ""; | 487 | this.search = ""; |
| 488 | }, | 488 | }, |
| 489 | }, | 489 | }, |
| 490 | mounted() { | 490 | mounted() { |
| 491 | this.getNotifications(); | 491 | this.getNotifications(); |
| 492 | }, | 492 | }, |
| 493 | }; | 493 | }; |
| 494 | </script> | 494 | </script> |
src/pages/Parent/parents.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-dialog v-model="editParentDilaog" max-width="600px" scrollable> | 3 | <v-dialog v-model="editParentDilaog" max-width="600px" scrollable persistent> |
| 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 Parents Details</label> | 7 | <label class="title text-xs-center">Edit Parents Details</label> |
| 8 | <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> | 8 | <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | </v-layout> | 10 | </v-layout> |
| 11 | <v-card-text class="hidden-xs-only hidden-sm-only"> | 11 | <v-card-text class="hidden-xs-only hidden-sm-only"> |
| 12 | <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> | 12 | <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> |
| 13 | <v-flex xs12> | 13 | <v-flex xs12> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs3 sm4 class="pt-4 subheading"> | 15 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 16 | <label class="right">Email ID:</label> | 16 | <label class="right">Email ID:</label> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-flex xs8 sm6 class="ml-3"> | 18 | <v-flex xs8 sm6 class="ml-3"> |
| 19 | <v-text-field | 19 | <v-text-field |
| 20 | placeholder="fill your email" | 20 | placeholder="fill your email" |
| 21 | v-model="editedItem.email" | 21 | v-model="editedItem.email" |
| 22 | type="text" | 22 | type="text" |
| 23 | name="email" | 23 | name="email" |
| 24 | required | 24 | required |
| 25 | ></v-text-field> | 25 | ></v-text-field> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | </v-layout> | 27 | </v-layout> |
| 28 | </v-flex> | 28 | </v-flex> |
| 29 | <v-flex xs12> | 29 | <v-flex xs12> |
| 30 | <v-layout> | 30 | <v-layout> |
| 31 | <v-flex xs3 sm4 class="pt-4 subheading"> | 31 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 32 | <label class="right">Father Name:</label> | 32 | <label class="right">Father Name:</label> |
| 33 | </v-flex> | 33 | </v-flex> |
| 34 | <v-flex xs8 sm6 class="ml-3"> | 34 | <v-flex xs8 sm6 class="ml-3"> |
| 35 | <v-text-field | 35 | <v-text-field |
| 36 | v-model="editedItem.fatherName" | 36 | v-model="editedItem.fatherName" |
| 37 | placeholder="fill your father Name" | 37 | placeholder="fill your father Name" |
| 38 | required | 38 | required |
| 39 | ></v-text-field> | 39 | ></v-text-field> |
| 40 | </v-flex> | 40 | </v-flex> |
| 41 | </v-layout> | 41 | </v-layout> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs12> | 43 | <v-flex xs12> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs3 sm4 class="pt-4 subheading"> | 45 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 46 | <label class="right">Father Cell No:</label> | 46 | <label class="right">Father Cell No:</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8 sm6 class="ml-3"> | 48 | <v-flex xs8 sm6 class="ml-3"> |
| 49 | <v-text-field | 49 | <v-text-field |
| 50 | v-model="editedItem.fatherCellNo" | 50 | v-model="editedItem.fatherCellNo" |
| 51 | placeholder="fill your father Cell Number" | 51 | placeholder="fill your father Cell Number" |
| 52 | :rules="editFatherNoRule" | 52 | :rules="editFatherNoRule" |
| 53 | type="number" | 53 | type="number" |
| 54 | required | 54 | required |
| 55 | ></v-text-field> | 55 | ></v-text-field> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | </v-layout> | 57 | </v-layout> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs12> | 59 | <v-flex xs12> |
| 60 | <v-layout> | 60 | <v-layout> |
| 61 | <v-flex xs3 sm4 class="pt-4 subheading"> | 61 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 62 | <label class="right">Father Profession:</label> | 62 | <label class="right">Father Profession:</label> |
| 63 | </v-flex> | 63 | </v-flex> |
| 64 | <v-flex xs8 sm6 class="ml-3"> | 64 | <v-flex xs8 sm6 class="ml-3"> |
| 65 | <v-text-field | 65 | <v-text-field |
| 66 | v-model="editedItem.fatherProfession" | 66 | v-model="editedItem.fatherProfession" |
| 67 | placeholder="fill your father Profession" | 67 | placeholder="fill your father Profession" |
| 68 | required | 68 | required |
| 69 | ></v-text-field> | 69 | ></v-text-field> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | </v-layout> | 71 | </v-layout> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs12> | 73 | <v-flex xs12> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs3 sm4 class="pt-4 subheading"> | 75 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 76 | <label class="right">Mother Name:</label> | 76 | <label class="right">Mother Name:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 sm6 class="ml-3"> | 78 | <v-flex xs8 sm6 class="ml-3"> |
| 79 | <v-text-field | 79 | <v-text-field |
| 80 | v-model="editedItem.motherName" | 80 | v-model="editedItem.motherName" |
| 81 | placeholder="fill your Mother Name" | 81 | placeholder="fill your Mother Name" |
| 82 | type="text" | 82 | type="text" |
| 83 | required | 83 | required |
| 84 | ></v-text-field> | 84 | ></v-text-field> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | </v-layout> | 86 | </v-layout> |
| 87 | </v-flex> | 87 | </v-flex> |
| 88 | <v-flex xs12> | 88 | <v-flex xs12> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs3 sm4 class="pt-4 subheading"> | 90 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 91 | <label class="right">Mother Cell No:</label> | 91 | <label class="right">Mother Cell No:</label> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | <v-flex xs8 sm6 class="ml-3"> | 93 | <v-flex xs8 sm6 class="ml-3"> |
| 94 | <v-text-field | 94 | <v-text-field |
| 95 | v-model="editedItem.motherCellNo" | 95 | v-model="editedItem.motherCellNo" |
| 96 | placeholder="fill your Mother Cell Number" | 96 | placeholder="fill your Mother Cell Number" |
| 97 | type="number" | 97 | type="number" |
| 98 | required | 98 | required |
| 99 | ></v-text-field> | 99 | ></v-text-field> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | </v-layout> | 101 | </v-layout> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12> | 103 | <v-flex xs12> |
| 104 | <v-layout> | 104 | <v-layout> |
| 105 | <v-flex xs3 sm4 class="pt-4 subheading"> | 105 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 106 | <label class="right">Mother Profession:</label> | 106 | <label class="right">Mother Profession:</label> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex xs8 sm6 class="ml-3"> | 108 | <v-flex xs8 sm6 class="ml-3"> |
| 109 | <v-text-field | 109 | <v-text-field |
| 110 | v-model="editedItem.motherProfession" | 110 | v-model="editedItem.motherProfession" |
| 111 | placeholder="fill your Mother Profession" | 111 | placeholder="fill your Mother Profession" |
| 112 | type="text" | 112 | type="text" |
| 113 | required | 113 | required |
| 114 | ></v-text-field> | 114 | ></v-text-field> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | </v-layout> | 116 | </v-layout> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs4 class="pt-4 subheading"> | 118 | <v-flex xs4 class="pt-4 subheading"> |
| 119 | <label class="right">Password:</label> | 119 | <label class="right">Password:</label> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | <v-flex xs8 class="ml-3"> | 121 | <v-flex xs8 class="ml-3"> |
| 122 | <v-text-field | 122 | <v-text-field |
| 123 | v-model="editedItem.password" | 123 | v-model="editedItem.password" |
| 124 | placeholder="Enter Password" | 124 | placeholder="Enter Password" |
| 125 | type="text" | 125 | type="text" |
| 126 | required | 126 | required |
| 127 | ></v-text-field> | 127 | ></v-text-field> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-layout> | 129 | </v-layout> |
| 130 | </v-flex> | 130 | </v-flex> |
| 131 | <v-layout> | 131 | <v-layout> |
| 132 | <v-flex xs12 sm12> | 132 | <v-flex xs12 sm12> |
| 133 | <v-card-actions> | 133 | <v-card-actions> |
| 134 | <v-spacer></v-spacer> | 134 | <v-spacer></v-spacer> |
| 135 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 135 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 136 | <v-spacer></v-spacer> | 136 | <v-spacer></v-spacer> |
| 137 | </v-card-actions> | 137 | </v-card-actions> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | </v-layout> | 139 | </v-layout> |
| 140 | </v-form> | 140 | </v-form> |
| 141 | </v-card-text> | 141 | </v-card-text> |
| 142 | <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> | 142 | <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 143 | <v-flex xs12> | 143 | <v-flex xs12> |
| 144 | <v-layout wrap> | 144 | <v-layout wrap> |
| 145 | <v-flex xs12 class="pt-4 subheading"> | 145 | <v-flex xs12 class="pt-4 subheading"> |
| 146 | <label>Email ID:</label> | 146 | <label>Email ID:</label> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | <v-flex xs12> | 148 | <v-flex xs12> |
| 149 | <v-text-field | 149 | <v-text-field |
| 150 | placeholder="fill your email" | 150 | placeholder="fill your email" |
| 151 | v-model="editedItem.email" | 151 | v-model="editedItem.email" |
| 152 | type="text" | 152 | type="text" |
| 153 | name="email" | 153 | name="email" |
| 154 | required | 154 | required |
| 155 | ></v-text-field> | 155 | ></v-text-field> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | </v-layout> | 157 | </v-layout> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | <v-flex xs12> | 159 | <v-flex xs12> |
| 160 | <v-layout wrap> | 160 | <v-layout wrap> |
| 161 | <v-flex xs12 class="pt-4 subheading"> | 161 | <v-flex xs12 class="pt-4 subheading"> |
| 162 | <label>Father Name:</label> | 162 | <label>Father Name:</label> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | <v-flex xs12> | 164 | <v-flex xs12> |
| 165 | <v-text-field | 165 | <v-text-field |
| 166 | v-model="editedItem.fatherName" | 166 | v-model="editedItem.fatherName" |
| 167 | placeholder="fill your father Name" | 167 | placeholder="fill your father Name" |
| 168 | required | 168 | required |
| 169 | ></v-text-field> | 169 | ></v-text-field> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-flex xs12> | 173 | <v-flex xs12> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <v-flex xs12 class="pt-4 subheading"> | 175 | <v-flex xs12 class="pt-4 subheading"> |
| 176 | <label>Father Cell No:</label> | 176 | <label>Father Cell No:</label> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | <v-flex xs12> | 178 | <v-flex xs12> |
| 179 | <v-text-field | 179 | <v-text-field |
| 180 | v-model="editedItem.fatherCellNo" | 180 | v-model="editedItem.fatherCellNo" |
| 181 | placeholder="fill your father Cell Number" | 181 | placeholder="fill your father Cell Number" |
| 182 | type="number" | 182 | type="number" |
| 183 | required | 183 | required |
| 184 | ></v-text-field> | 184 | ></v-text-field> |
| 185 | </v-flex> | 185 | </v-flex> |
| 186 | </v-layout> | 186 | </v-layout> |
| 187 | </v-flex> | 187 | </v-flex> |
| 188 | <v-flex xs12> | 188 | <v-flex xs12> |
| 189 | <v-layout wrap> | 189 | <v-layout wrap> |
| 190 | <v-flex xs12 class="pt-4 subheading"> | 190 | <v-flex xs12 class="pt-4 subheading"> |
| 191 | <label>Father Profession:</label> | 191 | <label>Father Profession:</label> |
| 192 | </v-flex> | 192 | </v-flex> |
| 193 | <v-flex xs12> | 193 | <v-flex xs12> |
| 194 | <v-text-field | 194 | <v-text-field |
| 195 | v-model="editedItem.fatherProfession" | 195 | v-model="editedItem.fatherProfession" |
| 196 | placeholder="fill your father Profession" | 196 | placeholder="fill your father Profession" |
| 197 | required | 197 | required |
| 198 | ></v-text-field> | 198 | ></v-text-field> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | </v-layout> | 200 | </v-layout> |
| 201 | </v-flex> | 201 | </v-flex> |
| 202 | <v-flex xs12> | 202 | <v-flex xs12> |
| 203 | <v-layout wrap> | 203 | <v-layout wrap> |
| 204 | <v-flex xs12 class="pt-4 subheading"> | 204 | <v-flex xs12 class="pt-4 subheading"> |
| 205 | <label>Mother Name:</label> | 205 | <label>Mother Name:</label> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | <v-flex xs12> | 207 | <v-flex xs12> |
| 208 | <v-text-field | 208 | <v-text-field |
| 209 | v-model="editedItem.motherName" | 209 | v-model="editedItem.motherName" |
| 210 | placeholder="fill your Mother Name" | 210 | placeholder="fill your Mother Name" |
| 211 | type="text" | 211 | type="text" |
| 212 | required | 212 | required |
| 213 | ></v-text-field> | 213 | ></v-text-field> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex xs12> | 217 | <v-flex xs12> |
| 218 | <v-layout wrap> | 218 | <v-layout wrap> |
| 219 | <v-flex xs12 class="pt-4 subheading"> | 219 | <v-flex xs12 class="pt-4 subheading"> |
| 220 | <label>Mother Cell No:</label> | 220 | <label>Mother Cell No:</label> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | <v-flex xs12> | 222 | <v-flex xs12> |
| 223 | <v-text-field | 223 | <v-text-field |
| 224 | v-model="editedItem.motherCellNo" | 224 | v-model="editedItem.motherCellNo" |
| 225 | placeholder="fill your Mother Cell Number" | 225 | placeholder="fill your Mother Cell Number" |
| 226 | type="number" | 226 | type="number" |
| 227 | required | 227 | required |
| 228 | ></v-text-field> | 228 | ></v-text-field> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs12> | 232 | <v-flex xs12> |
| 233 | <v-layout wrap> | 233 | <v-layout wrap> |
| 234 | <v-flex xs12 class="pt-4 subheading"> | 234 | <v-flex xs12 class="pt-4 subheading"> |
| 235 | <label>Mother Profession:</label> | 235 | <label>Mother Profession:</label> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex xs12> | 237 | <v-flex xs12> |
| 238 | <v-text-field | 238 | <v-text-field |
| 239 | v-model="editedItem.motherProfession" | 239 | v-model="editedItem.motherProfession" |
| 240 | placeholder="fill your Mother Profession" | 240 | placeholder="fill your Mother Profession" |
| 241 | type="text" | 241 | type="text" |
| 242 | required | 242 | required |
| 243 | ></v-text-field> | 243 | ></v-text-field> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | <v-flex xs12 class="pt-4 subheading"> | 245 | <v-flex xs12 class="pt-4 subheading"> |
| 246 | <label>Password:</label> | 246 | <label>Password:</label> |
| 247 | </v-flex> | 247 | </v-flex> |
| 248 | <v-flex xs12> | 248 | <v-flex xs12> |
| 249 | <v-text-field | 249 | <v-text-field |
| 250 | v-model="editedItem.password" | 250 | v-model="editedItem.password" |
| 251 | placeholder="Enter Password" | 251 | placeholder="Enter Password" |
| 252 | type="text" | 252 | type="text" |
| 253 | required | 253 | required |
| 254 | ></v-text-field> | 254 | ></v-text-field> |
| 255 | </v-flex> | 255 | </v-flex> |
| 256 | </v-layout> | 256 | </v-layout> |
| 257 | </v-flex> | 257 | </v-flex> |
| 258 | <v-layout> | 258 | <v-layout> |
| 259 | <v-flex xs12 sm12> | 259 | <v-flex xs12 sm12> |
| 260 | <v-card-actions> | 260 | <v-card-actions> |
| 261 | <v-spacer></v-spacer> | 261 | <v-spacer></v-spacer> |
| 262 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 262 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 263 | <v-spacer></v-spacer> | 263 | <v-spacer></v-spacer> |
| 264 | </v-card-actions> | 264 | </v-card-actions> |
| 265 | </v-flex> | 265 | </v-flex> |
| 266 | </v-layout> | 266 | </v-layout> |
| 267 | </v-card-text> | 267 | </v-card-text> |
| 268 | </v-card> | 268 | </v-card> |
| 269 | </v-dialog> | 269 | </v-dialog> |
| 270 | 270 | ||
| 271 | <!-- ****** RESET Parents MPIN ****** --> | 271 | <!-- ****** RESET Parents MPIN ****** --> |
| 272 | <v-dialog v-model="resetParentMpin" max-width="500px" scrollable> | 272 | <v-dialog v-model="resetParentMpin" max-width="500px" scrollable persistent> |
| 273 | <v-card class="card-style pa-2" dark> | 273 | <v-card class="card-style pa-2" dark> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs12> | 275 | <v-flex xs12> |
| 276 | <label class="title text-xs-center">Reset Mpin</label> | 276 | <label class="title text-xs-center">Reset Mpin</label> |
| 277 | <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon> | 277 | <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | <v-card-text class="hidden-xs-only hidden-sm-only"> | 280 | <v-card-text class="hidden-xs-only hidden-sm-only"> |
| 281 | <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation> | 281 | <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation> |
| 282 | <v-flex xs12> | 282 | <v-flex xs12> |
| 283 | <v-layout> | 283 | <v-layout> |
| 284 | <v-flex xs3 sm4 class="pt-4 subheading"> | 284 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 285 | <label class="right">Change Mpin:</label> | 285 | <label class="right">Change Mpin:</label> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | <v-flex xs8 sm6 class="ml-3"> | 287 | <v-flex xs8 sm6 class="ml-3"> |
| 288 | <v-text-field | 288 | <v-text-field |
| 289 | placeholder="change mpin" | 289 | placeholder="change mpin" |
| 290 | :rules="mPinRules" | 290 | :rules="mPinRules" |
| 291 | v-model="editMpin.mPin" | 291 | v-model="editMpin.mPin" |
| 292 | type="number" | 292 | type="number" |
| 293 | counter="4" | 293 | counter="4" |
| 294 | required | 294 | required |
| 295 | ></v-text-field> | 295 | ></v-text-field> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | </v-form> | 299 | </v-form> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs12 sm12> | 301 | <v-flex xs12 sm12> |
| 302 | <v-card-actions> | 302 | <v-card-actions> |
| 303 | <v-spacer></v-spacer> | 303 | <v-spacer></v-spacer> |
| 304 | <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn> | 304 | <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn> |
| 305 | <v-spacer></v-spacer> | 305 | <v-spacer></v-spacer> |
| 306 | </v-card-actions> | 306 | </v-card-actions> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | </v-card-text> | 309 | </v-card-text> |
| 310 | </v-card> | 310 | </v-card> |
| 311 | </v-dialog> | 311 | </v-dialog> |
| 312 | 312 | ||
| 313 | <!-- ****** PROFILE VIEW Parents DEATILS ****** --> | 313 | <!-- ****** PROFILE VIEW Parents DEATILS ****** --> |
| 314 | 314 | ||
| 315 | <v-dialog v-model="profileParentDialog" max-width="500px" scrollable> | 315 | <v-dialog v-model="profileParentDialog" max-width="500px" scrollable persistent> |
| 316 | <v-card class="card-style pa-2" dark> | 316 | <v-card class="card-style pa-2" dark> |
| 317 | <v-layout> | 317 | <v-layout> |
| 318 | <v-flex xs12> | 318 | <v-flex xs12> |
| 319 | <label class="title text-xs-center">View Parent Details</label> | 319 | <label class="title text-xs-center">View Parent Details</label> |
| 320 | <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> | 320 | <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 323 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 324 | <v-avatar size="100px"> | 324 | <v-avatar size="100px"> |
| 325 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 325 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 326 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 326 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 327 | </v-avatar> | 327 | </v-avatar> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | <v-container grid-list-md> | 329 | <v-container grid-list-md> |
| 330 | <v-layout wrap> | 330 | <v-layout wrap> |
| 331 | <v-flex xs12> | 331 | <v-flex xs12> |
| 332 | <v-layout> | 332 | <v-layout> |
| 333 | <v-flex xs12 sm12> | 333 | <v-flex xs12 sm12> |
| 334 | <v-layout> | 334 | <v-layout> |
| 335 | <v-flex xs6> | 335 | <v-flex xs6> |
| 336 | <h5 class="right my-1"> | 336 | <h5 class="right my-1"> |
| 337 | <b>Email:</b> | 337 | <b>Email:</b> |
| 338 | </h5> | 338 | </h5> |
| 339 | </v-flex> | 339 | </v-flex> |
| 340 | <v-flex xs6> | 340 | <v-flex xs6> |
| 341 | <h5 class="my-1">{{ editedItem.email }}</h5> | 341 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 342 | </v-flex> | 342 | </v-flex> |
| 343 | </v-layout> | 343 | </v-layout> |
| 344 | </v-flex> | 344 | </v-flex> |
| 345 | </v-layout> | 345 | </v-layout> |
| 346 | <v-layout> | 346 | <v-layout> |
| 347 | <v-flex xs12> | 347 | <v-flex xs12> |
| 348 | <v-layout> | 348 | <v-layout> |
| 349 | <v-flex xs6> | 349 | <v-flex xs6> |
| 350 | <b> | 350 | <b> |
| 351 | <h5 class="right my-1"> | 351 | <h5 class="right my-1"> |
| 352 | <b>Fahter Name:</b> | 352 | <b>Fahter Name:</b> |
| 353 | </h5> | 353 | </h5> |
| 354 | </b> | 354 | </b> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | <v-flex xs6> | 356 | <v-flex xs6> |
| 357 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> | 357 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | </v-layout> | 361 | </v-layout> |
| 362 | <v-layout> | 362 | <v-layout> |
| 363 | <v-flex xs12> | 363 | <v-flex xs12> |
| 364 | <v-layout> | 364 | <v-layout> |
| 365 | <v-flex xs6> | 365 | <v-flex xs6> |
| 366 | <b> | 366 | <b> |
| 367 | <h5 class="right my-1"> | 367 | <h5 class="right my-1"> |
| 368 | <b>Mother Name:</b> | 368 | <b>Mother Name:</b> |
| 369 | </h5> | 369 | </h5> |
| 370 | </b> | 370 | </b> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | <v-flex xs6> | 372 | <v-flex xs6> |
| 373 | <h5 class="my-1">{{ editedItem.motherName }}</h5> | 373 | <h5 class="my-1">{{ editedItem.motherName }}</h5> |
| 374 | </v-flex> | 374 | </v-flex> |
| 375 | </v-layout> | 375 | </v-layout> |
| 376 | </v-flex> | 376 | </v-flex> |
| 377 | </v-layout> | 377 | </v-layout> |
| 378 | <v-layout> | 378 | <v-layout> |
| 379 | <v-flex xs12> | 379 | <v-flex xs12> |
| 380 | <v-layout> | 380 | <v-layout> |
| 381 | <v-flex sm6 xs6> | 381 | <v-flex sm6 xs6> |
| 382 | <b> | 382 | <b> |
| 383 | <h5 class="right my-1"> | 383 | <h5 class="right my-1"> |
| 384 | <b>Father Cell No:</b> | 384 | <b>Father Cell No:</b> |
| 385 | </h5> | 385 | </h5> |
| 386 | </b> | 386 | </b> |
| 387 | </v-flex> | 387 | </v-flex> |
| 388 | <v-flex sm6 xs6> | 388 | <v-flex sm6 xs6> |
| 389 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> | 389 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | </v-layout> | 391 | </v-layout> |
| 392 | </v-flex> | 392 | </v-flex> |
| 393 | </v-layout> | 393 | </v-layout> |
| 394 | <v-layout> | 394 | <v-layout> |
| 395 | <v-flex xs12> | 395 | <v-flex xs12> |
| 396 | <v-layout> | 396 | <v-layout> |
| 397 | <v-flex xs6> | 397 | <v-flex xs6> |
| 398 | <b> | 398 | <b> |
| 399 | <h5 class="right my-1"> | 399 | <h5 class="right my-1"> |
| 400 | <b>Mother Cell No:</b> | 400 | <b>Mother Cell No:</b> |
| 401 | </h5> | 401 | </h5> |
| 402 | </b> | 402 | </b> |
| 403 | </v-flex> | 403 | </v-flex> |
| 404 | <v-flex xs6> | 404 | <v-flex xs6> |
| 405 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> | 405 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | </v-layout> | 409 | </v-layout> |
| 410 | <v-layout> | 410 | <v-layout> |
| 411 | <v-flex xs12> | 411 | <v-flex xs12> |
| 412 | <v-layout> | 412 | <v-layout> |
| 413 | <v-flex xs6> | 413 | <v-flex xs6> |
| 414 | <b> | 414 | <b> |
| 415 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> | 415 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> |
| 416 | <b>FatherProfession:</b> | 416 | <b>FatherProfession:</b> |
| 417 | </h5> | 417 | </h5> |
| 418 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> | 418 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> |
| 419 | <b>Father Profession:</b> | 419 | <b>Father Profession:</b> |
| 420 | </h5> | 420 | </h5> |
| 421 | </b> | 421 | </b> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | <v-flex xs6> | 423 | <v-flex xs6> |
| 424 | <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> | 424 | <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> |
| 425 | </v-flex> | 425 | </v-flex> |
| 426 | </v-layout> | 426 | </v-layout> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | <v-layout> | 429 | <v-layout> |
| 430 | <v-flex xs12> | 430 | <v-flex xs12> |
| 431 | <v-layout> | 431 | <v-layout> |
| 432 | <v-flex xs6> | 432 | <v-flex xs6> |
| 433 | <b> | 433 | <b> |
| 434 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> | 434 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> |
| 435 | <b>MotherProfession:</b> | 435 | <b>MotherProfession:</b> |
| 436 | </h5> | 436 | </h5> |
| 437 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> | 437 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> |
| 438 | <b>Mother Profession:</b> | 438 | <b>Mother Profession:</b> |
| 439 | </h5> | 439 | </h5> |
| 440 | </b> | 440 | </b> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | <v-flex xs6> | 442 | <v-flex xs6> |
| 443 | <h5 class="my-1">{{ editedItem.motherProfession }}</h5> | 443 | <h5 class="my-1">{{ editedItem.motherProfession }}</h5> |
| 444 | </v-flex> | 444 | </v-flex> |
| 445 | </v-layout> | 445 | </v-layout> |
| 446 | <!-- <v-layout> | 446 | <!-- <v-layout> |
| 447 | <v-flex xs6> | 447 | <v-flex xs6> |
| 448 | <b> | 448 | <b> |
| 449 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> | 449 | <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> |
| 450 | <b>Password:</b> | 450 | <b>Password:</b> |
| 451 | </h5> | 451 | </h5> |
| 452 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> | 452 | <h5 class="right my-1 hidden-sm-only hidden-xs-only"> |
| 453 | <b>Password:</b> | 453 | <b>Password:</b> |
| 454 | </h5> | 454 | </h5> |
| 455 | </b> | 455 | </b> |
| 456 | </v-flex> | 456 | </v-flex> |
| 457 | <v-flex xs6> | 457 | <v-flex xs6> |
| 458 | <h5 class="my-1">{{ editedItem.password }}</h5> | 458 | <h5 class="my-1">{{ editedItem.password }}</h5> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | </v-layout>--> | 460 | </v-layout>--> |
| 461 | </v-flex> | 461 | </v-flex> |
| 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-card> | 466 | </v-card> |
| 467 | </v-dialog> | 467 | </v-dialog> |
| 468 | <!-- ****** EXISTING-USERS Parents TABLE ****** --> | 468 | <!-- ****** EXISTING-USERS Parents TABLE ****** --> |
| 469 | <v-toolbar color="transparent" flat> | 469 | <v-toolbar color="transparent" flat> |
| 470 | <v-btn | 470 | <v-btn |
| 471 | fab | 471 | fab |
| 472 | dark | 472 | dark |
| 473 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 473 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 474 | small | 474 | small |
| 475 | @click="addParentDialog = true" | 475 | @click="addParentDialog = true" |
| 476 | > | 476 | > |
| 477 | <v-icon dark>add</v-icon> | 477 | <v-icon dark>add</v-icon> |
| 478 | </v-btn> | 478 | </v-btn> |
| 479 | <v-btn | 479 | <v-btn |
| 480 | v-if="role != 'TEACHER' " | 480 | v-if="role != 'TEACHER' " |
| 481 | round | 481 | round |
| 482 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 482 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 483 | dark | 483 | dark |
| 484 | @click="addParentDialog = true" | 484 | @click="addParentDialog = true" |
| 485 | > | 485 | > |
| 486 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent | 486 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent |
| 487 | </v-btn> | 487 | </v-btn> |
| 488 | <v-spacer></v-spacer> | 488 | <v-spacer></v-spacer> |
| 489 | <v-card-title class="body-1" v-show="show"> | 489 | <v-card-title class="body-1" v-show="show"> |
| 490 | <v-btn icon large flat @click="displaySearch"> | 490 | <v-btn icon large flat @click="displaySearch"> |
| 491 | <v-avatar size="27"> | 491 | <v-avatar size="27"> |
| 492 | <img src="/static/icon/search.png" alt="icon" /> | 492 | <img src="/static/icon/search.png" alt="icon" /> |
| 493 | </v-avatar> | 493 | </v-avatar> |
| 494 | </v-btn> | 494 | </v-btn> |
| 495 | </v-card-title> | 495 | </v-card-title> |
| 496 | <v-flex xs8 sm8 md2 lg2 v-if="showSearch"> | 496 | <v-flex xs8 sm8 md2 lg2 v-if="showSearch"> |
| 497 | <v-layout> | 497 | <v-layout> |
| 498 | <v-text-field | 498 | <v-text-field |
| 499 | v-model="search" | 499 | v-model="search" |
| 500 | label="Search" | 500 | label="Search" |
| 501 | prepend-inner-icon="search" | 501 | prepend-inner-icon="search" |
| 502 | color="primary" | 502 | color="primary" |
| 503 | ref="searchField" | 503 | ref="searchField" |
| 504 | autofocus | 504 | autofocus |
| 505 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 505 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 506 | ></v-text-field> | 506 | ></v-text-field> |
| 507 | <v-icon @click="closeSearch" color="error">close</v-icon> | 507 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 508 | </v-layout> | 508 | </v-layout> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | </v-toolbar> | 510 | </v-toolbar> |
| 511 | <v-data-table | 511 | <v-data-table |
| 512 | :headers="headers" | 512 | :headers="headers" |
| 513 | :items="parentsList" | 513 | :items="parentsList" |
| 514 | :pagination.sync="pagination" | 514 | :pagination.sync="pagination" |
| 515 | :search="search" | 515 | :search="search" |
| 516 | > | 516 | > |
| 517 | <template slot="items" slot-scope="props"> | 517 | <template slot="items" slot-scope="props"> |
| 518 | <tr class="tr"> | 518 | <tr class="tr"> |
| 519 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 519 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 520 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 520 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 521 | <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> | 521 | <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> |
| 522 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> | 522 | <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> |
| 523 | <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> | 523 | <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> |
| 524 | <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> | 524 | <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> |
| 525 | <td class="text-xs-center td td-row"> | 525 | <td class="text-xs-center td td-row"> |
| 526 | <span> | 526 | <span> |
| 527 | <v-tooltip top> | 527 | <v-tooltip top> |
| 528 | <img | 528 | <img |
| 529 | slot="activator" | 529 | slot="activator" |
| 530 | style="cursor:pointer; width:25px; height:25px; " | 530 | style="cursor:pointer; width:25px; height:25px; " |
| 531 | class="mr-3" | 531 | class="mr-3" |
| 532 | @click="profile(props.item)" | 532 | @click="profile(props.item)" |
| 533 | src="/static/icon/view.png" | 533 | src="/static/icon/view.png" |
| 534 | /> | 534 | /> |
| 535 | <span>View</span> | 535 | <span>View</span> |
| 536 | </v-tooltip> | 536 | </v-tooltip> |
| 537 | <v-tooltip top v-if="role != 'TEACHER' "> | 537 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 538 | <img | 538 | <img |
| 539 | slot="activator" | 539 | slot="activator" |
| 540 | style="cursor:pointer; width:20px; height:18px; " | 540 | style="cursor:pointer; width:20px; height:18px; " |
| 541 | @click="editItem(props.item)" | 541 | @click="editItem(props.item)" |
| 542 | src="/static/icon/edit.png" | 542 | src="/static/icon/edit.png" |
| 543 | class="mr-3" | 543 | class="mr-3" |
| 544 | /> | 544 | /> |
| 545 | <span>Edit</span> | 545 | <span>Edit</span> |
| 546 | </v-tooltip> | 546 | </v-tooltip> |
| 547 | <span v-if="role === 'ADMIN' "> | 547 | <span v-if="role === 'ADMIN' "> |
| 548 | <i | 548 | <i |
| 549 | class="material-icons md-18" | 549 | class="material-icons md-18" |
| 550 | style="cursor:pointer; width:20px; height:18px;" | 550 | style="cursor:pointer; width:20px; height:18px;" |
| 551 | @click="resetParentMPIN(props.item)" | 551 | @click="resetParentMPIN(props.item)" |
| 552 | >vpn_key</i> | 552 | >vpn_key</i> |
| 553 | </span> | 553 | </span> |
| 554 | </span> | 554 | </span> |
| 555 | </td> | 555 | </td> |
| 556 | </tr> | 556 | </tr> |
| 557 | </template> | 557 | </template> |
| 558 | <v-alert | 558 | <v-alert |
| 559 | slot="no-results" | 559 | slot="no-results" |
| 560 | :value="true" | 560 | :value="true" |
| 561 | color="error" | 561 | color="error" |
| 562 | icon="warning" | 562 | icon="warning" |
| 563 | >Your search for "{{ search }}" found no results.</v-alert> | 563 | >Your search for "{{ search }}" found no results.</v-alert> |
| 564 | </v-data-table> | 564 | </v-data-table> |
| 565 | 565 | ||
| 566 | <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** --> | 566 | <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** --> |
| 567 | <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog"> | 567 | <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog" persistent> |
| 568 | <v-card flat class="card-style pa-2" dark> | 568 | <v-card flat class="card-style pa-2" dark> |
| 569 | <v-layout> | 569 | <v-layout> |
| 570 | <v-flex xs12> | 570 | <v-flex xs12> |
| 571 | <label class="title text-xs-center">Add Parent</label> | 571 | <label class="title text-xs-center">Add Parent</label> |
| 572 | <v-icon | 572 | <v-icon |
| 573 | size="24" | 573 | size="24" |
| 574 | class="right" | 574 | class="right" |
| 575 | @click="$refs.parentForm.reset();addParentDialog = false" | 575 | @click="$refs.parentForm.reset();addParentDialog = false" |
| 576 | >cancel</v-icon> | 576 | >cancel</v-icon> |
| 577 | </v-flex> | 577 | </v-flex> |
| 578 | </v-layout> | 578 | </v-layout> |
| 579 | <v-container fluid fill-height> | 579 | <v-container fluid fill-height> |
| 580 | <v-layout align-center> | 580 | <v-layout align-center> |
| 581 | <v-flex xs12 sm12> | 581 | <v-flex xs12 sm12> |
| 582 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 582 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 583 | <v-container fluid class="hidden-xs-only hidden-sm-only"> | 583 | <v-container fluid class="hidden-xs-only hidden-sm-only"> |
| 584 | <v-layout> | 584 | <v-layout> |
| 585 | <v-flex xs12 sm6> | 585 | <v-flex xs12 sm6> |
| 586 | <v-layout> | 586 | <v-layout> |
| 587 | <v-flex xs4 class="pt-4 subheading"> | 587 | <v-flex xs4 class="pt-4 subheading"> |
| 588 | <label class="right">Father Cell No:</label> | 588 | <label class="right">Father Cell No:</label> |
| 589 | </v-flex> | 589 | </v-flex> |
| 590 | <v-flex xs8 class="ml-3"> | 590 | <v-flex xs8 class="ml-3"> |
| 591 | <v-text-field | 591 | <v-text-field |
| 592 | v-model="parentData.fatherCellNo" | 592 | v-model="parentData.fatherCellNo" |
| 593 | placeholder="fill your father Cell Number" | 593 | placeholder="fill your father Cell Number" |
| 594 | type="number" | 594 | type="number" |
| 595 | :rules="fatheCellNoRules" | 595 | :rules="fatheCellNoRules" |
| 596 | counter="10" | 596 | counter="10" |
| 597 | required | 597 | required |
| 598 | ></v-text-field> | 598 | ></v-text-field> |
| 599 | </v-flex> | 599 | </v-flex> |
| 600 | </v-layout> | 600 | </v-layout> |
| 601 | </v-flex> | 601 | </v-flex> |
| 602 | <v-flex xs12 sm6> | 602 | <v-flex xs12 sm6> |
| 603 | <v-layout> | 603 | <v-layout> |
| 604 | <v-flex xs4 class="pt-4 subheading"> | 604 | <v-flex xs4 class="pt-4 subheading"> |
| 605 | <label class="right">Parent Email Id:</label> | 605 | <label class="right">Parent Email Id:</label> |
| 606 | </v-flex> | 606 | </v-flex> |
| 607 | <v-flex xs8 class="ml-3"> | 607 | <v-flex xs8 class="ml-3"> |
| 608 | <v-text-field | 608 | <v-text-field |
| 609 | placeholder="fill Parent email" | 609 | placeholder="fill Parent email" |
| 610 | v-model="parentData.email" | 610 | v-model="parentData.email" |
| 611 | type="text" | 611 | type="text" |
| 612 | required | 612 | required |
| 613 | ></v-text-field> | 613 | ></v-text-field> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | </v-layout> | 615 | </v-layout> |
| 616 | </v-flex> | 616 | </v-flex> |
| 617 | </v-layout> | 617 | </v-layout> |
| 618 | <v-layout> | 618 | <v-layout> |
| 619 | <v-flex xs12 sm6> | 619 | <v-flex xs12 sm6> |
| 620 | <v-layout> | 620 | <v-layout> |
| 621 | <v-flex xs4 class="pt-4 subheading"> | 621 | <v-flex xs4 class="pt-4 subheading"> |
| 622 | <label class="right">Father Name:</label> | 622 | <label class="right">Father Name:</label> |
| 623 | </v-flex> | 623 | </v-flex> |
| 624 | <v-flex xs8 class="ml-3"> | 624 | <v-flex xs8 class="ml-3"> |
| 625 | <v-text-field | 625 | <v-text-field |
| 626 | v-model="parentData.fatherName" | 626 | v-model="parentData.fatherName" |
| 627 | placeholder="Fill your father Name" | 627 | placeholder="Fill your father Name" |
| 628 | required | 628 | required |
| 629 | ></v-text-field> | 629 | ></v-text-field> |
| 630 | </v-flex> | 630 | </v-flex> |
| 631 | </v-layout> | 631 | </v-layout> |
| 632 | </v-flex> | 632 | </v-flex> |
| 633 | <v-flex xs12 sm6> | 633 | <v-flex xs12 sm6> |
| 634 | <v-layout> | 634 | <v-layout> |
| 635 | <v-flex xs4 class="pt-4 subheading"> | 635 | <v-flex xs4 class="pt-4 subheading"> |
| 636 | <label class="right">Father Profession:</label> | 636 | <label class="right">Father Profession:</label> |
| 637 | </v-flex> | 637 | </v-flex> |
| 638 | <v-flex xs8 class="ml-3"> | 638 | <v-flex xs8 class="ml-3"> |
| 639 | <v-text-field | 639 | <v-text-field |
| 640 | v-model="parentData.fatherProfession" | 640 | v-model="parentData.fatherProfession" |
| 641 | placeholder="fill your father Profession" | 641 | placeholder="fill your father Profession" |
| 642 | required | 642 | required |
| 643 | ></v-text-field> | 643 | ></v-text-field> |
| 644 | </v-flex> | 644 | </v-flex> |
| 645 | </v-layout> | 645 | </v-layout> |
| 646 | </v-flex> | 646 | </v-flex> |
| 647 | </v-layout> | 647 | </v-layout> |
| 648 | <v-layout> | 648 | <v-layout> |
| 649 | <v-flex xs12 sm6> | 649 | <v-flex xs12 sm6> |
| 650 | <v-layout> | 650 | <v-layout> |
| 651 | <v-flex xs4 class="pt-4 subheading"> | 651 | <v-flex xs4 class="pt-4 subheading"> |
| 652 | <label class="right">Mother Name:</label> | 652 | <label class="right">Mother Name:</label> |
| 653 | </v-flex> | 653 | </v-flex> |
| 654 | <v-flex xs8 class="ml-3"> | 654 | <v-flex xs8 class="ml-3"> |
| 655 | <v-text-field | 655 | <v-text-field |
| 656 | v-model="parentData.motherName" | 656 | v-model="parentData.motherName" |
| 657 | placeholder="fill your Mother Name" | 657 | placeholder="fill your Mother Name" |
| 658 | type="text" | 658 | type="text" |
| 659 | required | 659 | required |
| 660 | ></v-text-field> | 660 | ></v-text-field> |
| 661 | </v-flex> | 661 | </v-flex> |
| 662 | </v-layout> | 662 | </v-layout> |
| 663 | </v-flex> | 663 | </v-flex> |
| 664 | <v-flex xs12 sm6> | 664 | <v-flex xs12 sm6> |
| 665 | <v-layout> | 665 | <v-layout> |
| 666 | <v-flex xs4 class="pt-4 subheading"> | 666 | <v-flex xs4 class="pt-4 subheading"> |
| 667 | <label class="right">Mother Cell No:</label> | 667 | <label class="right">Mother Cell No:</label> |
| 668 | </v-flex> | 668 | </v-flex> |
| 669 | <v-flex xs8 class="ml-3"> | 669 | <v-flex xs8 class="ml-3"> |
| 670 | <v-text-field | 670 | <v-text-field |
| 671 | v-model="parentData.motherCellNo" | 671 | v-model="parentData.motherCellNo" |
| 672 | placeholder="fill your Mother Cell Number" | 672 | placeholder="fill your Mother Cell Number" |
| 673 | counter="10" | 673 | counter="10" |
| 674 | type="number" | 674 | type="number" |
| 675 | required | 675 | required |
| 676 | ></v-text-field> | 676 | ></v-text-field> |
| 677 | </v-flex> | 677 | </v-flex> |
| 678 | </v-layout> | 678 | </v-layout> |
| 679 | </v-flex> | 679 | </v-flex> |
| 680 | </v-layout> | 680 | </v-layout> |
| 681 | <v-layout> | 681 | <v-layout> |
| 682 | <v-flex xs12 sm6> | 682 | <v-flex xs12 sm6> |
| 683 | <v-layout> | 683 | <v-layout> |
| 684 | <v-flex xs4 class="pt-4 subheading"> | 684 | <v-flex xs4 class="pt-4 subheading"> |
| 685 | <label class="right">Mother Profession:</label> | 685 | <label class="right">Mother Profession:</label> |
| 686 | </v-flex> | 686 | </v-flex> |
| 687 | <v-flex xs8 class="ml-3"> | 687 | <v-flex xs8 class="ml-3"> |
| 688 | <v-text-field | 688 | <v-text-field |
| 689 | v-model="parentData.motherProfession" | 689 | v-model="parentData.motherProfession" |
| 690 | placeholder="fill your Mother Profession" | 690 | placeholder="fill your Mother Profession" |
| 691 | type="text" | 691 | type="text" |
| 692 | required | 692 | required |
| 693 | ></v-text-field> | 693 | ></v-text-field> |
| 694 | </v-flex> | 694 | </v-flex> |
| 695 | </v-layout> | 695 | </v-layout> |
| 696 | </v-flex> | 696 | </v-flex> |
| 697 | <v-flex xs12 sm6> | 697 | <v-flex xs12 sm6> |
| 698 | <v-layout> | 698 | <v-layout> |
| 699 | <v-flex xs4 class="pt-4 subheading"> | 699 | <v-flex xs4 class="pt-4 subheading"> |
| 700 | <label class="right">Password:</label> | 700 | <label class="right">Password:</label> |
| 701 | </v-flex> | 701 | </v-flex> |
| 702 | <v-flex xs8 class="ml-3"> | 702 | <v-flex xs8 class="ml-3"> |
| 703 | <v-text-field | 703 | <v-text-field |
| 704 | v-model="parentData.password" | 704 | v-model="parentData.password" |
| 705 | :append-icon="e1 ? 'visibility_off' : 'visibility'" | 705 | :append-icon="e1 ? 'visibility_off' : 'visibility'" |
| 706 | :append-icon-cb="() => (e1 = !e1)" | 706 | :append-icon-cb="() => (e1 = !e1)" |
| 707 | :type="e1 ? 'password' : 'text'" | 707 | :type="e1 ? 'password' : 'text'" |
| 708 | :rules="password" | 708 | :rules="password" |
| 709 | placeholder="Enter Your Password" | 709 | placeholder="Enter Your Password" |
| 710 | :disabled="isFatherCellExists" | 710 | :disabled="isFatherCellExists" |
| 711 | required | 711 | required |
| 712 | ></v-text-field> | 712 | ></v-text-field> |
| 713 | </v-flex> | 713 | </v-flex> |
| 714 | </v-layout> | 714 | </v-layout> |
| 715 | </v-flex> | 715 | </v-flex> |
| 716 | </v-layout> | 716 | </v-layout> |
| 717 | <v-flex xs12 sm12> | 717 | <v-flex xs12 sm12> |
| 718 | <v-layout> | 718 | <v-layout> |
| 719 | <v-flex xs12 sm12> | 719 | <v-flex xs12 sm12> |
| 720 | <v-btn | 720 | <v-btn |
| 721 | class="right add-button" | 721 | class="right add-button" |
| 722 | @click="submitParentDetails" | 722 | @click="submitParentDetails" |
| 723 | round | 723 | round |
| 724 | dark | 724 | dark |
| 725 | :loading="loading" | 725 | :loading="loading" |
| 726 | v-show="showParent" | 726 | v-show="showParent" |
| 727 | >Add</v-btn> | 727 | >Add</v-btn> |
| 728 | <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> | 728 | <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | </v-container> | 732 | </v-container> |
| 733 | <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> | 733 | <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 734 | <v-layout wrap> | 734 | <v-layout wrap> |
| 735 | <v-flex xs12 sm6> | 735 | <v-flex xs12 sm6> |
| 736 | <v-layout wrap> | 736 | <v-layout wrap> |
| 737 | <v-flex xs12 class="pt-4 subheading"> | 737 | <v-flex xs12 class="pt-4 subheading"> |
| 738 | <label>Father Cell No:</label> | 738 | <label>Father Cell No:</label> |
| 739 | </v-flex> | 739 | </v-flex> |
| 740 | <v-flex xs12> | 740 | <v-flex xs12> |
| 741 | <v-text-field | 741 | <v-text-field |
| 742 | v-model="parentData.fatherCellNo" | 742 | v-model="parentData.fatherCellNo" |
| 743 | :rules="fatheCellNoRules" | 743 | :rules="fatheCellNoRules" |
| 744 | counter="10" | 744 | counter="10" |
| 745 | placeholder="fill your father Cell Number" | 745 | placeholder="fill your father Cell Number" |
| 746 | type="number" | 746 | type="number" |
| 747 | required | 747 | required |
| 748 | ></v-text-field> | 748 | ></v-text-field> |
| 749 | </v-flex> | 749 | </v-flex> |
| 750 | </v-layout> | 750 | </v-layout> |
| 751 | </v-flex> | 751 | </v-flex> |
| 752 | <v-flex xs12 sm6> | 752 | <v-flex xs12 sm6> |
| 753 | <v-layout wrap> | 753 | <v-layout wrap> |
| 754 | <v-flex xs12 class="pt-4 subheading"> | 754 | <v-flex xs12 class="pt-4 subheading"> |
| 755 | <label>Parent Email Id:</label> | 755 | <label>Parent Email Id:</label> |
| 756 | </v-flex> | 756 | </v-flex> |
| 757 | <v-flex xs12> | 757 | <v-flex xs12> |
| 758 | <v-text-field | 758 | <v-text-field |
| 759 | placeholder="fill Parent email" | 759 | placeholder="fill Parent email" |
| 760 | v-model="parentData.email" | 760 | v-model="parentData.email" |
| 761 | type="text" | 761 | type="text" |
| 762 | required | 762 | required |
| 763 | ></v-text-field> | 763 | ></v-text-field> |
| 764 | </v-flex> | 764 | </v-flex> |
| 765 | </v-layout> | 765 | </v-layout> |
| 766 | </v-flex> | 766 | </v-flex> |
| 767 | </v-layout> | 767 | </v-layout> |
| 768 | <v-layout wrap> | 768 | <v-layout wrap> |
| 769 | <v-flex xs12 sm6> | 769 | <v-flex xs12 sm6> |
| 770 | <v-layout wrap> | 770 | <v-layout wrap> |
| 771 | <v-flex xs12 class="pt-4 subheading"> | 771 | <v-flex xs12 class="pt-4 subheading"> |
| 772 | <label>Father Name:</label> | 772 | <label>Father Name:</label> |
| 773 | </v-flex> | 773 | </v-flex> |
| 774 | <v-flex xs12> | 774 | <v-flex xs12> |
| 775 | <v-text-field | 775 | <v-text-field |
| 776 | v-model="parentData.fatherName" | 776 | v-model="parentData.fatherName" |
| 777 | placeholder="Fill your father Name" | 777 | placeholder="Fill your father Name" |
| 778 | required | 778 | required |
| 779 | ></v-text-field> | 779 | ></v-text-field> |
| 780 | </v-flex> | 780 | </v-flex> |
| 781 | </v-layout> | 781 | </v-layout> |
| 782 | </v-flex> | 782 | </v-flex> |
| 783 | <v-flex xs12 sm6> | 783 | <v-flex xs12 sm6> |
| 784 | <v-layout wrap> | 784 | <v-layout wrap> |
| 785 | <v-flex xs12 class="pt-4 subheading"> | 785 | <v-flex xs12 class="pt-4 subheading"> |
| 786 | <label>Father Profession:</label> | 786 | <label>Father Profession:</label> |
| 787 | </v-flex> | 787 | </v-flex> |
| 788 | <v-flex xs12> | 788 | <v-flex xs12> |
| 789 | <v-text-field | 789 | <v-text-field |
| 790 | v-model="parentData.fatherProfession" | 790 | v-model="parentData.fatherProfession" |
| 791 | placeholder="fill your father Profession" | 791 | placeholder="fill your father Profession" |
| 792 | required | 792 | required |
| 793 | ></v-text-field> | 793 | ></v-text-field> |
| 794 | </v-flex> | 794 | </v-flex> |
| 795 | </v-layout> | 795 | </v-layout> |
| 796 | </v-flex> | 796 | </v-flex> |
| 797 | </v-layout> | 797 | </v-layout> |
| 798 | <v-layout wrap> | 798 | <v-layout wrap> |
| 799 | <v-flex xs12 sm6> | 799 | <v-flex xs12 sm6> |
| 800 | <v-layout wrap> | 800 | <v-layout wrap> |
| 801 | <v-flex xs12 class="pt-4 subheading"> | 801 | <v-flex xs12 class="pt-4 subheading"> |
| 802 | <label>Mother Name:</label> | 802 | <label>Mother Name:</label> |
| 803 | </v-flex> | 803 | </v-flex> |
| 804 | <v-flex xs12> | 804 | <v-flex xs12> |
| 805 | <v-text-field | 805 | <v-text-field |
| 806 | v-model="parentData.motherName" | 806 | v-model="parentData.motherName" |
| 807 | placeholder="fill your Mother Name" | 807 | placeholder="fill your Mother Name" |
| 808 | type="text" | 808 | type="text" |
| 809 | required | 809 | required |
| 810 | ></v-text-field> | 810 | ></v-text-field> |
| 811 | </v-flex> | 811 | </v-flex> |
| 812 | </v-layout> | 812 | </v-layout> |
| 813 | </v-flex> | 813 | </v-flex> |
| 814 | <v-flex xs12 sm6> | 814 | <v-flex xs12 sm6> |
| 815 | <v-layout wrap> | 815 | <v-layout wrap> |
| 816 | <v-flex xs42 class="pt-4 subheading"> | 816 | <v-flex xs42 class="pt-4 subheading"> |
| 817 | <label>Mother Cell No:</label> | 817 | <label>Mother Cell No:</label> |
| 818 | </v-flex> | 818 | </v-flex> |
| 819 | <v-flex xs12> | 819 | <v-flex xs12> |
| 820 | <v-text-field | 820 | <v-text-field |
| 821 | v-model="parentData.motherCellNo" | 821 | v-model="parentData.motherCellNo" |
| 822 | placeholder="fill your Mother Cell Number" | 822 | placeholder="fill your Mother Cell Number" |
| 823 | type="number" | 823 | type="number" |
| 824 | required | 824 | required |
| 825 | ></v-text-field> | 825 | ></v-text-field> |
| 826 | </v-flex> | 826 | </v-flex> |
| 827 | </v-layout> | 827 | </v-layout> |
| 828 | </v-flex> | 828 | </v-flex> |
| 829 | </v-layout> | 829 | </v-layout> |
| 830 | <v-layout wrap> | 830 | <v-layout wrap> |
| 831 | <v-flex xs12 sm6> | 831 | <v-flex xs12 sm6> |
| 832 | <v-layout wrap> | 832 | <v-layout wrap> |
| 833 | <v-flex xs12 class="pt-4 subheading"> | 833 | <v-flex xs12 class="pt-4 subheading"> |
| 834 | <label>Mother Profession:</label> | 834 | <label>Mother Profession:</label> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | <v-flex xs12> | 836 | <v-flex xs12> |
| 837 | <v-text-field | 837 | <v-text-field |
| 838 | v-model="parentData.motherProfession" | 838 | v-model="parentData.motherProfession" |
| 839 | placeholder="fill your Mother Profession" | 839 | placeholder="fill your Mother Profession" |
| 840 | type="text" | 840 | type="text" |
| 841 | required | 841 | required |
| 842 | ></v-text-field> | 842 | ></v-text-field> |
| 843 | </v-flex> | 843 | </v-flex> |
| 844 | </v-layout> | 844 | </v-layout> |
| 845 | </v-flex> | 845 | </v-flex> |
| 846 | </v-layout> | 846 | </v-layout> |
| 847 | <v-flex xs12 sm12> | 847 | <v-flex xs12 sm12> |
| 848 | <v-layout> | 848 | <v-layout> |
| 849 | <v-flex xs6 sm6 offset-sm1> | 849 | <v-flex xs6 sm6 offset-sm1> |
| 850 | <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> | 850 | <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> |
| 851 | </v-flex> | 851 | </v-flex> |
| 852 | <v-flex xs6 sm6> | 852 | <v-flex xs6 sm6> |
| 853 | <v-btn | 853 | <v-btn |
| 854 | class="add-button" | 854 | class="add-button" |
| 855 | @click="submitParentDetails" | 855 | @click="submitParentDetails" |
| 856 | round | 856 | round |
| 857 | dark | 857 | dark |
| 858 | :loading="loading" | 858 | :loading="loading" |
| 859 | v-show="showParent" | 859 | v-show="showParent" |
| 860 | >Add</v-btn> | 860 | >Add</v-btn> |
| 861 | </v-flex> | 861 | </v-flex> |
| 862 | </v-layout> | 862 | </v-layout> |
| 863 | </v-flex> | 863 | </v-flex> |
| 864 | </v-container> | 864 | </v-container> |
| 865 | </v-form> | 865 | </v-form> |
| 866 | </v-flex> | 866 | </v-flex> |
| 867 | </v-layout> | 867 | </v-layout> |
| 868 | </v-container> | 868 | </v-container> |
| 869 | </v-card> | 869 | </v-card> |
| 870 | </v-dialog> | 870 | </v-dialog> |
| 871 | <div class="loader" v-if="showLoader"> | 871 | <div class="loader" v-if="showLoader"> |
| 872 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 872 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 873 | </div> | 873 | </div> |
| 874 | <v-snackbar | 874 | <v-snackbar |
| 875 | :timeout="timeout" | 875 | :timeout="timeout" |
| 876 | :top="y === 'top'" | 876 | :top="y === 'top'" |
| 877 | :right="x === 'right'" | 877 | :right="x === 'right'" |
| 878 | :vertical="mode === 'vertical'" | 878 | :vertical="mode === 'vertical'" |
| 879 | v-model="snackbar" | 879 | v-model="snackbar" |
| 880 | color="success" | 880 | color="success" |
| 881 | >{{ text }}</v-snackbar> | 881 | >{{ text }}</v-snackbar> |
| 882 | </v-container> | 882 | </v-container> |
| 883 | </template> | 883 | </template> |
| 884 | 884 | ||
| 885 | <script> | 885 | <script> |
| 886 | import http from "@/Services/http.js"; | 886 | import http from "@/Services/http.js"; |
| 887 | import Util from "@/util"; | 887 | import Util from "@/util"; |
| 888 | import moment from "moment"; | 888 | import moment from "moment"; |
| 889 | 889 | ||
| 890 | export default { | 890 | export default { |
| 891 | data: () => ({ | 891 | data: () => ({ |
| 892 | e1: true, | 892 | e1: true, |
| 893 | showParent: true, | 893 | showParent: true, |
| 894 | snackbar: false, | 894 | snackbar: false, |
| 895 | role: "", | 895 | role: "", |
| 896 | // TEACHER: "", | 896 | // TEACHER: "", |
| 897 | y: "top", | 897 | y: "top", |
| 898 | x: "right", | 898 | x: "right", |
| 899 | color: "", | 899 | color: "", |
| 900 | mode: "", | 900 | mode: "", |
| 901 | timeout: 3000, | 901 | timeout: 3000, |
| 902 | text: "", | 902 | text: "", |
| 903 | show: true, | 903 | show: true, |
| 904 | showSearch: false, | 904 | showSearch: false, |
| 905 | showLoader: false, | 905 | showLoader: false, |
| 906 | loading: false, | 906 | loading: false, |
| 907 | date: null, | 907 | date: null, |
| 908 | search: "", | 908 | search: "", |
| 909 | password: "", | 909 | password: "", |
| 910 | addParentDialog: false, | 910 | addParentDialog: false, |
| 911 | menu: false, | 911 | menu: false, |
| 912 | menu1: false, | 912 | menu1: false, |
| 913 | editParentDilaog: false, | 913 | editParentDilaog: false, |
| 914 | profileParentDialog: false, | 914 | profileParentDialog: false, |
| 915 | resetParentMpin: false, | 915 | resetParentMpin: false, |
| 916 | viewProfileParentDialog: false, | 916 | viewProfileParentDialog: false, |
| 917 | valid: true, | 917 | valid: true, |
| 918 | validEditParent: true, | 918 | validEditParent: true, |
| 919 | validParentMpin: true, | 919 | validParentMpin: true, |
| 920 | pagination: { | 920 | pagination: { |
| 921 | rowsPerPage: 10, | 921 | rowsPerPage: 10, |
| 922 | }, | 922 | }, |
| 923 | fatherNameRules: [(v) => !!v || " Father Name is required"], | 923 | fatherNameRules: [(v) => !!v || " Father Name is required"], |
| 924 | fatheCellNoRules: [ | 924 | fatheCellNoRules: [ |
| 925 | (v) => !!v || " father Cell Number is required", | 925 | (v) => !!v || " father Cell Number is required", |
| 926 | (v) => v <= 10000000000 || "Max 10 characters is required", | 926 | (v) => v <= 10000000000 || "Max 10 characters is required", |
| 927 | ], | 927 | ], |
| 928 | password: [ | 928 | password: [ |
| 929 | (v) => !!v || "Password field is Required.", | 929 | (v) => !!v || "Password field is Required.", |
| 930 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required' | 930 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required' |
| 931 | ], | 931 | ], |
| 932 | editFatherNoRule: [ | 932 | editFatherNoRule: [ |
| 933 | (v) => !!v || " father Cell Number is required", | 933 | (v) => !!v || " father Cell Number is required", |
| 934 | (v) => v <= 10000000000 || "Max 10 characters is required", | 934 | (v) => v <= 10000000000 || "Max 10 characters is required", |
| 935 | ], | 935 | ], |
| 936 | 936 | ||
| 937 | editfatherCellNo: [(v) => !!v || " Father Name is required"], | 937 | editfatherCellNo: [(v) => !!v || " Father Name is required"], |
| 938 | errorMessages: "", | 938 | errorMessages: "", |
| 939 | emailRules: [ | 939 | emailRules: [ |
| 940 | (v) => !!v || "E-mail is required", | 940 | (v) => !!v || "E-mail is required", |
| 941 | (v) => | 941 | (v) => |
| 942 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 942 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 943 | "E-mail must be valid", | 943 | "E-mail must be valid", |
| 944 | ], | 944 | ], |
| 945 | mPinRules: [ | 945 | mPinRules: [ |
| 946 | (v) => !!v || "MPIN is required", | 946 | (v) => !!v || "MPIN is required", |
| 947 | (v) => v <= 10000 || "Max 4 numbers are required", | 947 | (v) => v <= 10000 || "Max 4 numbers are required", |
| 948 | ], | 948 | ], |
| 949 | headers: [ | 949 | headers: [ |
| 950 | { | 950 | { |
| 951 | text: "No", | 951 | text: "No", |
| 952 | align: "center", | 952 | align: "center", |
| 953 | sortable: false, | 953 | sortable: false, |
| 954 | value: "No", | 954 | value: "No", |
| 955 | }, | 955 | }, |
| 956 | { text: "Email", value: "email", sortable: false, align: "center" }, | 956 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 957 | { | 957 | { |
| 958 | text: "Father Name", | 958 | text: "Father Name", |
| 959 | value: "fatherName", | 959 | value: "fatherName", |
| 960 | sortable: false, | 960 | sortable: false, |
| 961 | align: "center", | 961 | align: "center", |
| 962 | }, | 962 | }, |
| 963 | { | 963 | { |
| 964 | text: "Father Cell No", | 964 | text: "Father Cell No", |
| 965 | value: "fatherName", | 965 | value: "fatherName", |
| 966 | sortable: false, | 966 | sortable: false, |
| 967 | align: "center", | 967 | align: "center", |
| 968 | }, | 968 | }, |
| 969 | { | 969 | { |
| 970 | text: "Mother Name", | 970 | text: "Mother Name", |
| 971 | value: "motherName", | 971 | value: "motherName", |
| 972 | sortable: false, | 972 | sortable: false, |
| 973 | align: "center", | 973 | align: "center", |
| 974 | }, | 974 | }, |
| 975 | { | 975 | { |
| 976 | text: "Mother Cell No", | 976 | text: "Mother Cell No", |
| 977 | value: "motherCellNo", | 977 | value: "motherCellNo", |
| 978 | sortable: false, | 978 | sortable: false, |
| 979 | align: "center", | 979 | align: "center", |
| 980 | }, | 980 | }, |
| 981 | { text: "Action", value: "", sortable: false, align: "center" }, | 981 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 982 | ], | 982 | ], |
| 983 | parentsList: [], | 983 | parentsList: [], |
| 984 | editedIndex: -1, | 984 | editedIndex: -1, |
| 985 | parentData: {}, | 985 | parentData: {}, |
| 986 | max: 10, | 986 | max: 10, |
| 987 | editedItem: { | 987 | editedItem: { |
| 988 | fatherName: "", | 988 | fatherName: "", |
| 989 | fatherCellNo: "", | 989 | fatherCellNo: "", |
| 990 | motherName: "", | 990 | motherName: "", |
| 991 | motherCellNo: "", | 991 | motherCellNo: "", |
| 992 | email: "", | 992 | email: "", |
| 993 | password: "", | 993 | password: "", |
| 994 | }, | 994 | }, |
| 995 | editMpin: { | 995 | editMpin: { |
| 996 | mPin: "", | 996 | mPin: "", |
| 997 | }, | 997 | }, |
| 998 | isFatherCellExists: false, | 998 | isFatherCellExists: false, |
| 999 | }), | 999 | }), |
| 1000 | watch: { | 1000 | watch: { |
| 1001 | menu(val) { | 1001 | menu(val) { |
| 1002 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1002 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1003 | }, | 1003 | }, |
| 1004 | menu1(val) { | 1004 | menu1(val) { |
| 1005 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1005 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1006 | }, | 1006 | }, |
| 1007 | addParentDialog: function (val) { | 1007 | addParentDialog: function (val) { |
| 1008 | if (!val) { | 1008 | if (!val) { |
| 1009 | this.parentData = []; | 1009 | this.parentData = []; |
| 1010 | } | 1010 | } |
| 1011 | }, | 1011 | }, |
| 1012 | }, | 1012 | }, |
| 1013 | methods: { | 1013 | methods: { |
| 1014 | editItem(item) { | 1014 | editItem(item) { |
| 1015 | this.editedIndex = this.parentsList.indexOf(item); | 1015 | this.editedIndex = this.parentsList.indexOf(item); |
| 1016 | this.editedItem = Object.assign({}, item); | 1016 | this.editedItem = Object.assign({}, item); |
| 1017 | this.editParentDilaog = true; | 1017 | this.editParentDilaog = true; |
| 1018 | }, | 1018 | }, |
| 1019 | profile(item) { | 1019 | profile(item) { |
| 1020 | this.editedIndex = this.parentsList.indexOf(item); | 1020 | this.editedIndex = this.parentsList.indexOf(item); |
| 1021 | this.editedItem = Object.assign({}, item); | 1021 | this.editedItem = Object.assign({}, item); |
| 1022 | this.profileParentDialog = true; | 1022 | this.profileParentDialog = true; |
| 1023 | }, | 1023 | }, |
| 1024 | resetParentMPIN(item) { | 1024 | resetParentMPIN(item) { |
| 1025 | this.editMpin = Object.assign({}, item); | 1025 | this.editMpin = Object.assign({}, item); |
| 1026 | this.resetParentMpin = true; | 1026 | this.resetParentMpin = true; |
| 1027 | }, | 1027 | }, |
| 1028 | close() { | 1028 | close() { |
| 1029 | this.editParentDilaog = false; | 1029 | this.editParentDilaog = false; |
| 1030 | }, | 1030 | }, |
| 1031 | closeProfile() { | 1031 | closeProfile() { |
| 1032 | this.profileParentDialog = false; | 1032 | this.profileParentDialog = false; |
| 1033 | }, | 1033 | }, |
| 1034 | closeReset() { | 1034 | closeReset() { |
| 1035 | this.resetParentMpin = false; | 1035 | this.resetParentMpin = false; |
| 1036 | }, | 1036 | }, |
| 1037 | clear() { | 1037 | clear() { |
| 1038 | this.$refs.parentForm.reset(); | 1038 | this.$refs.parentForm.reset(); |
| 1039 | }, | 1039 | }, |
| 1040 | save() { | 1040 | save() { |
| 1041 | if (this.$refs.editParentForm.validate()) { | 1041 | if (this.$refs.editParentForm.validate()) { |
| 1042 | this.editedItem.parentId = this.editedItem._id; | 1042 | this.editedItem.parentId = this.editedItem._id; |
| 1043 | http() | 1043 | http() |
| 1044 | .put("/updateParent", this.editedItem) | 1044 | .put("/updateParent", this.editedItem) |
| 1045 | .then((response) => { | 1045 | .then((response) => { |
| 1046 | this.snackbar = true; | 1046 | this.snackbar = true; |
| 1047 | this.color = "green"; | 1047 | this.color = "green"; |
| 1048 | this.text = response.data.message; | 1048 | this.text = response.data.message; |
| 1049 | this.getParentDetails(); | 1049 | this.getParentDetails(); |
| 1050 | this.close(); | 1050 | this.close(); |
| 1051 | }) | 1051 | }) |
| 1052 | .catch((error) => { | 1052 | .catch((error) => { |
| 1053 | this.snackbar = true; | 1053 | this.snackbar = true; |
| 1054 | this.color = "error"; | 1054 | this.color = "error"; |
| 1055 | this.text = error.response.data.message; | 1055 | this.text = error.response.data.message; |
| 1056 | if (error.response.data.statusText) { | 1056 | if (error.response.data.statusText) { |
| 1057 | this.text = error.response.data.statusText; | 1057 | this.text = error.response.data.statusText; |
| 1058 | } | 1058 | } |
| 1059 | }); | 1059 | }); |
| 1060 | } | 1060 | } |
| 1061 | }, | 1061 | }, |
| 1062 | resetMpin() { | 1062 | resetMpin() { |
| 1063 | if (this.$refs.resetParentMpinForm.validate()) { | 1063 | if (this.$refs.resetParentMpinForm.validate()) { |
| 1064 | var changeMpin = { | 1064 | var changeMpin = { |
| 1065 | parentId: this.editMpin._id, | 1065 | parentId: this.editMpin._id, |
| 1066 | mPin: this.editMpin.mPin, | 1066 | mPin: this.editMpin.mPin, |
| 1067 | }; | 1067 | }; |
| 1068 | http() | 1068 | http() |
| 1069 | .put("/resetMPin", changeMpin) | 1069 | .put("/resetMPin", changeMpin) |
| 1070 | .then((response) => { | 1070 | .then((response) => { |
| 1071 | this.snackbar = true; | 1071 | this.snackbar = true; |
| 1072 | this.color = "green"; | 1072 | this.color = "green"; |
| 1073 | this.text = response.data.message; | 1073 | this.text = response.data.message; |
| 1074 | this.getParentDetails(); | 1074 | this.getParentDetails(); |
| 1075 | this.resetParentMpin = false; | 1075 | this.resetParentMpin = false; |
| 1076 | this.closeReset(); | 1076 | this.closeReset(); |
| 1077 | }) | 1077 | }) |
| 1078 | .catch((error) => { | 1078 | .catch((error) => { |
| 1079 | this.snackbar = true; | 1079 | this.snackbar = true; |
| 1080 | this.color = "error"; | 1080 | this.color = "error"; |
| 1081 | this.text = error.response.data.message; | 1081 | this.text = error.response.data.message; |
| 1082 | if (error.response.data.statusText) { | 1082 | if (error.response.data.statusText) { |
| 1083 | this.text = error.response.data.statusText; | 1083 | this.text = error.response.data.statusText; |
| 1084 | } | 1084 | } |
| 1085 | }); | 1085 | }); |
| 1086 | } | 1086 | } |
| 1087 | }, | 1087 | }, |
| 1088 | async submitParentDetails() { | 1088 | async submitParentDetails() { |
| 1089 | if (this.$refs.parentForm.validate()) { | 1089 | if (this.$refs.parentForm.validate()) { |
| 1090 | this.parentData.role = "PARENT"; | 1090 | this.parentData.role = "PARENT"; |
| 1091 | this.loading = true; | 1091 | this.loading = true; |
| 1092 | await http() | 1092 | await http() |
| 1093 | .post("/createParent", this.parentData) | 1093 | .post("/createParent", this.parentData) |
| 1094 | .then((response) => { | 1094 | .then((response) => { |
| 1095 | this.parentId = response.data.data.id; | 1095 | this.parentId = response.data.data.id; |
| 1096 | this.snackbar = true; | 1096 | this.snackbar = true; |
| 1097 | this.color = "green"; | 1097 | this.color = "green"; |
| 1098 | this.text = response.data.message; | 1098 | this.text = response.data.message; |
| 1099 | this.getParentDetails(); | 1099 | this.getParentDetails(); |
| 1100 | this.clear(); | 1100 | this.clear(); |
| 1101 | this.loading = false; | 1101 | this.loading = false; |
| 1102 | this.isFatherCellExists = true; | 1102 | this.isFatherCellExists = true; |
| 1103 | this.addParentDialog = false; | 1103 | this.addParentDialog = false; |
| 1104 | }) | 1104 | }) |
| 1105 | .catch((error) => { | 1105 | .catch((error) => { |
| 1106 | this.snackbar = true; | 1106 | this.snackbar = true; |
| 1107 | this.color = "error"; | 1107 | this.color = "error"; |
| 1108 | this.text = error.response.data.message; | 1108 | this.text = error.response.data.message; |
| 1109 | if (error.response.data.statusText) { | 1109 | if (error.response.data.statusText) { |
| 1110 | this.text = error.response.data.statusText; | 1110 | this.text = error.response.data.statusText; |
| 1111 | } | 1111 | } |
| 1112 | this.loading = false; | 1112 | this.loading = false; |
| 1113 | }); | 1113 | }); |
| 1114 | } | 1114 | } |
| 1115 | }, | 1115 | }, |
| 1116 | getParentDetails() { | 1116 | getParentDetails() { |
| 1117 | http() | 1117 | http() |
| 1118 | .get("getParentsList", { | 1118 | .get("getParentsList", { |
| 1119 | headers: { | 1119 | headers: { |
| 1120 | Authorization: "Bearer " + this.$store.state.token, | 1120 | Authorization: "Bearer " + this.$store.state.token, |
| 1121 | }, | 1121 | }, |
| 1122 | }) | 1122 | }) |
| 1123 | .then((response) => { | 1123 | .then((response) => { |
| 1124 | this.parentsList = response.data.data; | 1124 | this.parentsList = response.data.data; |
| 1125 | }) | 1125 | }) |
| 1126 | .catch((error) => { | 1126 | .catch((error) => { |
| 1127 | // console.log("err====>", error.response.data.message); | 1127 | // console.log("err====>", error.response.data.message); |
| 1128 | this.showLoader = false; | 1128 | this.showLoader = false; |
| 1129 | if (error.response.status === 401) { | 1129 | if (error.response.status === 401) { |
| 1130 | this.$router.replace({ path: "/" }); | 1130 | this.$router.replace({ path: "/" }); |
| 1131 | this.$store.dispatch("setToken", null); | 1131 | this.$store.dispatch("setToken", null); |
| 1132 | this.$store.dispatch("Id", null); | 1132 | this.$store.dispatch("Id", null); |
| 1133 | this.$store.dispatch("Role", null); | 1133 | this.$store.dispatch("Role", null); |
| 1134 | } | 1134 | } |
| 1135 | }); | 1135 | }); |
| 1136 | }, | 1136 | }, |
| 1137 | displaySearch() { | 1137 | displaySearch() { |
| 1138 | this.show = false; | 1138 | this.show = false; |
| 1139 | this.showSearch = true; | 1139 | this.showSearch = true; |
| 1140 | // this.$refs.searchField.focus() | 1140 | // this.$refs.searchField.focus() |
| 1141 | }, | 1141 | }, |
| 1142 | closeSearch() { | 1142 | closeSearch() { |
| 1143 | this.showSearch = false; | 1143 | this.showSearch = false; |
| 1144 | this.show = true; | 1144 | this.show = true; |
| 1145 | this.search = ""; | 1145 | this.search = ""; |
| 1146 | }, | 1146 | }, |
| 1147 | }, | 1147 | }, |
| 1148 | mounted() { | 1148 | mounted() { |
| 1149 | this.getParentDetails(); | 1149 | this.getParentDetails(); |
| 1150 | // console.log("role", this.$store.state.role); | 1150 | // console.log("role", this.$store.state.role); |
| 1151 | this.role = this.$store.state.role; | 1151 | this.role = this.$store.state.role; |
| 1152 | }, | 1152 | }, |
| 1153 | }; | 1153 | }; |
| 1154 | </script> | 1154 | </script> |
src/pages/Payroll/hourlyTemplate.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** Edit Hourly Template ****** --> | 3 | <!-- ****** Edit Hourly Template ****** --> |
| 4 | <v-dialog v-model="editHourDialog" max-width="400px"> | 4 | <v-dialog v-model="editHourDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Hourly Template</label> | 8 | <label class="title text-xs-center">Edit Hourly Template</label> |
| 9 | <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs3 class="pt-4 subheading"> | 16 | <v-flex xs3 class="pt-4 subheading"> |
| 17 | <label class="right">Hourly Grades:</label> | 17 | <label class="right">Hourly Grades:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm7 class="ml-3"> | 19 | <v-flex xs8 sm7 class="ml-3"> |
| 20 | <v-text-field | 20 | <v-text-field |
| 21 | v-model="editedItem.hourlyGrades" | 21 | v-model="editedItem.hourlyGrades" |
| 22 | placeholder="please fill this field" | 22 | placeholder="please fill this field" |
| 23 | ></v-text-field> | 23 | ></v-text-field> |
| 24 | </v-flex> | 24 | </v-flex> |
| 25 | </v-layout> | 25 | </v-layout> |
| 26 | </v-flex> | 26 | </v-flex> |
| 27 | <v-flex xs12 sm12> | 27 | <v-flex xs12 sm12> |
| 28 | <v-layout> | 28 | <v-layout> |
| 29 | <v-flex xs3 class="pt-4 subheading"> | 29 | <v-flex xs3 class="pt-4 subheading"> |
| 30 | <label class="right">Hourly Reates:</label> | 30 | <label class="right">Hourly Reates:</label> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | <v-flex xs8 sm7 class="ml-3"> | 32 | <v-flex xs8 sm7 class="ml-3"> |
| 33 | <v-text-field | 33 | <v-text-field |
| 34 | v-model="editedItem.hourlyRate" | 34 | v-model="editedItem.hourlyRate" |
| 35 | placeholder="please fill this field" | 35 | placeholder="please fill this field" |
| 36 | ></v-text-field> | 36 | ></v-text-field> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs12> | 41 | <v-flex xs12> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-spacer></v-spacer> | 43 | <v-spacer></v-spacer> |
| 44 | <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn> | 44 | <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | </v-layout> | 46 | </v-layout> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-container> | 49 | </v-container> |
| 50 | </v-form> | 50 | </v-form> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-dialog> | 52 | </v-dialog> |
| 53 | 53 | ||
| 54 | <!-- **** HOURLY TEMPLATE **** --> | 54 | <!-- **** HOURLY TEMPLATE **** --> |
| 55 | <v-toolbar color="transparent" flat> | 55 | <v-toolbar color="transparent" flat> |
| 56 | <v-btn | 56 | <v-btn |
| 57 | fab | 57 | fab |
| 58 | dark | 58 | dark |
| 59 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 59 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 60 | small | 60 | small |
| 61 | @click="addHourDialog = true" | 61 | @click="addHourDialog = true" |
| 62 | > | 62 | > |
| 63 | <v-icon dark>add</v-icon> | 63 | <v-icon dark>add</v-icon> |
| 64 | </v-btn> | 64 | </v-btn> |
| 65 | <v-btn | 65 | <v-btn |
| 66 | round | 66 | round |
| 67 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 67 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 68 | dark | 68 | dark |
| 69 | @click="addHourDialog = true" | 69 | @click="addHourDialog = true" |
| 70 | > | 70 | > |
| 71 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template | 71 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template |
| 72 | </v-btn> | 72 | </v-btn> |
| 73 | <v-spacer></v-spacer> | 73 | <v-spacer></v-spacer> |
| 74 | <v-card-title class="body-1" v-show="show"> | 74 | <v-card-title class="body-1" v-show="show"> |
| 75 | <v-btn icon large flat @click="displaySearch"> | 75 | <v-btn icon large flat @click="displaySearch"> |
| 76 | <v-avatar size="27"> | 76 | <v-avatar size="27"> |
| 77 | <img src="/static/icon/search.png" alt="icon" /> | 77 | <img src="/static/icon/search.png" alt="icon" /> |
| 78 | </v-avatar> | 78 | </v-avatar> |
| 79 | </v-btn> | 79 | </v-btn> |
| 80 | </v-card-title> | 80 | </v-card-title> |
| 81 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 81 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 82 | <v-layout> | 82 | <v-layout> |
| 83 | <v-text-field | 83 | <v-text-field |
| 84 | autofocus | 84 | autofocus |
| 85 | v-model="search" | 85 | v-model="search" |
| 86 | label="Search" | 86 | label="Search" |
| 87 | prepend-inner-icon="search" | 87 | prepend-inner-icon="search" |
| 88 | color="primary" | 88 | color="primary" |
| 89 | ></v-text-field> | 89 | ></v-text-field> |
| 90 | <v-icon @click="closeSearch" color="error">close</v-icon> | 90 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 91 | </v-layout> | 91 | </v-layout> |
| 92 | </v-flex> | 92 | </v-flex> |
| 93 | </v-toolbar> | 93 | </v-toolbar> |
| 94 | 94 | ||
| 95 | <v-data-table | 95 | <v-data-table |
| 96 | :headers="headers" | 96 | :headers="headers" |
| 97 | :items="hourlyData" | 97 | :items="hourlyData" |
| 98 | :pagination.sync="pagination" | 98 | :pagination.sync="pagination" |
| 99 | :search="search" | 99 | :search="search" |
| 100 | > | 100 | > |
| 101 | <template slot="items" slot-scope="props"> | 101 | <template slot="items" slot-scope="props"> |
| 102 | <tr class="tr"> | 102 | <tr class="tr"> |
| 103 | <td class="td td-row">{{ props.index + 1}}</td> | 103 | <td class="td td-row">{{ props.index + 1}}</td> |
| 104 | <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td> | 104 | <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td> |
| 105 | <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td> | 105 | <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td> |
| 106 | <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> --> | 106 | <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> --> |
| 107 | <td class="td td-row text-xs-center"> | 107 | <td class="td td-row text-xs-center"> |
| 108 | <span> | 108 | <span> |
| 109 | <v-tooltip top> | 109 | <v-tooltip top> |
| 110 | <img | 110 | <img |
| 111 | slot="activator" | 111 | slot="activator" |
| 112 | style="cursor:pointer; width:20px; height:18px; " | 112 | style="cursor:pointer; width:20px; height:18px; " |
| 113 | class="mr-3" | 113 | class="mr-3" |
| 114 | @click="editItem(props.item)" | 114 | @click="editItem(props.item)" |
| 115 | src="/static/icon/edit.png" | 115 | src="/static/icon/edit.png" |
| 116 | /> | 116 | /> |
| 117 | <span>Edit</span> | 117 | <span>Edit</span> |
| 118 | </v-tooltip> | 118 | </v-tooltip> |
| 119 | <v-tooltip top> | 119 | <v-tooltip top> |
| 120 | <img | 120 | <img |
| 121 | slot="activator" | 121 | slot="activator" |
| 122 | style="cursor:pointer; width:20px; height:20px; " | 122 | style="cursor:pointer; width:20px; height:20px; " |
| 123 | class="mr-3" | 123 | class="mr-3" |
| 124 | @click="deleteItem(props.item)" | 124 | @click="deleteItem(props.item)" |
| 125 | src="/static/icon/delete.png" | 125 | src="/static/icon/delete.png" |
| 126 | /> | 126 | /> |
| 127 | <span>Delete</span> | 127 | <span>Delete</span> |
| 128 | </v-tooltip> | 128 | </v-tooltip> |
| 129 | </span> | 129 | </span> |
| 130 | </td> | 130 | </td> |
| 131 | </tr> | 131 | </tr> |
| 132 | </template> | 132 | </template> |
| 133 | <v-alert | 133 | <v-alert |
| 134 | slot="no-results" | 134 | slot="no-results" |
| 135 | :value="true" | 135 | :value="true" |
| 136 | color="error" | 136 | color="error" |
| 137 | icon="warning" | 137 | icon="warning" |
| 138 | >Your search for "{{ search }}" found no results.</v-alert> | 138 | >Your search for "{{ search }}" found no results.</v-alert> |
| 139 | </v-data-table> | 139 | </v-data-table> |
| 140 | 140 | ||
| 141 | <!-- **** Add Hourly Template **** --> | 141 | <!-- **** Add Hourly Template **** --> |
| 142 | <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog"> | 142 | <v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog" persistent> |
| 143 | <v-card flat class="card-style pa-2" dark> | 143 | <v-card flat class="card-style pa-2" dark> |
| 144 | <v-layout> | 144 | <v-layout> |
| 145 | <v-flex xs12> | 145 | <v-flex xs12> |
| 146 | <label class="title text-xs-center">Add Hourly Template</label> | 146 | <label class="title text-xs-center">Add Hourly Template</label> |
| 147 | <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon> | 147 | <v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | <v-form ref="form" v-model="valid" lazy-validation> | 150 | <v-form ref="form" v-model="valid" lazy-validation> |
| 151 | <v-container fluid> | 151 | <v-container fluid> |
| 152 | <v-flex xs12> | 152 | <v-flex xs12> |
| 153 | <v-layout> | 153 | <v-layout> |
| 154 | <v-flex xs4 class="pt-4 subheading"> | 154 | <v-flex xs4 class="pt-4 subheading"> |
| 155 | <label class="right">Hourly Grades:</label> | 155 | <label class="right">Hourly Grades:</label> |
| 156 | </v-flex> | 156 | </v-flex> |
| 157 | <v-flex xs8 sm7 class="ml-3"> | 157 | <v-flex xs8 sm7 class="ml-3"> |
| 158 | <v-text-field | 158 | <v-text-field |
| 159 | placeholder="Please fill this field" | 159 | placeholder="Please fill this field" |
| 160 | :rules="hourRules" | 160 | :rules="hourRules" |
| 161 | v-model="hourlyTypes.hourlyGrades" | 161 | v-model="hourlyTypes.hourlyGrades" |
| 162 | ></v-text-field> | 162 | ></v-text-field> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | </v-layout> | 164 | </v-layout> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs12> | 166 | <v-flex xs12> |
| 167 | <v-layout> | 167 | <v-layout> |
| 168 | <v-flex xs4 class="pt-4 subheading"> | 168 | <v-flex xs4 class="pt-4 subheading"> |
| 169 | <label class="right">Hourly Rate:</label> | 169 | <label class="right">Hourly Rate:</label> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | <v-flex xs8 sm7 class="ml-3"> | 171 | <v-flex xs8 sm7 class="ml-3"> |
| 172 | <v-text-field | 172 | <v-text-field |
| 173 | placeholder="Please fill this field" | 173 | placeholder="Please fill this field" |
| 174 | :rules="hourRules" | 174 | :rules="hourRules" |
| 175 | v-model="hourlyTypes.hourlyRate" | 175 | v-model="hourlyTypes.hourlyRate" |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | </v-flex> | 177 | </v-flex> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex xs12 sm12> | 181 | <v-flex xs12 sm12> |
| 182 | <v-layout> | 182 | <v-layout> |
| 183 | <v-spacer></v-spacer> | 183 | <v-spacer></v-spacer> |
| 184 | <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> --> | 184 | <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> --> |
| 185 | <v-btn | 185 | <v-btn |
| 186 | @click="submit" | 186 | @click="submit" |
| 187 | round | 187 | round |
| 188 | dark | 188 | dark |
| 189 | :loading="loading" | 189 | :loading="loading" |
| 190 | class="add-button" | 190 | class="add-button" |
| 191 | >Add Hourly Template</v-btn> | 191 | >Add Hourly Template</v-btn> |
| 192 | <v-spacer></v-spacer> | 192 | <v-spacer></v-spacer> |
| 193 | </v-layout> | 193 | </v-layout> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | </v-container> | 196 | </v-container> |
| 197 | </v-form> | 197 | </v-form> |
| 198 | </v-card> | 198 | </v-card> |
| 199 | </v-dialog> | 199 | </v-dialog> |
| 200 | 200 | ||
| 201 | <v-snackbar | 201 | <v-snackbar |
| 202 | :timeout="timeout" | 202 | :timeout="timeout" |
| 203 | :top="y === 'top'" | 203 | :top="y === 'top'" |
| 204 | :right="x === 'right'" | 204 | :right="x === 'right'" |
| 205 | :vertical="mode === 'vertical'" | 205 | :vertical="mode === 'vertical'" |
| 206 | v-model="snackbar" | 206 | v-model="snackbar" |
| 207 | :color="color" | 207 | :color="color" |
| 208 | >{{ text }}</v-snackbar> | 208 | >{{ text }}</v-snackbar> |
| 209 | <div class="loader" v-if="showLoader"> | 209 | <div class="loader" v-if="showLoader"> |
| 210 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 210 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 211 | </div> | 211 | </div> |
| 212 | </v-container> | 212 | </v-container> |
| 213 | </template> | 213 | </template> |
| 214 | 214 | ||
| 215 | <script> | 215 | <script> |
| 216 | import http from "@/Services/http.js"; | 216 | import http from "@/Services/http.js"; |
| 217 | import moment from "moment"; | 217 | import moment from "moment"; |
| 218 | 218 | ||
| 219 | export default { | 219 | export default { |
| 220 | data: () => ({ | 220 | data: () => ({ |
| 221 | snackbar: false, | 221 | snackbar: false, |
| 222 | date: null, | 222 | date: null, |
| 223 | color: "", | 223 | color: "", |
| 224 | y: "top", | 224 | y: "top", |
| 225 | x: "right", | 225 | x: "right", |
| 226 | mode: "", | 226 | mode: "", |
| 227 | timeout: 10000, | 227 | timeout: 10000, |
| 228 | text: "", | 228 | text: "", |
| 229 | show: true, | 229 | show: true, |
| 230 | showSearch: false, | 230 | showSearch: false, |
| 231 | addHourDialog: false, | 231 | addHourDialog: false, |
| 232 | loading: false, | 232 | loading: false, |
| 233 | loadingSearch: false, | 233 | loadingSearch: false, |
| 234 | search: "", | 234 | search: "", |
| 235 | showLoader: false, | 235 | showLoader: false, |
| 236 | editHourDialog: false, | 236 | editHourDialog: false, |
| 237 | valid: true, | 237 | valid: true, |
| 238 | disabled: true, | 238 | disabled: true, |
| 239 | pagination: { | 239 | pagination: { |
| 240 | rowsPerPage: 10, | 240 | rowsPerPage: 10, |
| 241 | }, | 241 | }, |
| 242 | hourRules: [(v) => !!v || "Field is required"], | 242 | hourRules: [(v) => !!v || "Field is required"], |
| 243 | 243 | ||
| 244 | headers: [ | 244 | headers: [ |
| 245 | { | 245 | { |
| 246 | align: "", | 246 | align: "", |
| 247 | text: "No", | 247 | text: "No", |
| 248 | sortable: false, | 248 | sortable: false, |
| 249 | value: "No", | 249 | value: "No", |
| 250 | }, | 250 | }, |
| 251 | { | 251 | { |
| 252 | text: "Hourly Grades", | 252 | text: "Hourly Grades", |
| 253 | value: "hourlyGrades", | 253 | value: "hourlyGrades", |
| 254 | sortable: false, | 254 | sortable: false, |
| 255 | align: "center", | 255 | align: "center", |
| 256 | }, | 256 | }, |
| 257 | { | 257 | { |
| 258 | text: "Hourly Rate", | 258 | text: "Hourly Rate", |
| 259 | value: "hourlyRate", | 259 | value: "hourlyRate", |
| 260 | sortable: false, | 260 | sortable: false, |
| 261 | align: "center", | 261 | align: "center", |
| 262 | }, | 262 | }, |
| 263 | { text: "Action", value: "", sortable: false, align: "center" }, | 263 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 264 | ], | 264 | ], |
| 265 | hourlyTypes: [], | 265 | hourlyTypes: [], |
| 266 | hourlyData: [], | 266 | hourlyData: [], |
| 267 | editedItem: {}, | 267 | editedItem: {}, |
| 268 | }), | 268 | }), |
| 269 | watch: { | 269 | watch: { |
| 270 | addHourDialog: function (val) { | 270 | addHourDialog: function (val) { |
| 271 | if (!val) { | 271 | if (!val) { |
| 272 | this.hourlyTypes = []; | 272 | this.hourlyTypes = []; |
| 273 | } | 273 | } |
| 274 | }, | 274 | }, |
| 275 | }, | 275 | }, |
| 276 | methods: { | 276 | methods: { |
| 277 | close() { | 277 | close() { |
| 278 | this.editHourDialog = false; | 278 | this.editHourDialog = false; |
| 279 | }, | 279 | }, |
| 280 | closeAddHourModel() { | 280 | closeAddHourModel() { |
| 281 | this.addHourDialog = false; | 281 | this.addHourDialog = false; |
| 282 | // this.hourlyData = []; | 282 | // this.hourlyData = []; |
| 283 | this.hourlyTypes = []; | 283 | this.hourlyTypes = []; |
| 284 | }, | 284 | }, |
| 285 | submit() { | 285 | submit() { |
| 286 | var Hour = { | 286 | var Hour = { |
| 287 | hourlyGrades: this.hourlyTypes.hourlyGrades, | 287 | hourlyGrades: this.hourlyTypes.hourlyGrades, |
| 288 | hourlyRate: this.hourlyTypes.hourlyRate, | 288 | hourlyRate: this.hourlyTypes.hourlyRate, |
| 289 | }; | 289 | }; |
| 290 | if (this.$refs.form.validate()) { | 290 | if (this.$refs.form.validate()) { |
| 291 | this.loading = true; | 291 | this.loading = true; |
| 292 | http() | 292 | http() |
| 293 | .post("/createHourly", Hour, { | 293 | .post("/createHourly", Hour, { |
| 294 | headers: { Authorization: "Bearer " + this.token }, | 294 | headers: { Authorization: "Bearer " + this.token }, |
| 295 | }) | 295 | }) |
| 296 | .then((response) => { | 296 | .then((response) => { |
| 297 | this.snackbar = true; | 297 | this.snackbar = true; |
| 298 | this.text = response.data.message; | 298 | this.text = response.data.message; |
| 299 | this.getHourlyList(); | 299 | this.getHourlyList(); |
| 300 | this.color = "green"; | 300 | this.color = "green"; |
| 301 | this.addHourDialog = false; | 301 | this.addHourDialog = false; |
| 302 | // this.color = "success"; | 302 | // this.color = "success"; |
| 303 | this.clear(); | 303 | this.clear(); |
| 304 | this.loading = false; | 304 | this.loading = false; |
| 305 | }) | 305 | }) |
| 306 | .catch((error) => { | 306 | .catch((error) => { |
| 307 | console.log("error", error); | 307 | console.log("error", error); |
| 308 | this.snackbar = true; | 308 | this.snackbar = true; |
| 309 | this.color = "red"; | 309 | this.color = "red"; |
| 310 | // this.text = error.response.data.message; | 310 | // this.text = error.response.data.message; |
| 311 | this.loading = false; | 311 | this.loading = false; |
| 312 | }); | 312 | }); |
| 313 | } | 313 | } |
| 314 | }, | 314 | }, |
| 315 | getHourlyList() { | 315 | getHourlyList() { |
| 316 | this.showLoader = true; | 316 | this.showLoader = true; |
| 317 | this.loadingSearch = true; | 317 | this.loadingSearch = true; |
| 318 | http() | 318 | http() |
| 319 | .get("/getHourlyList", { | 319 | .get("/getHourlyList", { |
| 320 | headers: { Authorization: "Bearer " + this.token }, | 320 | headers: { Authorization: "Bearer " + this.token }, |
| 321 | }) | 321 | }) |
| 322 | .then((response) => { | 322 | .then((response) => { |
| 323 | this.hourlyData = response.data.data; | 323 | this.hourlyData = response.data.data; |
| 324 | this.showLoader = false; | 324 | this.showLoader = false; |
| 325 | this.loadingSearch = false; | 325 | this.loadingSearch = false; |
| 326 | }) | 326 | }) |
| 327 | .catch((error) => { | 327 | .catch((error) => { |
| 328 | // console.log("err====>", err); | 328 | // console.log("err====>", err); |
| 329 | this.showLoader = false; | 329 | this.showLoader = false; |
| 330 | this.loadingSearch = false; | 330 | this.loadingSearch = false; |
| 331 | this.snackbar = true; | 331 | this.snackbar = true; |
| 332 | this.text = error.response.data.message; | 332 | this.text = error.response.data.message; |
| 333 | if (error.response.status === 401) { | 333 | if (error.response.status === 401) { |
| 334 | this.$router.replace({ path: "/" }); | 334 | this.$router.replace({ path: "/" }); |
| 335 | this.$store.dispatch("setToken", null); | 335 | this.$store.dispatch("setToken", null); |
| 336 | this.$store.dispatch("Id", null); | 336 | this.$store.dispatch("Id", null); |
| 337 | } | 337 | } |
| 338 | }); | 338 | }); |
| 339 | }, | 339 | }, |
| 340 | 340 | ||
| 341 | editItem(item) { | 341 | editItem(item) { |
| 342 | this.editedIndex = this.hourlyData.indexOf(item); | 342 | this.editedIndex = this.hourlyData.indexOf(item); |
| 343 | this.editedItem = Object.assign({}, item); | 343 | this.editedItem = Object.assign({}, item); |
| 344 | this.editHourDialog = true; | 344 | this.editHourDialog = true; |
| 345 | }, | 345 | }, |
| 346 | deleteItem(item) { | 346 | deleteItem(item) { |
| 347 | let deleteGrade = { | 347 | let deleteGrade = { |
| 348 | hourlyId: item._id, | 348 | hourlyId: item._id, |
| 349 | }; | 349 | }; |
| 350 | http() | 350 | http() |
| 351 | .delete( | 351 | .delete( |
| 352 | "/deleteHourly", | 352 | "/deleteHourly", |
| 353 | confirm("Are you sure you want to delete this?") && { | 353 | confirm("Are you sure you want to delete this?") && { |
| 354 | params: deleteGrade, | 354 | params: deleteGrade, |
| 355 | }, | 355 | }, |
| 356 | { | 356 | { |
| 357 | headers: { | 357 | headers: { |
| 358 | Authorization: "Bearer " + this.token, | 358 | Authorization: "Bearer " + this.token, |
| 359 | }, | 359 | }, |
| 360 | } | 360 | } |
| 361 | ) | 361 | ) |
| 362 | .then((response) => { | 362 | .then((response) => { |
| 363 | this.snackbar = true; | 363 | this.snackbar = true; |
| 364 | // this.text = "Successfully Delete Salary "; | 364 | // this.text = "Successfully Delete Salary "; |
| 365 | this.text = response.data.message; | 365 | this.text = response.data.message; |
| 366 | this.color = "green"; | 366 | this.color = "green"; |
| 367 | this.getHourlyList(); | 367 | this.getHourlyList(); |
| 368 | }) | 368 | }) |
| 369 | .catch((error) => { | 369 | .catch((error) => { |
| 370 | console.log("error", error); | 370 | console.log("error", error); |
| 371 | this.snackbar = true; | 371 | this.snackbar = true; |
| 372 | this.text = error.response.data.message; | 372 | this.text = error.response.data.message; |
| 373 | this.color = "red"; | 373 | this.color = "red"; |
| 374 | }); | 374 | }); |
| 375 | }, | 375 | }, |
| 376 | 376 | ||
| 377 | save() { | 377 | save() { |
| 378 | var updateHourly = { | 378 | var updateHourly = { |
| 379 | hourlyId: this.editedItem._id, | 379 | hourlyId: this.editedItem._id, |
| 380 | hourlyGrades: this.editedItem.hourlyGrades, | 380 | hourlyGrades: this.editedItem.hourlyGrades, |
| 381 | hourlyRate: this.editedItem.hourlyRate, | 381 | hourlyRate: this.editedItem.hourlyRate, |
| 382 | }; | 382 | }; |
| 383 | http() | 383 | http() |
| 384 | .put("/updateHourly", updateHourly, { | 384 | .put("/updateHourly", updateHourly, { |
| 385 | headers: { | 385 | headers: { |
| 386 | Authorization: "Bearer " + this.token, | 386 | Authorization: "Bearer " + this.token, |
| 387 | }, | 387 | }, |
| 388 | }) | 388 | }) |
| 389 | .then((response) => { | 389 | .then((response) => { |
| 390 | // this.text = "Successfully Edit Notification"; | 390 | // this.text = "Successfully Edit Notification"; |
| 391 | this.getHourlyList(); | 391 | this.getHourlyList(); |
| 392 | this.close(); | 392 | this.close(); |
| 393 | this.snackbar = true; | 393 | this.snackbar = true; |
| 394 | this.text = response.data.message; | 394 | this.text = response.data.message; |
| 395 | this.color = "green"; | 395 | this.color = "green"; |
| 396 | this.editHourDialog = false; | 396 | this.editHourDialog = false; |
| 397 | }) | 397 | }) |
| 398 | .catch((error) => { | 398 | .catch((error) => { |
| 399 | console.log("error", error); | 399 | console.log("error", error); |
| 400 | this.snackbar = true; | 400 | this.snackbar = true; |
| 401 | // this.text = error.response.data.message; | 401 | // this.text = error.response.data.message; |
| 402 | this.color = "red"; | 402 | this.color = "red"; |
| 403 | }); | 403 | }); |
| 404 | }, | 404 | }, |
| 405 | 405 | ||
| 406 | displaySearch() { | 406 | displaySearch() { |
| 407 | (this.show = false), (this.showSearch = true); | 407 | (this.show = false), (this.showSearch = true); |
| 408 | }, | 408 | }, |
| 409 | closeSearch() { | 409 | closeSearch() { |
| 410 | this.showSearch = false; | 410 | this.showSearch = false; |
| 411 | this.show = true; | 411 | this.show = true; |
| 412 | this.search = ""; | 412 | this.search = ""; |
| 413 | }, | 413 | }, |
| 414 | clear() { | 414 | clear() { |
| 415 | this.$refs.form.reset(); | 415 | this.$refs.form.reset(); |
| 416 | }, | 416 | }, |
| 417 | }, | 417 | }, |
| 418 | mounted() { | 418 | mounted() { |
| 419 | this.token = this.$store.state.token; | 419 | this.token = this.$store.state.token; |
| 420 | this.getHourlyList(); | 420 | this.getHourlyList(); |
| 421 | }, | 421 | }, |
| 422 | }; | 422 | }; |
| 423 | </script> | 423 | </script> |
| 424 | 424 | ||
| 425 | <style scoped> | 425 | <style scoped> |
| 426 | </style> | 426 | </style> |
src/pages/Payroll/manageSalary.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <v-layout wrap> | 3 | <v-layout wrap> |
| 4 | <v-flex xs12 sm6> | 4 | <v-flex xs12 sm6> |
| 5 | <v-layout> | 5 | <v-layout> |
| 6 | <v-flex xs4 class="pt-4 subheading"> | 6 | <v-flex xs4 class="pt-4 subheading"> |
| 7 | <label class="right hidden-sm-only hidden-xs-only">Role:</label> | 7 | <label class="right hidden-sm-only hidden-xs-only">Role:</label> |
| 8 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 8 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 9 | </v-flex> | 9 | </v-flex> |
| 10 | <v-flex xs8 class="ml-3"> | 10 | <v-flex xs8 class="ml-3"> |
| 11 | <v-autocomplete | 11 | <v-autocomplete |
| 12 | v-model="getReport.role" | 12 | v-model="getReport.role" |
| 13 | :rules="role" | 13 | :rules="role" |
| 14 | :items="getRoles" | 14 | :items="getRoles" |
| 15 | item-text="name" | 15 | item-text="name" |
| 16 | item-value="role" | 16 | item-value="role" |
| 17 | placeholder="Select Role" | 17 | placeholder="Select Role" |
| 18 | @change="getUserDetailWithRoles" | 18 | @change="getUserDetailWithRoles" |
| 19 | required | 19 | required |
| 20 | ></v-autocomplete> | 20 | ></v-autocomplete> |
| 21 | </v-flex> | 21 | </v-flex> |
| 22 | </v-layout> | 22 | </v-layout> |
| 23 | </v-flex> | 23 | </v-flex> |
| 24 | </v-layout> | 24 | </v-layout> |
| 25 | 25 | ||
| 26 | <!-- *** Salary Data *** --> | 26 | <!-- *** Salary Data *** --> |
| 27 | <v-data-table | 27 | <v-data-table |
| 28 | :headers="headers" | 28 | :headers="headers" |
| 29 | :items="roleList" | 29 | :items="roleList" |
| 30 | :pagination.sync="pagination" | 30 | :pagination.sync="pagination" |
| 31 | :search="search" | 31 | :search="search" |
| 32 | > | 32 | > |
| 33 | <template slot="items" slot-scope="props"> | 33 | <template slot="items" slot-scope="props"> |
| 34 | <tr class="tr"> | 34 | <tr class="tr"> |
| 35 | <td class="td td-row">{{ props.index + 1}}</td> | 35 | <td class="td td-row">{{ props.index + 1}}</td> |
| 36 | <td class="td td-row text-xs-center"> | 36 | <td class="td td-row text-xs-center"> |
| 37 | <v-avatar size="40"> | 37 | <v-avatar size="40"> |
| 38 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 38 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 39 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 39 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 40 | </v-avatar> | 40 | </v-avatar> |
| 41 | </td> | 41 | </td> |
| 42 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 42 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 43 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> | 43 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> |
| 44 | <td class="text-xs-center td td-row"> | 44 | <td class="text-xs-center td td-row"> |
| 45 | <span> | 45 | <span> |
| 46 | <v-tooltip top> | 46 | <v-tooltip top> |
| 47 | <img | 47 | <img |
| 48 | slot="activator" | 48 | slot="activator" |
| 49 | style="cursor:pointer; width:25px; height:25px; " | 49 | style="cursor:pointer; width:25px; height:25px; " |
| 50 | class="mr-3" | 50 | class="mr-3" |
| 51 | @click="profile(props.item)" | 51 | @click="profile(props.item)" |
| 52 | src="/static/icon/view.png" | 52 | src="/static/icon/view.png" |
| 53 | /> | 53 | /> |
| 54 | <span>View</span> | 54 | <span>View</span> |
| 55 | </v-tooltip> | 55 | </v-tooltip> |
| 56 | <v-tooltip top> | 56 | <v-tooltip top> |
| 57 | <img | 57 | <img |
| 58 | slot="activator" | 58 | slot="activator" |
| 59 | style="cursor:pointer; width:20px; height:18px; " | 59 | style="cursor:pointer; width:20px; height:18px; " |
| 60 | class="mr-3" | 60 | class="mr-3" |
| 61 | @click="editItem(props.item)" | 61 | @click="editItem(props.item)" |
| 62 | src="/static/icon/edit.png" | 62 | src="/static/icon/edit.png" |
| 63 | /> | 63 | /> |
| 64 | <span>Edit</span> | 64 | <span>Edit</span> |
| 65 | </v-tooltip> | 65 | </v-tooltip> |
| 66 | <v-tooltip top> | 66 | <v-tooltip top> |
| 67 | <img | 67 | <img |
| 68 | slot="activator" | 68 | slot="activator" |
| 69 | style="cursor:pointer; width:20px; height:20px; " | 69 | style="cursor:pointer; width:20px; height:20px; " |
| 70 | @click="deleteItem(props.item)" | 70 | @click="deleteItem(props.item)" |
| 71 | src="/static/icon/delete.png" | 71 | src="/static/icon/delete.png" |
| 72 | class="mr-3" | 72 | class="mr-3" |
| 73 | /> | 73 | /> |
| 74 | <span>Delete</span> | 74 | <span>Delete</span> |
| 75 | </v-tooltip> | 75 | </v-tooltip> |
| 76 | </span> | 76 | </span> |
| 77 | </td> | 77 | </td> |
| 78 | </tr> | 78 | </tr> |
| 79 | </template> | 79 | </template> |
| 80 | <v-alert | 80 | <v-alert |
| 81 | slot="no-results" | 81 | slot="no-results" |
| 82 | :value="true" | 82 | :value="true" |
| 83 | color="error" | 83 | color="error" |
| 84 | icon="warning" | 84 | icon="warning" |
| 85 | >Your search for "{{ search }}" found no results.</v-alert> | 85 | >Your search for "{{ search }}" found no results.</v-alert> |
| 86 | </v-data-table> | 86 | </v-data-table> |
| 87 | 87 | ||
| 88 | <!-- ****** PROFILE VIEW ****** --> | 88 | <!-- ****** PROFILE VIEW ****** --> |
| 89 | 89 | ||
| 90 | <v-dialog v-model="profileSalaryDialog"> | 90 | <v-dialog v-model="profileSalaryDialog" persistent> |
| 91 | <v-card flat class="text-xs-center white--text"> | 91 | <v-card flat class="text-xs-center white--text"> |
| 92 | <v-layout> | 92 | <v-layout> |
| 93 | <v-flex xs12 class="card-style pa-2"> | 93 | <v-flex xs12 class="card-style pa-2"> |
| 94 | <label class="title text-xs-center">View Manage Salary</label> | 94 | <label class="title text-xs-center">View Manage Salary</label> |
| 95 | <v-icon | 95 | <v-icon |
| 96 | size="24" | 96 | size="24" |
| 97 | color="white" | 97 | color="white" |
| 98 | class="right" | 98 | class="right" |
| 99 | @click="profileSalaryDialog = false" | 99 | @click="profileSalaryDialog = false" |
| 100 | >cancel</v-icon> | 100 | >cancel</v-icon> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | </v-layout> | 102 | </v-layout> |
| 103 | <v-layout wrap> | 103 | <v-layout wrap> |
| 104 | <v-flex xs12 sm12 md4> | 104 | <v-flex xs12 sm12 md4> |
| 105 | <v-card flat> | 105 | <v-card flat> |
| 106 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> | 106 | <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> |
| 107 | <v-card-text> | 107 | <v-card-text> |
| 108 | <v-container> | 108 | <v-container> |
| 109 | <v-layout wrap> | 109 | <v-layout wrap> |
| 110 | <v-flex xs12> | 110 | <v-flex xs12> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex | 112 | <v-flex |
| 113 | xs12 | 113 | xs12 |
| 114 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 114 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 115 | > | 115 | > |
| 116 | <v-avatar size="80px"> | 116 | <v-avatar size="80px"> |
| 117 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 117 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 118 | <img | 118 | <img |
| 119 | :src="editedItem.profilePicUrl" | 119 | :src="editedItem.profilePicUrl" |
| 120 | v-else-if="editedItem.profilePicUrl" | 120 | v-else-if="editedItem.profilePicUrl" |
| 121 | /> | 121 | /> |
| 122 | </v-avatar> | 122 | </v-avatar> |
| 123 | </v-flex> | 123 | </v-flex> |
| 124 | </v-layout> | 124 | </v-layout> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-flex xs12 sm12> | 126 | <v-flex xs12 sm12> |
| 127 | <h3 class="text-xs-center"> | 127 | <h3 class="text-xs-center"> |
| 128 | <b>{{ editedItem.name }}</b> | 128 | <b>{{ editedItem.name }}</b> |
| 129 | </h3> | 129 | </h3> |
| 130 | <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> | 130 | <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> |
| 131 | </v-flex> | 131 | </v-flex> |
| 132 | </v-layout> | 132 | </v-layout> |
| 133 | <v-layout style="border: 1px solid lightgrey;"> | 133 | <v-layout style="border: 1px solid lightgrey;"> |
| 134 | <v-flex xs6 sm6 class="pa-0"> | 134 | <v-flex xs6 sm6 class="pa-0"> |
| 135 | <h4 class="right"> | 135 | <h4 class="right"> |
| 136 | <b>Join Date :</b> | 136 | <b>Join Date :</b> |
| 137 | </h4> | 137 | </h4> |
| 138 | </v-flex> | 138 | </v-flex> |
| 139 | <v-flex sm6 xs6 class="pa-0"> | 139 | <v-flex sm6 xs6 class="pa-0"> |
| 140 | <h4>{{ editedItem.joinDate }}</h4> | 140 | <h4>{{ editedItem.joinDate }}</h4> |
| 141 | </v-flex> | 141 | </v-flex> |
| 142 | </v-layout> | 142 | </v-layout> |
| 143 | <v-layout style="border: 1px solid lightgrey;"> | 143 | <v-layout style="border: 1px solid lightgrey;"> |
| 144 | <v-flex xs6 sm6 class="pa-0"> | 144 | <v-flex xs6 sm6 class="pa-0"> |
| 145 | <h4 class="right"> | 145 | <h4 class="right"> |
| 146 | <b>Date of Birth :</b> | 146 | <b>Date of Birth :</b> |
| 147 | </h4> | 147 | </h4> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | <v-flex sm6 xs6 class="pa-0"> | 149 | <v-flex sm6 xs6 class="pa-0"> |
| 150 | <h4>{{ editedItem.dob }}</h4> | 150 | <h4>{{ editedItem.dob }}</h4> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | <v-layout style="border: 1px solid lightgrey;"> | 153 | <v-layout style="border: 1px solid lightgrey;"> |
| 154 | <v-flex xs6 sm6 class="pa-0"> | 154 | <v-flex xs6 sm6 class="pa-0"> |
| 155 | <h4 class="right"> | 155 | <h4 class="right"> |
| 156 | <b>Phone No :</b> | 156 | <b>Phone No :</b> |
| 157 | </h4> | 157 | </h4> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | <v-flex sm6 xs6 class="pa-0"> | 159 | <v-flex sm6 xs6 class="pa-0"> |
| 160 | <h4>{{ editedItem.mobileNo }}</h4> | 160 | <h4>{{ editedItem.mobileNo }}</h4> |
| 161 | </v-flex> | 161 | </v-flex> |
| 162 | </v-layout> | 162 | </v-layout> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | </v-layout> | 164 | </v-layout> |
| 165 | </v-container> | 165 | </v-container> |
| 166 | </v-card-text> | 166 | </v-card-text> |
| 167 | </v-card> | 167 | </v-card> |
| 168 | </v-flex> | 168 | </v-flex> |
| 169 | <v-flex xs12 sm12 md8 v-if="viewSalary"> | 169 | <v-flex xs12 sm12 md8 v-if="viewSalary"> |
| 170 | <v-card flat> | 170 | <v-card flat> |
| 171 | <v-flex xs12 sm12> | 171 | <v-flex xs12 sm12> |
| 172 | <v-container fluid grid-list-md> | 172 | <v-container fluid grid-list-md> |
| 173 | <v-layout wrap> | 173 | <v-layout wrap> |
| 174 | <v-flex xs12 sm12 md6> | 174 | <v-flex xs12 sm12 md6> |
| 175 | <v-card flat> | 175 | <v-card flat> |
| 176 | <v-form ref="form" lazy-validation class="py-4"> | 176 | <v-form ref="form" lazy-validation class="py-4"> |
| 177 | <v-layout> | 177 | <v-layout> |
| 178 | <v-flex xs4 class="pt-4 subheading"> | 178 | <v-flex xs4 class="pt-4 subheading"> |
| 179 | <label class="right hidden-xs-only">Salary Grades :</label> | 179 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 180 | </v-flex> | 180 | </v-flex> |
| 181 | <v-flex xs8 sm7 class="ml-3"> | 181 | <v-flex xs8 sm7 class="ml-3"> |
| 182 | <v-flex xs8 sm7 class="ml-3"> | 182 | <v-flex xs8 sm7 class="ml-3"> |
| 183 | <v-text-field | 183 | <v-text-field |
| 184 | solo | 184 | solo |
| 185 | v-model="editedItem.salaryTemplate.salaryGrades" | 185 | v-model="editedItem.salaryTemplate.salaryGrades" |
| 186 | readonly | 186 | readonly |
| 187 | ></v-text-field> | 187 | ></v-text-field> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | </v-layout> | 190 | </v-layout> |
| 191 | <v-layout> | 191 | <v-layout> |
| 192 | <v-flex xs4 class="pt-4 subheading"> | 192 | <v-flex xs4 class="pt-4 subheading"> |
| 193 | <label class="right">Basic Salary :</label> | 193 | <label class="right">Basic Salary :</label> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | <v-flex xs8 sm7 class="ml-3"> | 195 | <v-flex xs8 sm7 class="ml-3"> |
| 196 | <v-flex xs8 sm7 class="ml-3"> | 196 | <v-flex xs8 sm7 class="ml-3"> |
| 197 | <v-text-field | 197 | <v-text-field |
| 198 | solo | 198 | solo |
| 199 | v-model="editedItem.salaryTemplate.basicSalary" | 199 | v-model="editedItem.salaryTemplate.basicSalary" |
| 200 | readonly | 200 | readonly |
| 201 | ></v-text-field> | 201 | ></v-text-field> |
| 202 | </v-flex> | 202 | </v-flex> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-layout> | 204 | </v-layout> |
| 205 | </v-form> | 205 | </v-form> |
| 206 | </v-card> | 206 | </v-card> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | <v-flex xs12 sm12 md5></v-flex> | 208 | <v-flex xs12 sm12 md5></v-flex> |
| 209 | <v-flex xs12 sm12 md6> | 209 | <v-flex xs12 sm12 md6> |
| 210 | <v-card flat> | 210 | <v-card flat> |
| 211 | <v-toolbar> | 211 | <v-toolbar> |
| 212 | <h3>Allowances</h3> | 212 | <h3>Allowances</h3> |
| 213 | </v-toolbar> | 213 | </v-toolbar> |
| 214 | <v-layout | 214 | <v-layout |
| 215 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" | 215 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" |
| 216 | :key="index" | 216 | :key="index" |
| 217 | > | 217 | > |
| 218 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 218 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 219 | <v-text-field | 219 | <v-text-field |
| 220 | readonly | 220 | readonly |
| 221 | solo | 221 | solo |
| 222 | label="Enter Allowances Label" | 222 | label="Enter Allowances Label" |
| 223 | v-model="editedItem.allowancesName" | 223 | v-model="editedItem.allowancesName" |
| 224 | ></v-text-field> | 224 | ></v-text-field> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 226 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 227 | <v-text-field | 227 | <v-text-field |
| 228 | readonly | 228 | readonly |
| 229 | solo | 229 | solo |
| 230 | v-model="editedItem.allowancesValue" | 230 | v-model="editedItem.allowancesValue" |
| 231 | label="Enter Allowances Value" | 231 | label="Enter Allowances Value" |
| 232 | ></v-text-field> | 232 | ></v-text-field> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-layout> | 234 | </v-layout> |
| 235 | </v-card> | 235 | </v-card> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex xs12 sm12 md6> | 237 | <v-flex xs12 sm12 md6> |
| 238 | <v-card flat> | 238 | <v-card flat> |
| 239 | <v-toolbar> | 239 | <v-toolbar> |
| 240 | <h3>Deduction</h3> | 240 | <h3>Deduction</h3> |
| 241 | </v-toolbar> | 241 | </v-toolbar> |
| 242 | <v-layout | 242 | <v-layout |
| 243 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" | 243 | v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" |
| 244 | :key="index" | 244 | :key="index" |
| 245 | > | 245 | > |
| 246 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 246 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 247 | <v-text-field | 247 | <v-text-field |
| 248 | readonly | 248 | readonly |
| 249 | solo | 249 | solo |
| 250 | label="Enter Deduction Label" | 250 | label="Enter Deduction Label" |
| 251 | v-model="editedItem.deductionName" | 251 | v-model="editedItem.deductionName" |
| 252 | ></v-text-field> | 252 | ></v-text-field> |
| 253 | </v-flex> | 253 | </v-flex> |
| 254 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 254 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 255 | <v-text-field | 255 | <v-text-field |
| 256 | readonly | 256 | readonly |
| 257 | solo | 257 | solo |
| 258 | label="Enter Deduction Value" | 258 | label="Enter Deduction Value" |
| 259 | v-model="editedItem.deductionValue" | 259 | v-model="editedItem.deductionValue" |
| 260 | ></v-text-field> | 260 | ></v-text-field> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | </v-layout> | 262 | </v-layout> |
| 263 | <!-- <v-layout> | 263 | <!-- <v-layout> |
| 264 | <v-flex xs4 class="pt-4 subheading"> | 264 | <v-flex xs4 class="pt-4 subheading"> |
| 265 | <v-text-field | 265 | <v-text-field |
| 266 | v-model="editedItem.salaryTemplate.deduction.deductionName" | 266 | v-model="editedItem.salaryTemplate.deduction.deductionName" |
| 267 | readonly | 267 | readonly |
| 268 | ></v-text-field> | 268 | ></v-text-field> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-flex xs8 sm7 class="ml-3"> | 270 | <v-flex xs8 sm7 class="ml-3"> |
| 271 | <v-flex xs8 sm7 class="ml-3"> | 271 | <v-flex xs8 sm7 class="ml-3"> |
| 272 | <v-text-field | 272 | <v-text-field |
| 273 | v-model="editedItem.salaryTemplate.deduction.deductionValue" | 273 | v-model="editedItem.salaryTemplate.deduction.deductionValue" |
| 274 | readonly | 274 | readonly |
| 275 | ></v-text-field> | 275 | ></v-text-field> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | </v-layout>--> | 278 | </v-layout>--> |
| 279 | </v-card> | 279 | </v-card> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 281 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 282 | <v-card> | 282 | <v-card> |
| 283 | <v-toolbar> | 283 | <v-toolbar> |
| 284 | <h3>Total Salary Details</h3> | 284 | <h3>Total Salary Details</h3> |
| 285 | </v-toolbar> | 285 | </v-toolbar> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 287 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 288 | <v-text-field solo value="Gross Salary"></v-text-field> | 288 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 290 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 291 | <v-flex xs8 sm7 class="ml-3"> | 291 | <v-flex xs8 sm7 class="ml-3"> |
| 292 | <v-text-field | 292 | <v-text-field |
| 293 | v-model="editedItem.salaryTemplate.grossSalary" | 293 | v-model="editedItem.salaryTemplate.grossSalary" |
| 294 | solo | 294 | solo |
| 295 | readonly | 295 | readonly |
| 296 | ></v-text-field> | 296 | ></v-text-field> |
| 297 | </v-flex> | 297 | </v-flex> |
| 298 | </v-flex> | 298 | </v-flex> |
| 299 | </v-layout> | 299 | </v-layout> |
| 300 | <v-layout> | 300 | <v-layout> |
| 301 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 301 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 302 | <v-text-field solo value="Total Deduction"></v-text-field> | 302 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 304 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 305 | <v-flex xs8 sm7 class="ml-3"> | 305 | <v-flex xs8 sm7 class="ml-3"> |
| 306 | <v-text-field | 306 | <v-text-field |
| 307 | v-model="editedItem.salaryTemplate.totalDeduction" | 307 | v-model="editedItem.salaryTemplate.totalDeduction" |
| 308 | solo | 308 | solo |
| 309 | readonly | 309 | readonly |
| 310 | ></v-text-field> | 310 | ></v-text-field> |
| 311 | </v-flex> | 311 | </v-flex> |
| 312 | </v-flex> | 312 | </v-flex> |
| 313 | </v-layout> | 313 | </v-layout> |
| 314 | <v-layout> | 314 | <v-layout> |
| 315 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 315 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 316 | <v-text-field solo value="Net Salary"></v-text-field> | 316 | <v-text-field solo value="Net Salary"></v-text-field> |
| 317 | </v-flex> | 317 | </v-flex> |
| 318 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 318 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 319 | <v-flex xs8 sm7 class="ml-3"> | 319 | <v-flex xs8 sm7 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="editedItem.salaryTemplate.netSalary" | 321 | v-model="editedItem.salaryTemplate.netSalary" |
| 322 | solo | 322 | solo |
| 323 | readonly | 323 | readonly |
| 324 | ></v-text-field> | 324 | ></v-text-field> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-card> | 328 | </v-card> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-container> | 331 | </v-container> |
| 332 | </v-flex> | 332 | </v-flex> |
| 333 | </v-card> | 333 | </v-card> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | <v-flex xs12 sm12 md8 v-if="viewHourly"> | 335 | <v-flex xs12 sm12 md8 v-if="viewHourly"> |
| 336 | <v-card flat> | 336 | <v-card flat> |
| 337 | <v-flex xs12 sm12> | 337 | <v-flex xs12 sm12> |
| 338 | <v-container fluid grid-list-md> | 338 | <v-container fluid grid-list-md> |
| 339 | <v-layout wrap> | 339 | <v-layout wrap> |
| 340 | <v-flex xs12 sm12 md6> | 340 | <v-flex xs12 sm12 md6> |
| 341 | <v-card flat> | 341 | <v-card flat> |
| 342 | <v-form ref="form" lazy-validation class="py-4"> | 342 | <v-form ref="form" lazy-validation class="py-4"> |
| 343 | <v-layout> | 343 | <v-layout> |
| 344 | <v-flex xs4 class="pt-4 subheading"> | 344 | <v-flex xs4 class="pt-4 subheading"> |
| 345 | <label class="right hidden-xs-only">Hourly Grades :</label> | 345 | <label class="right hidden-xs-only">Hourly Grades :</label> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | <v-flex xs8 sm7 class="ml-3"> | 347 | <v-flex xs8 sm7 class="ml-3"> |
| 348 | <v-flex xs8 sm7 class="ml-3"> | 348 | <v-flex xs8 sm7 class="ml-3"> |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | solo | 350 | solo |
| 351 | v-model="editedItem.hourlyTemplate.hourlyGrades" | 351 | v-model="editedItem.hourlyTemplate.hourlyGrades" |
| 352 | readonly | 352 | readonly |
| 353 | ></v-text-field> | 353 | ></v-text-field> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | </v-flex> | 355 | </v-flex> |
| 356 | </v-layout> | 356 | </v-layout> |
| 357 | <v-layout> | 357 | <v-layout> |
| 358 | <v-flex xs4 class="pt-4 subheading"> | 358 | <v-flex xs4 class="pt-4 subheading"> |
| 359 | <label class="right">Hourly Rate :</label> | 359 | <label class="right">Hourly Rate :</label> |
| 360 | </v-flex> | 360 | </v-flex> |
| 361 | <v-flex xs8 sm7 class="ml-3"> | 361 | <v-flex xs8 sm7 class="ml-3"> |
| 362 | <v-flex xs8 sm7 class="ml-3"> | 362 | <v-flex xs8 sm7 class="ml-3"> |
| 363 | <v-text-field | 363 | <v-text-field |
| 364 | solo | 364 | solo |
| 365 | v-model="editedItem.hourlyTemplate.hourlyRate" | 365 | v-model="editedItem.hourlyTemplate.hourlyRate" |
| 366 | readonly | 366 | readonly |
| 367 | ></v-text-field> | 367 | ></v-text-field> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | </v-layout> | 370 | </v-layout> |
| 371 | </v-form> | 371 | </v-form> |
| 372 | </v-card> | 372 | </v-card> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 374 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 375 | <v-card> | 375 | <v-card> |
| 376 | <v-toolbar> | 376 | <v-toolbar> |
| 377 | <h3>Total Salary Details</h3> | 377 | <h3>Total Salary Details</h3> |
| 378 | </v-toolbar> | 378 | </v-toolbar> |
| 379 | <v-layout> | 379 | <v-layout> |
| 380 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 380 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 381 | <v-text-field solo value="Gross Salary"></v-text-field> | 381 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 383 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 384 | <v-flex xs8 sm7 class="ml-3"> | 384 | <v-flex xs8 sm7 class="ml-3"> |
| 385 | <v-text-field | 385 | <v-text-field |
| 386 | v-model="editedItem.hourlyTemplate.grossSalary" | 386 | v-model="editedItem.hourlyTemplate.grossSalary" |
| 387 | solo | 387 | solo |
| 388 | readonly | 388 | readonly |
| 389 | ></v-text-field> | 389 | ></v-text-field> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | </v-layout> | 392 | </v-layout> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 394 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 395 | <v-text-field solo value="Total Deduction"></v-text-field> | 395 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 397 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 398 | <v-flex xs8 sm7 class="ml-3"> | 398 | <v-flex xs8 sm7 class="ml-3"> |
| 399 | <v-text-field | 399 | <v-text-field |
| 400 | v-model="editedItem.hourlyTemplate.totalDeduction" | 400 | v-model="editedItem.hourlyTemplate.totalDeduction" |
| 401 | solo | 401 | solo |
| 402 | readonly | 402 | readonly |
| 403 | ></v-text-field> | 403 | ></v-text-field> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | </v-layout> | 406 | </v-layout> |
| 407 | <v-layout> | 407 | <v-layout> |
| 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 409 | <v-text-field solo value="Net Hourly Rate"></v-text-field> | 409 | <v-text-field solo value="Net Hourly Rate"></v-text-field> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 412 | <v-flex xs8 sm7 class="ml-3"> | 412 | <v-flex xs8 sm7 class="ml-3"> |
| 413 | <v-text-field | 413 | <v-text-field |
| 414 | v-model="editedItem.hourlyTemplate.netSalary" | 414 | v-model="editedItem.hourlyTemplate.netSalary" |
| 415 | solo | 415 | solo |
| 416 | readonly | 416 | readonly |
| 417 | ></v-text-field> | 417 | ></v-text-field> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | </v-flex> | 419 | </v-flex> |
| 420 | </v-layout> | 420 | </v-layout> |
| 421 | </v-card> | 421 | </v-card> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | </v-layout> | 423 | </v-layout> |
| 424 | </v-container> | 424 | </v-container> |
| 425 | </v-flex> | 425 | </v-flex> |
| 426 | </v-card> | 426 | </v-card> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | </v-card> | 429 | </v-card> |
| 430 | </v-dialog> | 430 | </v-dialog> |
| 431 | 431 | ||
| 432 | <!-- ****** Edit Hourly Template ****** --> | 432 | <!-- ****** Edit Hourly Template ****** --> |
| 433 | <v-dialog v-model="editSalaryDialog" max-width="400px"> | 433 | <v-dialog v-model="editSalaryDialog" max-width="400px" persistent> |
| 434 | <v-card flat class="card-style pa-2" dark> | 434 | <v-card flat class="card-style pa-2" dark> |
| 435 | <v-layout> | 435 | <v-layout> |
| 436 | <v-flex xs12> | 436 | <v-flex xs12> |
| 437 | <label class="title text-xs-center">Edit Manage Salary</label> | 437 | <label class="title text-xs-center">Edit Manage Salary</label> |
| 438 | <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> | 438 | <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | <v-form ref="form"> | 441 | <v-form ref="form"> |
| 442 | <v-container fluid> | 442 | <v-container fluid> |
| 443 | <v-flex xs12 sm12> | 443 | <v-flex xs12 sm12> |
| 444 | <v-layout> | 444 | <v-layout> |
| 445 | <v-flex xs3 class="pt-4 subheading"> | 445 | <v-flex xs3 class="pt-4 subheading"> |
| 446 | <label class="right">Salary:</label> | 446 | <label class="right">Salary:</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm7 class="ml-3"> | 448 | <v-flex xs8 sm7 class="ml-3"> |
| 449 | <v-select | 449 | <v-select |
| 450 | :items="salary" | 450 | :items="salary" |
| 451 | v-model="editedItem.salary" | 451 | v-model="editedItem.salary" |
| 452 | placeholder="please fill this field" | 452 | placeholder="please fill this field" |
| 453 | @change="selectSalary()" | 453 | @change="selectSalary()" |
| 454 | ></v-select> | 454 | ></v-select> |
| 455 | </v-flex> | 455 | </v-flex> |
| 456 | </v-layout> | 456 | </v-layout> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | <v-flex xs12 sm12> | 458 | <v-flex xs12 sm12> |
| 459 | <v-layout> | 459 | <v-layout> |
| 460 | <v-flex xs3 class="pt-4 subheading"> | 460 | <v-flex xs3 class="pt-4 subheading"> |
| 461 | <label class="right">Template:</label> | 461 | <label class="right">Template:</label> |
| 462 | </v-flex> | 462 | </v-flex> |
| 463 | <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> | 463 | <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> |
| 464 | <v-autocomplete | 464 | <v-autocomplete |
| 465 | v-model="editedItem.salaryId" | 465 | v-model="editedItem.salaryId" |
| 466 | :items="salaryData" | 466 | :items="salaryData" |
| 467 | item-text="salaryGrades" | 467 | item-text="salaryGrades" |
| 468 | item-value="_id" | 468 | item-value="_id" |
| 469 | placeholder="please fill this field" | 469 | placeholder="please fill this field" |
| 470 | @change="selectGrade()" | 470 | @change="selectGrade()" |
| 471 | required | 471 | required |
| 472 | ></v-autocomplete> | 472 | ></v-autocomplete> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> | 474 | <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> |
| 475 | <v-autocomplete | 475 | <v-autocomplete |
| 476 | v-model="editedItem.salaryId" | 476 | v-model="editedItem.salaryId" |
| 477 | :items="hourlyData" | 477 | :items="hourlyData" |
| 478 | item-text="hourlyGrades" | 478 | item-text="hourlyGrades" |
| 479 | item-value="_id" | 479 | item-value="_id" |
| 480 | placeholder="please fill this field" | 480 | placeholder="please fill this field" |
| 481 | @change="selectGrade()" | 481 | @change="selectGrade()" |
| 482 | required | 482 | required |
| 483 | ></v-autocomplete> | 483 | ></v-autocomplete> |
| 484 | </v-flex> | 484 | </v-flex> |
| 485 | </v-layout> | 485 | </v-layout> |
| 486 | </v-flex> | 486 | </v-flex> |
| 487 | <v-layout> | 487 | <v-layout> |
| 488 | <v-flex xs12> | 488 | <v-flex xs12> |
| 489 | <v-layout> | 489 | <v-layout> |
| 490 | <v-spacer></v-spacer> | 490 | <v-spacer></v-spacer> |
| 491 | <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> | 491 | <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> |
| 492 | <v-spacer></v-spacer> | 492 | <v-spacer></v-spacer> |
| 493 | </v-layout> | 493 | </v-layout> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | </v-layout> | 495 | </v-layout> |
| 496 | </v-container> | 496 | </v-container> |
| 497 | </v-form> | 497 | </v-form> |
| 498 | </v-card> | 498 | </v-card> |
| 499 | </v-dialog> | 499 | </v-dialog> |
| 500 | </v-container> | 500 | </v-container> |
| 501 | </template> | 501 | </template> |
| 502 | 502 | ||
| 503 | <script> | 503 | <script> |
| 504 | import http from "@/Services/http.js"; | 504 | import http from "@/Services/http.js"; |
| 505 | import Util from "@/util"; | 505 | import Util from "@/util"; |
| 506 | import moment from "moment"; | 506 | import moment from "moment"; |
| 507 | export default { | 507 | export default { |
| 508 | data: () => ({ | 508 | data: () => ({ |
| 509 | search: "", | 509 | search: "", |
| 510 | pagination: { | 510 | pagination: { |
| 511 | rowsPerPage: 10 | 511 | rowsPerPage: 10 |
| 512 | }, | 512 | }, |
| 513 | 513 | ||
| 514 | role: [v => !!v || "Role Name is required"], | 514 | role: [v => !!v || "Role Name is required"], |
| 515 | getRoles: [], | 515 | getRoles: [], |
| 516 | teacherList: [], | 516 | teacherList: [], |
| 517 | roleList: [], | 517 | roleList: [], |
| 518 | salaryData: [], | 518 | salaryData: [], |
| 519 | hourlyData: [], | 519 | hourlyData: [], |
| 520 | salary: ["Monthly", "Hourly"], | 520 | salary: ["Monthly", "Hourly"], |
| 521 | 521 | ||
| 522 | salaryItem: "", | 522 | salaryItem: "", |
| 523 | 523 | ||
| 524 | getReport: { | 524 | getReport: { |
| 525 | role: "" | 525 | role: "" |
| 526 | }, | 526 | }, |
| 527 | 527 | ||
| 528 | showTeacher: false, | 528 | showTeacher: false, |
| 529 | editSalaryDialog: false, | 529 | editSalaryDialog: false, |
| 530 | profileSalaryDialog: false, | 530 | profileSalaryDialog: false, |
| 531 | monthlyGrade: false, | 531 | monthlyGrade: false, |
| 532 | hourlyGrades: false, | 532 | hourlyGrades: false, |
| 533 | viewSalary: false, | 533 | viewSalary: false, |
| 534 | viewHourly: false, | 534 | viewHourly: false, |
| 535 | 535 | ||
| 536 | editedItem: { | 536 | editedItem: { |
| 537 | salaryTemplate: { | 537 | salaryTemplate: { |
| 538 | allowances: {}, | 538 | allowances: {}, |
| 539 | deduction: {} | 539 | deduction: {} |
| 540 | }, | 540 | }, |
| 541 | hourlyTemplate: {} | 541 | hourlyTemplate: {} |
| 542 | }, | 542 | }, |
| 543 | 543 | ||
| 544 | // salaryGrades: {}, | 544 | // salaryGrades: {}, |
| 545 | // salaryTemplate: { | 545 | // salaryTemplate: { |
| 546 | // salaryGrades: "" | 546 | // salaryGrades: "" |
| 547 | // }, | 547 | // }, |
| 548 | // salaryTemplate :{ | 548 | // salaryTemplate :{ |
| 549 | // allowances: { | 549 | // allowances: { |
| 550 | // allowancesName: "", | 550 | // allowancesName: "", |
| 551 | // allowancesValue: "" | 551 | // allowancesValue: "" |
| 552 | // }, | 552 | // }, |
| 553 | // deduction: { | 553 | // deduction: { |
| 554 | // deductionName: "", | 554 | // deductionName: "", |
| 555 | // deductionValue: "" | 555 | // deductionValue: "" |
| 556 | // } | 556 | // } |
| 557 | // }, | 557 | // }, |
| 558 | 558 | ||
| 559 | headers: [ | 559 | headers: [ |
| 560 | { | 560 | { |
| 561 | text: "No", | 561 | text: "No", |
| 562 | align: "", | 562 | align: "", |
| 563 | sortable: false, | 563 | sortable: false, |
| 564 | value: "No" | 564 | value: "No" |
| 565 | }, | 565 | }, |
| 566 | { | 566 | { |
| 567 | text: "Profile Pic", | 567 | text: "Profile Pic", |
| 568 | value: "profilePicUrl", | 568 | value: "profilePicUrl", |
| 569 | sortable: false, | 569 | sortable: false, |
| 570 | align: "center" | 570 | align: "center" |
| 571 | }, | 571 | }, |
| 572 | { text: "Name", value: "name", sortable: false, align: "center" }, | 572 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 573 | { | 573 | { |
| 574 | text: "Join Date", | 574 | text: "Join Date", |
| 575 | value: "joinDate", | 575 | value: "joinDate", |
| 576 | sortable: false, | 576 | sortable: false, |
| 577 | align: "center" | 577 | align: "center" |
| 578 | }, | 578 | }, |
| 579 | { text: "Action", value: "", sortable: false, align: "center" } | 579 | { text: "Action", value: "", sortable: false, align: "center" } |
| 580 | ], | 580 | ], |
| 581 | desserts: [] | 581 | desserts: [] |
| 582 | }), | 582 | }), |
| 583 | 583 | ||
| 584 | methods: { | 584 | methods: { |
| 585 | close() { | 585 | close() { |
| 586 | this.editHourDialog = false; | 586 | this.editHourDialog = false; |
| 587 | }, | 587 | }, |
| 588 | dates: function(date) { | 588 | dates: function(date) { |
| 589 | return moment(date).format("MMMM DD, YYYY"); | 589 | return moment(date).format("MMMM DD, YYYY"); |
| 590 | }, | 590 | }, |
| 591 | editItem(item) { | 591 | editItem(item) { |
| 592 | this.editedIndex = this.roleList.indexOf(item); | 592 | this.editedIndex = this.roleList.indexOf(item); |
| 593 | this.editedItem = Object.assign({}, item); | 593 | this.editedItem = Object.assign({}, item); |
| 594 | this.editSalaryDialog = true; | 594 | this.editSalaryDialog = true; |
| 595 | }, | 595 | }, |
| 596 | profile(item) { | 596 | profile(item) { |
| 597 | this.editedIndex = this.roleList.indexOf(item); | 597 | this.editedIndex = this.roleList.indexOf(item); |
| 598 | this.editedItem = Object.assign({}, item); | 598 | this.editedItem = Object.assign({}, item); |
| 599 | this.profileSalaryDialog = true; | 599 | this.profileSalaryDialog = true; |
| 600 | // console.log("item", item); | 600 | // console.log("item", item); |
| 601 | if (item.salaryTemplate) { | 601 | if (item.salaryTemplate) { |
| 602 | this.viewSalary = true; | 602 | this.viewSalary = true; |
| 603 | this.viewHourly = false; | 603 | this.viewHourly = false; |
| 604 | } else { | 604 | } else { |
| 605 | this.viewHourly = true; | 605 | this.viewHourly = true; |
| 606 | this.viewSalary = false; | 606 | this.viewSalary = false; |
| 607 | } | 607 | } |
| 608 | }, | 608 | }, |
| 609 | getRole() { | 609 | getRole() { |
| 610 | this.showLoader = true; | 610 | this.showLoader = true; |
| 611 | var token = this.$store.state.token; | 611 | var token = this.$store.state.token; |
| 612 | http() | 612 | http() |
| 613 | .get("/getRolesList", { | 613 | .get("/getRolesList", { |
| 614 | headers: { Authorization: "Bearer " + token } | 614 | headers: { Authorization: "Bearer " + token } |
| 615 | }) | 615 | }) |
| 616 | .then(response => { | 616 | .then(response => { |
| 617 | this.getRoles = response.data.data; | 617 | this.getRoles = response.data.data; |
| 618 | // if (this.getRoles[2].role !== 3) { | 618 | // if (this.getRoles[2].role !== 3) { |
| 619 | // this.getRoles = response.data.data; | 619 | // this.getRoles = response.data.data; |
| 620 | // console.log("roles", this.getRoles[2].role); | 620 | // console.log("roles", this.getRoles[2].role); |
| 621 | // } | 621 | // } |
| 622 | this.getRoles = response.data.data; | 622 | this.getRoles = response.data.data; |
| 623 | var removedRoles = _.remove(this.getRoles, function(c) { | 623 | var removedRoles = _.remove(this.getRoles, function(c) { |
| 624 | //remove if color is green or yellow | 624 | //remove if color is green or yellow |
| 625 | return c.role === 1 || c.role === 4 || c.role === 5; | 625 | return c.role === 1 || c.role === 4 || c.role === 5; |
| 626 | // console.log(c); | 626 | // console.log(c); |
| 627 | }); | 627 | }); |
| 628 | this.showLoader = false; | 628 | this.showLoader = false; |
| 629 | }) | 629 | }) |
| 630 | .catch(error => { | 630 | .catch(error => { |
| 631 | this.showLoader = false; | 631 | this.showLoader = false; |
| 632 | if (error.response.status === 401) { | 632 | if (error.response.status === 401) { |
| 633 | this.$router.replace({ path: "/" }); | 633 | this.$router.replace({ path: "/" }); |
| 634 | this.$store.dispatch("setToken", null); | 634 | this.$store.dispatch("setToken", null); |
| 635 | this.$store.dispatch("Id", null); | 635 | this.$store.dispatch("Id", null); |
| 636 | } | 636 | } |
| 637 | }); | 637 | }); |
| 638 | }, | 638 | }, |
| 639 | 639 | ||
| 640 | getRoleInputs(role) { | 640 | getRoleInputs(role) { |
| 641 | // console.log("role", role); | 641 | // console.log("role", role); |
| 642 | if (role === 3) { | 642 | if (role === 3) { |
| 643 | this.showTeacher = true; | 643 | this.showTeacher = true; |
| 644 | this.getTeacherList(); | 644 | this.getTeacherList(); |
| 645 | } | 645 | } |
| 646 | }, | 646 | }, |
| 647 | 647 | ||
| 648 | getTeacherList() { | 648 | getTeacherList() { |
| 649 | this.showLoader = true; | 649 | this.showLoader = true; |
| 650 | var token = this.$store.state.token; | 650 | var token = this.$store.state.token; |
| 651 | http() | 651 | http() |
| 652 | .get("/getTeachersList", { | 652 | .get("/getTeachersList", { |
| 653 | headers: { Authorization: "Bearer " + token } | 653 | headers: { Authorization: "Bearer " + token } |
| 654 | }) | 654 | }) |
| 655 | .then(response => { | 655 | .then(response => { |
| 656 | this.teacherList = response.data.data; | 656 | this.teacherList = response.data.data; |
| 657 | this.showTeacher = true; | 657 | this.showTeacher = true; |
| 658 | this.showLoader = false; | 658 | this.showLoader = false; |
| 659 | }) | 659 | }) |
| 660 | .catch(error => { | 660 | .catch(error => { |
| 661 | this.showLoader = false; | 661 | this.showLoader = false; |
| 662 | if (error.response.status === 401) { | 662 | if (error.response.status === 401) { |
| 663 | this.$router.replace({ path: "/" }); | 663 | this.$router.replace({ path: "/" }); |
| 664 | this.$store.dispatch("setToken", null); | 664 | this.$store.dispatch("setToken", null); |
| 665 | this.$store.dispatch("Id", null); | 665 | this.$store.dispatch("Id", null); |
| 666 | } | 666 | } |
| 667 | }); | 667 | }); |
| 668 | }, | 668 | }, |
| 669 | 669 | ||
| 670 | getUserDetailWithRoles() { | 670 | getUserDetailWithRoles() { |
| 671 | this.showLoader = true; | 671 | this.showLoader = true; |
| 672 | http() | 672 | http() |
| 673 | .get( | 673 | .get( |
| 674 | "/getUserDetailWithRoles", | 674 | "/getUserDetailWithRoles", |
| 675 | { params: { role: this.getReport.role } }, | 675 | { params: { role: this.getReport.role } }, |
| 676 | { | 676 | { |
| 677 | headers: { Authorization: "Bearer " + this.token } | 677 | headers: { Authorization: "Bearer " + this.token } |
| 678 | } | 678 | } |
| 679 | ) | 679 | ) |
| 680 | .then(response => { | 680 | .then(response => { |
| 681 | this.roleList = response.data.data; | 681 | this.roleList = response.data.data; |
| 682 | this.showLoader = false; | 682 | this.showLoader = false; |
| 683 | }) | 683 | }) |
| 684 | .catch(err => { | 684 | .catch(err => { |
| 685 | this.showLoader = false; | 685 | this.showLoader = false; |
| 686 | }); | 686 | }); |
| 687 | }, | 687 | }, |
| 688 | getSalaryList() { | 688 | getSalaryList() { |
| 689 | this.showLoader = true; | 689 | this.showLoader = true; |
| 690 | this.loadingSearch = true; | 690 | this.loadingSearch = true; |
| 691 | http() | 691 | http() |
| 692 | .get("/getSalaryList", { | 692 | .get("/getSalaryList", { |
| 693 | headers: { Authorization: "Bearer " + this.token } | 693 | headers: { Authorization: "Bearer " + this.token } |
| 694 | }) | 694 | }) |
| 695 | .then(response => { | 695 | .then(response => { |
| 696 | this.salaryData = response.data.data; | 696 | this.salaryData = response.data.data; |
| 697 | this.showLoader = false; | 697 | this.showLoader = false; |
| 698 | this.loadingSearch = false; | 698 | this.loadingSearch = false; |
| 699 | }) | 699 | }) |
| 700 | .catch(error => { | 700 | .catch(error => { |
| 701 | // console.log("err====>", err); | 701 | // console.log("err====>", err); |
| 702 | this.showLoader = false; | 702 | this.showLoader = false; |
| 703 | this.loadingSearch = false; | 703 | this.loadingSearch = false; |
| 704 | this.snackbar = true; | 704 | this.snackbar = true; |
| 705 | this.text = error.response.data.message; | 705 | this.text = error.response.data.message; |
| 706 | if (error.response.status === 401) { | 706 | if (error.response.status === 401) { |
| 707 | this.$router.replace({ path: "/" }); | 707 | this.$router.replace({ path: "/" }); |
| 708 | this.$store.dispatch("setToken", null); | 708 | this.$store.dispatch("setToken", null); |
| 709 | this.$store.dispatch("Id", null); | 709 | this.$store.dispatch("Id", null); |
| 710 | } | 710 | } |
| 711 | }); | 711 | }); |
| 712 | }, | 712 | }, |
| 713 | getHourlyList() { | 713 | getHourlyList() { |
| 714 | this.showLoader = true; | 714 | this.showLoader = true; |
| 715 | this.loadingSearch = true; | 715 | this.loadingSearch = true; |
| 716 | http() | 716 | http() |
| 717 | .get("/getHourlyList", { | 717 | .get("/getHourlyList", { |
| 718 | headers: { Authorization: "Bearer " + this.token } | 718 | headers: { Authorization: "Bearer " + this.token } |
| 719 | }) | 719 | }) |
| 720 | .then(response => { | 720 | .then(response => { |
| 721 | this.hourlyData = response.data.data; | 721 | this.hourlyData = response.data.data; |
| 722 | this.showLoader = false; | 722 | this.showLoader = false; |
| 723 | this.loadingSearch = false; | 723 | this.loadingSearch = false; |
| 724 | }) | 724 | }) |
| 725 | .catch(error => { | 725 | .catch(error => { |
| 726 | // console.log("err====>", err); | 726 | // console.log("err====>", err); |
| 727 | this.showLoader = false; | 727 | this.showLoader = false; |
| 728 | this.loadingSearch = false; | 728 | this.loadingSearch = false; |
| 729 | this.snackbar = true; | 729 | this.snackbar = true; |
| 730 | this.text = error.response.data.message; | 730 | this.text = error.response.data.message; |
| 731 | if (error.response.status === 401) { | 731 | if (error.response.status === 401) { |
| 732 | this.$router.replace({ path: "/" }); | 732 | this.$router.replace({ path: "/" }); |
| 733 | this.$store.dispatch("setToken", null); | 733 | this.$store.dispatch("setToken", null); |
| 734 | this.$store.dispatch("Id", null); | 734 | this.$store.dispatch("Id", null); |
| 735 | } | 735 | } |
| 736 | }); | 736 | }); |
| 737 | }, | 737 | }, |
| 738 | editItem(item) { | 738 | editItem(item) { |
| 739 | this.editedIndex = this.salaryData.indexOf(item); | 739 | this.editedIndex = this.salaryData.indexOf(item); |
| 740 | this.editedIndex = this.hourlyData.indexOf(item); | 740 | this.editedIndex = this.hourlyData.indexOf(item); |
| 741 | this.editedItem = Object.assign({}, item); | 741 | this.editedItem = Object.assign({}, item); |
| 742 | this.editedItem.date = | 742 | this.editedItem.date = |
| 743 | this.editedItem.date != undefined | 743 | this.editedItem.date != undefined |
| 744 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 744 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 745 | : (this.editedItem.date = ""); | 745 | : (this.editedItem.date = ""); |
| 746 | this.editSalaryDialog = true; | 746 | this.editSalaryDialog = true; |
| 747 | }, | 747 | }, |
| 748 | selectSalary() { | 748 | selectSalary() { |
| 749 | if (this.editedItem.salary === "Monthly") { | 749 | if (this.editedItem.salary === "Monthly") { |
| 750 | this.monthlyGrade = true; | 750 | this.monthlyGrade = true; |
| 751 | this.hourlyGrades = false; | 751 | this.hourlyGrades = false; |
| 752 | } else { | 752 | } else { |
| 753 | this.monthlyGrade = false; | 753 | this.monthlyGrade = false; |
| 754 | this.hourlyGrades = true; | 754 | this.hourlyGrades = true; |
| 755 | } | 755 | } |
| 756 | }, | 756 | }, |
| 757 | selectGrade() { | 757 | selectGrade() { |
| 758 | console.log("this.editedItem", this.editedItem); | 758 | console.log("this.editedItem", this.editedItem); |
| 759 | }, | 759 | }, |
| 760 | selectView() { | 760 | selectView() { |
| 761 | if (this.editedItem.view.png === "Monthly") { | 761 | if (this.editedItem.view.png === "Monthly") { |
| 762 | this.viewSalary = true; | 762 | this.viewSalary = true; |
| 763 | this.viewHourly = false; | 763 | this.viewHourly = false; |
| 764 | } else { | 764 | } else { |
| 765 | this.viewSalary = false; | 765 | this.viewSalary = false; |
| 766 | this.viewHourly = true; | 766 | this.viewHourly = true; |
| 767 | } | 767 | } |
| 768 | }, | 768 | }, |
| 769 | 769 | ||
| 770 | save() { | 770 | save() { |
| 771 | var updateSalary = { | 771 | var updateSalary = { |
| 772 | role: this.editedItem.role, | 772 | role: this.editedItem.role, |
| 773 | userId: this.editedItem._id, | 773 | userId: this.editedItem._id, |
| 774 | templateName: this.editedItem.salary, | 774 | templateName: this.editedItem.salary, |
| 775 | templateId: this.editedItem.salaryId | 775 | templateId: this.editedItem.salaryId |
| 776 | }; | 776 | }; |
| 777 | http() | 777 | http() |
| 778 | .put("/updateUserSalary", updateSalary, { | 778 | .put("/updateUserSalary", updateSalary, { |
| 779 | headers: { | 779 | headers: { |
| 780 | Authorization: "Bearer " + this.token | 780 | Authorization: "Bearer " + this.token |
| 781 | } | 781 | } |
| 782 | }) | 782 | }) |
| 783 | .then(response => { | 783 | .then(response => { |
| 784 | this.getUserDetailWithRoles(); | 784 | this.getUserDetailWithRoles(); |
| 785 | this.close(); | 785 | this.close(); |
| 786 | this.snackbar = true; | 786 | this.snackbar = true; |
| 787 | this.text = response.data.message; | 787 | this.text = response.data.message; |
| 788 | this.color = "green"; | 788 | this.color = "green"; |
| 789 | this.editSalaryDialog = false; | 789 | this.editSalaryDialog = false; |
| 790 | }) | 790 | }) |
| 791 | .catch(error => { | 791 | .catch(error => { |
| 792 | console.log("error", error); | 792 | console.log("error", error); |
| 793 | this.snackbar = true; | 793 | this.snackbar = true; |
| 794 | this.color = "red"; | 794 | this.color = "red"; |
| 795 | }); | 795 | }); |
| 796 | }, | 796 | }, |
| 797 | 797 | ||
| 798 | deleteItem(item) { | 798 | deleteItem(item) { |
| 799 | // let deleteGrade = { | 799 | // let deleteGrade = { |
| 800 | // hourlyId: item._id | 800 | // hourlyId: item._id |
| 801 | // }; | 801 | // }; |
| 802 | // http() | 802 | // http() |
| 803 | // .delete( | 803 | // .delete( |
| 804 | // "/deleteHourly", | 804 | // "/deleteHourly", |
| 805 | // confirm("Are you sure you want to delete this?") && { | 805 | // confirm("Are you sure you want to delete this?") && { |
| 806 | // params: deleteGrade | 806 | // params: deleteGrade |
| 807 | // }, | 807 | // }, |
| 808 | // { | 808 | // { |
| 809 | // headers: { | 809 | // headers: { |
| 810 | // Authorization: "Bearer " + this.token | 810 | // Authorization: "Bearer " + this.token |
| 811 | // } | 811 | // } |
| 812 | // } | 812 | // } |
| 813 | // ) | 813 | // ) |
| 814 | // .then(response => { | 814 | // .then(response => { |
| 815 | // this.snackbar = true; | 815 | // this.snackbar = true; |
| 816 | // // this.text = "Successfully Delete Salary "; | 816 | // // this.text = "Successfully Delete Salary "; |
| 817 | // this.text = response.data.message; | 817 | // this.text = response.data.message; |
| 818 | // this.color = "green"; | 818 | // this.color = "green"; |
| 819 | // this.getUserDetailWithRoles(); | 819 | // this.getUserDetailWithRoles(); |
| 820 | // }) | 820 | // }) |
| 821 | // .catch(error => { | 821 | // .catch(error => { |
| 822 | // console.log("error", error); | 822 | // console.log("error", error); |
| 823 | // this.snackbar = true; | 823 | // this.snackbar = true; |
| 824 | // this.text = error.response.data.message; | 824 | // this.text = error.response.data.message; |
| 825 | // this.color = "red"; | 825 | // this.color = "red"; |
| 826 | // }); | 826 | // }); |
| 827 | } | 827 | } |
| 828 | 828 | ||
| 829 | // selectAllowances() { | 829 | // selectAllowances() { |
| 830 | // this.salaryTypeData.push({ | 830 | // this.salaryTypeData.push({ |
| 831 | // allowancesValue: (this.salaryType.allowancesValue = "") | 831 | // allowancesValue: (this.salaryType.allowancesValue = "") |
| 832 | // }); | 832 | // }); |
| 833 | // // console.log("this.salaryTypeData", this.salaryTypeData); | 833 | // // console.log("this.salaryTypeData", this.salaryTypeData); |
| 834 | // var totalAllowances = ""; | 834 | // var totalAllowances = ""; |
| 835 | // this.salaryTypeData.forEach(allowancesValue_ => { | 835 | // this.salaryTypeData.forEach(allowancesValue_ => { |
| 836 | // if (allowancesValue_.allowancesValue != "") { | 836 | // if (allowancesValue_.allowancesValue != "") { |
| 837 | // // console.log("allowances", allowancesValue_.allowancesValue); | 837 | // // console.log("allowances", allowancesValue_.allowancesValue); |
| 838 | // totalAllowances = | 838 | // totalAllowances = |
| 839 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 839 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 840 | // } | 840 | // } |
| 841 | // this.grossSalary = | 841 | // this.grossSalary = |
| 842 | // totalAllowances + Number(this.salaryType.basicSalary); | 842 | // totalAllowances + Number(this.salaryType.basicSalary); |
| 843 | // }); | 843 | // }); |
| 844 | // }, | 844 | // }, |
| 845 | // allowancesAdd() { | 845 | // allowancesAdd() { |
| 846 | // this.editedItem.allowances.push({ | 846 | // this.editedItem.allowances.push({ |
| 847 | // allowancesValue: (this.salaryType.allowancesValue = "") | 847 | // allowancesValue: (this.salaryType.allowancesValue = "") |
| 848 | // }); | 848 | // }); |
| 849 | // var totalAllowances = ""; | 849 | // var totalAllowances = ""; |
| 850 | // this.editedItem.allowances.forEach(allowancesValue_ => { | 850 | // this.editedItem.allowances.forEach(allowancesValue_ => { |
| 851 | // if (allowancesValue_.allowancesValue != "") { | 851 | // if (allowancesValue_.allowancesValue != "") { |
| 852 | // // console.log("allowances", allowancesValue_.allowancesValue); | 852 | // // console.log("allowances", allowancesValue_.allowancesValue); |
| 853 | // totalAllowances = | 853 | // totalAllowances = |
| 854 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 854 | // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 855 | // console.log("totalAllowances", totalAllowances); | 855 | // console.log("totalAllowances", totalAllowances); |
| 856 | // } | 856 | // } |
| 857 | // this.editedItem.grossSalary = | 857 | // this.editedItem.grossSalary = |
| 858 | // totalAllowances + Number(this.editedItem.basicSalary); | 858 | // totalAllowances + Number(this.editedItem.basicSalary); |
| 859 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); | 859 | // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); |
| 860 | // }); | 860 | // }); |
| 861 | // }, | 861 | // }, |
| 862 | // selectDeduction() { | 862 | // selectDeduction() { |
| 863 | // this.salaryTypeDeductionData.push({ | 863 | // this.salaryTypeDeductionData.push({ |
| 864 | // deductionValue: (this.salaryType.deductionValue = "") | 864 | // deductionValue: (this.salaryType.deductionValue = "") |
| 865 | // }); | 865 | // }); |
| 866 | // var totalDeductions = ""; | 866 | // var totalDeductions = ""; |
| 867 | // this.salaryTypeDeductionData.forEach(deductionValue_ => { | 867 | // this.salaryTypeDeductionData.forEach(deductionValue_ => { |
| 868 | // if (deductionValue_.deductionValue != "") { | 868 | // if (deductionValue_.deductionValue != "") { |
| 869 | // // console.log("deduction", deductionValue_.deductionValue); | 869 | // // console.log("deduction", deductionValue_.deductionValue); |
| 870 | // totalDeductions = | 870 | // totalDeductions = |
| 871 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); | 871 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 872 | // } | 872 | // } |
| 873 | // }); | 873 | // }); |
| 874 | // }, | 874 | // }, |
| 875 | // deductionAdd() { | 875 | // deductionAdd() { |
| 876 | // this.editedItem.deduction.push({ | 876 | // this.editedItem.deduction.push({ |
| 877 | // deductionValue: (this.salaryType.deductionValue = "") | 877 | // deductionValue: (this.salaryType.deductionValue = "") |
| 878 | // }); | 878 | // }); |
| 879 | // var totalDeductions = ""; | 879 | // var totalDeductions = ""; |
| 880 | // this.editedItem.deduction.forEach(deductionValue_ => { | 880 | // this.editedItem.deduction.forEach(deductionValue_ => { |
| 881 | // if (deductionValue_.deductionValue != "") { | 881 | // if (deductionValue_.deductionValue != "") { |
| 882 | // // console.log("deduction", deductionValue_.deductionValue); | 882 | // // console.log("deduction", deductionValue_.deductionValue); |
| 883 | // totalDeductions = | 883 | // totalDeductions = |
| 884 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); | 884 | // Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 885 | // console.log("this.totalDeductions", totalDeductions); | 885 | // console.log("this.totalDeductions", totalDeductions); |
| 886 | // } | 886 | // } |
| 887 | // // this.editedItem.totalDeduction = totalDeductions; | 887 | // // this.editedItem.totalDeduction = totalDeductions; |
| 888 | // // console.log("this.totalDeduction", this.editedItem.totalDeduction); | 888 | // // console.log("this.totalDeduction", this.editedItem.totalDeduction); |
| 889 | // }); | 889 | // }); |
| 890 | // }, | 890 | // }, |
| 891 | // deleteSelectAllowances: function(index) { | 891 | // deleteSelectAllowances: function(index) { |
| 892 | // this.salaryTypeData.splice(index, 1); | 892 | // this.salaryTypeData.splice(index, 1); |
| 893 | // }, | 893 | // }, |
| 894 | // deleteallowancesAdd: function(index) { | 894 | // deleteallowancesAdd: function(index) { |
| 895 | // this.editedItem.allowances.splice(index, 1); | 895 | // this.editedItem.allowances.splice(index, 1); |
| 896 | // }, | 896 | // }, |
| 897 | // deleteSelectDeduction: function(index) { | 897 | // deleteSelectDeduction: function(index) { |
| 898 | // this.salaryTypeDeductionData.splice(index, 1); | 898 | // this.salaryTypeDeductionData.splice(index, 1); |
| 899 | // }, | 899 | // }, |
| 900 | // deletedeductionAdd: function(index) { | 900 | // deletedeductionAdd: function(index) { |
| 901 | // this.editedItem.deduction.splice(index, 1); | 901 | // this.editedItem.deduction.splice(index, 1); |
| 902 | // }, | 902 | // }, |
| 903 | // clear() { | 903 | // clear() { |
| 904 | // this.$refs.form.reset(); | 904 | // this.$refs.form.reset(); |
| 905 | // this.disable = false; | 905 | // this.disable = false; |
| 906 | // } | 906 | // } |
| 907 | }, | 907 | }, |
| 908 | 908 | ||
| 909 | mounted() { | 909 | mounted() { |
| 910 | this.token = this.$store.state.token; | 910 | this.token = this.$store.state.token; |
| 911 | this.getRole(); | 911 | this.getRole(); |
| 912 | this.getSalaryList(); | 912 | this.getSalaryList(); |
| 913 | this.getHourlyList(); | 913 | this.getHourlyList(); |
| 914 | } | 914 | } |
| 915 | }; | 915 | }; |
| 916 | </script> | 916 | </script> |
src/pages/Payroll/salaryTemplate.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color" style="box-sizing: border-box;"> | 2 | <v-container fluid class="body-color" style="box-sizing: border-box;"> |
| 3 | <!-- ****** EDIT SALARY ****** --> | 3 | <!-- ****** EDIT SALARY ****** --> |
| 4 | <v-dialog v-model="editSalaryDialog"> | 4 | <v-dialog v-model="editSalaryDialog" persistent> |
| 5 | <v-card flat class="text-xs-center white--text"> | 5 | <v-card flat class="text-xs-center white--text"> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12 class="card-style pa-2"> | 7 | <v-flex xs12 class="card-style pa-2"> |
| 8 | <label class="title text-xs-center">Edit Salary</label> | 8 | <label class="title text-xs-center">Edit Salary</label> |
| 9 | <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon> | 9 | <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | 12 | ||
| 13 | <v-flex xs12 sm12> | 13 | <v-flex xs12 sm12> |
| 14 | <v-container fluid grid-list-md> | 14 | <v-container fluid grid-list-md> |
| 15 | <v-layout wrap> | 15 | <v-layout wrap> |
| 16 | <v-flex xs12 sm12 md6> | 16 | <v-flex xs12 sm12 md6> |
| 17 | <v-card flat> | 17 | <v-card flat> |
| 18 | <v-toolbar dark class="card-styles" flat> | 18 | <v-toolbar dark class="card-styles" flat> |
| 19 | <v-spacer></v-spacer> | 19 | <v-spacer></v-spacer> |
| 20 | <h3>Salary Template</h3> | 20 | <h3>Salary Template</h3> |
| 21 | <v-spacer></v-spacer> | 21 | <v-spacer></v-spacer> |
| 22 | </v-toolbar> | 22 | </v-toolbar> |
| 23 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 23 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 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 hidden-xs-only">Salary Grades :</label> | 26 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | <v-flex xs8 sm7 class="ml-3"> | 28 | <v-flex xs8 sm7 class="ml-3"> |
| 29 | <v-flex xs8 sm7 class="ml-3"> | 29 | <v-flex xs8 sm7 class="ml-3"> |
| 30 | <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> | 30 | <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field> |
| 31 | </v-flex> | 31 | </v-flex> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs4 class="pt-4 subheading"> | 35 | <v-flex xs4 class="pt-4 subheading"> |
| 36 | <label class="right">Basic Salary :</label> | 36 | <label class="right">Basic Salary :</label> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | <v-flex xs8 sm7 class="ml-3"> | 38 | <v-flex xs8 sm7 class="ml-3"> |
| 39 | <v-flex xs8 sm7 class="ml-3"> | 39 | <v-flex xs8 sm7 class="ml-3"> |
| 40 | <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> | 40 | <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex xs4 class="pt-4 subheading"> | 45 | <v-flex xs4 class="pt-4 subheading"> |
| 46 | <label class="right">Overtime Rate (Per Hour) :</label> | 46 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | <v-flex xs8 sm7 class="ml-3"> | 48 | <v-flex xs8 sm7 class="ml-3"> |
| 49 | <v-flex xs8 sm7 class="ml-3"> | 49 | <v-flex xs8 sm7 class="ml-3"> |
| 50 | <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> | 50 | <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | </v-layout> | 53 | </v-layout> |
| 54 | </v-form> | 54 | </v-form> |
| 55 | </v-card> | 55 | </v-card> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 57 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 58 | <v-flex xs12 sm12 md6> | 58 | <v-flex xs12 sm12 md6> |
| 59 | <v-card flat> | 59 | <v-card flat> |
| 60 | <v-toolbar dark class="card-styles" flat> | 60 | <v-toolbar dark class="card-styles" flat> |
| 61 | <v-spacer></v-spacer> | 61 | <v-spacer></v-spacer> |
| 62 | <h3>Allowances</h3> | 62 | <h3>Allowances</h3> |
| 63 | <v-spacer></v-spacer> | 63 | <v-spacer></v-spacer> |
| 64 | </v-toolbar> | 64 | </v-toolbar> |
| 65 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> | 65 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> |
| 66 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 66 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 67 | <v-text-field | 67 | <v-text-field |
| 68 | solo | 68 | solo |
| 69 | label="Enter Allowances Label" | 69 | label="Enter Allowances Label" |
| 70 | v-model="editedItem.allowancesName" | 70 | v-model="editedItem.allowancesName" |
| 71 | ></v-text-field> | 71 | ></v-text-field> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 73 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 74 | <v-text-field | 74 | <v-text-field |
| 75 | solo | 75 | solo |
| 76 | v-model="editedItem.allowancesValue" | 76 | v-model="editedItem.allowancesValue" |
| 77 | label="Enter Allowances Value" | 77 | label="Enter Allowances Value" |
| 78 | v-on:keyup="addAllowancesValue" | 78 | v-on:keyup="addAllowancesValue" |
| 79 | ></v-text-field> | 79 | ></v-text-field> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 81 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 82 | <v-btn | 82 | <v-btn |
| 83 | color="white" | 83 | color="white" |
| 84 | round | 84 | round |
| 85 | class="right mt-3" | 85 | class="right mt-3" |
| 86 | @click="deleteallowancesAdd(index)" | 86 | @click="deleteallowancesAdd(index)" |
| 87 | v-if="index != 0" | 87 | v-if="index != 0" |
| 88 | > | 88 | > |
| 89 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 89 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 90 | </v-btn> | 90 | </v-btn> |
| 91 | <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> | 91 | <v-btn color="white" round class="right mt-3" @click="allowancesAdd"> |
| 92 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 92 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 93 | </v-btn> | 93 | </v-btn> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | <!-- <v-flex xs12 sm12 md6> --> | 96 | <!-- <v-flex xs12 sm12 md6> --> |
| 97 | <v-card flat> | 97 | <v-card flat> |
| 98 | <v-toolbar dark class="card-styles" flat> | 98 | <v-toolbar dark class="card-styles" flat> |
| 99 | <v-spacer></v-spacer> | 99 | <v-spacer></v-spacer> |
| 100 | <h3>Deduction</h3> | 100 | <h3>Deduction</h3> |
| 101 | <v-spacer></v-spacer> | 101 | <v-spacer></v-spacer> |
| 102 | </v-toolbar> | 102 | </v-toolbar> |
| 103 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 103 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 104 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 104 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 105 | <v-text-field | 105 | <v-text-field |
| 106 | solo | 106 | solo |
| 107 | label="Enter Deduction Label" | 107 | label="Enter Deduction Label" |
| 108 | v-model="editedItem.deductionName" | 108 | v-model="editedItem.deductionName" |
| 109 | ></v-text-field> | 109 | ></v-text-field> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 111 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 112 | <v-text-field | 112 | <v-text-field |
| 113 | solo | 113 | solo |
| 114 | label="Enter Deduction Value" | 114 | label="Enter Deduction Value" |
| 115 | v-model="editedItem.deductionValue" | 115 | v-model="editedItem.deductionValue" |
| 116 | v-on:keyup="addDeductionValue" | 116 | v-on:keyup="addDeductionValue" |
| 117 | ></v-text-field> | 117 | ></v-text-field> |
| 118 | </v-flex> | 118 | </v-flex> |
| 119 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 119 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 120 | <v-btn | 120 | <v-btn |
| 121 | color="white" | 121 | color="white" |
| 122 | round | 122 | round |
| 123 | class="right mt-3" | 123 | class="right mt-3" |
| 124 | @click="deletedeductionAdd(index)" | 124 | @click="deletedeductionAdd(index)" |
| 125 | v-if="index != 0" | 125 | v-if="index != 0" |
| 126 | > | 126 | > |
| 127 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 127 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 128 | </v-btn> | 128 | </v-btn> |
| 129 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> | 129 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> |
| 130 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 130 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 131 | </v-btn> | 131 | </v-btn> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-card> | 134 | </v-card> |
| 135 | <!-- </v-flex> --> | 135 | <!-- </v-flex> --> |
| 136 | </v-card> | 136 | </v-card> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | <!-- <v-flex xs12 sm12 md6> | 138 | <!-- <v-flex xs12 sm12 md6> |
| 139 | <v-card flat> | 139 | <v-card flat> |
| 140 | <v-toolbar dark class="card-styles" flat> | 140 | <v-toolbar dark class="card-styles" flat> |
| 141 | <v-spacer></v-spacer> | 141 | <v-spacer></v-spacer> |
| 142 | <h3>Deduction</h3> | 142 | <h3>Deduction</h3> |
| 143 | <v-spacer></v-spacer> | 143 | <v-spacer></v-spacer> |
| 144 | </v-toolbar> | 144 | </v-toolbar> |
| 145 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 145 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 146 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 146 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 147 | <v-text-field | 147 | <v-text-field |
| 148 | solo | 148 | solo |
| 149 | label="Enter Deduction Label" | 149 | label="Enter Deduction Label" |
| 150 | v-model="editedItem.deductionName" | 150 | v-model="editedItem.deductionName" |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 153 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 154 | <v-text-field | 154 | <v-text-field |
| 155 | solo | 155 | solo |
| 156 | label="Enter Deduction Value" | 156 | label="Enter Deduction Value" |
| 157 | v-model="editedItem.deductionValue" | 157 | v-model="editedItem.deductionValue" |
| 158 | v-on:keyup="addDeductionValue" | 158 | v-on:keyup="addDeductionValue" |
| 159 | ></v-text-field> | 159 | ></v-text-field> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 161 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 162 | <v-btn | 162 | <v-btn |
| 163 | color="white" | 163 | color="white" |
| 164 | round | 164 | round |
| 165 | class="right mt-3" | 165 | class="right mt-3" |
| 166 | @click="deletedeductionAdd(index)" | 166 | @click="deletedeductionAdd(index)" |
| 167 | v-if="index != 0" | 167 | v-if="index != 0" |
| 168 | > | 168 | > |
| 169 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 169 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 170 | </v-btn> | 170 | </v-btn> |
| 171 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> | 171 | <v-btn color="white" round class="right mt-3" @click="deductionAdd"> |
| 172 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 172 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 173 | </v-btn> | 173 | </v-btn> |
| 174 | </v-flex> | 174 | </v-flex> |
| 175 | </v-layout> | 175 | </v-layout> |
| 176 | </v-card> | 176 | </v-card> |
| 177 | </v-flex>--> | 177 | </v-flex>--> |
| 178 | <!-- <v-flex xs12 sm12 md4></v-flex> --> | 178 | <!-- <v-flex xs12 sm12 md4></v-flex> --> |
| 179 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 179 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 180 | <v-card flat> | 180 | <v-card flat> |
| 181 | <v-toolbar dark class="card-styles" flat> | 181 | <v-toolbar dark class="card-styles" flat> |
| 182 | <v-spacer></v-spacer> | 182 | <v-spacer></v-spacer> |
| 183 | <h3>Total Salary Details</h3> | 183 | <h3>Total Salary Details</h3> |
| 184 | <v-spacer></v-spacer> | 184 | <v-spacer></v-spacer> |
| 185 | </v-toolbar> | 185 | </v-toolbar> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 187 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 188 | <v-text-field solo value="Gross Salary"></v-text-field> | 188 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 190 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 191 | <v-flex xs8 sm7 class="ml-3"> | 191 | <v-flex xs8 sm7 class="ml-3"> |
| 192 | <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> | 192 | <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field> |
| 193 | </v-flex> | 193 | </v-flex> |
| 194 | </v-flex> | 194 | </v-flex> |
| 195 | </v-layout> | 195 | </v-layout> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 197 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 198 | <v-text-field solo value="Total Deduction"></v-text-field> | 198 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 200 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 201 | <v-flex xs8 sm7 class="ml-3"> | 201 | <v-flex xs8 sm7 class="ml-3"> |
| 202 | <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> | 202 | <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field> |
| 203 | </v-flex> | 203 | </v-flex> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | </v-layout> | 205 | </v-layout> |
| 206 | <v-layout> | 206 | <v-layout> |
| 207 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 207 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 208 | <v-text-field solo value="Net Salary"></v-text-field> | 208 | <v-text-field solo value="Net Salary"></v-text-field> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 210 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 211 | <v-flex xs8 sm7 class="ml-3"> | 211 | <v-flex xs8 sm7 class="ml-3"> |
| 212 | <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> | 212 | <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-flex> | 214 | </v-flex> |
| 215 | </v-layout> | 215 | </v-layout> |
| 216 | </v-card> | 216 | </v-card> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs12> | 218 | <v-flex xs12> |
| 219 | <v-card-actions> | 219 | <v-card-actions> |
| 220 | <v-spacer class="hidden-xs-only"></v-spacer> | 220 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 221 | <v-btn | 221 | <v-btn |
| 222 | color="open-dialog-button" | 222 | color="open-dialog-button" |
| 223 | dark | 223 | dark |
| 224 | class="right add-button" | 224 | class="right add-button" |
| 225 | @click="save" | 225 | @click="save" |
| 226 | >Update Salary Template</v-btn> | 226 | >Update Salary Template</v-btn> |
| 227 | </v-card-actions> | 227 | </v-card-actions> |
| 228 | </v-flex> | 228 | </v-flex> |
| 229 | </v-layout> | 229 | </v-layout> |
| 230 | </v-flex> | 230 | </v-flex> |
| 231 | </v-layout> | 231 | </v-layout> |
| 232 | </v-container> | 232 | </v-container> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-card> | 234 | </v-card> |
| 235 | </v-dialog> | 235 | </v-dialog> |
| 236 | 236 | ||
| 237 | <!-- ****** PROFILE VIEW ****** --> | 237 | <!-- ****** PROFILE VIEW ****** --> |
| 238 | 238 | ||
| 239 | <v-dialog v-model="profileSalaryDialog"> | 239 | <v-dialog v-model="profileSalaryDialog" persistent> |
| 240 | <v-card flat class="text-xs-center white--text"> | 240 | <v-card flat class="text-xs-center white--text"> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs12 class="card-style pa-2"> | 242 | <v-flex xs12 class="card-style pa-2"> |
| 243 | <label class="title text-xs-center">View Salary</label> | 243 | <label class="title text-xs-center">View Salary</label> |
| 244 | <v-icon | 244 | <v-icon |
| 245 | size="24" | 245 | size="24" |
| 246 | color="white" | 246 | color="white" |
| 247 | class="right" | 247 | class="right" |
| 248 | @click="profileSalaryDialog = false" | 248 | @click="profileSalaryDialog = false" |
| 249 | >cancel</v-icon> | 249 | >cancel</v-icon> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | </v-layout> | 251 | </v-layout> |
| 252 | 252 | ||
| 253 | <v-flex xs12 sm12> | 253 | <v-flex xs12 sm12> |
| 254 | <v-container fluid grid-list-md> | 254 | <v-container fluid grid-list-md> |
| 255 | <v-layout wrap> | 255 | <v-layout wrap> |
| 256 | <v-flex xs12 sm12 md6> | 256 | <v-flex xs12 sm12 md6> |
| 257 | <v-card flat> | 257 | <v-card flat> |
| 258 | <v-toolbar dark class="card-styles" flat> | 258 | <v-toolbar dark class="card-styles" flat> |
| 259 | <v-spacer></v-spacer> | 259 | <v-spacer></v-spacer> |
| 260 | <h3>Salary Template</h3> | 260 | <h3>Salary Template</h3> |
| 261 | <v-spacer></v-spacer> | 261 | <v-spacer></v-spacer> |
| 262 | </v-toolbar> | 262 | </v-toolbar> |
| 263 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 263 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 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 hidden-xs-only">Salary Grades :</label> | 266 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | <v-flex xs8 sm7 class="ml-3"> | 268 | <v-flex xs8 sm7 class="ml-3"> |
| 269 | <v-flex xs8 sm7 class="ml-3"> | 269 | <v-flex xs8 sm7 class="ml-3"> |
| 270 | <v-text-field | 270 | <v-text-field |
| 271 | :rules="salaryRules" | 271 | :rules="salaryRules" |
| 272 | v-model="editedItem.salaryGrades" | 272 | v-model="editedItem.salaryGrades" |
| 273 | readonly | 273 | readonly |
| 274 | ></v-text-field> | 274 | ></v-text-field> |
| 275 | </v-flex> | 275 | </v-flex> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | </v-layout> | 277 | </v-layout> |
| 278 | <v-layout> | 278 | <v-layout> |
| 279 | <v-flex xs4 class="pt-4 subheading"> | 279 | <v-flex xs4 class="pt-4 subheading"> |
| 280 | <label class="right">Basic Salary :</label> | 280 | <label class="right">Basic Salary :</label> |
| 281 | </v-flex> | 281 | </v-flex> |
| 282 | <v-flex xs8 sm7 class="ml-3"> | 282 | <v-flex xs8 sm7 class="ml-3"> |
| 283 | <v-flex xs8 sm7 class="ml-3"> | 283 | <v-flex xs8 sm7 class="ml-3"> |
| 284 | <v-text-field | 284 | <v-text-field |
| 285 | :rules="basicRules" | 285 | :rules="basicRules" |
| 286 | v-model="editedItem.basicSalary" | 286 | v-model="editedItem.basicSalary" |
| 287 | readonly | 287 | readonly |
| 288 | ></v-text-field> | 288 | ></v-text-field> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | </v-layout> | 291 | </v-layout> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs4 class="pt-4 subheading"> | 293 | <v-flex xs4 class="pt-4 subheading"> |
| 294 | <label class="right">Overtime Rate (Per Hour) :</label> | 294 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs8 sm7 class="ml-3"> | 296 | <v-flex xs8 sm7 class="ml-3"> |
| 297 | <v-flex xs8 sm7 class="ml-3"> | 297 | <v-flex xs8 sm7 class="ml-3"> |
| 298 | <v-text-field | 298 | <v-text-field |
| 299 | :rules="overtimeRules" | 299 | :rules="overtimeRules" |
| 300 | v-model="editedItem.overtimeRate" | 300 | v-model="editedItem.overtimeRate" |
| 301 | readonly | 301 | readonly |
| 302 | ></v-text-field> | 302 | ></v-text-field> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-flex> | 304 | </v-flex> |
| 305 | </v-layout> | 305 | </v-layout> |
| 306 | </v-form> | 306 | </v-form> |
| 307 | </v-card> | 307 | </v-card> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 309 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 310 | <v-flex xs12 sm12 md6> | 310 | <v-flex xs12 sm12 md6> |
| 311 | <v-card flat> | 311 | <v-card flat> |
| 312 | <v-toolbar dark class="card-styles" flat> | 312 | <v-toolbar dark class="card-styles" flat> |
| 313 | <v-spacer></v-spacer> | 313 | <v-spacer></v-spacer> |
| 314 | <h3>Allowances</h3> | 314 | <h3>Allowances</h3> |
| 315 | <v-spacer></v-spacer> | 315 | <v-spacer></v-spacer> |
| 316 | </v-toolbar> | 316 | </v-toolbar> |
| 317 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> | 317 | <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index"> |
| 318 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 318 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 319 | <v-text-field | 319 | <v-text-field |
| 320 | solo | 320 | solo |
| 321 | readonly | 321 | readonly |
| 322 | label="Enter Allowances Label" | 322 | label="Enter Allowances Label" |
| 323 | v-model="editedItem.allowancesName" | 323 | v-model="editedItem.allowancesName" |
| 324 | ></v-text-field> | 324 | ></v-text-field> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 326 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 327 | <v-text-field | 327 | <v-text-field |
| 328 | solo | 328 | solo |
| 329 | readonly | 329 | readonly |
| 330 | v-model="editedItem.allowancesValue" | 330 | v-model="editedItem.allowancesValue" |
| 331 | label="Enter Allowances Value" | 331 | label="Enter Allowances Value" |
| 332 | ></v-text-field> | 332 | ></v-text-field> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | </v-layout> | 334 | </v-layout> |
| 335 | <!-- <v-flex xs12 sm12 md6> --> | 335 | <!-- <v-flex xs12 sm12 md6> --> |
| 336 | <v-card flat> | 336 | <v-card flat> |
| 337 | <v-toolbar dark class="card-styles" flat> | 337 | <v-toolbar dark class="card-styles" flat> |
| 338 | <v-spacer></v-spacer> | 338 | <v-spacer></v-spacer> |
| 339 | <h3>Deduction</h3> | 339 | <h3>Deduction</h3> |
| 340 | <v-spacer></v-spacer> | 340 | <v-spacer></v-spacer> |
| 341 | </v-toolbar> | 341 | </v-toolbar> |
| 342 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 342 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 343 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 343 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 344 | <v-text-field | 344 | <v-text-field |
| 345 | solo | 345 | solo |
| 346 | readonly | 346 | readonly |
| 347 | label="Enter Deduction Label" | 347 | label="Enter Deduction Label" |
| 348 | v-model="editedItem.deductionName" | 348 | v-model="editedItem.deductionName" |
| 349 | ></v-text-field> | 349 | ></v-text-field> |
| 350 | </v-flex> | 350 | </v-flex> |
| 351 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 351 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 352 | <v-text-field | 352 | <v-text-field |
| 353 | solo | 353 | solo |
| 354 | readonly | 354 | readonly |
| 355 | label="Enter Deduction Value" | 355 | label="Enter Deduction Value" |
| 356 | v-model="editedItem.deductionValue" | 356 | v-model="editedItem.deductionValue" |
| 357 | ></v-text-field> | 357 | ></v-text-field> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | </v-layout> | 359 | </v-layout> |
| 360 | </v-card> | 360 | </v-card> |
| 361 | <!-- </v-flex> --> | 361 | <!-- </v-flex> --> |
| 362 | </v-card> | 362 | </v-card> |
| 363 | </v-flex> | 363 | </v-flex> |
| 364 | <!-- <v-flex xs12 sm12 md6> | 364 | <!-- <v-flex xs12 sm12 md6> |
| 365 | <v-card flat> | 365 | <v-card flat> |
| 366 | <v-toolbar dark class="card-styles" flat> | 366 | <v-toolbar dark class="card-styles" flat> |
| 367 | <v-spacer></v-spacer> | 367 | <v-spacer></v-spacer> |
| 368 | <h3>Deduction</h3> | 368 | <h3>Deduction</h3> |
| 369 | <v-spacer></v-spacer> | 369 | <v-spacer></v-spacer> |
| 370 | </v-toolbar> | 370 | </v-toolbar> |
| 371 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> | 371 | <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index"> |
| 372 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 372 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 373 | <v-text-field | 373 | <v-text-field |
| 374 | solo | 374 | solo |
| 375 | label="Enter Deduction Label" | 375 | label="Enter Deduction Label" |
| 376 | v-model="editedItem.deductionName" | 376 | v-model="editedItem.deductionName" |
| 377 | ></v-text-field> | 377 | ></v-text-field> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 379 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 380 | <v-text-field | 380 | <v-text-field |
| 381 | solo | 381 | solo |
| 382 | label="Enter Deduction Value" | 382 | label="Enter Deduction Value" |
| 383 | v-model="editedItem.deductionValue" | 383 | v-model="editedItem.deductionValue" |
| 384 | ></v-text-field> | 384 | ></v-text-field> |
| 385 | </v-flex> | 385 | </v-flex> |
| 386 | </v-layout> | 386 | </v-layout> |
| 387 | </v-card> | 387 | </v-card> |
| 388 | </v-flex>--> | 388 | </v-flex>--> |
| 389 | <v-flex xs12 sm12 md4></v-flex> | 389 | <v-flex xs12 sm12 md4></v-flex> |
| 390 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 390 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 391 | <v-card flat> | 391 | <v-card flat> |
| 392 | <v-toolbar dark class="card-styles" flat> | 392 | <v-toolbar dark class="card-styles" flat> |
| 393 | <v-spacer></v-spacer> | 393 | <v-spacer></v-spacer> |
| 394 | <h3>Total Salary Details</h3> | 394 | <h3>Total Salary Details</h3> |
| 395 | <v-spacer></v-spacer> | 395 | <v-spacer></v-spacer> |
| 396 | </v-toolbar> | 396 | </v-toolbar> |
| 397 | <v-layout> | 397 | <v-layout> |
| 398 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 398 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 399 | <v-text-field solo value="Gross Salary"></v-text-field> | 399 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 400 | </v-flex> | 400 | </v-flex> |
| 401 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 401 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 402 | <v-flex xs8 sm7 class="ml-3"> | 402 | <v-flex xs8 sm7 class="ml-3"> |
| 403 | <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> | 403 | <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field> |
| 404 | </v-flex> | 404 | </v-flex> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | </v-layout> | 406 | </v-layout> |
| 407 | <v-layout> | 407 | <v-layout> |
| 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 408 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 409 | <v-text-field solo value="Total Deduction"></v-text-field> | 409 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 410 | </v-flex> | 410 | </v-flex> |
| 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 411 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 412 | <v-flex xs8 sm7 class="ml-3"> | 412 | <v-flex xs8 sm7 class="ml-3"> |
| 413 | <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> | 413 | <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field> |
| 414 | </v-flex> | 414 | </v-flex> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | <v-layout> | 417 | <v-layout> |
| 418 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 418 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 419 | <v-text-field solo value="Net Salary"></v-text-field> | 419 | <v-text-field solo value="Net Salary"></v-text-field> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> | 421 | <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 422 | <v-flex xs8 sm7 class="ml-3"> | 422 | <v-flex xs8 sm7 class="ml-3"> |
| 423 | <b> | 423 | <b> |
| 424 | <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> | 424 | <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field> |
| 425 | </b> | 425 | </b> |
| 426 | </v-flex> | 426 | </v-flex> |
| 427 | </v-flex> | 427 | </v-flex> |
| 428 | </v-layout> | 428 | </v-layout> |
| 429 | </v-card> | 429 | </v-card> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | </v-container> | 432 | </v-container> |
| 433 | </v-flex> | 433 | </v-flex> |
| 434 | </v-card> | 434 | </v-card> |
| 435 | </v-dialog> | 435 | </v-dialog> |
| 436 | <!-- ****** EXAM TABLE****** --> | 436 | <!-- ****** EXAM TABLE****** --> |
| 437 | 437 | ||
| 438 | <v-toolbar color="transparent" flat> | 438 | <v-toolbar color="transparent" flat> |
| 439 | <v-btn | 439 | <v-btn |
| 440 | fab | 440 | fab |
| 441 | dark | 441 | dark |
| 442 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 442 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 443 | small | 443 | small |
| 444 | @click="addSalaryDialog = true" | 444 | @click="addSalaryDialog = true" |
| 445 | > | 445 | > |
| 446 | <v-icon dark>add</v-icon> | 446 | <v-icon dark>add</v-icon> |
| 447 | </v-btn> | 447 | </v-btn> |
| 448 | <v-btn | 448 | <v-btn |
| 449 | round | 449 | round |
| 450 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 450 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 451 | dark | 451 | dark |
| 452 | @click="addSalaryDialog = true" | 452 | @click="addSalaryDialog = true" |
| 453 | > | 453 | > |
| 454 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary | 454 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary |
| 455 | </v-btn> | 455 | </v-btn> |
| 456 | <v-spacer></v-spacer> | 456 | <v-spacer></v-spacer> |
| 457 | <v-card-title class="body-1" v-show="show"> | 457 | <v-card-title class="body-1" v-show="show"> |
| 458 | <v-btn icon large flat @click="displaySearch"> | 458 | <v-btn icon large flat @click="displaySearch"> |
| 459 | <v-avatar size="27"> | 459 | <v-avatar size="27"> |
| 460 | <img src="/static/icon/search.png" alt="icon" /> | 460 | <img src="/static/icon/search.png" alt="icon" /> |
| 461 | </v-avatar> | 461 | </v-avatar> |
| 462 | </v-btn> | 462 | </v-btn> |
| 463 | </v-card-title> | 463 | </v-card-title> |
| 464 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 464 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 465 | <v-layout> | 465 | <v-layout> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | autofocus | 467 | autofocus |
| 468 | v-model="search" | 468 | v-model="search" |
| 469 | label="Search" | 469 | label="Search" |
| 470 | prepend-inner-icon="search" | 470 | prepend-inner-icon="search" |
| 471 | color="primary" | 471 | color="primary" |
| 472 | ></v-text-field> | 472 | ></v-text-field> |
| 473 | <v-icon @click="closeSearch" color="error">close</v-icon> | 473 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-toolbar> | 476 | </v-toolbar> |
| 477 | <v-data-table | 477 | <v-data-table |
| 478 | :headers="headers" | 478 | :headers="headers" |
| 479 | :items="salaryData" | 479 | :items="salaryData" |
| 480 | :pagination.sync="pagination" | 480 | :pagination.sync="pagination" |
| 481 | :search="search" | 481 | :search="search" |
| 482 | > | 482 | > |
| 483 | <template slot="items" slot-scope="props"> | 483 | <template slot="items" slot-scope="props"> |
| 484 | <tr class="tr"> | 484 | <tr class="tr"> |
| 485 | <td class="td td-row">{{ props.index + 1}}</td> | 485 | <td class="td td-row">{{ props.index + 1}}</td> |
| 486 | <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> | 486 | <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td> |
| 487 | <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> | 487 | <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td> |
| 488 | <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> | 488 | <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> |
| 489 | <td class="td td-row text-xs-center"> | 489 | <td class="td td-row text-xs-center"> |
| 490 | <span> | 490 | <span> |
| 491 | <v-tooltip top> | 491 | <v-tooltip top> |
| 492 | <img | 492 | <img |
| 493 | slot="activator" | 493 | slot="activator" |
| 494 | style="cursor:pointer; width:25px; height:25px; " | 494 | style="cursor:pointer; width:25px; height:25px; " |
| 495 | class="mr-3" | 495 | class="mr-3" |
| 496 | @click="profile(props.item)" | 496 | @click="profile(props.item)" |
| 497 | src="/static/icon/view.png" | 497 | src="/static/icon/view.png" |
| 498 | /> | 498 | /> |
| 499 | <span>View</span> | 499 | <span>View</span> |
| 500 | </v-tooltip> | 500 | </v-tooltip> |
| 501 | <v-tooltip top> | 501 | <v-tooltip top> |
| 502 | <img | 502 | <img |
| 503 | slot="activator" | 503 | slot="activator" |
| 504 | style="cursor:pointer; width:20px; height:18px; " | 504 | style="cursor:pointer; width:20px; height:18px; " |
| 505 | class="mr-3" | 505 | class="mr-3" |
| 506 | @click="editItem(props.item)" | 506 | @click="editItem(props.item)" |
| 507 | src="/static/icon/edit.png" | 507 | src="/static/icon/edit.png" |
| 508 | /> | 508 | /> |
| 509 | <span>Edit</span> | 509 | <span>Edit</span> |
| 510 | </v-tooltip> | 510 | </v-tooltip> |
| 511 | <v-tooltip top> | 511 | <v-tooltip top> |
| 512 | <img | 512 | <img |
| 513 | slot="activator" | 513 | slot="activator" |
| 514 | style="cursor:pointer; width:20px; height:20px; " | 514 | style="cursor:pointer; width:20px; height:20px; " |
| 515 | class="mr-3" | 515 | class="mr-3" |
| 516 | @click="deleteItem(props.item)" | 516 | @click="deleteItem(props.item)" |
| 517 | src="/static/icon/delete.png" | 517 | src="/static/icon/delete.png" |
| 518 | /> | 518 | /> |
| 519 | <span>Delete</span> | 519 | <span>Delete</span> |
| 520 | </v-tooltip> | 520 | </v-tooltip> |
| 521 | </span> | 521 | </span> |
| 522 | </td> | 522 | </td> |
| 523 | </tr> | 523 | </tr> |
| 524 | </template> | 524 | </template> |
| 525 | <v-alert | 525 | <v-alert |
| 526 | slot="no-results" | 526 | slot="no-results" |
| 527 | :value="true" | 527 | :value="true" |
| 528 | color="error" | 528 | color="error" |
| 529 | icon="warning" | 529 | icon="warning" |
| 530 | >Your search for "{{ search }}" found no results.</v-alert> | 530 | >Your search for "{{ search }}" found no results.</v-alert> |
| 531 | </v-data-table> | 531 | </v-data-table> |
| 532 | 532 | ||
| 533 | <!-- ****** ADD SALARY ****** --> | 533 | <!-- ****** ADD SALARY ****** --> |
| 534 | <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog"> | 534 | <v-dialog v-model="addSalaryDialog" v-if="addSalaryDialog" persistent> |
| 535 | <v-card flat class="text-xs-center white--text"> | 535 | <v-card flat class="text-xs-center white--text"> |
| 536 | <v-layout> | 536 | <v-layout> |
| 537 | <v-flex xs12 class="card-style pa-2"> | 537 | <v-flex xs12 class="card-style pa-2"> |
| 538 | <label class="title text-xs-center">Add Salary</label> | 538 | <label class="title text-xs-center">Add Salary</label> |
| 539 | <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon> | 539 | <v-icon size="24" color="white" class="right" @click="closeAddSalaryModel">cancel</v-icon> |
| 540 | </v-flex> | 540 | </v-flex> |
| 541 | </v-layout> | 541 | </v-layout> |
| 542 | 542 | ||
| 543 | <v-flex xs12 sm12> | 543 | <v-flex xs12 sm12> |
| 544 | <v-container fluid grid-list-md> | 544 | <v-container fluid grid-list-md> |
| 545 | <v-layout wrap> | 545 | <v-layout wrap> |
| 546 | <v-flex xs12 sm12 md6> | 546 | <v-flex xs12 sm12 md6> |
| 547 | <v-card flat> | 547 | <v-card flat> |
| 548 | <v-toolbar dark class="card-styles" flat> | 548 | <v-toolbar dark class="card-styles" flat> |
| 549 | <v-spacer></v-spacer> | 549 | <v-spacer></v-spacer> |
| 550 | <h3>Salary Template</h3> | 550 | <h3>Salary Template</h3> |
| 551 | <v-spacer></v-spacer> | 551 | <v-spacer></v-spacer> |
| 552 | </v-toolbar> | 552 | </v-toolbar> |
| 553 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> | 553 | <v-form ref="form" v-model="valid" lazy-validation class="py-4"> |
| 554 | <v-layout> | 554 | <v-layout> |
| 555 | <v-flex xs4 class="pt-4 subheading"> | 555 | <v-flex xs4 class="pt-4 subheading"> |
| 556 | <label class="right hidden-xs-only">Salary Grades :</label> | 556 | <label class="right hidden-xs-only">Salary Grades :</label> |
| 557 | </v-flex> | 557 | </v-flex> |
| 558 | <v-flex xs8 sm7 class="ml-3"> | 558 | <v-flex xs8 sm7 class="ml-3"> |
| 559 | <v-flex xs8 sm7 class="ml-3"> | 559 | <v-flex xs8 sm7 class="ml-3"> |
| 560 | <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> | 560 | <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field> |
| 561 | </v-flex> | 561 | </v-flex> |
| 562 | </v-flex> | 562 | </v-flex> |
| 563 | </v-layout> | 563 | </v-layout> |
| 564 | <v-layout> | 564 | <v-layout> |
| 565 | <v-flex xs4 class="pt-4 subheading"> | 565 | <v-flex xs4 class="pt-4 subheading"> |
| 566 | <label class="right">Basic Salary :</label> | 566 | <label class="right">Basic Salary :</label> |
| 567 | </v-flex> | 567 | </v-flex> |
| 568 | <v-flex xs8 sm7 class="ml-3"> | 568 | <v-flex xs8 sm7 class="ml-3"> |
| 569 | <v-flex xs8 sm7 class="ml-3"> | 569 | <v-flex xs8 sm7 class="ml-3"> |
| 570 | <v-text-field | 570 | <v-text-field |
| 571 | :rules="basicRules" | 571 | :rules="basicRules" |
| 572 | v-on:keyup="addSalary" | 572 | v-on:keyup="addSalary" |
| 573 | v-model="salaryType.basicSalary" | 573 | v-model="salaryType.basicSalary" |
| 574 | ></v-text-field> | 574 | ></v-text-field> |
| 575 | </v-flex> | 575 | </v-flex> |
| 576 | </v-flex> | 576 | </v-flex> |
| 577 | </v-layout> | 577 | </v-layout> |
| 578 | <v-layout> | 578 | <v-layout> |
| 579 | <v-flex xs4 class="pt-4 subheading"> | 579 | <v-flex xs4 class="pt-4 subheading"> |
| 580 | <label class="right">Overtime Rate (Per Hour) :</label> | 580 | <label class="right">Overtime Rate (Per Hour) :</label> |
| 581 | </v-flex> | 581 | </v-flex> |
| 582 | <v-flex xs8 sm7 class="ml-3"> | 582 | <v-flex xs8 sm7 class="ml-3"> |
| 583 | <v-flex xs8 sm7 class="ml-3"> | 583 | <v-flex xs8 sm7 class="ml-3"> |
| 584 | <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> | 584 | <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field> |
| 585 | </v-flex> | 585 | </v-flex> |
| 586 | </v-flex> | 586 | </v-flex> |
| 587 | </v-layout> | 587 | </v-layout> |
| 588 | </v-form> | 588 | </v-form> |
| 589 | </v-card> | 589 | </v-card> |
| 590 | </v-flex> | 590 | </v-flex> |
| 591 | <!-- <v-flex xs12 sm12 md5></v-flex> --> | 591 | <!-- <v-flex xs12 sm12 md5></v-flex> --> |
| 592 | <v-flex xs12 sm12 md6> | 592 | <v-flex xs12 sm12 md6> |
| 593 | <v-card flat> | 593 | <v-card flat> |
| 594 | <v-toolbar dark class="card-styles" flat> | 594 | <v-toolbar dark class="card-styles" flat> |
| 595 | <v-spacer></v-spacer> | 595 | <v-spacer></v-spacer> |
| 596 | <h3>Allowances</h3> | 596 | <h3>Allowances</h3> |
| 597 | <v-spacer></v-spacer> | 597 | <v-spacer></v-spacer> |
| 598 | </v-toolbar> | 598 | </v-toolbar> |
| 599 | <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> | 599 | <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index"> |
| 600 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 600 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 601 | <v-text-field | 601 | <v-text-field |
| 602 | solo | 602 | solo |
| 603 | label="Enter Allowances Label" | 603 | label="Enter Allowances Label" |
| 604 | v-model="salaryType.allowancesName" | 604 | v-model="salaryType.allowancesName" |
| 605 | ></v-text-field> | 605 | ></v-text-field> |
| 606 | </v-flex> | 606 | </v-flex> |
| 607 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 607 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 608 | <v-text-field | 608 | <v-text-field |
| 609 | solo | 609 | solo |
| 610 | v-model="salaryType.allowancesValue" | 610 | v-model="salaryType.allowancesValue" |
| 611 | label="Enter Allowances Value" | 611 | label="Enter Allowances Value" |
| 612 | v-on:keyup="addAllowances" | 612 | v-on:keyup="addAllowances" |
| 613 | ></v-text-field> | 613 | ></v-text-field> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 615 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 616 | <v-btn | 616 | <v-btn |
| 617 | color="white" | 617 | color="white" |
| 618 | round | 618 | round |
| 619 | class="right mt-3" | 619 | class="right mt-3" |
| 620 | @click="deleteSelectAllowances(index)" | 620 | @click="deleteSelectAllowances(index)" |
| 621 | v-if="index != 0" | 621 | v-if="index != 0" |
| 622 | > | 622 | > |
| 623 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 623 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 624 | </v-btn> | 624 | </v-btn> |
| 625 | <v-btn color="white" round class="right mt-3" @click="selectAllowances"> | 625 | <v-btn color="white" round class="right mt-3" @click="selectAllowances"> |
| 626 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 626 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 627 | </v-btn> | 627 | </v-btn> |
| 628 | </v-flex> | 628 | </v-flex> |
| 629 | </v-layout> | 629 | </v-layout> |
| 630 | <!-- <v-flex xs12 sm12 md6> --> | 630 | <!-- <v-flex xs12 sm12 md6> --> |
| 631 | <v-card flat> | 631 | <v-card flat> |
| 632 | <v-toolbar dark class="card-styles" flat> | 632 | <v-toolbar dark class="card-styles" flat> |
| 633 | <v-spacer></v-spacer> | 633 | <v-spacer></v-spacer> |
| 634 | <h3>Deduction</h3> | 634 | <h3>Deduction</h3> |
| 635 | <v-spacer></v-spacer> | 635 | <v-spacer></v-spacer> |
| 636 | </v-toolbar> | 636 | </v-toolbar> |
| 637 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> | 637 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> |
| 638 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 638 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 639 | <v-text-field | 639 | <v-text-field |
| 640 | solo | 640 | solo |
| 641 | label="Enter Deduction Label" | 641 | label="Enter Deduction Label" |
| 642 | v-model="salaryType.deductionName" | 642 | v-model="salaryType.deductionName" |
| 643 | ></v-text-field> | 643 | ></v-text-field> |
| 644 | </v-flex> | 644 | </v-flex> |
| 645 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 645 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 646 | <v-text-field | 646 | <v-text-field |
| 647 | solo | 647 | solo |
| 648 | label="Enter Deduction Value" | 648 | label="Enter Deduction Value" |
| 649 | v-model="salaryType.deductionValue" | 649 | v-model="salaryType.deductionValue" |
| 650 | v-on:keyup="addDeduction" | 650 | v-on:keyup="addDeduction" |
| 651 | ></v-text-field> | 651 | ></v-text-field> |
| 652 | </v-flex> | 652 | </v-flex> |
| 653 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 653 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 654 | <v-btn | 654 | <v-btn |
| 655 | color="white" | 655 | color="white" |
| 656 | round | 656 | round |
| 657 | class="right mt-3" | 657 | class="right mt-3" |
| 658 | @click="deleteSelectDeduction(index)" | 658 | @click="deleteSelectDeduction(index)" |
| 659 | v-if="index != 0" | 659 | v-if="index != 0" |
| 660 | > | 660 | > |
| 661 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 661 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 662 | </v-btn> | 662 | </v-btn> |
| 663 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> | 663 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> |
| 664 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 664 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 665 | </v-btn> | 665 | </v-btn> |
| 666 | </v-flex> | 666 | </v-flex> |
| 667 | </v-layout> | 667 | </v-layout> |
| 668 | </v-card> | 668 | </v-card> |
| 669 | <!-- </v-flex> --> | 669 | <!-- </v-flex> --> |
| 670 | </v-card> | 670 | </v-card> |
| 671 | </v-flex> | 671 | </v-flex> |
| 672 | <!-- <v-flex xs12 sm12 md6> | 672 | <!-- <v-flex xs12 sm12 md6> |
| 673 | <v-card flat> | 673 | <v-card flat> |
| 674 | <v-toolbar dark class="card-styles" flat> | 674 | <v-toolbar dark class="card-styles" flat> |
| 675 | <v-spacer></v-spacer> | 675 | <v-spacer></v-spacer> |
| 676 | <h3>Deduction</h3> | 676 | <h3>Deduction</h3> |
| 677 | <v-spacer></v-spacer> | 677 | <v-spacer></v-spacer> |
| 678 | </v-toolbar> | 678 | </v-toolbar> |
| 679 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> | 679 | <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index"> |
| 680 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> | 680 | <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 681 | <v-text-field | 681 | <v-text-field |
| 682 | solo | 682 | solo |
| 683 | label="Enter Deduction Label" | 683 | label="Enter Deduction Label" |
| 684 | v-model="salaryType.deductionName" | 684 | v-model="salaryType.deductionName" |
| 685 | ></v-text-field> | 685 | ></v-text-field> |
| 686 | </v-flex> | 686 | </v-flex> |
| 687 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> | 687 | <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 688 | <v-text-field | 688 | <v-text-field |
| 689 | solo | 689 | solo |
| 690 | label="Enter Deduction Value" | 690 | label="Enter Deduction Value" |
| 691 | v-model="salaryType.deductionValue" | 691 | v-model="salaryType.deductionValue" |
| 692 | v-on:keyup="addDeduction" | 692 | v-on:keyup="addDeduction" |
| 693 | ></v-text-field> | 693 | ></v-text-field> |
| 694 | </v-flex> | 694 | </v-flex> |
| 695 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> | 695 | <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only"> |
| 696 | <v-btn | 696 | <v-btn |
| 697 | color="white" | 697 | color="white" |
| 698 | round | 698 | round |
| 699 | class="right mt-3" | 699 | class="right mt-3" |
| 700 | @click="deleteSelectDeduction(index)" | 700 | @click="deleteSelectDeduction(index)" |
| 701 | v-if="index != 0" | 701 | v-if="index != 0" |
| 702 | > | 702 | > |
| 703 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> | 703 | <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" /> |
| 704 | </v-btn> | 704 | </v-btn> |
| 705 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> | 705 | <v-btn color="white" round class="right mt-3" @click="selectDeduction"> |
| 706 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> | 706 | <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" /> |
| 707 | </v-btn> | 707 | </v-btn> |
| 708 | </v-flex> | 708 | </v-flex> |
| 709 | </v-layout> | 709 | </v-layout> |
| 710 | </v-card> | 710 | </v-card> |
| 711 | </v-flex>--> | 711 | </v-flex>--> |
| 712 | <!-- <v-flex xs12 sm12 md4></v-flex> --> | 712 | <!-- <v-flex xs12 sm12 md4></v-flex> --> |
| 713 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> | 713 | <v-flex xs12 sm12 md12 style="padding-top: 1%;"> |
| 714 | <v-card flat> | 714 | <v-card flat> |
| 715 | <v-toolbar dark class="card-styles" flat> | 715 | <v-toolbar dark class="card-styles" flat> |
| 716 | <v-spacer></v-spacer> | 716 | <v-spacer></v-spacer> |
| 717 | <h3>Total Salary Details</h3> | 717 | <h3>Total Salary Details</h3> |
| 718 | <v-spacer></v-spacer> | 718 | <v-spacer></v-spacer> |
| 719 | </v-toolbar> | 719 | </v-toolbar> |
| 720 | <v-layout> | 720 | <v-layout> |
| 721 | <v-flex xs4 class="pt-4 subheading"> | 721 | <v-flex xs4 class="pt-4 subheading"> |
| 722 | <v-text-field solo value="Gross Salary"></v-text-field> | 722 | <v-text-field solo value="Gross Salary"></v-text-field> |
| 723 | </v-flex> | 723 | </v-flex> |
| 724 | <v-flex xs8 sm7 class="ml-3"> | 724 | <v-flex xs8 sm7 class="ml-3"> |
| 725 | <v-flex xs8 sm7 class="ml-3"> | 725 | <v-flex xs8 sm7 class="ml-3"> |
| 726 | <v-text-field v-model="grossSalary" box readonly></v-text-field> | 726 | <v-text-field v-model="grossSalary" box readonly></v-text-field> |
| 727 | </v-flex> | 727 | </v-flex> |
| 728 | </v-flex> | 728 | </v-flex> |
| 729 | </v-layout> | 729 | </v-layout> |
| 730 | <v-layout> | 730 | <v-layout> |
| 731 | <v-flex xs4 class="pt-4 subheading"> | 731 | <v-flex xs4 class="pt-4 subheading"> |
| 732 | <v-text-field solo value="Total Deduction"></v-text-field> | 732 | <v-text-field solo value="Total Deduction"></v-text-field> |
| 733 | </v-flex> | 733 | </v-flex> |
| 734 | <v-flex xs8 sm7 class="ml-3"> | 734 | <v-flex xs8 sm7 class="ml-3"> |
| 735 | <v-flex xs8 sm7 class="ml-3"> | 735 | <v-flex xs8 sm7 class="ml-3"> |
| 736 | <v-text-field v-model="totalDeduction" box readonly></v-text-field> | 736 | <v-text-field v-model="totalDeduction" box readonly></v-text-field> |
| 737 | </v-flex> | 737 | </v-flex> |
| 738 | </v-flex> | 738 | </v-flex> |
| 739 | </v-layout> | 739 | </v-layout> |
| 740 | <v-layout> | 740 | <v-layout> |
| 741 | <v-flex xs4 class="pt-4 subheading"> | 741 | <v-flex xs4 class="pt-4 subheading"> |
| 742 | <v-text-field solo value="Net Salary"></v-text-field> | 742 | <v-text-field solo value="Net Salary"></v-text-field> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | <v-flex xs8 sm7 class="ml-3"> | 744 | <v-flex xs8 sm7 class="ml-3"> |
| 745 | <v-flex xs8 sm7 class="ml-3"> | 745 | <v-flex xs8 sm7 class="ml-3"> |
| 746 | <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> | 746 | <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field> |
| 747 | </v-flex> | 747 | </v-flex> |
| 748 | </v-flex> | 748 | </v-flex> |
| 749 | </v-layout> | 749 | </v-layout> |
| 750 | </v-card> | 750 | </v-card> |
| 751 | <v-layout> | 751 | <v-layout> |
| 752 | <v-flex xs12> | 752 | <v-flex xs12> |
| 753 | <v-card-actions> | 753 | <v-card-actions> |
| 754 | <v-spacer class="hidden-xs-only"></v-spacer> | 754 | <v-spacer class="hidden-xs-only"></v-spacer> |
| 755 | <v-btn | 755 | <v-btn |
| 756 | color="open-dialog-button" | 756 | color="open-dialog-button" |
| 757 | dark | 757 | dark |
| 758 | class="right add-button" | 758 | class="right add-button" |
| 759 | @click="submit" | 759 | @click="submit" |
| 760 | >Add Salary Template</v-btn> | 760 | >Add Salary Template</v-btn> |
| 761 | </v-card-actions> | 761 | </v-card-actions> |
| 762 | </v-flex> | 762 | </v-flex> |
| 763 | </v-layout> | 763 | </v-layout> |
| 764 | </v-flex> | 764 | </v-flex> |
| 765 | </v-layout> | 765 | </v-layout> |
| 766 | </v-container> | 766 | </v-container> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | </v-card> | 768 | </v-card> |
| 769 | </v-dialog> | 769 | </v-dialog> |
| 770 | <v-snackbar | 770 | <v-snackbar |
| 771 | :timeout="timeout" | 771 | :timeout="timeout" |
| 772 | :top="y === 'top'" | 772 | :top="y === 'top'" |
| 773 | :right="x === 'right'" | 773 | :right="x === 'right'" |
| 774 | :vertical="mode === 'vertical'" | 774 | :vertical="mode === 'vertical'" |
| 775 | v-model="snackbar" | 775 | v-model="snackbar" |
| 776 | :color="color" | 776 | :color="color" |
| 777 | >{{ text }}</v-snackbar> | 777 | >{{ text }}</v-snackbar> |
| 778 | <div class="loader" v-if="showLoader"> | 778 | <div class="loader" v-if="showLoader"> |
| 779 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 779 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 780 | </div> | 780 | </div> |
| 781 | </v-container> | 781 | </v-container> |
| 782 | </template> | 782 | </template> |
| 783 | 783 | ||
| 784 | <script> | 784 | <script> |
| 785 | import http from "@/Services/http.js"; | 785 | import http from "@/Services/http.js"; |
| 786 | import moment from "moment"; | 786 | import moment from "moment"; |
| 787 | 787 | ||
| 788 | export default { | 788 | export default { |
| 789 | data: () => ({ | 789 | data: () => ({ |
| 790 | snackbar: false, | 790 | snackbar: false, |
| 791 | date: null, | 791 | date: null, |
| 792 | color: "", | 792 | color: "", |
| 793 | y: "top", | 793 | y: "top", |
| 794 | x: "right", | 794 | x: "right", |
| 795 | mode: "", | 795 | mode: "", |
| 796 | timeout: 10000, | 796 | timeout: 10000, |
| 797 | text: "", | 797 | text: "", |
| 798 | show: true, | 798 | show: true, |
| 799 | showSearch: false, | 799 | showSearch: false, |
| 800 | addSalaryDialog: false, | 800 | addSalaryDialog: false, |
| 801 | loading: false, | 801 | loading: false, |
| 802 | loadingSearch: false, | 802 | loadingSearch: false, |
| 803 | search: "", | 803 | search: "", |
| 804 | showLoader: false, | 804 | showLoader: false, |
| 805 | editSalaryDialog: false, | 805 | editSalaryDialog: false, |
| 806 | profileSalaryDialog: false, | 806 | profileSalaryDialog: false, |
| 807 | valid: true, | 807 | valid: true, |
| 808 | disabled: true, | 808 | disabled: true, |
| 809 | showAllowances: false, | 809 | showAllowances: false, |
| 810 | showDeduction: false, | 810 | showDeduction: false, |
| 811 | pagination: { | 811 | pagination: { |
| 812 | rowsPerPage: 10, | 812 | rowsPerPage: 10, |
| 813 | }, | 813 | }, |
| 814 | salaryTypes: [], | 814 | salaryTypes: [], |
| 815 | salaryTypeData: [ | 815 | salaryTypeData: [ |
| 816 | { | 816 | { |
| 817 | allowancesValue: "", | 817 | allowancesValue: "", |
| 818 | allowancesName: "House Rent", | 818 | allowancesName: "House Rent", |
| 819 | totalAllowances: 0, | 819 | totalAllowances: 0, |
| 820 | }, | 820 | }, |
| 821 | ], | 821 | ], |
| 822 | salaryTypeDeductionData: [ | 822 | salaryTypeDeductionData: [ |
| 823 | { | 823 | { |
| 824 | deductionValue: "", | 824 | deductionValue: "", |
| 825 | deductionName: "Provident fund", | 825 | deductionName: "Provident fund", |
| 826 | totalDeductions: 0, | 826 | totalDeductions: 0, |
| 827 | }, | 827 | }, |
| 828 | ], | 828 | ], |
| 829 | grossSalary: 0, | 829 | grossSalary: 0, |
| 830 | totalDeduction: 0, | 830 | totalDeduction: 0, |
| 831 | salaryType: { | 831 | salaryType: { |
| 832 | netSalary: 0, | 832 | netSalary: 0, |
| 833 | salaryGrades: "", | 833 | salaryGrades: "", |
| 834 | allowancesValue: "", | 834 | allowancesValue: "", |
| 835 | deductionValue: "", | 835 | deductionValue: "", |
| 836 | overtimeRate: "", | 836 | overtimeRate: "", |
| 837 | }, | 837 | }, |
| 838 | 838 | ||
| 839 | basicRules: [(v) => !!v || " Basic Salary is required"], | 839 | basicRules: [(v) => !!v || " Basic Salary is required"], |
| 840 | salaryRules: [(v) => !!v || "Salary Grades is required"], | 840 | salaryRules: [(v) => !!v || "Salary Grades is required"], |
| 841 | overtimeRules: [(v) => !!v || "Overtime Rate is required"], | 841 | overtimeRules: [(v) => !!v || "Overtime Rate is required"], |
| 842 | 842 | ||
| 843 | headers: [ | 843 | headers: [ |
| 844 | { | 844 | { |
| 845 | align: "", | 845 | align: "", |
| 846 | text: "No", | 846 | text: "No", |
| 847 | sortable: false, | 847 | sortable: false, |
| 848 | value: "No", | 848 | value: "No", |
| 849 | }, | 849 | }, |
| 850 | { | 850 | { |
| 851 | text: "Salary Grades", | 851 | text: "Salary Grades", |
| 852 | value: "salaryGrades", | 852 | value: "salaryGrades", |
| 853 | sortable: false, | 853 | sortable: false, |
| 854 | align: "center", | 854 | align: "center", |
| 855 | }, | 855 | }, |
| 856 | { | 856 | { |
| 857 | text: "Basic Salary", | 857 | text: "Basic Salary", |
| 858 | value: "basicSalary", | 858 | value: "basicSalary", |
| 859 | sortable: false, | 859 | sortable: false, |
| 860 | align: "center", | 860 | align: "center", |
| 861 | }, | 861 | }, |
| 862 | { | 862 | { |
| 863 | text: "Overtime Rate", | 863 | text: "Overtime Rate", |
| 864 | value: "overtimeRate", | 864 | value: "overtimeRate", |
| 865 | sortable: false, | 865 | sortable: false, |
| 866 | align: "center", | 866 | align: "center", |
| 867 | }, | 867 | }, |
| 868 | { text: "Action", value: "", sortable: false, align: "center" }, | 868 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 869 | ], | 869 | ], |
| 870 | salaryData: [], | 870 | salaryData: [], |
| 871 | editedItem: {}, | 871 | editedItem: {}, |
| 872 | token: "", | 872 | token: "", |
| 873 | }), | 873 | }), |
| 874 | watch: { | 874 | watch: { |
| 875 | addSalaryDialog: function (val) { | 875 | addSalaryDialog: function (val) { |
| 876 | if (!val) { | 876 | if (!val) { |
| 877 | this.salaryType = []; | 877 | this.salaryType = []; |
| 878 | this.grossSalary = 0; | 878 | this.grossSalary = 0; |
| 879 | this.totalDeduction = 0; | 879 | this.totalDeduction = 0; |
| 880 | (this.salaryTypeData = [ | 880 | (this.salaryTypeData = [ |
| 881 | { | 881 | { |
| 882 | allowancesValue: "", | 882 | allowancesValue: "", |
| 883 | allowancesName: "", | 883 | allowancesName: "", |
| 884 | totalAllowances: 0, | 884 | totalAllowances: 0, |
| 885 | }, | 885 | }, |
| 886 | ]), | 886 | ]), |
| 887 | (this.salaryTypeDeductionData = [ | 887 | (this.salaryTypeDeductionData = [ |
| 888 | { | 888 | { |
| 889 | deductionValue: "", | 889 | deductionValue: "", |
| 890 | deductionName: "", | 890 | deductionName: "", |
| 891 | totalDeductions: 0, | 891 | totalDeductions: 0, |
| 892 | }, | 892 | }, |
| 893 | ]); | 893 | ]); |
| 894 | } | 894 | } |
| 895 | }, | 895 | }, |
| 896 | }, | 896 | }, |
| 897 | methods: { | 897 | methods: { |
| 898 | getSalaryList() { | 898 | getSalaryList() { |
| 899 | this.showLoader = true; | 899 | this.showLoader = true; |
| 900 | this.loadingSearch = true; | 900 | this.loadingSearch = true; |
| 901 | http() | 901 | http() |
| 902 | .get("/getSalaryList", { | 902 | .get("/getSalaryList", { |
| 903 | headers: { Authorization: "Bearer " + this.token }, | 903 | headers: { Authorization: "Bearer " + this.token }, |
| 904 | }) | 904 | }) |
| 905 | .then((response) => { | 905 | .then((response) => { |
| 906 | this.salaryData = response.data.data; | 906 | this.salaryData = response.data.data; |
| 907 | this.showLoader = false; | 907 | this.showLoader = false; |
| 908 | this.loadingSearch = false; | 908 | this.loadingSearch = false; |
| 909 | }) | 909 | }) |
| 910 | .catch((error) => { | 910 | .catch((error) => { |
| 911 | // console.log("err====>", err); | 911 | // console.log("err====>", err); |
| 912 | this.showLoader = false; | 912 | this.showLoader = false; |
| 913 | this.loadingSearch = false; | 913 | this.loadingSearch = false; |
| 914 | this.snackbar = true; | 914 | this.snackbar = true; |
| 915 | this.text = error.response.data.message; | 915 | this.text = error.response.data.message; |
| 916 | if (error.response.status === 401) { | 916 | if (error.response.status === 401) { |
| 917 | this.$router.replace({ path: "/" }); | 917 | this.$router.replace({ path: "/" }); |
| 918 | this.$store.dispatch("setToken", null); | 918 | this.$store.dispatch("setToken", null); |
| 919 | this.$store.dispatch("Id", null); | 919 | this.$store.dispatch("Id", null); |
| 920 | } | 920 | } |
| 921 | }); | 921 | }); |
| 922 | }, | 922 | }, |
| 923 | editItem(item) { | 923 | editItem(item) { |
| 924 | this.editedIndex = this.salaryData.indexOf(item); | 924 | this.editedIndex = this.salaryData.indexOf(item); |
| 925 | this.editedItem = Object.assign({}, item); | 925 | this.editedItem = Object.assign({}, item); |
| 926 | this.editedItem.date = | 926 | this.editedItem.date = |
| 927 | this.editedItem.date != undefined | 927 | this.editedItem.date != undefined |
| 928 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) | 928 | ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) |
| 929 | : (this.editedItem.date = ""); | 929 | : (this.editedItem.date = ""); |
| 930 | this.editSalaryDialog = true; | 930 | this.editSalaryDialog = true; |
| 931 | }, | 931 | }, |
| 932 | profile(item) { | 932 | profile(item) { |
| 933 | this.editedIndex = this.salaryData.indexOf(item); | 933 | this.editedIndex = this.salaryData.indexOf(item); |
| 934 | this.editedItem = Object.assign({}, item); | 934 | this.editedItem = Object.assign({}, item); |
| 935 | this.profileSalaryDialog = true; | 935 | this.profileSalaryDialog = true; |
| 936 | }, | 936 | }, |
| 937 | deleteItem(item) { | 937 | deleteItem(item) { |
| 938 | let Salary = { | 938 | let Salary = { |
| 939 | salaryId: item._id, | 939 | salaryId: item._id, |
| 940 | }; | 940 | }; |
| 941 | http() | 941 | http() |
| 942 | .delete( | 942 | .delete( |
| 943 | "/deleteSalary", | 943 | "/deleteSalary", |
| 944 | confirm("Are you sure you want to Delete this?") && { | 944 | confirm("Are you sure you want to Delete this?") && { |
| 945 | params: Salary, | 945 | params: Salary, |
| 946 | }, | 946 | }, |
| 947 | { | 947 | { |
| 948 | headers: { Authorization: "Bearer " + this.token }, | 948 | headers: { Authorization: "Bearer " + this.token }, |
| 949 | } | 949 | } |
| 950 | ) | 950 | ) |
| 951 | .then((response) => { | 951 | .then((response) => { |
| 952 | this.snackbar = true; | 952 | this.snackbar = true; |
| 953 | this.text = "Successfully Delete Salary "; | 953 | this.text = "Successfully Delete Salary "; |
| 954 | this.text = response.data.message; | 954 | this.text = response.data.message; |
| 955 | this.color = "green"; | 955 | this.color = "green"; |
| 956 | this.getSalaryList(); | 956 | this.getSalaryList(); |
| 957 | }) | 957 | }) |
| 958 | .catch((error) => { | 958 | .catch((error) => { |
| 959 | this.snackbar = true; | 959 | this.snackbar = true; |
| 960 | this.text = error.response.data.message; | 960 | this.text = error.response.data.message; |
| 961 | this.color = "red"; | 961 | this.color = "red"; |
| 962 | }); | 962 | }); |
| 963 | }, | 963 | }, |
| 964 | close() { | 964 | close() { |
| 965 | this.editSalaryDialog = false; | 965 | this.editSalaryDialog = false; |
| 966 | }, | 966 | }, |
| 967 | closeAddSalaryModel() { | 967 | closeAddSalaryModel() { |
| 968 | this.addSalaryDialog = false; | 968 | this.addSalaryDialog = false; |
| 969 | // this.salaryData = []; | 969 | // this.salaryData = []; |
| 970 | this.salaryType = []; | 970 | this.salaryType = []; |
| 971 | this.grossSalary = 0; | 971 | this.grossSalary = 0; |
| 972 | this.totalDeduction = 0; | 972 | this.totalDeduction = 0; |
| 973 | (this.salaryTypeData = [ | 973 | (this.salaryTypeData = [ |
| 974 | { | 974 | { |
| 975 | allowancesValue: "", | 975 | allowancesValue: "", |
| 976 | allowancesName: "", | 976 | allowancesName: "", |
| 977 | totalAllowances: 0, | 977 | totalAllowances: 0, |
| 978 | }, | 978 | }, |
| 979 | ]), | 979 | ]), |
| 980 | (this.salaryTypeDeductionData = [ | 980 | (this.salaryTypeDeductionData = [ |
| 981 | { | 981 | { |
| 982 | deductionValue: "", | 982 | deductionValue: "", |
| 983 | deductionName: "", | 983 | deductionName: "", |
| 984 | totalDeductions: 0, | 984 | totalDeductions: 0, |
| 985 | }, | 985 | }, |
| 986 | ]); | 986 | ]); |
| 987 | }, | 987 | }, |
| 988 | submit() { | 988 | submit() { |
| 989 | var salary = { | 989 | var salary = { |
| 990 | salaryGrades: this.salaryType.salaryGrades, | 990 | salaryGrades: this.salaryType.salaryGrades, |
| 991 | basicSalary: this.salaryType.basicSalary, | 991 | basicSalary: this.salaryType.basicSalary, |
| 992 | overtimeRate: this.salaryType.overtimeRate, | 992 | overtimeRate: this.salaryType.overtimeRate, |
| 993 | allowances: this.salaryTypeData, | 993 | allowances: this.salaryTypeData, |
| 994 | deduction: this.salaryTypeDeductionData, | 994 | deduction: this.salaryTypeDeductionData, |
| 995 | grossSalary: this.grossSalary, | 995 | grossSalary: this.grossSalary, |
| 996 | totalDeduction: this.totalDeduction, | 996 | totalDeduction: this.totalDeduction, |
| 997 | netSalary: this.salaryType.netSalary, | 997 | netSalary: this.salaryType.netSalary, |
| 998 | }; | 998 | }; |
| 999 | if (this.$refs.form.validate()) { | 999 | if (this.$refs.form.validate()) { |
| 1000 | this.loading = true; | 1000 | this.loading = true; |
| 1001 | // console.log("api data", this.salaryType); | 1001 | // console.log("api data", this.salaryType); |
| 1002 | http() | 1002 | http() |
| 1003 | .post("/createSalary", salary) | 1003 | .post("/createSalary", salary) |
| 1004 | .then((response) => { | 1004 | .then((response) => { |
| 1005 | // console.log("response", response); | 1005 | // console.log("response", response); |
| 1006 | this.snackbar = true; | 1006 | this.snackbar = true; |
| 1007 | this.text = "Successfully Created Salary "; | 1007 | this.text = "Successfully Created Salary "; |
| 1008 | this.text = response.data.message; | 1008 | this.text = response.data.message; |
| 1009 | this.color = "green"; | 1009 | this.color = "green"; |
| 1010 | this.addSalaryDialog = false; | 1010 | this.addSalaryDialog = false; |
| 1011 | this.getSalaryList(); | 1011 | this.getSalaryList(); |
| 1012 | this.color = "success"; | 1012 | this.color = "success"; |
| 1013 | this.salaryTypeData = []; | 1013 | this.salaryTypeData = []; |
| 1014 | this.salaryTypeDeductionData = []; | 1014 | this.salaryTypeDeductionData = []; |
| 1015 | this.salaryType = ""; | 1015 | this.salaryType = ""; |
| 1016 | this.grossSalary = ""; | 1016 | this.grossSalary = ""; |
| 1017 | this.totalDeduction = ""; | 1017 | this.totalDeduction = ""; |
| 1018 | this.loading = false; | 1018 | this.loading = false; |
| 1019 | this.clear(); | 1019 | this.clear(); |
| 1020 | }) | 1020 | }) |
| 1021 | .catch((error) => { | 1021 | .catch((error) => { |
| 1022 | console.log("error", error); | 1022 | console.log("error", error); |
| 1023 | this.snackbar = true; | 1023 | this.snackbar = true; |
| 1024 | this.text = error.response.data.message; | 1024 | this.text = error.response.data.message; |
| 1025 | this.color = "red"; | 1025 | this.color = "red"; |
| 1026 | this.loading = false; | 1026 | this.loading = false; |
| 1027 | }); | 1027 | }); |
| 1028 | } | 1028 | } |
| 1029 | }, | 1029 | }, |
| 1030 | selectAllowances() { | 1030 | selectAllowances() { |
| 1031 | this.salaryTypeData.push({ | 1031 | this.salaryTypeData.push({ |
| 1032 | allowancesValue: (this.salaryType.allowancesValue = ""), | 1032 | allowancesValue: (this.salaryType.allowancesValue = ""), |
| 1033 | }); | 1033 | }); |
| 1034 | // console.log("this.salaryTypeData", this.salaryTypeData); | 1034 | // console.log("this.salaryTypeData", this.salaryTypeData); |
| 1035 | var totalAllowances = ""; | 1035 | var totalAllowances = ""; |
| 1036 | this.salaryTypeData.forEach((allowancesValue_) => { | 1036 | this.salaryTypeData.forEach((allowancesValue_) => { |
| 1037 | if (allowancesValue_.allowancesValue != "") { | 1037 | if (allowancesValue_.allowancesValue != "") { |
| 1038 | // console.log("allowances", allowancesValue_.allowancesValue); | 1038 | // console.log("allowances", allowancesValue_.allowancesValue); |
| 1039 | totalAllowances = | 1039 | totalAllowances = |
| 1040 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1040 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1041 | } | 1041 | } |
| 1042 | this.grossSalary = | 1042 | this.grossSalary = |
| 1043 | totalAllowances + Number(this.salaryType.basicSalary); | 1043 | totalAllowances + Number(this.salaryType.basicSalary); |
| 1044 | }); | 1044 | }); |
| 1045 | }, | 1045 | }, |
| 1046 | allowancesAdd() { | 1046 | allowancesAdd() { |
| 1047 | this.editedItem.allowances.push({ | 1047 | this.editedItem.allowances.push({ |
| 1048 | allowancesValue: (this.salaryType.allowancesValue = ""), | 1048 | allowancesValue: (this.salaryType.allowancesValue = ""), |
| 1049 | }); | 1049 | }); |
| 1050 | var totalAllowances = ""; | 1050 | var totalAllowances = ""; |
| 1051 | this.editedItem.allowances.forEach((allowancesValue_) => { | 1051 | this.editedItem.allowances.forEach((allowancesValue_) => { |
| 1052 | if (allowancesValue_.allowancesValue != "") { | 1052 | if (allowancesValue_.allowancesValue != "") { |
| 1053 | // console.log("allowances", allowancesValue_.allowancesValue); | 1053 | // console.log("allowances", allowancesValue_.allowancesValue); |
| 1054 | totalAllowances = | 1054 | totalAllowances = |
| 1055 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1055 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1056 | console.log("totalAllowances", totalAllowances); | 1056 | console.log("totalAllowances", totalAllowances); |
| 1057 | } | 1057 | } |
| 1058 | this.editedItem.grossSalary = | 1058 | this.editedItem.grossSalary = |
| 1059 | totalAllowances + Number(this.editedItem.basicSalary); | 1059 | totalAllowances + Number(this.editedItem.basicSalary); |
| 1060 | console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); | 1060 | console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); |
| 1061 | }); | 1061 | }); |
| 1062 | }, | 1062 | }, |
| 1063 | selectDeduction() { | 1063 | selectDeduction() { |
| 1064 | this.salaryTypeDeductionData.push({ | 1064 | this.salaryTypeDeductionData.push({ |
| 1065 | deductionValue: (this.salaryType.deductionValue = ""), | 1065 | deductionValue: (this.salaryType.deductionValue = ""), |
| 1066 | }); | 1066 | }); |
| 1067 | var totalDeductions = ""; | 1067 | var totalDeductions = ""; |
| 1068 | this.salaryTypeDeductionData.forEach((deductionValue_) => { | 1068 | this.salaryTypeDeductionData.forEach((deductionValue_) => { |
| 1069 | if (deductionValue_.deductionValue != "") { | 1069 | if (deductionValue_.deductionValue != "") { |
| 1070 | // console.log("deduction", deductionValue_.deductionValue); | 1070 | // console.log("deduction", deductionValue_.deductionValue); |
| 1071 | totalDeductions = | 1071 | totalDeductions = |
| 1072 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1072 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1073 | } | 1073 | } |
| 1074 | }); | 1074 | }); |
| 1075 | }, | 1075 | }, |
| 1076 | deductionAdd() { | 1076 | deductionAdd() { |
| 1077 | this.editedItem.deduction.push({ | 1077 | this.editedItem.deduction.push({ |
| 1078 | deductionValue: (this.salaryType.deductionValue = ""), | 1078 | deductionValue: (this.salaryType.deductionValue = ""), |
| 1079 | }); | 1079 | }); |
| 1080 | var totalDeductions = ""; | 1080 | var totalDeductions = ""; |
| 1081 | this.editedItem.deduction.forEach((deductionValue_) => { | 1081 | this.editedItem.deduction.forEach((deductionValue_) => { |
| 1082 | if (deductionValue_.deductionValue != "") { | 1082 | if (deductionValue_.deductionValue != "") { |
| 1083 | // console.log("deduction", deductionValue_.deductionValue); | 1083 | // console.log("deduction", deductionValue_.deductionValue); |
| 1084 | totalDeductions = | 1084 | totalDeductions = |
| 1085 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1085 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1086 | console.log("this.totalDeductions", totalDeductions); | 1086 | console.log("this.totalDeductions", totalDeductions); |
| 1087 | } | 1087 | } |
| 1088 | // this.editedItem.totalDeduction = totalDeductions; | 1088 | // this.editedItem.totalDeduction = totalDeductions; |
| 1089 | // console.log("this.totalDeduction", this.editedItem.totalDeduction); | 1089 | // console.log("this.totalDeduction", this.editedItem.totalDeduction); |
| 1090 | }); | 1090 | }); |
| 1091 | }, | 1091 | }, |
| 1092 | deleteSelectAllowances: function (index) { | 1092 | deleteSelectAllowances: function (index) { |
| 1093 | this.salaryTypeData.splice(index, 1); | 1093 | this.salaryTypeData.splice(index, 1); |
| 1094 | }, | 1094 | }, |
| 1095 | deleteallowancesAdd: function (index) { | 1095 | deleteallowancesAdd: function (index) { |
| 1096 | this.editedItem.allowances.splice(index, 1); | 1096 | this.editedItem.allowances.splice(index, 1); |
| 1097 | }, | 1097 | }, |
| 1098 | deleteSelectDeduction: function (index) { | 1098 | deleteSelectDeduction: function (index) { |
| 1099 | this.salaryTypeDeductionData.splice(index, 1); | 1099 | this.salaryTypeDeductionData.splice(index, 1); |
| 1100 | }, | 1100 | }, |
| 1101 | deletedeductionAdd: function (index) { | 1101 | deletedeductionAdd: function (index) { |
| 1102 | this.editedItem.deduction.splice(index, 1); | 1102 | this.editedItem.deduction.splice(index, 1); |
| 1103 | }, | 1103 | }, |
| 1104 | clear() { | 1104 | clear() { |
| 1105 | this.$refs.form.reset(); | 1105 | this.$refs.form.reset(); |
| 1106 | this.disable = false; | 1106 | this.disable = false; |
| 1107 | }, | 1107 | }, |
| 1108 | save() { | 1108 | save() { |
| 1109 | var updateSalary = { | 1109 | var updateSalary = { |
| 1110 | salaryId: this.editedItem._id, | 1110 | salaryId: this.editedItem._id, |
| 1111 | salaryGrades: this.editedItem.salaryGrades, | 1111 | salaryGrades: this.editedItem.salaryGrades, |
| 1112 | basicSalary: this.editedItem.basicSalary, | 1112 | basicSalary: this.editedItem.basicSalary, |
| 1113 | overtimeRate: this.editedItem.overtimeRate, | 1113 | overtimeRate: this.editedItem.overtimeRate, |
| 1114 | allowances: this.salaryTypeData, | 1114 | allowances: this.salaryTypeData, |
| 1115 | deduction: this.salaryTypeDeductionData, | 1115 | deduction: this.salaryTypeDeductionData, |
| 1116 | grossSalary: this.editedItem.grossSalary, | 1116 | grossSalary: this.editedItem.grossSalary, |
| 1117 | totalDeduction: this.editedItem.totalDeduction, | 1117 | totalDeduction: this.editedItem.totalDeduction, |
| 1118 | netSalary: this.editedItem.netSalary, | 1118 | netSalary: this.editedItem.netSalary, |
| 1119 | }; | 1119 | }; |
| 1120 | http() | 1120 | http() |
| 1121 | .put("/updateSalary", updateSalary) | 1121 | .put("/updateSalary", updateSalary) |
| 1122 | .then((response) => { | 1122 | .then((response) => { |
| 1123 | this.snackbar = true; | 1123 | this.snackbar = true; |
| 1124 | this.text = response.data.message; | 1124 | this.text = response.data.message; |
| 1125 | this.color = "green"; | 1125 | this.color = "green"; |
| 1126 | this.getSalaryList(); | 1126 | this.getSalaryList(); |
| 1127 | this.close(); | 1127 | this.close(); |
| 1128 | }) | 1128 | }) |
| 1129 | .catch((error) => { | 1129 | .catch((error) => { |
| 1130 | this.snackbar = true; | 1130 | this.snackbar = true; |
| 1131 | this.text = error.response.data.message; | 1131 | this.text = error.response.data.message; |
| 1132 | this.color = "red"; | 1132 | this.color = "red"; |
| 1133 | }); | 1133 | }); |
| 1134 | }, | 1134 | }, |
| 1135 | displaySearch() { | 1135 | displaySearch() { |
| 1136 | (this.show = false), (this.showSearch = true); | 1136 | (this.show = false), (this.showSearch = true); |
| 1137 | }, | 1137 | }, |
| 1138 | closeSearch() { | 1138 | closeSearch() { |
| 1139 | this.showSearch = false; | 1139 | this.showSearch = false; |
| 1140 | this.show = true; | 1140 | this.show = true; |
| 1141 | this.search = ""; | 1141 | this.search = ""; |
| 1142 | }, | 1142 | }, |
| 1143 | addSalary: function () { | 1143 | addSalary: function () { |
| 1144 | var showSalary = this.salaryType.basicSalary; | 1144 | var showSalary = this.salaryType.basicSalary; |
| 1145 | this.grossSalary = showSalary; | 1145 | this.grossSalary = showSalary; |
| 1146 | // console.log("salary", this.grossSalary); | 1146 | // console.log("salary", this.grossSalary); |
| 1147 | }, | 1147 | }, |
| 1148 | addAllowances: function () { | 1148 | addAllowances: function () { |
| 1149 | var totalAllowances = ""; | 1149 | var totalAllowances = ""; |
| 1150 | this.salaryTypeData.forEach((allowancesValue_) => { | 1150 | this.salaryTypeData.forEach((allowancesValue_) => { |
| 1151 | if (allowancesValue_.allowancesValue != "") { | 1151 | if (allowancesValue_.allowancesValue != "") { |
| 1152 | totalAllowances = | 1152 | totalAllowances = |
| 1153 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1153 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1154 | } | 1154 | } |
| 1155 | this.grossSalary = | 1155 | this.grossSalary = |
| 1156 | totalAllowances + | 1156 | totalAllowances + |
| 1157 | Number(this.salaryType.basicSalary) + | 1157 | Number(this.salaryType.basicSalary) + |
| 1158 | Number(this.salaryType.allowancesValue); | 1158 | Number(this.salaryType.allowancesValue); |
| 1159 | }); | 1159 | }); |
| 1160 | }, | 1160 | }, |
| 1161 | addAllowancesValue: function () { | 1161 | addAllowancesValue: function () { |
| 1162 | var totalAllowances = ""; | 1162 | var totalAllowances = ""; |
| 1163 | this.editedItem.allowances.forEach((allowancesValue_) => { | 1163 | this.editedItem.allowances.forEach((allowancesValue_) => { |
| 1164 | if (allowancesValue_.allowancesValue != "") { | 1164 | if (allowancesValue_.allowancesValue != "") { |
| 1165 | totalAllowances = | 1165 | totalAllowances = |
| 1166 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); | 1166 | Number(totalAllowances) + Number(allowancesValue_.allowancesValue); |
| 1167 | } | 1167 | } |
| 1168 | this.grossSalary = | 1168 | this.grossSalary = |
| 1169 | totalAllowances + | 1169 | totalAllowances + |
| 1170 | Number(this.editedItem.basicSalary) + | 1170 | Number(this.editedItem.basicSalary) + |
| 1171 | Number(this.editedItem.allowancesValue); | 1171 | Number(this.editedItem.allowancesValue); |
| 1172 | }); | 1172 | }); |
| 1173 | }, | 1173 | }, |
| 1174 | addDeduction: function () { | 1174 | addDeduction: function () { |
| 1175 | // console.log( | 1175 | // console.log( |
| 1176 | // "this.salaryType.deductionValue", | 1176 | // "this.salaryType.deductionValue", |
| 1177 | // this.salaryType.deductionValue | 1177 | // this.salaryType.deductionValue |
| 1178 | // ); | 1178 | // ); |
| 1179 | var totalDeductions = ""; | 1179 | var totalDeductions = ""; |
| 1180 | this.salaryTypeDeductionData.forEach((deductionValue_) => { | 1180 | this.salaryTypeDeductionData.forEach((deductionValue_) => { |
| 1181 | if (deductionValue_.deductionValue != "") { | 1181 | if (deductionValue_.deductionValue != "") { |
| 1182 | totalDeductions = | 1182 | totalDeductions = |
| 1183 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1183 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1184 | } | 1184 | } |
| 1185 | }); | 1185 | }); |
| 1186 | // console.log("deduction", totalDeductions); | 1186 | // console.log("deduction", totalDeductions); |
| 1187 | this.totalDeduction = totalDeductions; | 1187 | this.totalDeduction = totalDeductions; |
| 1188 | this.salaryType.netSalary = this.grossSalary - this.totalDeduction; | 1188 | this.salaryType.netSalary = this.grossSalary - this.totalDeduction; |
| 1189 | }, | 1189 | }, |
| 1190 | addDeductionValue: function () { | 1190 | addDeductionValue: function () { |
| 1191 | var totalDeductions = ""; | 1191 | var totalDeductions = ""; |
| 1192 | this.editedItem.deduction.forEach((deductionValue_) => { | 1192 | this.editedItem.deduction.forEach((deductionValue_) => { |
| 1193 | if (deductionValue_.deductionValue != "") { | 1193 | if (deductionValue_.deductionValue != "") { |
| 1194 | totalDeductions = | 1194 | totalDeductions = |
| 1195 | Number(totalDeductions) + Number(deductionValue_.deductionValue); | 1195 | Number(totalDeductions) + Number(deductionValue_.deductionValue); |
| 1196 | } | 1196 | } |
| 1197 | // this.totalDeduction = totalDeductions; | 1197 | // this.totalDeduction = totalDeductions; |
| 1198 | // console.log("this.totalDeductions", this.totalDeduction); | 1198 | // console.log("this.totalDeductions", this.totalDeduction); |
| 1199 | }); | 1199 | }); |
| 1200 | this.editedItem.totalDeduction = totalDeductions; | 1200 | this.editedItem.totalDeduction = totalDeductions; |
| 1201 | this.editedItem.netSalary = | 1201 | this.editedItem.netSalary = |
| 1202 | this.editedItem.grossSalary - this.editedItem.totalDeduction; | 1202 | this.editedItem.grossSalary - this.editedItem.totalDeduction; |
| 1203 | }, | 1203 | }, |
| 1204 | }, | 1204 | }, |
| 1205 | 1205 | ||
| 1206 | mounted() { | 1206 | mounted() { |
| 1207 | this.token = this.$store.state.token; | 1207 | this.token = this.$store.state.token; |
| 1208 | this.getSalaryList(); | 1208 | this.getSalaryList(); |
| 1209 | }, | 1209 | }, |
| 1210 | }; | 1210 | }; |
| 1211 | </script> | 1211 | </script> |
| 1212 | 1212 | ||
| 1213 | <style scoped> | 1213 | <style scoped> |
| 1214 | </style> | 1214 | </style> |
src/pages/Reminder/reminder.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <v-toolbar class="fixcolors" fixed app> | 3 | <v-toolbar class="fixcolors" fixed app> |
| 4 | <v-toolbar-title class="ml-0 pl-3"> | 4 | <v-toolbar-title class="ml-0 pl-3"> |
| 5 | <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> | 5 | <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> |
| 6 | </v-toolbar-title> | 6 | </v-toolbar-title> |
| 7 | <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> | 7 | <!-- ****** SEARCH ALL EXISTING REMINDER ****** --> |
| 8 | <v-flex xs7 sm3 class="userSearch"> | 8 | <v-flex xs7 sm3 class="userSearch"> |
| 9 | <v-text-field | 9 | <v-text-field |
| 10 | flat | 10 | flat |
| 11 | append-icon="search" | 11 | append-icon="search" |
| 12 | label="Find your Reminder Data" | 12 | label="Find your Reminder Data" |
| 13 | v-model="search" | 13 | v-model="search" |
| 14 | color="white" | 14 | color="white" |
| 15 | dark | 15 | dark |
| 16 | ></v-text-field> | 16 | ></v-text-field> |
| 17 | </v-flex> | 17 | </v-flex> |
| 18 | <v-spacer></v-spacer> | 18 | <v-spacer></v-spacer> |
| 19 | <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> | 19 | <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> |
| 20 | <v-btn icon large flat slot="activator"> | 20 | <v-btn icon large flat slot="activator"> |
| 21 | <v-avatar size="40px"> | 21 | <v-avatar size="40px"> |
| 22 | <img src="/static/icon/user.png"> | 22 | <img src="/static/icon/user.png"> |
| 23 | </v-avatar> | 23 | </v-avatar> |
| 24 | </v-btn> | 24 | </v-btn> |
| 25 | <v-list class="pa-0"> | 25 | <v-list class="pa-0"> |
| 26 | <v-list-tile | 26 | <v-list-tile |
| 27 | v-for="(item,index) in items" | 27 | v-for="(item,index) in items" |
| 28 | :to="!item.href ? { name: item.name } : null" | 28 | :to="!item.href ? { name: item.name } : null" |
| 29 | :href="item.href" | 29 | :href="item.href" |
| 30 | @click="item.click" | 30 | @click="item.click" |
| 31 | ripple="ripple" | 31 | ripple="ripple" |
| 32 | :disabled="item.disabled" | 32 | :disabled="item.disabled" |
| 33 | :target="item.target" | 33 | :target="item.target" |
| 34 | rel="noopener" | 34 | rel="noopener" |
| 35 | :key="index" | 35 | :key="index" |
| 36 | > | 36 | > |
| 37 | <v-list-tile-action v-if="item.icon"> | 37 | <v-list-tile-action v-if="item.icon"> |
| 38 | <v-icon>{{ item.icon }}</v-icon> | 38 | <v-icon>{{ item.icon }}</v-icon> |
| 39 | </v-list-tile-action> | 39 | </v-list-tile-action> |
| 40 | <v-list-tile-content> | 40 | <v-list-tile-content> |
| 41 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> | 41 | <v-list-tile-title>{{ item.title }}</v-list-tile-title> |
| 42 | </v-list-tile-content> | 42 | </v-list-tile-content> |
| 43 | </v-list-tile> | 43 | </v-list-tile> |
| 44 | </v-list> | 44 | </v-list> |
| 45 | </v-menu> | 45 | </v-menu> |
| 46 | </v-toolbar> | 46 | </v-toolbar> |
| 47 | <v-tabs grow slider-color="gray"> | 47 | <v-tabs grow slider-color="gray"> |
| 48 | <v-tab | 48 | <v-tab |
| 49 | ripple | 49 | ripple |
| 50 | @click="activeTab('existing')" | 50 | @click="activeTab('existing')" |
| 51 | v-bind:class="{ active: isActive }" | 51 | v-bind:class="{ active: isActive }" |
| 52 | id="tab" | 52 | id="tab" |
| 53 | class="subheading" | 53 | class="subheading" |
| 54 | >Existing Reminder</v-tab> | 54 | >Existing Reminder</v-tab> |
| 55 | <v-tab | 55 | <v-tab |
| 56 | ripple | 56 | ripple |
| 57 | @click="activeTab('new')" | 57 | @click="activeTab('new')" |
| 58 | v-bind:class="{ active: newActive }" | 58 | v-bind:class="{ active: newActive }" |
| 59 | id="tab1" | 59 | id="tab1" |
| 60 | User | 60 | User |
| 61 | class="subheading" | 61 | class="subheading" |
| 62 | >Add New Reminder</v-tab> | 62 | >Add New Reminder</v-tab> |
| 63 | 63 | ||
| 64 | <!-- ****** EDITS REMINDER DETAILS ****** --> | 64 | <!-- ****** EDITS REMINDER DETAILS ****** --> |
| 65 | 65 | ||
| 66 | <v-tab-item> | 66 | <v-tab-item> |
| 67 | <v-snackbar | 67 | <v-snackbar |
| 68 | :timeout="timeout" | 68 | :timeout="timeout" |
| 69 | :top="y === 'top'" | 69 | :top="y === 'top'" |
| 70 | :right="x === 'right'" | 70 | :right="x === 'right'" |
| 71 | :vertical="mode === 'vertical'" | 71 | :vertical="mode === 'vertical'" |
| 72 | v-model="snackbar" | 72 | v-model="snackbar" |
| 73 | color="success" | 73 | color="success" |
| 74 | >{{ text }}</v-snackbar> | 74 | >{{ text }}</v-snackbar> |
| 75 | <v-dialog v-model="dialog" max-width="600px"> | 75 | <v-dialog v-model="dialog" max-width="600px" persistent> |
| 76 | <v-flex xs12 sm12 class=""> | 76 | <v-flex xs12 sm12 class=""> |
| 77 | <v-toolbar color="white"> | 77 | <v-toolbar color="white"> |
| 78 | <v-spacer></v-spacer> | 78 | <v-spacer></v-spacer> |
| 79 | <v-toolbar-title>Edit Reminder</v-toolbar-title> | 79 | <v-toolbar-title>Edit Reminder</v-toolbar-title> |
| 80 | <v-spacer></v-spacer> | 80 | <v-spacer></v-spacer> |
| 81 | </v-toolbar> | 81 | </v-toolbar> |
| 82 | <v-card flat> | 82 | <v-card flat> |
| 83 | <v-form ref="form"> | 83 | <v-form ref="form"> |
| 84 | <v-container fluid> | 84 | <v-container fluid> |
| 85 | <v-layout> | 85 | <v-layout> |
| 86 | <v-flex | 86 | <v-flex |
| 87 | xs12 | 87 | xs12 |
| 88 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" | 88 | class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" |
| 89 | > | 89 | > |
| 90 | <v-avatar size="100px"> | 90 | <v-avatar size="100px"> |
| 91 | <img src="/static/icon/user.png" v-if="!imageUrl"> | 91 | <img src="/static/icon/user.png" v-if="!imageUrl"> |
| 92 | </v-avatar> | 92 | </v-avatar> |
| 93 | <input | 93 | <input |
| 94 | type="file" | 94 | type="file" |
| 95 | style="display: none" | 95 | style="display: none" |
| 96 | ref="image" | 96 | ref="image" |
| 97 | accept="image/*" | 97 | accept="image/*" |
| 98 | @change="onFilePicked" | 98 | @change="onFilePicked" |
| 99 | > | 99 | > |
| 100 | <img | 100 | <img |
| 101 | :src="imageData.imageUrl" | 101 | :src="imageData.imageUrl" |
| 102 | height="150" | 102 | height="150" |
| 103 | v-if="imageUrl" | 103 | v-if="imageUrl" |
| 104 | style="border-radius:50%; width:200px" | 104 | style="border-radius:50%; width:200px" |
| 105 | > | 105 | > |
| 106 | </v-flex> | 106 | </v-flex> |
| 107 | </v-layout> | 107 | </v-layout> |
| 108 | <v-flex xs12 sm12> | 108 | <v-flex xs12 sm12> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs4 class="pt-4 subheading"> | 110 | <v-flex xs4 class="pt-4 subheading"> |
| 111 | <label class="right">Title:</label> | 111 | <label class="right">Title:</label> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-flex xs5 class="ml-3"> | 113 | <v-flex xs5 class="ml-3"> |
| 114 | <v-text-field | 114 | <v-text-field |
| 115 | v-model="editedItem.title" | 115 | v-model="editedItem.title" |
| 116 | placeholder="fill your Title" | 116 | placeholder="fill your Title" |
| 117 | name="name" | 117 | name="name" |
| 118 | type="text" | 118 | type="text" |
| 119 | ></v-text-field> | 119 | ></v-text-field> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | <v-flex xs12 sm12> | 123 | <v-flex xs12 sm12> |
| 124 | <v-layout> | 124 | <v-layout> |
| 125 | <v-flex xs4 class="pt-4 subheading"> | 125 | <v-flex xs4 class="pt-4 subheading"> |
| 126 | <label class="right">Description:</label> | 126 | <label class="right">Description:</label> |
| 127 | </v-flex> | 127 | </v-flex> |
| 128 | <v-flex xs5 class="ml-3"> | 128 | <v-flex xs5 class="ml-3"> |
| 129 | <v-text-field | 129 | <v-text-field |
| 130 | placeholder="fill your Description" | 130 | placeholder="fill your Description" |
| 131 | v-model="editedItem.description" | 131 | v-model="editedItem.description" |
| 132 | type="text" | 132 | type="text" |
| 133 | ></v-text-field> | 133 | ></v-text-field> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | </v-layout> | 135 | </v-layout> |
| 136 | </v-flex> | 136 | </v-flex> |
| 137 | <v-layout> | 137 | <v-layout> |
| 138 | <v-flex xs12 sm10 offset-sm1> | 138 | <v-flex xs12 sm10 offset-sm1> |
| 139 | <v-card-actions> | 139 | <v-card-actions> |
| 140 | <v-btn round dark @click.native="close">Cancel</v-btn> | 140 | <v-btn round dark @click.native="close">Cancel</v-btn> |
| 141 | <v-spacer></v-spacer> | 141 | <v-spacer></v-spacer> |
| 142 | <v-btn round dark @click="save">Save</v-btn> | 142 | <v-btn round dark @click="save">Save</v-btn> |
| 143 | </v-card-actions> | 143 | </v-card-actions> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | </v-layout> | 145 | </v-layout> |
| 146 | </v-container> | 146 | </v-container> |
| 147 | </v-form> | 147 | </v-form> |
| 148 | </v-card> | 148 | </v-card> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | </v-dialog> | 150 | </v-dialog> |
| 151 | 151 | ||
| 152 | <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> | 152 | <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> |
| 153 | <v-dialog v-model="dialog1" max-width="600px"> | 153 | <v-dialog v-model="dialog1" max-width="600px" persistent> |
| 154 | <v-toolbar color="white"> | 154 | <v-toolbar color="white"> |
| 155 | <v-spacer></v-spacer> | 155 | <v-spacer></v-spacer> |
| 156 | <v-toolbar-title>Profile</v-toolbar-title> | 156 | <v-toolbar-title>Profile</v-toolbar-title> |
| 157 | <v-spacer></v-spacer> | 157 | <v-spacer></v-spacer> |
| 158 | <v-icon @click="close1">close</v-icon> | 158 | <v-icon @click="close1">close</v-icon> |
| 159 | </v-toolbar> | 159 | </v-toolbar> |
| 160 | <v-card> | 160 | <v-card> |
| 161 | <v-flex align-center justify-center layout text-xs-center> | 161 | <v-flex align-center justify-center layout text-xs-center> |
| 162 | <v-avatar size="50px" style="position:absolute; top:20px;"> | 162 | <v-avatar size="50px" style="position:absolute; top:20px;"> |
| 163 | <img src="/static/icon/user.png"> | 163 | <img src="/static/icon/user.png"> |
| 164 | </v-avatar> | 164 | </v-avatar> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-card-text> | 166 | <v-card-text> |
| 167 | <v-container grid-list-md> | 167 | <v-container grid-list-md> |
| 168 | <v-layout wrap> | 168 | <v-layout wrap> |
| 169 | <v-flex> | 169 | <v-flex> |
| 170 | <br> | 170 | <br> |
| 171 | <br> | 171 | <br> |
| 172 | <v-layout> | 172 | <v-layout> |
| 173 | <v-flex xs5 sm6> | 173 | <v-flex xs5 sm6> |
| 174 | <h5 class="right my-1">Title:</h5> | 174 | <h5 class="right my-1">Title:</h5> |
| 175 | </v-flex> | 175 | </v-flex> |
| 176 | <v-flex sm6 xs8> | 176 | <v-flex sm6 xs8> |
| 177 | <h5 class="my-1">{{ editedItem.title }}</h5> | 177 | <h5 class="my-1">{{ editedItem.title }}</h5> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | </v-layout> | 179 | </v-layout> |
| 180 | <v-layout> | 180 | <v-layout> |
| 181 | <v-flex xs5 sm6> | 181 | <v-flex xs5 sm6> |
| 182 | <h5 class="right my-1">Description:</h5> | 182 | <h5 class="right my-1">Description:</h5> |
| 183 | </v-flex> | 183 | </v-flex> |
| 184 | <v-flex sm6 xs8> | 184 | <v-flex sm6 xs8> |
| 185 | <h5 class="my-1">{{ editedItem.description }}</h5> | 185 | <h5 class="my-1">{{ editedItem.description }}</h5> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | </v-container> | 190 | </v-container> |
| 191 | </v-card-text> | 191 | </v-card-text> |
| 192 | </v-card> | 192 | </v-card> |
| 193 | </v-dialog> | 193 | </v-dialog> |
| 194 | 194 | ||
| 195 | <v-snackbar | 195 | <v-snackbar |
| 196 | :timeout="timeout" | 196 | :timeout="timeout" |
| 197 | :top="y === 'top'" | 197 | :top="y === 'top'" |
| 198 | :right="x === 'right'" | 198 | :right="x === 'right'" |
| 199 | :vertical="mode === 'vertical'" | 199 | :vertical="mode === 'vertical'" |
| 200 | v-model="snackbar" | 200 | v-model="snackbar" |
| 201 | color="success" | 201 | color="success" |
| 202 | >{{ text }}</v-snackbar> | 202 | >{{ text }}</v-snackbar> |
| 203 | 203 | ||
| 204 | <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> | 204 | <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> |
| 205 | <v-data-table | 205 | <v-data-table |
| 206 | :headers="headers" | 206 | :headers="headers" |
| 207 | :items="desserts" | 207 | :items="desserts" |
| 208 | :pagination.sync="pagination" | 208 | :pagination.sync="pagination" |
| 209 | :search="search" | 209 | :search="search" |
| 210 | > | 210 | > |
| 211 | <template slot="items" slot-scope="props"> | 211 | <template slot="items" slot-scope="props"> |
| 212 | <td id="td" class="text-xs-center">{{ props.index + 1}}</td> | 212 | <td id="td" class="text-xs-center">{{ props.index + 1}}</td> |
| 213 | <td id="td" class="text-xs-center">{{ props.item.title}}</td> | 213 | <td id="td" class="text-xs-center">{{ props.item.title}}</td> |
| 214 | <td id="td" class="text-xs-center">{{ props.item.description}}</td> | 214 | <td id="td" class="text-xs-center">{{ props.item.description}}</td> |
| 215 | 215 | ||
| 216 | <td class="text-xs-center"> | 216 | <td class="text-xs-center"> |
| 217 | <span> | 217 | <span> |
| 218 | <img | 218 | <img |
| 219 | style="cursor:pointer; width:25px; height:18px; " | 219 | style="cursor:pointer; width:25px; height:18px; " |
| 220 | class="mr-5" | 220 | class="mr-5" |
| 221 | @click="profile(props.item)" | 221 | @click="profile(props.item)" |
| 222 | src="/static/icon/eye1.png" | 222 | src="/static/icon/eye1.png" |
| 223 | > | 223 | > |
| 224 | <img | 224 | <img |
| 225 | style="cursor:pointer; width:20px; height:18px; " | 225 | style="cursor:pointer; width:20px; height:18px; " |
| 226 | class="mr-5" | 226 | class="mr-5" |
| 227 | @click="editItem(props.item)" | 227 | @click="editItem(props.item)" |
| 228 | src="/static/icon/edit1.png" | 228 | src="/static/icon/edit1.png" |
| 229 | > | 229 | > |
| 230 | <img | 230 | <img |
| 231 | style="cursor:pointer; width:20px;height:20px; " | 231 | style="cursor:pointer; width:20px;height:20px; " |
| 232 | class="mr-5" | 232 | class="mr-5" |
| 233 | @click="deleteItem(props.item)" | 233 | @click="deleteItem(props.item)" |
| 234 | src="/static/icon/delete1.png" | 234 | src="/static/icon/delete1.png" |
| 235 | > | 235 | > |
| 236 | </span> | 236 | </span> |
| 237 | </td> | 237 | </td> |
| 238 | </template> | 238 | </template> |
| 239 | <v-alert | 239 | <v-alert |
| 240 | slot="no-results" | 240 | slot="no-results" |
| 241 | :value="true" | 241 | :value="true" |
| 242 | color="error" | 242 | color="error" |
| 243 | icon="warning" | 243 | icon="warning" |
| 244 | >Your search for "{{ search }}" found no results.</v-alert> | 244 | >Your search for "{{ search }}" found no results.</v-alert> |
| 245 | </v-data-table> | 245 | </v-data-table> |
| 246 | </v-tab-item> | 246 | </v-tab-item> |
| 247 | 247 | ||
| 248 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 248 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 249 | 249 | ||
| 250 | <v-tab-item> | 250 | <v-tab-item> |
| 251 | <v-container> | 251 | <v-container> |
| 252 | <v-snackbar | 252 | <v-snackbar |
| 253 | :timeout="timeout" | 253 | :timeout="timeout" |
| 254 | :top="y === 'top'" | 254 | :top="y === 'top'" |
| 255 | :right="x === 'right'" | 255 | :right="x === 'right'" |
| 256 | :vertical="mode === 'vertical'" | 256 | :vertical="mode === 'vertical'" |
| 257 | v-model="snackbar" | 257 | v-model="snackbar" |
| 258 | color="success" | 258 | color="success" |
| 259 | >{{ text }}</v-snackbar> | 259 | >{{ text }}</v-snackbar> |
| 260 | <v-flex xs12 sm12 class="my-4"> | 260 | <v-flex xs12 sm12 class="my-4"> |
| 261 | <v-card flat> | 261 | <v-card flat> |
| 262 | <v-form ref="form" v-model="valid" lazy-validation> | 262 | <v-form ref="form" v-model="valid" lazy-validation> |
| 263 | <v-container fluid> | 263 | <v-container fluid> |
| 264 | <v-layout> | 264 | <v-layout> |
| 265 | <v-flex | 265 | <v-flex |
| 266 | xs12 | 266 | xs12 |
| 267 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 267 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 268 | > | 268 | > |
| 269 | <v-avatar size="100px"> | 269 | <v-avatar size="100px"> |
| 270 | <img src="/static/icon/user.png" v-if="!imageUrl"> | 270 | <img src="/static/icon/user.png" v-if="!imageUrl"> |
| 271 | </v-avatar> | 271 | </v-avatar> |
| 272 | <input | 272 | <input |
| 273 | type="file" | 273 | type="file" |
| 274 | style="display: none" | 274 | style="display: none" |
| 275 | ref="image" | 275 | ref="image" |
| 276 | accept="image/*" | 276 | accept="image/*" |
| 277 | @change="onFilePicked" | 277 | @change="onFilePicked" |
| 278 | > | 278 | > |
| 279 | <img | 279 | <img |
| 280 | :src="imageData.imageUrl" | 280 | :src="imageData.imageUrl" |
| 281 | height="150" | 281 | height="150" |
| 282 | v-if="imageUrl" | 282 | v-if="imageUrl" |
| 283 | style="border-radius:50%; width:200px" | 283 | style="border-radius:50%; width:200px" |
| 284 | > | 284 | > |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | </v-layout> | 286 | </v-layout> |
| 287 | <v-flex xs12> | 287 | <v-flex xs12> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs4 class="pt-4 subheading"> | 289 | <v-flex xs4 class="pt-4 subheading"> |
| 290 | <label class="right">Title:</label> | 290 | <label class="right">Title:</label> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | <v-flex xs4 class="ml-3"> | 292 | <v-flex xs4 class="ml-3"> |
| 293 | <v-text-field | 293 | <v-text-field |
| 294 | v-model="addRemind.title" | 294 | v-model="addRemind.title" |
| 295 | placeholder="fill your Title" | 295 | placeholder="fill your Title" |
| 296 | type="text" | 296 | type="text" |
| 297 | :rules="titleRules" | 297 | :rules="titleRules" |
| 298 | required | 298 | required |
| 299 | ></v-text-field> | 299 | ></v-text-field> |
| 300 | </v-flex> | 300 | </v-flex> |
| 301 | </v-layout> | 301 | </v-layout> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <v-layout> | 304 | <v-layout> |
| 305 | <v-flex xs4 class="pt-4 subheading"> | 305 | <v-flex xs4 class="pt-4 subheading"> |
| 306 | <label class="right">Description:</label> | 306 | <label class="right">Description:</label> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | <v-flex xs4 class="ml-3"> | 308 | <v-flex xs4 class="ml-3"> |
| 309 | <v-text-field | 309 | <v-text-field |
| 310 | placeholder="fill your Description" | 310 | placeholder="fill your Description" |
| 311 | :rules="descriptionRules" | 311 | :rules="descriptionRules" |
| 312 | v-model="addRemind.description" | 312 | v-model="addRemind.description" |
| 313 | type="text" | 313 | type="text" |
| 314 | required | 314 | required |
| 315 | ></v-text-field> | 315 | ></v-text-field> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-layout> | 319 | <v-layout> |
| 320 | <v-flex xs12 sm6 offset-sm3> | 320 | <v-flex xs12 sm6 offset-sm3> |
| 321 | <v-card-actions> | 321 | <v-card-actions> |
| 322 | <v-btn @click="clear" round dark>clear</v-btn> | 322 | <v-btn @click="clear" round dark>clear</v-btn> |
| 323 | <v-spacer></v-spacer> | 323 | <v-spacer></v-spacer> |
| 324 | <v-btn @click="submit" round dark :loading="loading">Add</v-btn> | 324 | <v-btn @click="submit" round dark :loading="loading">Add</v-btn> |
| 325 | </v-card-actions> | 325 | </v-card-actions> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | </v-container> | 328 | </v-container> |
| 329 | </v-form> | 329 | </v-form> |
| 330 | </v-card> | 330 | </v-card> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-container> | 332 | </v-container> |
| 333 | </v-tab-item> | 333 | </v-tab-item> |
| 334 | </v-tabs> | 334 | </v-tabs> |
| 335 | <div class="loader" v-if="showLoader"> | 335 | <div class="loader" v-if="showLoader"> |
| 336 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 336 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 337 | </div> | 337 | </div> |
| 338 | </v-app> | 338 | </v-app> |
| 339 | </template> | 339 | </template> |
| 340 | 340 | ||
| 341 | <script> | 341 | <script> |
| 342 | import http from "@/Services/http.js"; | 342 | import http from "@/Services/http.js"; |
| 343 | import Util from "@/util"; | 343 | import Util from "@/util"; |
| 344 | 344 | ||
| 345 | export default { | 345 | export default { |
| 346 | data: () => ({ | 346 | data: () => ({ |
| 347 | snackbar: false, | 347 | snackbar: false, |
| 348 | y: "top", | 348 | y: "top", |
| 349 | x: "right", | 349 | x: "right", |
| 350 | mode: "", | 350 | mode: "", |
| 351 | timeout: 3000, | 351 | timeout: 3000, |
| 352 | text: "", | 352 | text: "", |
| 353 | loading: false, | 353 | loading: false, |
| 354 | date: null, | 354 | date: null, |
| 355 | search: "", | 355 | search: "", |
| 356 | showLoader:false, | 356 | showLoader:false, |
| 357 | dialog: false, | 357 | dialog: false, |
| 358 | dialog1: false, | 358 | dialog1: false, |
| 359 | valid: true, | 359 | valid: true, |
| 360 | isActive: true, | 360 | isActive: true, |
| 361 | newActive: false, | 361 | newActive: false, |
| 362 | AddUsercredentials: {}, | 362 | AddUsercredentials: {}, |
| 363 | pagination: { | 363 | pagination: { |
| 364 | rowsPerPage: 15 | 364 | rowsPerPage: 15 |
| 365 | }, | 365 | }, |
| 366 | imageData: {}, | 366 | imageData: {}, |
| 367 | imageName: "", | 367 | imageName: "", |
| 368 | imageUrl: "", | 368 | imageUrl: "", |
| 369 | imageFile: "", | 369 | imageFile: "", |
| 370 | titleRules: [v => !!v || " Tilte is required"], | 370 | titleRules: [v => !!v || " Tilte is required"], |
| 371 | descriptionRules: [v => !!v || " Description is required"], | 371 | descriptionRules: [v => !!v || " Description is required"], |
| 372 | headers: [ | 372 | headers: [ |
| 373 | { | 373 | { |
| 374 | text: "No", | 374 | text: "No", |
| 375 | align: "center", | 375 | align: "center", |
| 376 | sortable: false, | 376 | sortable: false, |
| 377 | value: "No" | 377 | value: "No" |
| 378 | }, | 378 | }, |
| 379 | { text: "Title", value: "title", sortable: false, align: "center" }, | 379 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 380 | { text: "Description", value: "description", sortable: false, align: "center" }, | 380 | { text: "Description", value: "description", sortable: false, align: "center" }, |
| 381 | { text: "Action", value: "", sortable: false, align: "center" } | 381 | { text: "Action", value: "", sortable: false, align: "center" } |
| 382 | ], | 382 | ], |
| 383 | desserts: [], | 383 | desserts: [], |
| 384 | editedIndex: -1, | 384 | editedIndex: -1, |
| 385 | addRemind:{ | 385 | addRemind:{ |
| 386 | title:'', | 386 | title:'', |
| 387 | description:'' | 387 | description:'' |
| 388 | }, | 388 | }, |
| 389 | editedItem: { | 389 | editedItem: { |
| 390 | title:'', | 390 | title:'', |
| 391 | description:'' | 391 | description:'' |
| 392 | }, | 392 | }, |
| 393 | defaultItem: { | 393 | defaultItem: { |
| 394 | title:'', | 394 | title:'', |
| 395 | description:'' | 395 | description:'' |
| 396 | }, | 396 | }, |
| 397 | userName: "", | 397 | userName: "", |
| 398 | items: [ | 398 | items: [ |
| 399 | { | 399 | { |
| 400 | href: "/changepassword", | 400 | href: "/changepassword", |
| 401 | title: "Change Password", | 401 | title: "Change Password", |
| 402 | click: e => { | 402 | click: e => { |
| 403 | console.log(e); | 403 | console.log(e); |
| 404 | } | 404 | } |
| 405 | }, | 405 | }, |
| 406 | { | 406 | { |
| 407 | href: "#", | 407 | href: "#", |
| 408 | title: "Logout", | 408 | title: "Logout", |
| 409 | click: e => { | 409 | click: e => { |
| 410 | window.getApp.$emit("APP_LOGOUT"); | 410 | window.getApp.$emit("APP_LOGOUT"); |
| 411 | } | 411 | } |
| 412 | } | 412 | } |
| 413 | ] | 413 | ] |
| 414 | }), | 414 | }), |
| 415 | methods: { | 415 | methods: { |
| 416 | pickFile() { | 416 | pickFile() { |
| 417 | this.$refs.image.click(); | 417 | this.$refs.image.click(); |
| 418 | }, | 418 | }, |
| 419 | 419 | ||
| 420 | onFilePicked(e) { | 420 | onFilePicked(e) { |
| 421 | // console.log(e) | 421 | // console.log(e) |
| 422 | const files = e.target.files; | 422 | const files = e.target.files; |
| 423 | this.imageData.upload = e.target.files[0]; | 423 | this.imageData.upload = e.target.files[0]; |
| 424 | if (files[0] !== undefined) { | 424 | if (files[0] !== undefined) { |
| 425 | this.imageName = files[0].name; | 425 | this.imageName = files[0].name; |
| 426 | if (this.imageName.lastIndexOf(".") <= 0) { | 426 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 427 | return; | 427 | return; |
| 428 | } | 428 | } |
| 429 | const fr = new FileReader(); | 429 | const fr = new FileReader(); |
| 430 | fr.readAsDataURL(files[0]); | 430 | fr.readAsDataURL(files[0]); |
| 431 | fr.addEventListener("load", () => { | 431 | fr.addEventListener("load", () => { |
| 432 | this.imageUrl = fr.result; | 432 | this.imageUrl = fr.result; |
| 433 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 433 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 434 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 434 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 435 | console.log("upload=======>", this.imageData.imageUrl); | 435 | console.log("upload=======>", this.imageData.imageUrl); |
| 436 | console.log("imageFile", this.imageFile); | 436 | console.log("imageFile", this.imageFile); |
| 437 | }); | 437 | }); |
| 438 | } else { | 438 | } else { |
| 439 | this.imageName = ""; | 439 | this.imageName = ""; |
| 440 | this.imageFile = ""; | 440 | this.imageFile = ""; |
| 441 | this.imageUrl = ""; | 441 | this.imageUrl = ""; |
| 442 | } | 442 | } |
| 443 | }, | 443 | }, |
| 444 | getReminderList() { | 444 | getReminderList() { |
| 445 | this.showLoader = true; | 445 | this.showLoader = true; |
| 446 | var token = this.$store.state.token; | 446 | var token = this.$store.state.token; |
| 447 | http() | 447 | http() |
| 448 | .get("/getRemindersList", { | 448 | .get("/getRemindersList", { |
| 449 | headers: { Authorization: "Bearer " + token } | 449 | headers: { Authorization: "Bearer " + token } |
| 450 | }) | 450 | }) |
| 451 | .then(response => { | 451 | .then(response => { |
| 452 | this.desserts = response.data.data; | 452 | this.desserts = response.data.data; |
| 453 | this.showLoader = false; | 453 | this.showLoader = false; |
| 454 | // console.log("getRemindersList=====>",this.desserts) | 454 | // console.log("getRemindersList=====>",this.desserts) |
| 455 | }) | 455 | }) |
| 456 | .catch(error => { | 456 | .catch(error => { |
| 457 | // console.log("err====>", err); | 457 | // console.log("err====>", err); |
| 458 | this.showLoader = false; | 458 | this.showLoader = false; |
| 459 | if (error.response.status === 401) { | 459 | if (error.response.status === 401) { |
| 460 | this.$router.replace({ path: "/" }); | 460 | this.$router.replace({ path: "/" }); |
| 461 | this.$store.dispatch("setToken", null); | 461 | this.$store.dispatch("setToken", null); |
| 462 | this.$store.dispatch("Id", null); | 462 | this.$store.dispatch("Id", null); |
| 463 | } | 463 | } |
| 464 | }); | 464 | }); |
| 465 | }, | 465 | }, |
| 466 | editItem(item) { | 466 | editItem(item) { |
| 467 | this.editedIndex = this.desserts.indexOf(item); | 467 | this.editedIndex = this.desserts.indexOf(item); |
| 468 | this.editedItem = Object.assign({}, item); | 468 | this.editedItem = Object.assign({}, item); |
| 469 | this.dialog = true; | 469 | this.dialog = true; |
| 470 | }, | 470 | }, |
| 471 | profile(item) { | 471 | profile(item) { |
| 472 | this.editedIndex = this.desserts.indexOf(item); | 472 | this.editedIndex = this.desserts.indexOf(item); |
| 473 | this.editedItem = Object.assign({}, item); | 473 | this.editedItem = Object.assign({}, item); |
| 474 | this.dialog1 = true; | 474 | this.dialog1 = true; |
| 475 | }, | 475 | }, |
| 476 | 476 | ||
| 477 | deleteItem(item) { | 477 | deleteItem(item) { |
| 478 | let deleteReminder = { | 478 | let deleteReminder = { |
| 479 | reminderId: item._id | 479 | reminderId: item._id |
| 480 | }; | 480 | }; |
| 481 | http() | 481 | http() |
| 482 | .delete( | 482 | .delete( |
| 483 | "/deleteReminder", | 483 | "/deleteReminder", |
| 484 | confirm("Are you sure you want to delete this?") && { | 484 | confirm("Are you sure you want to delete this?") && { |
| 485 | params: deleteReminder | 485 | params: deleteReminder |
| 486 | } | 486 | } |
| 487 | ) | 487 | ) |
| 488 | .then(response => { | 488 | .then(response => { |
| 489 | // console.log("deleteReminder",deleteReminder) | 489 | // console.log("deleteReminder",deleteReminder) |
| 490 | if ((this.snackbar = true)) { | 490 | if ((this.snackbar = true)) { |
| 491 | this.text = "Successfully delete Existing User"; | 491 | this.text = "Successfully delete Existing User"; |
| 492 | } | 492 | } |
| 493 | this.getReminderList(); | 493 | this.getReminderList(); |
| 494 | }) | 494 | }) |
| 495 | .catch(error => { | 495 | .catch(error => { |
| 496 | // console.log(error); | 496 | // console.log(error); |
| 497 | }); | 497 | }); |
| 498 | }, | 498 | }, |
| 499 | activeTab(type) { | 499 | activeTab(type) { |
| 500 | switch (type) { | 500 | switch (type) { |
| 501 | case "existing": | 501 | case "existing": |
| 502 | this.newActive = false; | 502 | this.newActive = false; |
| 503 | this.isActive = true; | 503 | this.isActive = true; |
| 504 | break; | 504 | break; |
| 505 | 505 | ||
| 506 | default: | 506 | default: |
| 507 | this.newActive = true; | 507 | this.newActive = true; |
| 508 | this.isActive = false; | 508 | this.isActive = false; |
| 509 | break; | 509 | break; |
| 510 | } | 510 | } |
| 511 | }, | 511 | }, |
| 512 | close() { | 512 | close() { |
| 513 | this.dialog = false; | 513 | this.dialog = false; |
| 514 | setTimeout(() => { | 514 | setTimeout(() => { |
| 515 | this.editedItem = Object.assign({}, this.defaultItem); | 515 | this.editedItem = Object.assign({}, this.defaultItem); |
| 516 | this.editedIndex = -1; | 516 | this.editedIndex = -1; |
| 517 | }, 300); | 517 | }, 300); |
| 518 | }, | 518 | }, |
| 519 | close1() { | 519 | close1() { |
| 520 | this.dialog1 = false; | 520 | this.dialog1 = false; |
| 521 | }, | 521 | }, |
| 522 | submit() { | 522 | submit() { |
| 523 | if (this.$refs.form.validate()) { | 523 | if (this.$refs.form.validate()) { |
| 524 | let imageData = new FormData(); | 524 | let imageData = new FormData(); |
| 525 | imageData.append("upload", this.imageFile); | 525 | imageData.append("upload", this.imageFile); |
| 526 | console.log(imageData); | 526 | console.log(imageData); |
| 527 | let addReminds = { | 527 | let addReminds = { |
| 528 | title: this.addRemind.title, | 528 | title: this.addRemind.title, |
| 529 | description: this.addRemind.description, | 529 | description: this.addRemind.description, |
| 530 | // imageData | 530 | // imageData |
| 531 | }; | 531 | }; |
| 532 | http() | 532 | http() |
| 533 | .post("/createReminder", addReminds) | 533 | .post("/createReminder", addReminds) |
| 534 | .then(response => { | 534 | .then(response => { |
| 535 | // console.log(addReminds) | 535 | // console.log(addReminds) |
| 536 | if ((this.snackbar = true)) { | 536 | if ((this.snackbar = true)) { |
| 537 | this.text = "New user added successfully"; | 537 | this.text = "New user added successfully"; |
| 538 | } | 538 | } |
| 539 | this.getReminderList(); | 539 | this.getReminderList(); |
| 540 | this.clear(); | 540 | this.clear(); |
| 541 | }) | 541 | }) |
| 542 | .catch(error => { | 542 | .catch(error => { |
| 543 | // console.log(error); | 543 | // console.log(error); |
| 544 | if ((this.snackbar = true)) { | 544 | if ((this.snackbar = true)) { |
| 545 | this.text = error.response.data.message; | 545 | this.text = error.response.data.message; |
| 546 | } | 546 | } |
| 547 | }); | 547 | }); |
| 548 | } | 548 | } |
| 549 | }, | 549 | }, |
| 550 | mail() {}, | 550 | mail() {}, |
| 551 | download() {}, | 551 | download() {}, |
| 552 | clear() { | 552 | clear() { |
| 553 | this.$refs.form.reset(); | 553 | this.$refs.form.reset(); |
| 554 | }, | 554 | }, |
| 555 | save() { | 555 | save() { |
| 556 | let imageData = new FormData(); | 556 | let imageData = new FormData(); |
| 557 | imageData.append("upload", this.imageFile); | 557 | imageData.append("upload", this.imageFile); |
| 558 | console.log(imageData); | 558 | console.log(imageData); |
| 559 | let editReminder = { | 559 | let editReminder = { |
| 560 | reminderId:this.editedItem._id, | 560 | reminderId:this.editedItem._id, |
| 561 | title: this.editedItem.title, | 561 | title: this.editedItem.title, |
| 562 | description: this.editedItem.description, | 562 | description: this.editedItem.description, |
| 563 | // imageData | 563 | // imageData |
| 564 | }; | 564 | }; |
| 565 | http() | 565 | http() |
| 566 | .put("/updateReminder", editReminder) | 566 | .put("/updateReminder", editReminder) |
| 567 | .then(response => { | 567 | .then(response => { |
| 568 | // console.log("updateReminder",updateReminder); | 568 | // console.log("updateReminder",updateReminder); |
| 569 | if ((this.snackbar = true)) { | 569 | if ((this.snackbar = true)) { |
| 570 | this.text = "Successfully Edit Existing User"; | 570 | this.text = "Successfully Edit Existing User"; |
| 571 | } | 571 | } |
| 572 | this.getReminderList(); | 572 | this.getReminderList(); |
| 573 | }) | 573 | }) |
| 574 | .catch(error => { | 574 | .catch(error => { |
| 575 | // console.log(error); | 575 | // console.log(error); |
| 576 | }); | 576 | }); |
| 577 | this.close(); | 577 | this.close(); |
| 578 | }, | 578 | }, |
| 579 | handleDrawerToggle() { | 579 | handleDrawerToggle() { |
| 580 | window.getApp.$emit("APP_DRAWER_TOGGLED"); | 580 | window.getApp.$emit("APP_DRAWER_TOGGLED"); |
| 581 | }, | 581 | }, |
| 582 | handleFullScreen() { | 582 | handleFullScreen() { |
| 583 | Util.toggleFullScreen(); | 583 | Util.toggleFullScreen(); |
| 584 | } | 584 | } |
| 585 | }, | 585 | }, |
| 586 | mounted() { | 586 | mounted() { |
| 587 | this.getReminderList(); | 587 | this.getReminderList(); |
| 588 | }, | 588 | }, |
| 589 | computed: { | 589 | computed: { |
| 590 | toolbarColor() { | 590 | toolbarColor() { |
| 591 | return this.$vuetify.options.extra.mainNav; | 591 | return this.$vuetify.options.extra.mainNav; |
| 592 | } | 592 | } |
| 593 | } | 593 | } |
| 594 | }; | 594 | }; |
| 595 | </script> | 595 | </script> |
| 596 | <style scoped> | 596 | <style scoped> |
| 597 | .v-tabs__div { | 597 | .v-tabs__div { |
| 598 | text-transform: none; | 598 | text-transform: none; |
| 599 | } | 599 | } |
| 600 | .v-input__prepend-outer { | 600 | .v-input__prepend-outer { |
| 601 | margin-right: 0px !important; | 601 | margin-right: 0px !important; |
| 602 | } | 602 | } |
| 603 | .v-card__actions .v-btn { | 603 | .v-card__actions .v-btn { |
| 604 | margin: 0 15px; | 604 | margin: 0 15px; |
| 605 | min-width: 120px; | 605 | min-width: 120px; |
| 606 | } | 606 | } |
| 607 | .primary { | 607 | .primary { |
| 608 | background-color: #aaa !important; | 608 | background-color: #aaa !important; |
| 609 | border-color: #aaa !important; | 609 | border-color: #aaa !important; |
| 610 | } | 610 | } |
| 611 | h4 { | 611 | h4 { |
| 612 | background-repeat: no-repeat; | 612 | background-repeat: no-repeat; |
| 613 | padding: 8px; | 613 | padding: 8px; |
| 614 | margin: auto; | 614 | margin: auto; |
| 615 | font-size: 25px; | 615 | font-size: 25px; |
| 616 | } | 616 | } |
| 617 | #name { | 617 | #name { |
| 618 | position: absolute; | 618 | position: absolute; |
| 619 | left: 100px; | 619 | left: 100px; |
| 620 | top: 17px; | 620 | top: 17px; |
| 621 | } | 621 | } |
| 622 | #icon { | 622 | #icon { |
| 623 | position: absolute; | 623 | position: absolute; |
| 624 | right: 8px; | 624 | right: 8px; |
| 625 | top: 8px; | 625 | top: 8px; |
| 626 | } | 626 | } |
| 627 | #m { | 627 | #m { |
| 628 | position: relative; | 628 | position: relative; |
| 629 | left: 135px; | 629 | left: 135px; |
| 630 | top: -15px; | 630 | top: -15px; |
| 631 | } | 631 | } |
| 632 | #G { | 632 | #G { |
| 633 | position: absolute; | 633 | position: absolute; |
| 634 | top: 38px; | 634 | top: 38px; |
| 635 | color: white; | 635 | color: white; |
| 636 | } | 636 | } |
| 637 | #bt { | 637 | #bt { |
| 638 | position: relative; | 638 | position: relative; |
| 639 | top: -20px; | 639 | top: -20px; |
| 640 | left: 115px; | 640 | left: 115px; |
| 641 | } | 641 | } |
| 642 | #e { | 642 | #e { |
| 643 | position: relative; | 643 | position: relative; |
| 644 | top: 5px; | 644 | top: 5px; |
| 645 | right: -30px; | 645 | right: -30px; |
| 646 | height: 17px; | 646 | height: 17px; |
| 647 | cursor: pointer; | 647 | cursor: pointer; |
| 648 | } | 648 | } |
| 649 | #d { | 649 | #d { |
| 650 | position: relative; | 650 | position: relative; |
| 651 | top: 5px; | 651 | top: 5px; |
| 652 | right: -70px; | 652 | right: -70px; |
| 653 | height: 17px; | 653 | height: 17px; |
| 654 | cursor: pointer; | 654 | cursor: pointer; |
| 655 | } | 655 | } |
| 656 | #td { | 656 | #td { |
| 657 | border: 1px solid #dddddd; | 657 | border: 1px solid #dddddd; |
| 658 | text-align: left; | 658 | text-align: left; |
| 659 | padding: 8px; | 659 | padding: 8px; |
| 660 | } | 660 | } |
| 661 | #dialog { | 661 | #dialog { |
| 662 | height: 550px; | 662 | height: 550px; |
| 663 | } | 663 | } |
| 664 | .active { | 664 | .active { |
| 665 | background-color: gray; | 665 | background-color: gray; |
| 666 | color: white !important; | 666 | color: white !important; |
| 667 | } | 667 | } |
| 668 | .activebtn { | 668 | .activebtn { |
| 669 | color: black !important; | 669 | color: black !important; |
| 670 | } | 670 | } |
| 671 | #flex { | 671 | #flex { |
| 672 | height: 300px; | 672 | height: 300px; |
| 673 | } | 673 | } |
| 674 | .top { | 674 | .top { |
| 675 | margin-top: 100px; | 675 | margin-top: 100px; |
| 676 | } | 676 | } |
| 677 | .v-tabs__item a { | 677 | .v-tabs__item a { |
| 678 | font-size: 16px !important; | 678 | font-size: 16px !important; |
| 679 | } | 679 | } |
| 680 | @media screen and (max-width: 769px) { | 680 | @media screen and (max-width: 769px) { |
| 681 | .top { | 681 | .top { |
| 682 | margin-top: 0 !important; | 682 | margin-top: 0 !important; |
| 683 | } | 683 | } |
| 684 | .userSearch .v-icon { | 684 | .userSearch .v-icon { |
| 685 | font-size: 20px !important; | 685 | font-size: 20px !important; |
| 686 | margin-left: 20px; | 686 | margin-left: 20px; |
| 687 | } | 687 | } |
| 688 | } | 688 | } |
| 689 | @media screen and (max-width: 380px) { | 689 | @media screen and (max-width: 380px) { |
| 690 | .pl-3 { | 690 | .pl-3 { |
| 691 | padding-left: 0px !important; | 691 | padding-left: 0px !important; |
| 692 | } | 692 | } |
| 693 | .right { | 693 | .right { |
| 694 | float: none !important; | 694 | float: none !important; |
| 695 | } | 695 | } |
| 696 | .subheading { | 696 | .subheading { |
| 697 | font-size: 14px !important; | 697 | font-size: 14px !important; |
| 698 | } | 698 | } |
| 699 | .v-card__actions .v-btn { | 699 | .v-card__actions .v-btn { |
| 700 | margin: 0 0px; | 700 | margin: 0 0px; |
| 701 | min-width: 100px; | 701 | min-width: 100px; |
| 702 | } | 702 | } |
| 703 | /* .searchIcon .v-icon { | 703 | /* .searchIcon .v-icon { |
| 704 | font-size: 20px; | 704 | font-size: 20px; |
| 705 | margin-left: 20px; | 705 | margin-left: 20px; |
| 706 | } */ | 706 | } */ |
| 707 | .subheading { | 707 | .subheading { |
| 708 | font-size: 12px !important; | 708 | font-size: 12px !important; |
| 709 | } | 709 | } |
| 710 | h5 { | 710 | h5 { |
| 711 | font-size: 13px; | 711 | font-size: 13px; |
| 712 | } | 712 | } |
| 713 | } | 713 | } |
| 714 | .v-icon { | 714 | .v-icon { |
| 715 | font-size: 30px; | 715 | font-size: 30px; |
| 716 | } | 716 | } |
| 717 | @media screen and (min-width: 1270px) { | 717 | @media screen and (min-width: 1270px) { |
| 718 | .hide { | 718 | .hide { |
| 719 | display: none; | 719 | display: none; |
| 720 | } | 720 | } |
| 721 | /* } | 721 | /* } |
| 722 | @media screen and (max-width: 962px) { | 722 | @media screen and (max-width: 962px) { |
| 723 | .imglogo{ | 723 | .imglogo{ |
| 724 | position: absolute; | 724 | position: absolute; |
| 725 | top: 13px; | 725 | top: 13px; |
| 726 | left: 13px !important; | 726 | left: 13px !important; |
| 727 | width: 70px; | 727 | width: 70px; |
| 728 | height: 24px; | 728 | height: 24px; |
| 729 | } */ | 729 | } */ |
| 730 | } | 730 | } |
| 731 | @media screen and (max-width: 420px) { | 731 | @media screen and (max-width: 420px) { |
| 732 | .userSearch .v-text-field .v-label { | 732 | .userSearch .v-text-field .v-label { |
| 733 | line-height: 24px !important; | 733 | line-height: 24px !important; |
| 734 | } | 734 | } |
| 735 | .userSearch .v-label { | 735 | .userSearch .v-label { |
| 736 | font-size: 13px !important; | 736 | font-size: 13px !important; |
| 737 | } | 737 | } |
| 738 | .v-list__tile { | 738 | .v-list__tile { |
| 739 | font-size: 14px; | 739 | font-size: 14px; |
| 740 | padding: 0 10px; | 740 | padding: 0 10px; |
| 741 | } | 741 | } |
| 742 | .name { | 742 | .name { |
| 743 | font-size: 15px; | 743 | font-size: 15px; |
| 744 | } | 744 | } |
| 745 | } | 745 | } |
| 746 | </style> | 746 | </style> |
src/pages/School/appVersion.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- SHOW TABLE --> | 3 | <!-- SHOW TABLE --> |
| 4 | <v-data-table :headers="headers" :items="versionList"> | 4 | <v-data-table :headers="headers" :items="versionList"> |
| 5 | <template slot="items" slot-scope="props"> | 5 | <template slot="items" slot-scope="props"> |
| 6 | <tr class="tr"> | 6 | <tr class="tr"> |
| 7 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> | 7 | <td class="text-xs-center td td-row">{{ props.index + 1}}</td> |
| 8 | <td class="text-xs-center td td-row">{{ props.item.androidAppVersion}}</td> | 8 | <td class="text-xs-center td td-row">{{ props.item.androidAppVersion}}</td> |
| 9 | <td class="text-xs-center td td-row">{{ props.item.iosAppVersion}}</td> | 9 | <td class="text-xs-center td td-row">{{ props.item.iosAppVersion}}</td> |
| 10 | <td class="text-xs-center td td-row"> | 10 | <td class="text-xs-center td td-row"> |
| 11 | <span> | 11 | <span> |
| 12 | <v-tooltip top> | 12 | <v-tooltip top> |
| 13 | <img | 13 | <img |
| 14 | slot="activator" | 14 | slot="activator" |
| 15 | style="cursor:pointer; width:20px; height:18px; " | 15 | style="cursor:pointer; width:20px; height:18px; " |
| 16 | @click="editAppVersion(props.item)" | 16 | @click="editAppVersion(props.item)" |
| 17 | src="/static/icon/edit.png" | 17 | src="/static/icon/edit.png" |
| 18 | class="mr-3" | 18 | class="mr-3" |
| 19 | /> | 19 | /> |
| 20 | <span>Edit</span> | 20 | <span>Edit</span> |
| 21 | </v-tooltip> | 21 | </v-tooltip> |
| 22 | </span> | 22 | </span> |
| 23 | </td> | 23 | </td> |
| 24 | </tr> | 24 | </tr> |
| 25 | </template> | 25 | </template> |
| 26 | </v-data-table> | 26 | </v-data-table> |
| 27 | 27 | ||
| 28 | <!-- EDIT VERSION DILAOG --> | 28 | <!-- EDIT VERSION DILAOG --> |
| 29 | <v-dialog v-model="editVerionDilaog" max-width="600px" scrollable> | 29 | <v-dialog v-model="editVerionDilaog" max-width="600px" scrollable persistent> |
| 30 | <v-card flat class="card-style pa-2" dark> | 30 | <v-card flat class="card-style pa-2" dark> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs12> | 32 | <v-flex xs12> |
| 33 | <label class="title text-xs-center">Edit Version</label> | 33 | <label class="title text-xs-center">Edit Version</label> |
| 34 | <v-icon size="24" class="right" @click="editVerionDilaog = false">cancel</v-icon> | 34 | <v-icon size="24" class="right" @click="editVerionDilaog = false">cancel</v-icon> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-card-text class="hidden-xs-only hidden-sm-only"> | 37 | <v-card-text class="hidden-xs-only hidden-sm-only"> |
| 38 | <v-form ref="editAppVersionForm" v-model="validEditVersion" lazy-validation> | 38 | <v-form ref="editAppVersionForm" v-model="validEditVersion" lazy-validation> |
| 39 | <v-flex xs12> | 39 | <v-flex xs12> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs3 sm4 class="pt-4 subheading"> | 41 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 42 | <label class="right">App Version:</label> | 42 | <label class="right">App Version:</label> |
| 43 | </v-flex> | 43 | </v-flex> |
| 44 | <v-flex xs8 sm6 class="ml-3"> | 44 | <v-flex xs8 sm6 class="ml-3"> |
| 45 | <v-text-field | 45 | <v-text-field |
| 46 | placeholder="fill app version" | 46 | placeholder="fill app version" |
| 47 | v-model="editedItem.androidAppVersion" | 47 | v-model="editedItem.androidAppVersion" |
| 48 | required | 48 | required |
| 49 | ></v-text-field> | 49 | ></v-text-field> |
| 50 | </v-flex> | 50 | </v-flex> |
| 51 | </v-layout> | 51 | </v-layout> |
| 52 | </v-flex> | 52 | </v-flex> |
| 53 | <v-flex xs12> | 53 | <v-flex xs12> |
| 54 | <v-layout> | 54 | <v-layout> |
| 55 | <v-flex xs3 sm4 class="pt-4 subheading"> | 55 | <v-flex xs3 sm4 class="pt-4 subheading"> |
| 56 | <label class="right">IOS Version:</label> | 56 | <label class="right">IOS Version:</label> |
| 57 | </v-flex> | 57 | </v-flex> |
| 58 | <v-flex xs8 sm6 class="ml-3"> | 58 | <v-flex xs8 sm6 class="ml-3"> |
| 59 | <v-text-field | 59 | <v-text-field |
| 60 | placeholder="fill ios version" | 60 | placeholder="fill ios version" |
| 61 | v-model="editedItem.iosAppVersion" | 61 | v-model="editedItem.iosAppVersion" |
| 62 | required | 62 | required |
| 63 | ></v-text-field> | 63 | ></v-text-field> |
| 64 | </v-flex> | 64 | </v-flex> |
| 65 | </v-layout> | 65 | </v-layout> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | <v-layout> | 67 | <v-layout> |
| 68 | <v-flex xs12 sm12> | 68 | <v-flex xs12 sm12> |
| 69 | <v-card-actions> | 69 | <v-card-actions> |
| 70 | <v-spacer></v-spacer> | 70 | <v-spacer></v-spacer> |
| 71 | <v-btn round dark @click="update" class="add-button">Update</v-btn> | 71 | <v-btn round dark @click="update" class="add-button">Update</v-btn> |
| 72 | <v-spacer></v-spacer> | 72 | <v-spacer></v-spacer> |
| 73 | </v-card-actions> | 73 | </v-card-actions> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | </v-form> | 76 | </v-form> |
| 77 | </v-card-text> | 77 | </v-card-text> |
| 78 | </v-card> | 78 | </v-card> |
| 79 | </v-dialog> | 79 | </v-dialog> |
| 80 | 80 | ||
| 81 | <div class="loader" v-if="showLoader"> | 81 | <div class="loader" v-if="showLoader"> |
| 82 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 82 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 83 | </div> | 83 | </div> |
| 84 | <v-snackbar | 84 | <v-snackbar |
| 85 | :timeout="timeout" | 85 | :timeout="timeout" |
| 86 | :top="y === 'top'" | 86 | :top="y === 'top'" |
| 87 | :right="x === 'right'" | 87 | :right="x === 'right'" |
| 88 | :vertical="mode === 'vertical'" | 88 | :vertical="mode === 'vertical'" |
| 89 | v-model="snackbar" | 89 | v-model="snackbar" |
| 90 | color="success" | 90 | color="success" |
| 91 | >{{ text }}</v-snackbar> | 91 | >{{ text }}</v-snackbar> |
| 92 | </v-container> | 92 | </v-container> |
| 93 | </template> | 93 | </template> |
| 94 | 94 | ||
| 95 | <script> | 95 | <script> |
| 96 | import http from "@/Services/http.js"; | 96 | import http from "@/Services/http.js"; |
| 97 | import Util from "@/util"; | 97 | import Util from "@/util"; |
| 98 | import moment from "moment"; | 98 | import moment from "moment"; |
| 99 | 99 | ||
| 100 | export default { | 100 | export default { |
| 101 | data: () => ({ | 101 | data: () => ({ |
| 102 | //SNACKBAR | 102 | //SNACKBAR |
| 103 | snackbar: false, | 103 | snackbar: false, |
| 104 | y: "top", | 104 | y: "top", |
| 105 | x: "right", | 105 | x: "right", |
| 106 | color: "", | 106 | color: "", |
| 107 | mode: "", | 107 | mode: "", |
| 108 | timeout: 3000, | 108 | timeout: 3000, |
| 109 | text: "", | 109 | text: "", |
| 110 | 110 | ||
| 111 | headers: [ | 111 | headers: [ |
| 112 | { | 112 | { |
| 113 | text: "No", | 113 | text: "No", |
| 114 | align: "center", | 114 | align: "center", |
| 115 | sortable: false, | 115 | sortable: false, |
| 116 | value: "No", | 116 | value: "No", |
| 117 | }, | 117 | }, |
| 118 | { | 118 | { |
| 119 | text: "Android App Version", | 119 | text: "Android App Version", |
| 120 | value: "", | 120 | value: "", |
| 121 | sortable: false, | 121 | sortable: false, |
| 122 | align: "center", | 122 | align: "center", |
| 123 | }, | 123 | }, |
| 124 | { | 124 | { |
| 125 | text: "IOS App Version", | 125 | text: "IOS App Version", |
| 126 | value: "", | 126 | value: "", |
| 127 | sortable: false, | 127 | sortable: false, |
| 128 | align: "center", | 128 | align: "center", |
| 129 | }, | 129 | }, |
| 130 | { text: "Action", value: "", sortable: false, align: "center" }, | 130 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 131 | ], | 131 | ], |
| 132 | versionList: [], | 132 | versionList: [], |
| 133 | editedItem: { | 133 | editedItem: { |
| 134 | androidAppVersion: "", | 134 | androidAppVersion: "", |
| 135 | iosAppVersion: "", | 135 | iosAppVersion: "", |
| 136 | }, | 136 | }, |
| 137 | 137 | ||
| 138 | editVerionDilaog: false, | 138 | editVerionDilaog: false, |
| 139 | validEditVersion: true, | 139 | validEditVersion: true, |
| 140 | showLoader: false, | 140 | showLoader: false, |
| 141 | }), | 141 | }), |
| 142 | 142 | ||
| 143 | methods: { | 143 | methods: { |
| 144 | editAppVersion(item) { | 144 | editAppVersion(item) { |
| 145 | this.editedIndex = this.versionList.indexOf(item); | 145 | this.editedIndex = this.versionList.indexOf(item); |
| 146 | this.editedItem = Object.assign({}, item); | 146 | this.editedItem = Object.assign({}, item); |
| 147 | this.editVerionDilaog = true; | 147 | this.editVerionDilaog = true; |
| 148 | }, | 148 | }, |
| 149 | getAppVersion() { | 149 | getAppVersion() { |
| 150 | http() | 150 | http() |
| 151 | .get("getAppVersion", { | 151 | .get("getAppVersion", { |
| 152 | headers: { | 152 | headers: { |
| 153 | Authorization: "Bearer " + this.schoolToken, | 153 | Authorization: "Bearer " + this.schoolToken, |
| 154 | }, | 154 | }, |
| 155 | }) | 155 | }) |
| 156 | .then((response) => { | 156 | .then((response) => { |
| 157 | this.versionList = [response.data.data]; | 157 | this.versionList = [response.data.data]; |
| 158 | }) | 158 | }) |
| 159 | .catch((error) => { | 159 | .catch((error) => { |
| 160 | this.showLoader = false; | 160 | this.showLoader = false; |
| 161 | this.snackbar = true; | 161 | this.snackbar = true; |
| 162 | this.color = "error"; | 162 | this.color = "error"; |
| 163 | this.text = error.response.data.message; | 163 | this.text = error.response.data.message; |
| 164 | }); | 164 | }); |
| 165 | }, | 165 | }, |
| 166 | update() { | 166 | update() { |
| 167 | if (this.$refs.editAppVersionForm.validate()) { | 167 | if (this.$refs.editAppVersionForm.validate()) { |
| 168 | let editVersion = { | 168 | let editVersion = { |
| 169 | appVersionId: this.editedItem._id, | 169 | appVersionId: this.editedItem._id, |
| 170 | androidAppVersion: this.editedItem.androidAppVersion, | 170 | androidAppVersion: this.editedItem.androidAppVersion, |
| 171 | iosAppVersion: this.editedItem.iosAppVersion, | 171 | iosAppVersion: this.editedItem.iosAppVersion, |
| 172 | }; | 172 | }; |
| 173 | http() | 173 | http() |
| 174 | .put("/updateAppVersion", editVersion, { | 174 | .put("/updateAppVersion", editVersion, { |
| 175 | headers: { Authorization: "Bearer " + this.schoolToken }, | 175 | headers: { Authorization: "Bearer " + this.schoolToken }, |
| 176 | }) | 176 | }) |
| 177 | .then((response) => { | 177 | .then((response) => { |
| 178 | this.snackbar = true; | 178 | this.snackbar = true; |
| 179 | this.color = "success"; | 179 | this.color = "success"; |
| 180 | this.text = response.data.message; | 180 | this.text = response.data.message; |
| 181 | this.getAppVersion(); | 181 | this.getAppVersion(); |
| 182 | this.editVerionDilaog = false; | 182 | this.editVerionDilaog = false; |
| 183 | }) | 183 | }) |
| 184 | .catch((error) => { | 184 | .catch((error) => { |
| 185 | this.snackbar = true; | 185 | this.snackbar = true; |
| 186 | this.color = "error"; | 186 | this.color = "error"; |
| 187 | this.text = error.response.data.message; | 187 | this.text = error.response.data.message; |
| 188 | }); | 188 | }); |
| 189 | } | 189 | } |
| 190 | }, | 190 | }, |
| 191 | }, | 191 | }, |
| 192 | 192 | ||
| 193 | mounted() { | 193 | mounted() { |
| 194 | this.getAppVersion(); | 194 | this.getAppVersion(); |
| 195 | this.role = this.$store.state.role; | 195 | this.role = this.$store.state.role; |
| 196 | this.token = this.$store.state.token; | 196 | this.token = this.$store.state.token; |
| 197 | this.schoolToken = this.$store.state.schoolToken; | 197 | this.schoolToken = this.$store.state.schoolToken; |
| 198 | }, | 198 | }, |
| 199 | }; | 199 | }; |
| 200 | </script> | 200 | </script> |
src/pages/School/school.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <v-tabs grow slider-color="gray"> | 3 | <v-tabs grow slider-color="gray"> |
| 4 | <v-tab | 4 | <v-tab |
| 5 | ripple | 5 | ripple |
| 6 | @click="activeTab('existing')" | 6 | @click="activeTab('existing')" |
| 7 | v-bind:class="{ active: isActive }" | 7 | v-bind:class="{ active: isActive }" |
| 8 | id="tab" | 8 | id="tab" |
| 9 | class="subheading" | 9 | class="subheading" |
| 10 | >Existing School</v-tab> | 10 | >Existing School</v-tab> |
| 11 | <v-tab | 11 | <v-tab |
| 12 | ripple | 12 | ripple |
| 13 | @click="activeTab('new')" | 13 | @click="activeTab('new')" |
| 14 | v-bind:class="{ active: newActive }" | 14 | v-bind:class="{ active: newActive }" |
| 15 | id="tab1" | 15 | id="tab1" |
| 16 | User | 16 | User |
| 17 | class="subheading" | 17 | class="subheading" |
| 18 | >Add New School</v-tab> | 18 | >Add New School</v-tab> |
| 19 | 19 | ||
| 20 | <!-- ****** EDITS STUDENTS DETAILS ****** --> | 20 | <!-- ****** EDITS STUDENTS DETAILS ****** --> |
| 21 | 21 | ||
| 22 | <v-tab-item> | 22 | <v-tab-item> |
| 23 | <v-snackbar | 23 | <v-snackbar |
| 24 | :timeout="timeout" | 24 | :timeout="timeout" |
| 25 | :top="y === 'top'" | 25 | :top="y === 'top'" |
| 26 | :right="x === 'right'" | 26 | :right="x === 'right'" |
| 27 | :vertical="mode === 'vertical'" | 27 | :vertical="mode === 'vertical'" |
| 28 | v-model="snackbar" | 28 | v-model="snackbar" |
| 29 | color="success" | 29 | color="success" |
| 30 | >{{ text }}</v-snackbar> | 30 | >{{ text }}</v-snackbar> |
| 31 | <v-dialog v-model="dialog" max-width="1500px" scrollable> | 31 | <v-dialog v-model="dialog" max-width="1500px" scrollable persistent> |
| 32 | <v-card flat> | 32 | <v-card flat> |
| 33 | <v-toolbar dark class="card-styles" flat> | 33 | <v-toolbar dark class="card-styles" flat> |
| 34 | <v-spacer></v-spacer> | 34 | <v-spacer></v-spacer> |
| 35 | <v-toolbar-title> | 35 | <v-toolbar-title> |
| 36 | <h3>Edit School</h3> | 36 | <h3>Edit School</h3> |
| 37 | </v-toolbar-title> | 37 | </v-toolbar-title> |
| 38 | <v-spacer></v-spacer> | 38 | <v-spacer></v-spacer> |
| 39 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> | 39 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> |
| 40 | </v-toolbar> | 40 | </v-toolbar> |
| 41 | <v-card-text style="height: 686px;"> | 41 | <v-card-text style="height: 686px;"> |
| 42 | <v-form ref="form"> | 42 | <v-form ref="form"> |
| 43 | <v-container fluid> | 43 | <v-container fluid> |
| 44 | <v-layout> | 44 | <v-layout> |
| 45 | <v-flex | 45 | <v-flex |
| 46 | xs12 | 46 | xs12 |
| 47 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 47 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 48 | > | 48 | > |
| 49 | <v-avatar size="160px"> | 49 | <v-avatar size="160px"> |
| 50 | <img | 50 | <img |
| 51 | src="/static/icon/user.png" | 51 | src="/static/icon/user.png" |
| 52 | v-if="!editedItem.schoolLogoUrl && !imageUrl" | 52 | v-if="!editedItem.schoolLogoUrl && !imageUrl" |
| 53 | /> | 53 | /> |
| 54 | <img | 54 | <img |
| 55 | :src="editedItem.schoolLogoUrl" | 55 | :src="editedItem.schoolLogoUrl" |
| 56 | v-else-if="editedItem.schoolLogoUrl && !imageUrl" | 56 | v-else-if="editedItem.schoolLogoUrl && !imageUrl" |
| 57 | /> | 57 | /> |
| 58 | <img | 58 | <img |
| 59 | v-if="imageUrl" | 59 | v-if="imageUrl" |
| 60 | :src="imageUrl" | 60 | :src="imageUrl" |
| 61 | height="150" | 61 | height="150" |
| 62 | style="border-radius:50%; width:200px" | 62 | style="border-radius:50%; width:200px" |
| 63 | /> | 63 | /> |
| 64 | </v-avatar> | 64 | </v-avatar> |
| 65 | <input | 65 | <input |
| 66 | type="file" | 66 | type="file" |
| 67 | style="display: none" | 67 | style="display: none" |
| 68 | ref="image" | 68 | ref="image" |
| 69 | accept="image/*" | 69 | accept="image/*" |
| 70 | @change="onFilePicked" | 70 | @change="onFilePicked" |
| 71 | /> | 71 | /> |
| 72 | </v-flex> | 72 | </v-flex> |
| 73 | </v-layout> | 73 | </v-layout> |
| 74 | <v-layout> | 74 | <v-layout> |
| 75 | <v-flex xs12 sm4> | 75 | <v-flex xs12 sm4> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs4 class="pt-4 subheading"> | 77 | <v-flex xs4 class="pt-4 subheading"> |
| 78 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 78 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 79 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 79 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 80 | </v-flex> | 80 | </v-flex> |
| 81 | <v-flex xs8 class="ml-3"> | 81 | <v-flex xs8 class="ml-3"> |
| 82 | <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field> | 82 | <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field> |
| 83 | </v-flex> | 83 | </v-flex> |
| 84 | </v-layout> | 84 | </v-layout> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex xs12 sm4> | 86 | <v-flex xs12 sm4> |
| 87 | <v-layout> | 87 | <v-layout> |
| 88 | <v-flex xs4 class="pt-4 subheading"> | 88 | <v-flex xs4 class="pt-4 subheading"> |
| 89 | <label class="right hidden-xs-only hidden-sm-only">Email ID:</label> | 89 | <label class="right hidden-xs-only hidden-sm-only">Email ID:</label> |
| 90 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label> | 90 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label> |
| 91 | </v-flex> | 91 | </v-flex> |
| 92 | <v-flex xs8 class="ml-3"> | 92 | <v-flex xs8 class="ml-3"> |
| 93 | <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field> | 93 | <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | <v-flex xs12 sm4> | 97 | <v-flex xs12 sm4> |
| 98 | <v-layout> | 98 | <v-layout> |
| 99 | <v-flex xs4 class="pt-4 subheading"> | 99 | <v-flex xs4 class="pt-4 subheading"> |
| 100 | <label class="right">Society Name:</label> | 100 | <label class="right">Society Name:</label> |
| 101 | </v-flex> | 101 | </v-flex> |
| 102 | <v-flex xs8 class="ml-3"> | 102 | <v-flex xs8 class="ml-3"> |
| 103 | <v-text-field | 103 | <v-text-field |
| 104 | placeholder="fill your Society Name" | 104 | placeholder="fill your Society Name" |
| 105 | v-model="editedItem.societyName" | 105 | v-model="editedItem.societyName" |
| 106 | ></v-text-field> | 106 | ></v-text-field> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | </v-layout> | 108 | </v-layout> |
| 109 | </v-flex> | 109 | </v-flex> |
| 110 | </v-layout> | 110 | </v-layout> |
| 111 | <v-layout> | 111 | <v-layout> |
| 112 | <v-flex xs12 sm4> | 112 | <v-flex xs12 sm4> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs4 class="pt-4 subheading"> | 114 | <v-flex xs4 class="pt-4 subheading"> |
| 115 | <label class="right">City:</label> | 115 | <label class="right">City:</label> |
| 116 | </v-flex> | 116 | </v-flex> |
| 117 | <v-flex xs8 class="ml-3"> | 117 | <v-flex xs8 class="ml-3"> |
| 118 | <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field> | 118 | <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-flex xs12 sm4> | 122 | <v-flex xs12 sm4> |
| 123 | <v-layout> | 123 | <v-layout> |
| 124 | <v-flex xs4 class="pt-4 subheading"> | 124 | <v-flex xs4 class="pt-4 subheading"> |
| 125 | <label class="right">State:</label> | 125 | <label class="right">State:</label> |
| 126 | </v-flex> | 126 | </v-flex> |
| 127 | <v-flex xs8 class="ml-3"> | 127 | <v-flex xs8 class="ml-3"> |
| 128 | <v-text-field | 128 | <v-text-field |
| 129 | v-model="editedItem.state" | 129 | v-model="editedItem.state" |
| 130 | placeholder="fill your City Name" | 130 | placeholder="fill your City Name" |
| 131 | ></v-text-field> | 131 | ></v-text-field> |
| 132 | </v-flex> | 132 | </v-flex> |
| 133 | </v-layout> | 133 | </v-layout> |
| 134 | </v-flex> | 134 | </v-flex> |
| 135 | <v-flex xs12 sm4> | 135 | <v-flex xs12 sm4> |
| 136 | <v-layout> | 136 | <v-layout> |
| 137 | <v-flex xs4 class="pt-4 subheading"> | 137 | <v-flex xs4 class="pt-4 subheading"> |
| 138 | <label class="right">Pincode:</label> | 138 | <label class="right">Pincode:</label> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs8 class="ml-3"> | 140 | <v-flex xs8 class="ml-3"> |
| 141 | <v-text-field | 141 | <v-text-field |
| 142 | v-model="editedItem.pinCode" | 142 | v-model="editedItem.pinCode" |
| 143 | placeholder="fill your pincode" | 143 | placeholder="fill your pincode" |
| 144 | type="number" | 144 | type="number" |
| 145 | ></v-text-field> | 145 | ></v-text-field> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | </v-layout> | 147 | </v-layout> |
| 148 | </v-flex> | 148 | </v-flex> |
| 149 | </v-layout> | 149 | </v-layout> |
| 150 | <v-layout> | 150 | <v-layout> |
| 151 | <v-flex xs12 sm4> | 151 | <v-flex xs12 sm4> |
| 152 | <v-layout> | 152 | <v-layout> |
| 153 | <v-flex xs4 class="pt-4 subheading"> | 153 | <v-flex xs4 class="pt-4 subheading"> |
| 154 | <label class="right">Fax No:</label> | 154 | <label class="right">Fax No:</label> |
| 155 | </v-flex> | 155 | </v-flex> |
| 156 | <v-flex xs8 class="ml-3"> | 156 | <v-flex xs8 class="ml-3"> |
| 157 | <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field> | 157 | <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs12 sm4> | 161 | <v-flex xs12 sm4> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs4 class="pt-4 subheading"> | 163 | <v-flex xs4 class="pt-4 subheading"> |
| 164 | <label class="right">Country:</label> | 164 | <label class="right">Country:</label> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs8 class="ml-3"> | 166 | <v-flex xs8 class="ml-3"> |
| 167 | <v-text-field | 167 | <v-text-field |
| 168 | v-model="editedItem.country" | 168 | v-model="editedItem.country" |
| 169 | placeholder="fill your Country" | 169 | placeholder="fill your Country" |
| 170 | ></v-text-field> | 170 | ></v-text-field> |
| 171 | </v-flex> | 171 | </v-flex> |
| 172 | </v-layout> | 172 | </v-layout> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | <v-flex xs12 sm4> | 174 | <v-flex xs12 sm4> |
| 175 | <v-layout> | 175 | <v-layout> |
| 176 | <v-flex xs4 class="pt-4 subheading"> | 176 | <v-flex xs4 class="pt-4 subheading"> |
| 177 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 177 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 178 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 178 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex xs8 class="ml-3"> | 180 | <v-flex xs8 class="ml-3"> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="editedItem.mobile" | 182 | v-model="editedItem.mobile" |
| 183 | placeholder="fill your MobileNo" | 183 | placeholder="fill your MobileNo" |
| 184 | name="mobileNo" | 184 | name="mobileNo" |
| 185 | ></v-text-field> | 185 | ></v-text-field> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | <v-layout> | 190 | <v-layout> |
| 191 | <v-flex xs12 sm4> | 191 | <v-flex xs12 sm4> |
| 192 | <v-layout> | 192 | <v-layout> |
| 193 | <v-flex xs4 class="pt-4 subheading"> | 193 | <v-flex xs4 class="pt-4 subheading"> |
| 194 | <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> | 194 | <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> |
| 195 | <label | 195 | <label |
| 196 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 196 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 197 | >LandLineNo:</label> | 197 | >LandLineNo:</label> |
| 198 | </v-flex> | 198 | </v-flex> |
| 199 | <v-flex xs8 class="ml-3"> | 199 | <v-flex xs8 class="ml-3"> |
| 200 | <v-text-field | 200 | <v-text-field |
| 201 | v-model="editedItem.landLineNo" | 201 | v-model="editedItem.landLineNo" |
| 202 | placeholder="fill your LandLine No" | 202 | placeholder="fill your LandLine No" |
| 203 | type="number" | 203 | type="number" |
| 204 | ></v-text-field> | 204 | ></v-text-field> |
| 205 | </v-flex> | 205 | </v-flex> |
| 206 | </v-layout> | 206 | </v-layout> |
| 207 | </v-flex> | 207 | </v-flex> |
| 208 | <v-flex xs12 sm4> | 208 | <v-flex xs12 sm4> |
| 209 | <v-layout> | 209 | <v-layout> |
| 210 | <v-flex xs4 class="pt-4 subheading"> | 210 | <v-flex xs4 class="pt-4 subheading"> |
| 211 | <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> | 211 | <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> |
| 212 | <label | 212 | <label |
| 213 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 213 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 214 | >Registration-No:</label> | 214 | >Registration-No:</label> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | <v-flex xs8 class="ml-3"> | 216 | <v-flex xs8 class="ml-3"> |
| 217 | <v-text-field | 217 | <v-text-field |
| 218 | v-model="editedItem.registrationNo" | 218 | v-model="editedItem.registrationNo" |
| 219 | placeholder="fill your Registration No" | 219 | placeholder="fill your Registration No" |
| 220 | type="number" | 220 | type="number" |
| 221 | ></v-text-field> | 221 | ></v-text-field> |
| 222 | </v-flex> | 222 | </v-flex> |
| 223 | </v-layout> | 223 | </v-layout> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | <v-flex xs12 sm4> | 225 | <v-flex xs12 sm4> |
| 226 | <v-layout> | 226 | <v-layout> |
| 227 | <v-flex xs4 class="pt-4 subheading"> | 227 | <v-flex xs4 class="pt-4 subheading"> |
| 228 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 228 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 229 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 229 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 230 | </v-flex> | 230 | </v-flex> |
| 231 | <v-flex xs8 class="ml-3"> | 231 | <v-flex xs8 class="ml-3"> |
| 232 | <v-text-field | 232 | <v-text-field |
| 233 | label="Select Image" | 233 | label="Select Image" |
| 234 | @click="pickFile" | 234 | @click="pickFile" |
| 235 | v-model="imageName" | 235 | v-model="imageName" |
| 236 | append-icon="attach_file" | 236 | append-icon="attach_file" |
| 237 | ></v-text-field> | 237 | ></v-text-field> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | </v-layout> | 239 | </v-layout> |
| 240 | </v-flex> | 240 | </v-flex> |
| 241 | </v-layout> | 241 | </v-layout> |
| 242 | <v-layout> | 242 | <v-layout> |
| 243 | <v-flex xs12 sm4> | 243 | <v-flex xs12 sm4> |
| 244 | <v-layout> | 244 | <v-layout> |
| 245 | <v-flex xs4 class="pt-4 subheading"> | 245 | <v-flex xs4 class="pt-4 subheading"> |
| 246 | <label class="right hidden-xs-only hidden-sm-only">School Details:</label> | 246 | <label class="right hidden-xs-only hidden-sm-only">School Details:</label> |
| 247 | <label | 247 | <label |
| 248 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 248 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 249 | >SchoolDetail:</label> | 249 | >SchoolDetail:</label> |
| 250 | </v-flex> | 250 | </v-flex> |
| 251 | <v-flex xs8 class="ml-3"> | 251 | <v-flex xs8 class="ml-3"> |
| 252 | <v-text-field | 252 | <v-text-field |
| 253 | v-model="editedItem.schoolDetails" | 253 | v-model="editedItem.schoolDetails" |
| 254 | placeholder="fill your School Details" | 254 | placeholder="fill your School Details" |
| 255 | ></v-text-field> | 255 | ></v-text-field> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | </v-layout> | 257 | </v-layout> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | <v-flex xs12 sm4> | 259 | <v-flex xs12 sm4> |
| 260 | <v-layout> | 260 | <v-layout> |
| 261 | <v-flex xs4 class="pt-4 subheading"> | 261 | <v-flex xs4 class="pt-4 subheading"> |
| 262 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> | 262 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> |
| 263 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> | 263 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | <v-flex xs8 class="ml-3"> | 265 | <v-flex xs8 class="ml-3"> |
| 266 | <v-text-field | 266 | <v-text-field |
| 267 | v-model="editedItem.establishmentYear" | 267 | v-model="editedItem.establishmentYear" |
| 268 | placeholder="fill your Academic Year" | 268 | placeholder="fill your Academic Year" |
| 269 | ></v-text-field> | 269 | ></v-text-field> |
| 270 | </v-flex> | 270 | </v-flex> |
| 271 | </v-layout> | 271 | </v-layout> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | <v-flex xs12 sm4> | 273 | <v-flex xs12 sm4> |
| 274 | <v-layout> | 274 | <v-layout> |
| 275 | <v-flex xs4 class="pt-4 subheading"> | 275 | <v-flex xs4 class="pt-4 subheading"> |
| 276 | <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label> | 276 | <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label> |
| 277 | <label | 277 | <label |
| 278 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 278 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 279 | >WebSiteUrl:</label> | 279 | >WebSiteUrl:</label> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs8 class="ml-3"> | 281 | <v-flex xs8 class="ml-3"> |
| 282 | <v-text-field | 282 | <v-text-field |
| 283 | v-model="editedItem.websiteUrl" | 283 | v-model="editedItem.websiteUrl" |
| 284 | placeholder="fill your MobileNo" | 284 | placeholder="fill your MobileNo" |
| 285 | ></v-text-field> | 285 | ></v-text-field> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-layout> | 290 | <v-layout> |
| 291 | <v-flex xs12 sm4> | 291 | <v-flex xs12 sm4> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs4 class="pt-4 subheading"> | 293 | <v-flex xs4 class="pt-4 subheading"> |
| 294 | <label class="right">Address:</label> | 294 | <label class="right">Address:</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs8 class="ml-3"> | 296 | <v-flex xs8 class="ml-3"> |
| 297 | <v-text-field | 297 | <v-text-field |
| 298 | v-model="editedItem.address" | 298 | v-model="editedItem.address" |
| 299 | placeholder="Select your Address" | 299 | placeholder="Select your Address" |
| 300 | ></v-text-field> | 300 | ></v-text-field> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | </v-layout> | 304 | </v-layout> |
| 305 | <v-layout> | 305 | <v-layout> |
| 306 | <v-flex xs12 sm12> | 306 | <v-flex xs12 sm12> |
| 307 | <v-layout> | 307 | <v-layout> |
| 308 | <v-flex xs6> | 308 | <v-flex xs6> |
| 309 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> | 309 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | <v-flex xs6> | 311 | <v-flex xs6> |
| 312 | <v-btn | 312 | <v-btn |
| 313 | @click="save" | 313 | @click="save" |
| 314 | round | 314 | round |
| 315 | dark | 315 | dark |
| 316 | :loading="loading" | 316 | :loading="loading" |
| 317 | class="right add-button" | 317 | class="right add-button" |
| 318 | >Save</v-btn> | 318 | >Save</v-btn> |
| 319 | </v-flex> | 319 | </v-flex> |
| 320 | </v-layout> | 320 | </v-layout> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | </v-layout> | 322 | </v-layout> |
| 323 | </v-container> | 323 | </v-container> |
| 324 | </v-form> | 324 | </v-form> |
| 325 | </v-card-text> | 325 | </v-card-text> |
| 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="success" | 334 | color="success" |
| 335 | >{{ text }}</v-snackbar> | 335 | >{{ text }}</v-snackbar> |
| 336 | 336 | ||
| 337 | <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> | 337 | <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> |
| 338 | <v-data-table | 338 | <v-data-table |
| 339 | :headers="headers" | 339 | :headers="headers" |
| 340 | :items="schoolList" | 340 | :items="schoolList" |
| 341 | :pagination.sync="pagination" | 341 | :pagination.sync="pagination" |
| 342 | :search="search" | 342 | :search="search" |
| 343 | > | 343 | > |
| 344 | <template slot="items" slot-scope="props"> | 344 | <template slot="items" slot-scope="props"> |
| 345 | <tr class="tr"> | 345 | <tr class="tr"> |
| 346 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> | 346 | <td class="td td-row text-xs-center">{{ props.index + 1}}</td> |
| 347 | <td class="td td-row text-xs-center"> | 347 | <td class="td td-row text-xs-center"> |
| 348 | <v-avatar> | 348 | <v-avatar> |
| 349 | <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" /> | 349 | <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" /> |
| 350 | <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" /> | 350 | <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" /> |
| 351 | </v-avatar> | 351 | </v-avatar> |
| 352 | </td> | 352 | </td> |
| 353 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 353 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 354 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 354 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 355 | <td class="td td-row text-xs-center">{{ props.item.city }}</td> | 355 | <td class="td td-row text-xs-center">{{ props.item.city }}</td> |
| 356 | <td class="td td-row text-xs-center">{{ props.item.state }}</td> | 356 | <td class="td td-row text-xs-center">{{ props.item.state }}</td> |
| 357 | <td class="td td-row text-xs-center">{{ props.item.mobile}}</td> | 357 | <td class="td td-row text-xs-center">{{ props.item.mobile}}</td> |
| 358 | <td class="td td-row text-xs-center"> | 358 | <td class="td td-row text-xs-center"> |
| 359 | <v-switch | 359 | <v-switch |
| 360 | class="pl-3" | 360 | class="pl-3" |
| 361 | v-model="props.item.status" | 361 | v-model="props.item.status" |
| 362 | @change="suspendSchoolStatus(props.item.status,props.item._id)" | 362 | @change="suspendSchoolStatus(props.item.status,props.item._id)" |
| 363 | ></v-switch> | 363 | ></v-switch> |
| 364 | </td> | 364 | </td> |
| 365 | <td class="td td-row text-xs-center"> | 365 | <td class="td td-row text-xs-center"> |
| 366 | <span> | 366 | <span> |
| 367 | <!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> --> | 367 | <!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> --> |
| 368 | <v-tooltip top> | 368 | <v-tooltip top> |
| 369 | <img | 369 | <img |
| 370 | slot="activator" | 370 | slot="activator" |
| 371 | style="cursor:pointer; width:25px; height:18px; " | 371 | style="cursor:pointer; width:25px; height:18px; " |
| 372 | class="mr5" | 372 | class="mr5" |
| 373 | src="/static/icon/eye1.png" | 373 | src="/static/icon/eye1.png" |
| 374 | @click="adminAccess(props.item)" | 374 | @click="adminAccess(props.item)" |
| 375 | /> | 375 | /> |
| 376 | <span>View</span> | 376 | <span>View</span> |
| 377 | </v-tooltip> | 377 | </v-tooltip> |
| 378 | <!-- </router-link> --> | 378 | <!-- </router-link> --> |
| 379 | <v-tooltip top> | 379 | <v-tooltip top> |
| 380 | <img | 380 | <img |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | style="cursor:pointer; width:20px; height:18px; " | 382 | style="cursor:pointer; width:20px; height:18px; " |
| 383 | class="mr5" | 383 | class="mr5" |
| 384 | @click="editItem(props.item)" | 384 | @click="editItem(props.item)" |
| 385 | src="/static/icon/edit1.png" | 385 | src="/static/icon/edit1.png" |
| 386 | /> | 386 | /> |
| 387 | <span>Edit</span> | 387 | <span>Edit</span> |
| 388 | </v-tooltip> | 388 | </v-tooltip> |
| 389 | </span> | 389 | </span> |
| 390 | </td> | 390 | </td> |
| 391 | </tr> | 391 | </tr> |
| 392 | </template> | 392 | </template> |
| 393 | <v-alert | 393 | <v-alert |
| 394 | slot="no-results" | 394 | slot="no-results" |
| 395 | :value="true" | 395 | :value="true" |
| 396 | color="error" | 396 | color="error" |
| 397 | icon="warning" | 397 | icon="warning" |
| 398 | >Your search for "{{ search }}" found no results.</v-alert> | 398 | >Your search for "{{ search }}" found no results.</v-alert> |
| 399 | </v-data-table> | 399 | </v-data-table> |
| 400 | </v-tab-item> | 400 | </v-tab-item> |
| 401 | 401 | ||
| 402 | <!-- ****** ADD STUDENTS DETAILS****** --> | 402 | <!-- ****** ADD STUDENTS DETAILS****** --> |
| 403 | <v-tab-item> | 403 | <v-tab-item> |
| 404 | <v-container fluid> | 404 | <v-container fluid> |
| 405 | <v-layout align-center justify-center fill-height> | 405 | <v-layout align-center justify-center fill-height> |
| 406 | <v-flex xs12 sm12 md10 lg11> | 406 | <v-flex xs12 sm12 md10 lg11> |
| 407 | <!-- <v-container fluid> --> | 407 | <!-- <v-container fluid> --> |
| 408 | <v-snackbar | 408 | <v-snackbar |
| 409 | :timeout="timeout" | 409 | :timeout="timeout" |
| 410 | :top="y === 'top'" | 410 | :top="y === 'top'" |
| 411 | :right="x === 'right'" | 411 | :right="x === 'right'" |
| 412 | :vertical="mode === 'vertical'" | 412 | :vertical="mode === 'vertical'" |
| 413 | v-model="snackbar" | 413 | v-model="snackbar" |
| 414 | color="success" | 414 | color="success" |
| 415 | >{{ text }}</v-snackbar> | 415 | >{{ text }}</v-snackbar> |
| 416 | <v-flex xs12 sm12> | 416 | <v-flex xs12 sm12> |
| 417 | <v-form ref="form" v-model="valid" lazy-validation> | 417 | <v-form ref="form" v-model="valid" lazy-validation> |
| 418 | <v-layout> | 418 | <v-layout> |
| 419 | <v-flex | 419 | <v-flex |
| 420 | xs12 | 420 | xs12 |
| 421 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 421 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 422 | > | 422 | > |
| 423 | <v-avatar size="100px"> | 423 | <v-avatar size="100px"> |
| 424 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 424 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 425 | </v-avatar> | 425 | </v-avatar> |
| 426 | <input | 426 | <input |
| 427 | type="file" | 427 | type="file" |
| 428 | style="display: none" | 428 | style="display: none" |
| 429 | ref="image" | 429 | ref="image" |
| 430 | accept="image/*" | 430 | accept="image/*" |
| 431 | @change="onFilePicked" | 431 | @change="onFilePicked" |
| 432 | /> | 432 | /> |
| 433 | <img | 433 | <img |
| 434 | :src="imageData.imageUrl" | 434 | :src="imageData.imageUrl" |
| 435 | height="150" | 435 | height="150" |
| 436 | v-if="imageUrl" | 436 | v-if="imageUrl" |
| 437 | style="border-radius:50%; width:200px" | 437 | style="border-radius:50%; width:200px" |
| 438 | /> | 438 | /> |
| 439 | </v-flex> | 439 | </v-flex> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | <v-layout wrap> | 441 | <v-layout wrap> |
| 442 | <v-flex xs12 sm6> | 442 | <v-flex xs12 sm6> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs4 sm4 class="pt-4 subheading"> | 444 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 445 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 445 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 446 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | <v-flex xs8 sm8 class="ml-3"> | 448 | <v-flex xs8 sm8 class="ml-3"> |
| 449 | <v-text-field | 449 | <v-text-field |
| 450 | v-model="addSchool.name" | 450 | v-model="addSchool.name" |
| 451 | placeholder="fill your full Name" | 451 | placeholder="fill your full Name" |
| 452 | name="name" | 452 | name="name" |
| 453 | type="text" | 453 | type="text" |
| 454 | :rules="nameRules" | 454 | :rules="nameRules" |
| 455 | required | 455 | required |
| 456 | ></v-text-field> | 456 | ></v-text-field> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | </v-flex> | 459 | </v-flex> |
| 460 | <v-flex xs12 sm6> | 460 | <v-flex xs12 sm6> |
| 461 | <v-layout> | 461 | <v-layout> |
| 462 | <v-flex xs4 sm4 class="pt-4 subheading"> | 462 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 463 | <label class="right">Email ID:</label> | 463 | <label class="right">Email ID:</label> |
| 464 | </v-flex> | 464 | </v-flex> |
| 465 | <v-flex xs8 sm8 class="ml-3"> | 465 | <v-flex xs8 sm8 class="ml-3"> |
| 466 | <v-text-field | 466 | <v-text-field |
| 467 | placeholder="fill your email" | 467 | placeholder="fill your email" |
| 468 | :rules="emailRules" | 468 | :rules="emailRules" |
| 469 | v-model="addSchool.email" | 469 | v-model="addSchool.email" |
| 470 | type="text" | 470 | type="text" |
| 471 | required | 471 | required |
| 472 | ></v-text-field> | 472 | ></v-text-field> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | </v-flex> | 475 | </v-flex> |
| 476 | </v-layout> | 476 | </v-layout> |
| 477 | <v-layout wrap> | 477 | <v-layout wrap> |
| 478 | <v-flex xs12 sm6> | 478 | <v-flex xs12 sm6> |
| 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 hidden-sm-only hidden-xs-only">Society Name:</label> | 481 | <label class="right hidden-sm-only hidden-xs-only">Society Name:</label> |
| 482 | <label | 482 | <label |
| 483 | class="right hidden-lg-only hidden-xl-only hidden-md-only" | 483 | class="right hidden-lg-only hidden-xl-only hidden-md-only" |
| 484 | >SocietyName:</label> | 484 | >SocietyName:</label> |
| 485 | </v-flex> | 485 | </v-flex> |
| 486 | <v-flex xs8 sm8 class="ml-3"> | 486 | <v-flex xs8 sm8 class="ml-3"> |
| 487 | <v-text-field | 487 | <v-text-field |
| 488 | v-model="addSchool.societyName" | 488 | v-model="addSchool.societyName" |
| 489 | placeholder="fill your Society Name" | 489 | placeholder="fill your Society Name" |
| 490 | required | 490 | required |
| 491 | ></v-text-field> | 491 | ></v-text-field> |
| 492 | </v-flex> | 492 | </v-flex> |
| 493 | </v-layout> | 493 | </v-layout> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | <v-flex xs12 sm6> | 495 | <v-flex xs12 sm6> |
| 496 | <v-layout> | 496 | <v-layout> |
| 497 | <v-flex xs4 class="pt-4 subheading"> | 497 | <v-flex xs4 class="pt-4 subheading"> |
| 498 | <label class="right">City:</label> | 498 | <label class="right">City:</label> |
| 499 | </v-flex> | 499 | </v-flex> |
| 500 | <v-flex xs8 class="ml-3"> | 500 | <v-flex xs8 class="ml-3"> |
| 501 | <v-text-field | 501 | <v-text-field |
| 502 | v-model="addSchool.city" | 502 | v-model="addSchool.city" |
| 503 | placeholder="fill your City Name" | 503 | placeholder="fill your City Name" |
| 504 | name="City" | 504 | name="City" |
| 505 | type="text" | 505 | type="text" |
| 506 | :rules="cityRules" | 506 | :rules="cityRules" |
| 507 | required | 507 | required |
| 508 | ></v-text-field> | 508 | ></v-text-field> |
| 509 | </v-flex> | 509 | </v-flex> |
| 510 | </v-layout> | 510 | </v-layout> |
| 511 | </v-flex> | 511 | </v-flex> |
| 512 | </v-layout> | 512 | </v-layout> |
| 513 | <v-layout wrap> | 513 | <v-layout wrap> |
| 514 | <v-flex xs12 sm6> | 514 | <v-flex xs12 sm6> |
| 515 | <v-layout> | 515 | <v-layout> |
| 516 | <v-flex xs4 class="pt-4 subheading"> | 516 | <v-flex xs4 class="pt-4 subheading"> |
| 517 | <label class="right">State:</label> | 517 | <label class="right">State:</label> |
| 518 | </v-flex> | 518 | </v-flex> |
| 519 | <v-flex xs8 class="ml-3"> | 519 | <v-flex xs8 class="ml-3"> |
| 520 | <v-text-field | 520 | <v-text-field |
| 521 | v-model="addSchool.state" | 521 | v-model="addSchool.state" |
| 522 | placeholder="fill your State Name" | 522 | placeholder="fill your State Name" |
| 523 | name="state" | 523 | name="state" |
| 524 | type="text" | 524 | type="text" |
| 525 | :rules="stateRules" | 525 | :rules="stateRules" |
| 526 | required | 526 | required |
| 527 | ></v-text-field> | 527 | ></v-text-field> |
| 528 | </v-flex> | 528 | </v-flex> |
| 529 | </v-layout> | 529 | </v-layout> |
| 530 | </v-flex> | 530 | </v-flex> |
| 531 | <v-flex xs12 sm6> | 531 | <v-flex xs12 sm6> |
| 532 | <v-layout> | 532 | <v-layout> |
| 533 | <v-flex xs4 class="pt-4 subheading"> | 533 | <v-flex xs4 class="pt-4 subheading"> |
| 534 | <label class="right">Pincode:</label> | 534 | <label class="right">Pincode:</label> |
| 535 | </v-flex> | 535 | </v-flex> |
| 536 | <v-flex xs8 class="ml-3"> | 536 | <v-flex xs8 class="ml-3"> |
| 537 | <v-text-field | 537 | <v-text-field |
| 538 | v-model="addSchool.pinCode" | 538 | v-model="addSchool.pinCode" |
| 539 | placeholder="fill your pincode" | 539 | placeholder="fill your pincode" |
| 540 | name="pincode" | 540 | name="pincode" |
| 541 | type="number" | 541 | type="number" |
| 542 | :rules="pincode" | 542 | :rules="pincode" |
| 543 | required | 543 | required |
| 544 | ></v-text-field> | 544 | ></v-text-field> |
| 545 | </v-flex> | 545 | </v-flex> |
| 546 | </v-layout> | 546 | </v-layout> |
| 547 | </v-flex> | 547 | </v-flex> |
| 548 | </v-layout> | 548 | </v-layout> |
| 549 | <v-layout wrap> | 549 | <v-layout wrap> |
| 550 | <v-flex xs12 sm6> | 550 | <v-flex xs12 sm6> |
| 551 | <v-layout> | 551 | <v-layout> |
| 552 | <v-flex xs4 class="pt-4 subheading"> | 552 | <v-flex xs4 class="pt-4 subheading"> |
| 553 | <label class="right">Fax No:</label> | 553 | <label class="right">Fax No:</label> |
| 554 | </v-flex> | 554 | </v-flex> |
| 555 | <v-flex xs8 class="ml-3"> | 555 | <v-flex xs8 class="ml-3"> |
| 556 | <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field> | 556 | <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field> |
| 557 | </v-flex> | 557 | </v-flex> |
| 558 | </v-layout> | 558 | </v-layout> |
| 559 | </v-flex> | 559 | </v-flex> |
| 560 | <v-flex xs12 sm6> | 560 | <v-flex xs12 sm6> |
| 561 | <v-layout> | 561 | <v-layout> |
| 562 | <v-flex xs4 class="pt-4 subheading"> | 562 | <v-flex xs4 class="pt-4 subheading"> |
| 563 | <label class="right hidden-xs-only hidden-sm-only">Country:</label> | 563 | <label class="right hidden-xs-only hidden-sm-only">Country:</label> |
| 564 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 564 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 565 | </v-flex> | 565 | </v-flex> |
| 566 | <v-flex xs8 class="ml-3"> | 566 | <v-flex xs8 class="ml-3"> |
| 567 | <v-autocomplete | 567 | <v-autocomplete |
| 568 | v-model="addSchool.country" | 568 | v-model="addSchool.country" |
| 569 | :items="countries" | 569 | :items="countries" |
| 570 | :rules="country" | 570 | :rules="country" |
| 571 | placeholder="Select Country Name" | 571 | placeholder="Select Country Name" |
| 572 | required | 572 | required |
| 573 | ></v-autocomplete> | 573 | ></v-autocomplete> |
| 574 | </v-flex> | 574 | </v-flex> |
| 575 | </v-layout> | 575 | </v-layout> |
| 576 | </v-flex> | 576 | </v-flex> |
| 577 | </v-layout> | 577 | </v-layout> |
| 578 | <v-layout wrap> | 578 | <v-layout wrap> |
| 579 | <v-flex xs12 sm6> | 579 | <v-flex xs12 sm6> |
| 580 | <v-layout> | 580 | <v-layout> |
| 581 | <v-flex xs4 class="pt-4 subheading"> | 581 | <v-flex xs4 class="pt-4 subheading"> |
| 582 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 582 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 583 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 583 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 584 | </v-flex> | 584 | </v-flex> |
| 585 | <v-flex xs8 class="ml-3"> | 585 | <v-flex xs8 class="ml-3"> |
| 586 | <v-text-field | 586 | <v-text-field |
| 587 | v-model="addSchool.mobile" | 587 | v-model="addSchool.mobile" |
| 588 | placeholder="fill your Mobile No" | 588 | placeholder="fill your Mobile No" |
| 589 | name="mobileNo" | 589 | name="mobileNo" |
| 590 | type="number" | 590 | type="number" |
| 591 | :rules="mobileNoRules" | 591 | :rules="mobileNoRules" |
| 592 | required | 592 | required |
| 593 | ></v-text-field> | 593 | ></v-text-field> |
| 594 | </v-flex> | 594 | </v-flex> |
| 595 | </v-layout> | 595 | </v-layout> |
| 596 | </v-flex> | 596 | </v-flex> |
| 597 | <v-flex xs12 sm6> | 597 | <v-flex xs12 sm6> |
| 598 | <v-layout> | 598 | <v-layout> |
| 599 | <v-flex xs4 class="pt-4 subheading"> | 599 | <v-flex xs4 class="pt-4 subheading"> |
| 600 | <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> | 600 | <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> |
| 601 | <label | 601 | <label |
| 602 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 602 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 603 | >LandLineNo:</label> | 603 | >LandLineNo:</label> |
| 604 | </v-flex> | 604 | </v-flex> |
| 605 | <v-flex xs8 class="ml-3"> | 605 | <v-flex xs8 class="ml-3"> |
| 606 | <v-text-field | 606 | <v-text-field |
| 607 | v-model="addSchool.landLineNo" | 607 | v-model="addSchool.landLineNo" |
| 608 | :items="countries" | 608 | :items="countries" |
| 609 | placeholder="fill your LandLine No" | 609 | placeholder="fill your LandLine No" |
| 610 | type="number" | 610 | type="number" |
| 611 | required | 611 | required |
| 612 | ></v-text-field> | 612 | ></v-text-field> |
| 613 | </v-flex> | 613 | </v-flex> |
| 614 | </v-layout> | 614 | </v-layout> |
| 615 | </v-flex> | 615 | </v-flex> |
| 616 | </v-layout> | 616 | </v-layout> |
| 617 | <v-layout wrap> | 617 | <v-layout wrap> |
| 618 | <v-flex xs12 sm6> | 618 | <v-flex xs12 sm6> |
| 619 | <v-layout> | 619 | <v-layout> |
| 620 | <v-flex xs4 class="pt-4 subheading"> | 620 | <v-flex xs4 class="pt-4 subheading"> |
| 621 | <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> | 621 | <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> |
| 622 | <label | 622 | <label |
| 623 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 623 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 624 | >Registration-No:</label> | 624 | >Registration-No:</label> |
| 625 | </v-flex> | 625 | </v-flex> |
| 626 | <v-flex xs8 class="ml-3"> | 626 | <v-flex xs8 class="ml-3"> |
| 627 | <v-text-field | 627 | <v-text-field |
| 628 | v-model="addSchool.registrationNo" | 628 | v-model="addSchool.registrationNo" |
| 629 | placeholder="Fill your Registration No" | 629 | placeholder="Fill your Registration No" |
| 630 | required | 630 | required |
| 631 | ></v-text-field> | 631 | ></v-text-field> |
| 632 | </v-flex> | 632 | </v-flex> |
| 633 | </v-layout> | 633 | </v-layout> |
| 634 | </v-flex> | 634 | </v-flex> |
| 635 | <v-flex xs12 sm6> | 635 | <v-flex xs12 sm6> |
| 636 | <v-layout> | 636 | <v-layout> |
| 637 | <v-flex xs4 class="pt-4 subheading"> | 637 | <v-flex xs4 class="pt-4 subheading"> |
| 638 | <label class="right hidden-xs-only hidden-sm-only">School Details:</label> | 638 | <label class="right hidden-xs-only hidden-sm-only">School Details:</label> |
| 639 | <label | 639 | <label |
| 640 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 640 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 641 | >SchoolDetails:</label> | 641 | >SchoolDetails:</label> |
| 642 | </v-flex> | 642 | </v-flex> |
| 643 | <v-flex xs8 class="ml-3"> | 643 | <v-flex xs8 class="ml-3"> |
| 644 | <v-text-field | 644 | <v-text-field |
| 645 | v-model="addSchool.schoolDetails" | 645 | v-model="addSchool.schoolDetails" |
| 646 | placeholder="Fill your School Details" | 646 | placeholder="Fill your School Details" |
| 647 | :rules="schoolDetailRule" | 647 | :rules="schoolDetailRule" |
| 648 | required | 648 | required |
| 649 | ></v-text-field> | 649 | ></v-text-field> |
| 650 | </v-flex> | 650 | </v-flex> |
| 651 | </v-layout> | 651 | </v-layout> |
| 652 | </v-flex> | 652 | </v-flex> |
| 653 | </v-layout> | 653 | </v-layout> |
| 654 | <v-layout wrap> | 654 | <v-layout wrap> |
| 655 | <v-flex xs12 sm6> | 655 | <v-flex xs12 sm6> |
| 656 | <v-layout> | 656 | <v-layout> |
| 657 | <v-flex xs4 class="pt-4 subheading"> | 657 | <v-flex xs4 class="pt-4 subheading"> |
| 658 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 658 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 659 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 659 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 660 | </v-flex> | 660 | </v-flex> |
| 661 | <v-flex xs8 class="ml-3"> | 661 | <v-flex xs8 class="ml-3"> |
| 662 | <v-text-field | 662 | <v-text-field |
| 663 | label="Select Image" | 663 | label="Select Image" |
| 664 | @click="pickFile" | 664 | @click="pickFile" |
| 665 | v-model="imageName" | 665 | v-model="imageName" |
| 666 | append-icon="attach_file" | 666 | append-icon="attach_file" |
| 667 | ></v-text-field> | 667 | ></v-text-field> |
| 668 | </v-flex> | 668 | </v-flex> |
| 669 | </v-layout> | 669 | </v-layout> |
| 670 | </v-flex> | 670 | </v-flex> |
| 671 | <v-flex xs12 sm6> | 671 | <v-flex xs12 sm6> |
| 672 | <v-layout> | 672 | <v-layout> |
| 673 | <v-flex xs4 class="pt-4 subheading"> | 673 | <v-flex xs4 class="pt-4 subheading"> |
| 674 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> | 674 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> |
| 675 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> | 675 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> |
| 676 | </v-flex> | 676 | </v-flex> |
| 677 | <v-flex xs8 class="ml-3"> | 677 | <v-flex xs8 class="ml-3"> |
| 678 | <v-text-field | 678 | <v-text-field |
| 679 | v-model="addSchool.establishmentYear" | 679 | v-model="addSchool.establishmentYear" |
| 680 | placeholder="fill your Academic Year" | 680 | placeholder="fill your Academic Year" |
| 681 | :rules="establishmentYearRules" | 681 | :rules="establishmentYearRules" |
| 682 | required | 682 | required |
| 683 | ></v-text-field> | 683 | ></v-text-field> |
| 684 | </v-flex> | 684 | </v-flex> |
| 685 | </v-layout> | 685 | </v-layout> |
| 686 | </v-flex> | 686 | </v-flex> |
| 687 | </v-layout> | 687 | </v-layout> |
| 688 | <v-layout wrap> | 688 | <v-layout wrap> |
| 689 | <v-flex xs12 sm6> | 689 | <v-flex xs12 sm6> |
| 690 | <v-layout> | 690 | <v-layout> |
| 691 | <v-flex xs4 sm4 class="pt-4 subheading"> | 691 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 692 | <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label> | 692 | <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label> |
| 693 | <label | 693 | <label |
| 694 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 694 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 695 | >WebSiteUrl:</label> | 695 | >WebSiteUrl:</label> |
| 696 | </v-flex> | 696 | </v-flex> |
| 697 | <v-flex xs8 sm8 class="ml-3"> | 697 | <v-flex xs8 sm8 class="ml-3"> |
| 698 | <v-text-field | 698 | <v-text-field |
| 699 | name="input-4-3" | 699 | name="input-4-3" |
| 700 | v-model="addSchool.websiteUrl" | 700 | v-model="addSchool.websiteUrl" |
| 701 | placeholder="fill Your WebSite Url" | 701 | placeholder="fill Your WebSite Url" |
| 702 | required | 702 | required |
| 703 | ></v-text-field> | 703 | ></v-text-field> |
| 704 | </v-flex> | 704 | </v-flex> |
| 705 | </v-layout> | 705 | </v-layout> |
| 706 | </v-flex> | 706 | </v-flex> |
| 707 | <v-flex xs12 sm6> | 707 | <v-flex xs12 sm6> |
| 708 | <v-layout> | 708 | <v-layout> |
| 709 | <v-flex xs4 sm4 class="pt-4 subheading"> | 709 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 710 | <label class="right">Address:</label> | 710 | <label class="right">Address:</label> |
| 711 | </v-flex> | 711 | </v-flex> |
| 712 | <v-flex xs8 sm8 class="ml-3"> | 712 | <v-flex xs8 sm8 class="ml-3"> |
| 713 | <v-text-field | 713 | <v-text-field |
| 714 | name="input-4-3" | 714 | name="input-4-3" |
| 715 | v-model="addSchool.address" | 715 | v-model="addSchool.address" |
| 716 | :rules="presentAddress" | 716 | :rules="presentAddress" |
| 717 | placeholder="fill Your Address" | 717 | placeholder="fill Your Address" |
| 718 | required | 718 | required |
| 719 | ></v-text-field> | 719 | ></v-text-field> |
| 720 | </v-flex> | 720 | </v-flex> |
| 721 | </v-layout> | 721 | </v-layout> |
| 722 | </v-flex> | 722 | </v-flex> |
| 723 | </v-layout> | 723 | </v-layout> |
| 724 | <v-layout> | 724 | <v-layout> |
| 725 | <v-flex xs12 sm11 offset-md1> | 725 | <v-flex xs12 sm11 offset-md1> |
| 726 | <v-layout> | 726 | <v-layout> |
| 727 | <v-flex xs6> | 727 | <v-flex xs6> |
| 728 | <v-btn round dark @click="clear()" class="clear-button">Clear</v-btn> | 728 | <v-btn round dark @click="clear()" class="clear-button">Clear</v-btn> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | <v-flex xs6> | 730 | <v-flex xs6> |
| 731 | <v-btn | 731 | <v-btn |
| 732 | @click="submit" | 732 | @click="submit" |
| 733 | round | 733 | round |
| 734 | dark | 734 | dark |
| 735 | :loading="loading" | 735 | :loading="loading" |
| 736 | class="right add-button" | 736 | class="right add-button" |
| 737 | >Add</v-btn> | 737 | >Add</v-btn> |
| 738 | </v-flex> | 738 | </v-flex> |
| 739 | </v-layout> | 739 | </v-layout> |
| 740 | </v-flex> | 740 | </v-flex> |
| 741 | </v-layout> | 741 | </v-layout> |
| 742 | </v-form> | 742 | </v-form> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | </v-flex> | 744 | </v-flex> |
| 745 | </v-layout> | 745 | </v-layout> |
| 746 | </v-container> | 746 | </v-container> |
| 747 | </v-tab-item> | 747 | </v-tab-item> |
| 748 | </v-tabs> | 748 | </v-tabs> |
| 749 | <div class="loader" v-if="showLoader"> | 749 | <div class="loader" v-if="showLoader"> |
| 750 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 750 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 751 | </div> | 751 | </div> |
| 752 | </div> | 752 | </div> |
| 753 | </template> | 753 | </template> |
| 754 | 754 | ||
| 755 | <script> | 755 | <script> |
| 756 | import http from "@/Services/http.js"; | 756 | import http from "@/Services/http.js"; |
| 757 | import moment from "moment"; | 757 | import moment from "moment"; |
| 758 | import countryList from "@/script/country.js"; | 758 | import countryList from "@/script/country.js"; |
| 759 | 759 | ||
| 760 | export default { | 760 | export default { |
| 761 | data: () => ({ | 761 | data: () => ({ |
| 762 | e2: 0, | 762 | e2: 0, |
| 763 | snackbar: false, | 763 | snackbar: false, |
| 764 | y: "top", | 764 | y: "top", |
| 765 | x: "right", | 765 | x: "right", |
| 766 | mode: "", | 766 | mode: "", |
| 767 | timeout: 3000, | 767 | timeout: 3000, |
| 768 | text: "", | 768 | text: "", |
| 769 | showLoader: false, | 769 | showLoader: false, |
| 770 | loading: false, | 770 | loading: false, |
| 771 | date: null, | 771 | date: null, |
| 772 | search: "", | 772 | search: "", |
| 773 | menu: false, | 773 | menu: false, |
| 774 | menu1: false, | 774 | menu1: false, |
| 775 | dialog: false, | 775 | dialog: false, |
| 776 | valid: true, | 776 | valid: true, |
| 777 | isActive: true, | 777 | isActive: true, |
| 778 | newActive: false, | 778 | newActive: false, |
| 779 | pagination: { | 779 | pagination: { |
| 780 | rowsPerPage: 15, | 780 | rowsPerPage: 15, |
| 781 | }, | 781 | }, |
| 782 | imageData: {}, | 782 | imageData: {}, |
| 783 | imageName: "", | 783 | imageName: "", |
| 784 | imageUrl: "", | 784 | imageUrl: "", |
| 785 | imageFile: "", | 785 | imageFile: "", |
| 786 | nameRules: [(v) => !!v || "Full Name is required"], | 786 | nameRules: [(v) => !!v || "Full Name is required"], |
| 787 | dateRules: [(v) => !!v || "DOB is required"], | 787 | dateRules: [(v) => !!v || "DOB is required"], |
| 788 | cityRules: [(v) => !!v || "City Name is required"], | 788 | cityRules: [(v) => !!v || "City Name is required"], |
| 789 | pincode: [(v) => !!v || " Pincode is required"], | 789 | pincode: [(v) => !!v || " Pincode is required"], |
| 790 | country: [(v) => !!v || " Country Name is required"], | 790 | country: [(v) => !!v || " Country Name is required"], |
| 791 | permanentAddress: [(v) => !!v || " Permanent Address is requiclearred"], | 791 | permanentAddress: [(v) => !!v || " Permanent Address is requiclearred"], |
| 792 | presentAddress: [(v) => !!v || " Present Address is required"], | 792 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 793 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], | 793 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], |
| 794 | stateRules: [(v) => !!v || "State Name is required"], | 794 | stateRules: [(v) => !!v || "State Name is required"], |
| 795 | schoolDetailRule: [(v) => !!v || "school Detail is required"], | 795 | schoolDetailRule: [(v) => !!v || "school Detail is required"], |
| 796 | sectionRules: [(v) => !!v || " Section Name is required"], | 796 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 797 | genderRules: [(v) => !!v || " Select Gender is required"], | 797 | genderRules: [(v) => !!v || " Select Gender is required"], |
| 798 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], | 798 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], |
| 799 | errorMessages: "", | 799 | errorMessages: "", |
| 800 | emailRules: [ | 800 | emailRules: [ |
| 801 | (v) => !!v || "E-mail is required", | 801 | (v) => !!v || "E-mail is required", |
| 802 | (v) => | 802 | (v) => |
| 803 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 803 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 804 | "E-mail must be valid", | 804 | "E-mail must be valid", |
| 805 | ], | 805 | ], |
| 806 | countries: [], | 806 | countries: [], |
| 807 | headers: [ | 807 | headers: [ |
| 808 | { | 808 | { |
| 809 | text: "No.", | 809 | text: "No.", |
| 810 | align: "center", | 810 | align: "center", |
| 811 | sortable: false, | 811 | sortable: false, |
| 812 | value: "rollNo", | 812 | value: "rollNo", |
| 813 | }, | 813 | }, |
| 814 | { | 814 | { |
| 815 | text: "school Logo", | 815 | text: "school Logo", |
| 816 | value: "schoolLogoUrl", | 816 | value: "schoolLogoUrl", |
| 817 | sortable: false, | 817 | sortable: false, |
| 818 | align: "center", | 818 | align: "center", |
| 819 | }, | 819 | }, |
| 820 | { text: "Name", value: "name", sortable: false, align: "center" }, | 820 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 821 | { text: "Email", value: "email", sortable: false, align: "center" }, | 821 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 822 | { text: "City", value: "city", sortable: false, align: "center" }, | 822 | { text: "City", value: "city", sortable: false, align: "center" }, |
| 823 | { | 823 | { |
| 824 | text: "State", | 824 | text: "State", |
| 825 | value: "state", | 825 | value: "state", |
| 826 | sortable: false, | 826 | sortable: false, |
| 827 | align: "center", | 827 | align: "center", |
| 828 | }, | 828 | }, |
| 829 | { | 829 | { |
| 830 | text: "Mobile", | 830 | text: "Mobile", |
| 831 | value: "mobile", | 831 | value: "mobile", |
| 832 | sortable: false, | 832 | sortable: false, |
| 833 | align: "center", | 833 | align: "center", |
| 834 | }, | 834 | }, |
| 835 | { text: "Action", value: "", sortable: false, align: "center" }, | 835 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 836 | ], | 836 | ], |
| 837 | schoolList: [], | 837 | schoolList: [], |
| 838 | editedIndex: -1, | 838 | editedIndex: -1, |
| 839 | addSchool: { | 839 | addSchool: { |
| 840 | role: "ADMIN", | 840 | role: "ADMIN", |
| 841 | }, | 841 | }, |
| 842 | editedItem: {}, | 842 | editedItem: {}, |
| 843 | schoolToken: {}, | 843 | schoolToken: {}, |
| 844 | }), | 844 | }), |
| 845 | methods: { | 845 | methods: { |
| 846 | getSchool() { | 846 | getSchool() { |
| 847 | this.showLoader = true; | 847 | this.showLoader = true; |
| 848 | http() | 848 | http() |
| 849 | .get("/getSchoolList", { | 849 | .get("/getSchoolList", { |
| 850 | headers: { Authorization: "Bearer " + this.$store.state.schoolToken }, | 850 | headers: { Authorization: "Bearer " + this.$store.state.schoolToken }, |
| 851 | }) | 851 | }) |
| 852 | .then((response) => { | 852 | .then((response) => { |
| 853 | this.schoolList = response.data.data; | 853 | this.schoolList = response.data.data; |
| 854 | this.showLoader = false; | 854 | this.showLoader = false; |
| 855 | }) | 855 | }) |
| 856 | .catch((error) => { | 856 | .catch((error) => { |
| 857 | this.showLoader = false; | 857 | this.showLoader = false; |
| 858 | // if (error.response.status === 401) { | 858 | // if (error.response.status === 401) { |
| 859 | // this.$router.replace({ path: "/" }); | 859 | // this.$router.replace({ path: "/" }); |
| 860 | // this.$store.dispatch("setToken", null); | 860 | // this.$store.dispatch("setToken", null); |
| 861 | // this.$store.dispatch("Id", null); | 861 | // this.$store.dispatch("Id", null); |
| 862 | // this.$store.dispatch("Role", null); | 862 | // this.$store.dispatch("Role", null); |
| 863 | // } | 863 | // } |
| 864 | }); | 864 | }); |
| 865 | }, | 865 | }, |
| 866 | pickFile() { | 866 | pickFile() { |
| 867 | this.$refs.image.click(); | 867 | this.$refs.image.click(); |
| 868 | }, | 868 | }, |
| 869 | dates: function (date) { | 869 | dates: function (date) { |
| 870 | return moment(date).format("MMMM DD, YYYY"); | 870 | return moment(date).format("MMMM DD, YYYY"); |
| 871 | }, | 871 | }, |
| 872 | onFilePicked(e) { | 872 | onFilePicked(e) { |
| 873 | // console.log(e) | 873 | // console.log(e) |
| 874 | const files = e.target.files; | 874 | const files = e.target.files; |
| 875 | this.imageData.upload = e.target.files[0]; | 875 | this.imageData.upload = e.target.files[0]; |
| 876 | if (files[0] !== undefined) { | 876 | if (files[0] !== undefined) { |
| 877 | this.imageName = files[0].name; | 877 | this.imageName = files[0].name; |
| 878 | if (this.imageName.lastIndexOf(".") <= 0) { | 878 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 879 | return; | 879 | return; |
| 880 | } | 880 | } |
| 881 | const fr = new FileReader(); | 881 | const fr = new FileReader(); |
| 882 | fr.readAsDataURL(files[0]); | 882 | fr.readAsDataURL(files[0]); |
| 883 | fr.addEventListener("load", () => { | 883 | fr.addEventListener("load", () => { |
| 884 | this.imageUrl = fr.result; | 884 | this.imageUrl = fr.result; |
| 885 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 885 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 886 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 886 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 887 | }); | 887 | }); |
| 888 | } else { | 888 | } else { |
| 889 | this.imageName = ""; | 889 | this.imageName = ""; |
| 890 | this.imageFile = ""; | 890 | this.imageFile = ""; |
| 891 | this.imageUrl = ""; | 891 | this.imageUrl = ""; |
| 892 | } | 892 | } |
| 893 | }, | 893 | }, |
| 894 | editItem(item) { | 894 | editItem(item) { |
| 895 | this.editedIndex = this.schoolList.indexOf(item); | 895 | this.editedIndex = this.schoolList.indexOf(item); |
| 896 | this.editedItem = Object.assign({}, item); | 896 | this.editedItem = Object.assign({}, item); |
| 897 | this.dialog = true; | 897 | this.dialog = true; |
| 898 | }, | 898 | }, |
| 899 | activeTab(type) { | 899 | activeTab(type) { |
| 900 | switch (type) { | 900 | switch (type) { |
| 901 | case "existing": | 901 | case "existing": |
| 902 | this.newActive = false; | 902 | this.newActive = false; |
| 903 | this.isActive = true; | 903 | this.isActive = true; |
| 904 | break; | 904 | break; |
| 905 | 905 | ||
| 906 | default: | 906 | default: |
| 907 | this.newActive = true; | 907 | this.newActive = true; |
| 908 | this.isActive = false; | 908 | this.isActive = false; |
| 909 | break; | 909 | break; |
| 910 | } | 910 | } |
| 911 | }, | 911 | }, |
| 912 | close() { | 912 | close() { |
| 913 | this.dialog = false; | 913 | this.dialog = false; |
| 914 | setTimeout(() => { | 914 | setTimeout(() => { |
| 915 | this.editedItem = Object.assign({}, this.defaultItem); | 915 | this.editedItem = Object.assign({}, this.defaultItem); |
| 916 | this.editedIndex = -1; | 916 | this.editedIndex = -1; |
| 917 | }, 300); | 917 | }, 300); |
| 918 | }, | 918 | }, |
| 919 | submit() { | 919 | submit() { |
| 920 | if (this.$refs.form.validate()) { | 920 | if (this.$refs.form.validate()) { |
| 921 | if (this.imageUrl) { | 921 | if (this.imageUrl) { |
| 922 | var str = this.imageUrl; | 922 | var str = this.imageUrl; |
| 923 | const [baseUrl, imageUrl] = str.split(/,/); | 923 | const [baseUrl, imageUrl] = str.split(/,/); |
| 924 | this.addSchool.upload = imageUrl; | 924 | this.addSchool.upload = imageUrl; |
| 925 | } | 925 | } |
| 926 | this.loading = true; | 926 | this.loading = true; |
| 927 | http() | 927 | http() |
| 928 | .post("/createSchool", this.addSchool, { | 928 | .post("/createSchool", this.addSchool, { |
| 929 | headers: { Authorization: "Bearer " + this.schoolToken }, | 929 | headers: { Authorization: "Bearer " + this.schoolToken }, |
| 930 | }) | 930 | }) |
| 931 | .then((response) => { | 931 | .then((response) => { |
| 932 | this.snackbar = true; | 932 | this.snackbar = true; |
| 933 | this.text = "New School added successfully"; | 933 | this.text = "New School added successfully"; |
| 934 | this.clear(); | 934 | this.clear(); |
| 935 | this.getSchool(); | 935 | this.getSchool(); |
| 936 | this.loading = false; | 936 | this.loading = false; |
| 937 | }) | 937 | }) |
| 938 | .catch((error) => { | 938 | .catch((error) => { |
| 939 | this.snackbar = true; | 939 | this.snackbar = true; |
| 940 | this.text = error.response.data.message; | 940 | this.text = error.response.data.message; |
| 941 | this.loading = false; | 941 | this.loading = false; |
| 942 | }); | 942 | }); |
| 943 | } | 943 | } |
| 944 | }, | 944 | }, |
| 945 | clear() { | 945 | clear() { |
| 946 | this.$refs.form.reset(); | 946 | this.$refs.form.reset(); |
| 947 | this.imageUrl = ""; | 947 | this.imageUrl = ""; |
| 948 | }, | 948 | }, |
| 949 | save() { | 949 | save() { |
| 950 | if (this.imageUrl) { | 950 | if (this.imageUrl) { |
| 951 | var str = this.imageUrl; | 951 | var str = this.imageUrl; |
| 952 | const [baseUrl, imageUrl] = str.split(/,/); | 952 | const [baseUrl, imageUrl] = str.split(/,/); |
| 953 | this.editedItem.upload = imageUrl; | 953 | this.editedItem.upload = imageUrl; |
| 954 | } | 954 | } |
| 955 | this.editedItem.schoolId = this.editedItem._id; | 955 | this.editedItem.schoolId = this.editedItem._id; |
| 956 | http() | 956 | http() |
| 957 | .put("/updateSchool", this.editedItem, { | 957 | .put("/updateSchool", this.editedItem, { |
| 958 | headers: { Authorization: "Bearer " + this.schoolToken }, | 958 | headers: { Authorization: "Bearer " + this.schoolToken }, |
| 959 | }) | 959 | }) |
| 960 | .then((response) => { | 960 | .then((response) => { |
| 961 | this.snackbar = true; | 961 | this.snackbar = true; |
| 962 | this.text = "Successfully School Existing User"; | 962 | this.text = "Successfully School Existing User"; |
| 963 | this.imageUrl = ""; | 963 | this.imageUrl = ""; |
| 964 | this.getSchool(); | 964 | this.getSchool(); |
| 965 | this.close(); | 965 | this.close(); |
| 966 | }) | 966 | }) |
| 967 | .catch((error) => { | 967 | .catch((error) => { |
| 968 | // console.log(error); | 968 | // console.log(error); |
| 969 | if ((this.snackbar = true)) { | 969 | if ((this.snackbar = true)) { |
| 970 | this.text = error.response.data.statusText; | 970 | this.text = error.response.data.statusText; |
| 971 | } | 971 | } |
| 972 | }); | 972 | }); |
| 973 | }, | 973 | }, |
| 974 | adminAccess(data) { | 974 | adminAccess(data) { |
| 975 | // console.log("dataaaaaaaaaaaaaa", data); | 975 | // console.log("dataaaaaaaaaaaaaa", data); |
| 976 | this.showLoader = true; | 976 | this.showLoader = true; |
| 977 | http() | 977 | http() |
| 978 | .get("/getAdminAccess", { | 978 | .get("/getAdminAccess", { |
| 979 | params: { schoolId: data._id }, | 979 | params: { schoolId: data._id }, |
| 980 | headers: { Authorization: "Bearer " + this.schoolToken }, | 980 | headers: { Authorization: "Bearer " + this.schoolToken }, |
| 981 | }) | 981 | }) |
| 982 | .then((response) => { | 982 | .then((response) => { |
| 983 | this.$store.dispatch("setToken", response.data.data.token); | 983 | this.$store.dispatch("setToken", response.data.data.token); |
| 984 | this.$store.dispatch("Id", response.data.data.id); | 984 | this.$store.dispatch("Id", response.data.data.id); |
| 985 | this.$store.dispatch("Role", response.data.data.role); | 985 | this.$store.dispatch("Role", response.data.data.role); |
| 986 | this.$router.push("/dashboard"); | 986 | this.$router.push("/dashboard"); |
| 987 | setTimeout(() => { | 987 | setTimeout(() => { |
| 988 | location.reload(); | 988 | location.reload(); |
| 989 | }, 1000); | 989 | }, 1000); |
| 990 | // let routeData = this.$router.resolve({ | 990 | // let routeData = this.$router.resolve({ |
| 991 | // name: "dashboardAdmin" | 991 | // name: "dashboardAdmin" |
| 992 | // }); | 992 | // }); |
| 993 | // window.open(routeData.href, "_blank"); | 993 | // window.open(routeData.href, "_blank"); |
| 994 | 994 | ||
| 995 | this.showLoader = false; | 995 | this.showLoader = false; |
| 996 | }) | 996 | }) |
| 997 | .catch((error) => { | 997 | .catch((error) => { |
| 998 | this.showLoader = false; | 998 | this.showLoader = false; |
| 999 | }); | 999 | }); |
| 1000 | }, | 1000 | }, |
| 1001 | suspendSchoolStatus(suspendStatus, id) { | 1001 | suspendSchoolStatus(suspendStatus, id) { |
| 1002 | let suspendStatusData = { | 1002 | let suspendStatusData = { |
| 1003 | schoolId: id, | 1003 | schoolId: id, |
| 1004 | status: suspendStatus, | 1004 | status: suspendStatus, |
| 1005 | }; | 1005 | }; |
| 1006 | http() | 1006 | http() |
| 1007 | .put("/suspendSchoolAccount", suspendStatusData, { | 1007 | .put("/suspendSchoolAccount", suspendStatusData, { |
| 1008 | headers: { Authorization: "Bearer " + this.schoolToken }, | 1008 | headers: { Authorization: "Bearer " + this.schoolToken }, |
| 1009 | }) | 1009 | }) |
| 1010 | .then((response) => { | 1010 | .then((response) => { |
| 1011 | this.getSchool(); | 1011 | this.getSchool(); |
| 1012 | this.text = response.data.message; | 1012 | this.text = response.data.message; |
| 1013 | this.snackbar = true; | 1013 | this.snackbar = true; |
| 1014 | }) | 1014 | }) |
| 1015 | .catch((error) => { | 1015 | .catch((error) => { |
| 1016 | // console.log(error.response.data.data); | 1016 | // console.log(error.response.data.data); |
| 1017 | this.snackbar = true; | 1017 | this.snackbar = true; |
| 1018 | this.text = error.response.data.message; | 1018 | this.text = error.response.data.message; |
| 1019 | }); | 1019 | }); |
| 1020 | }, | 1020 | }, |
| 1021 | }, | 1021 | }, |
| 1022 | mounted() { | 1022 | mounted() { |
| 1023 | const getCountryList = countryList(); | 1023 | const getCountryList = countryList(); |
| 1024 | this.countries = getCountryList; | 1024 | this.countries = getCountryList; |
| 1025 | this.token = this.$store.state.token; | 1025 | this.token = this.$store.state.token; |
| 1026 | this.schoolToken = this.$store.state.schoolToken; | 1026 | this.schoolToken = this.$store.state.schoolToken; |
| 1027 | this.getSchool(); | 1027 | this.getSchool(); |
| 1028 | }, | 1028 | }, |
| 1029 | created() { | 1029 | created() { |
| 1030 | this.$root.$on("app:search", (search) => { | 1030 | this.$root.$on("app:search", (search) => { |
| 1031 | this.search = search; | 1031 | this.search = search; |
| 1032 | }); | 1032 | }); |
| 1033 | }, | 1033 | }, |
| 1034 | beforeDestroy() { | 1034 | beforeDestroy() { |
| 1035 | // dont forget to remove the listener | 1035 | // dont forget to remove the listener |
| 1036 | this.$root.$off("app:search"); | 1036 | this.$root.$off("app:search"); |
| 1037 | }, | 1037 | }, |
| 1038 | }; | 1038 | }; |
| 1039 | </script> | 1039 | </script> |
| 1040 | <style scoped> | 1040 | <style scoped> |
| 1041 | .active { | 1041 | .active { |
| 1042 | background-color: gray; | 1042 | background-color: gray; |
| 1043 | color: white !important; | 1043 | color: white !important; |
| 1044 | } | 1044 | } |
| 1045 | .activebtn { | 1045 | .activebtn { |
| 1046 | color: black !important; | 1046 | color: black !important; |
| 1047 | } | 1047 | } |
| 1048 | </style> | 1048 | </style> |
src/pages/School/viewSchoolDashboard.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-app id="pages-dasboard"> | 2 | <v-app id="pages-dasboard"> |
| 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> | 3 | <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> |
| 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> | 4 | <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> |
| 5 | <v-card> | 5 | <v-card> |
| 6 | <v-toolbar color="grey lighten-2" flat> | 6 | <v-toolbar color="grey lighten-2" flat> |
| 7 | <v-spacer></v-spacer> | 7 | <v-spacer></v-spacer> |
| 8 | <v-toolbar-title> | 8 | <v-toolbar-title> |
| 9 | <h3>Notice Board</h3> | 9 | <h3>Notice Board</h3> |
| 10 | </v-toolbar-title> | 10 | </v-toolbar-title> |
| 11 | <v-spacer></v-spacer> | 11 | <v-spacer></v-spacer> |
| 12 | <v-icon @click="closeNotice">close</v-icon> | 12 | <v-icon @click="closeNotice">close</v-icon> |
| 13 | </v-toolbar> | 13 | </v-toolbar> |
| 14 | <v-card-text> | 14 | <v-card-text> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> | 16 | <v-flex align-center justify-center layout text-xs-center class="mt-2"> |
| 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> | 17 | <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> |
| 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> | 18 | <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> |
| 19 | </v-flex> | 19 | </v-flex> |
| 20 | </v-layout> | 20 | </v-layout> |
| 21 | <v-container grid-list-md> | 21 | <v-container grid-list-md> |
| 22 | <v-layout wrap> | 22 | <v-layout wrap> |
| 23 | <v-flex> | 23 | <v-flex> |
| 24 | <v-layout> | 24 | <v-layout> |
| 25 | <v-flex xs5 sm6> | 25 | <v-flex xs5 sm6> |
| 26 | <h5 class="right my-1"> | 26 | <h5 class="right my-1"> |
| 27 | <b>Title:</b> | 27 | <b>Title:</b> |
| 28 | </h5> | 28 | </h5> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex sm6 xs8> | 30 | <v-flex sm6 xs8> |
| 31 | <h5 class="my-1">{{ notice.title }}</h5> | 31 | <h5 class="my-1">{{ notice.title }}</h5> |
| 32 | </v-flex> | 32 | </v-flex> |
| 33 | </v-layout> | 33 | </v-layout> |
| 34 | <v-layout> | 34 | <v-layout> |
| 35 | <v-flex xs5 sm6> | 35 | <v-flex xs5 sm6> |
| 36 | <h5 class="right my-1"> | 36 | <h5 class="right my-1"> |
| 37 | <b>Description:</b> | 37 | <b>Description:</b> |
| 38 | </h5> | 38 | </h5> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-flex sm6 xs8> | 40 | <v-flex sm6 xs8> |
| 41 | <h5 class="my-1">{{ notice.description }}</h5> | 41 | <h5 class="my-1">{{ notice.description }}</h5> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | </v-layout> | 43 | </v-layout> |
| 44 | </v-flex> | 44 | </v-flex> |
| 45 | </v-layout> | 45 | </v-layout> |
| 46 | </v-container> | 46 | </v-container> |
| 47 | </v-card-text> | 47 | </v-card-text> |
| 48 | </v-card> | 48 | </v-card> |
| 49 | </v-dialog>--> | 49 | </v-dialog>--> |
| 50 | <!-- <v-container fluid grid-list-xl> --> | 50 | <!-- <v-container fluid grid-list-xl> --> |
| 51 | <v-layout wrap> | 51 | <v-layout wrap> |
| 52 | <v-flex xs12> | 52 | <v-flex xs12> |
| 53 | <v-layout wrap row> | 53 | <v-layout wrap row> |
| 54 | <!-- ***** Total Students ***** --> | 54 | <!-- ***** Total Students ***** --> |
| 55 | <v-flex xs12 sm12 md9> | 55 | <v-flex xs12 sm12 md9> |
| 56 | <v-container fluid grid-list-xl> | 56 | <v-container fluid grid-list-xl> |
| 57 | <v-flex xs12 sm12 md12> | 57 | <v-flex xs12 sm12 md12> |
| 58 | <v-layout wrap class> | 58 | <v-layout wrap class> |
| 59 | <v-flex xs12 sm12 md3> | 59 | <v-flex xs12 sm12 md3> |
| 60 | <router-link :to="{ name:'Students' }"> | 60 | <router-link :to="{ name:'Students' }"> |
| 61 | <v-card class="card pink-bgcolor"> | 61 | <v-card class="card pink-bgcolor"> |
| 62 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> | 62 | <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> |
| 63 | <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> | 63 | <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> |
| 64 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> | 64 | <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> |
| 65 | </v-card> | 65 | </v-card> |
| 66 | </router-link> | 66 | </router-link> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | <!-- ***** Total Teachers***** --> | 68 | <!-- ***** Total Teachers***** --> |
| 69 | <v-flex xs12 sm12 md3> | 69 | <v-flex xs12 sm12 md3> |
| 70 | <router-link :to="{ name:'Teachers' }"> | 70 | <router-link :to="{ name:'Teachers' }"> |
| 71 | <v-card flat class="card elevation-2 firozi-bgcolor"> | 71 | <v-card flat class="card elevation-2 firozi-bgcolor"> |
| 72 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> | 72 | <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> |
| 73 | <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> | 73 | <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> |
| 74 | 74 | ||
| 75 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> | 75 | <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> |
| 76 | </v-card> | 76 | </v-card> |
| 77 | </router-link> | 77 | </router-link> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | <!-- ***** Total Parents ***** --> | 79 | <!-- ***** Total Parents ***** --> |
| 80 | <v-flex xs12 sm12 md3> | 80 | <v-flex xs12 sm12 md3> |
| 81 | <router-link :to="{ name:'Parents' }"> | 81 | <router-link :to="{ name:'Parents' }"> |
| 82 | <v-card flat class="card yellow darken-3"> | 82 | <v-card flat class="card yellow darken-3"> |
| 83 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> | 83 | <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> |
| 84 | <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> | 84 | <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> |
| 85 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> | 85 | <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> |
| 86 | </v-card> | 86 | </v-card> |
| 87 | </router-link> | 87 | </router-link> |
| 88 | </v-flex> | 88 | </v-flex> |
| 89 | <!-- ***** Total Class***** --> | 89 | <!-- ***** Total Class***** --> |
| 90 | <v-flex xs12 sm12 md3> | 90 | <v-flex xs12 sm12 md3> |
| 91 | <router-link :to="{ name:'Class' }"> | 91 | <router-link :to="{ name:'Class' }"> |
| 92 | <v-card flat class="card darkBlue-bgcolor"> | 92 | <v-card flat class="card darkBlue-bgcolor"> |
| 93 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> | 93 | <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> |
| 94 | <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> | 94 | <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> |
| 95 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> | 95 | <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> |
| 96 | </v-card> | 96 | </v-card> |
| 97 | </router-link> | 97 | </router-link> |
| 98 | </v-flex> | 98 | </v-flex> |
| 99 | </v-layout> | 99 | </v-layout> |
| 100 | </v-flex> | 100 | </v-flex> |
| 101 | <v-layout> | 101 | <v-layout> |
| 102 | <v-flex xs12> | 102 | <v-flex xs12> |
| 103 | <v-card class="card mt-2 account-Card"> | 103 | <v-card class="card mt-2 account-Card"> |
| 104 | <h4> | 104 | <h4> |
| 105 | <b>Account</b> | 105 | <b>Account</b> |
| 106 | </h4> | 106 | </h4> |
| 107 | <v-layout wrap> | 107 | <v-layout wrap> |
| 108 | <v-flex xs12 sm12 md3> | 108 | <v-flex xs12 sm12 md3> |
| 109 | <v-list two-line> | 109 | <v-list two-line> |
| 110 | <template> | 110 | <template> |
| 111 | <v-list-tile> | 111 | <v-list-tile> |
| 112 | <v-list-tile-avatar> | 112 | <v-list-tile-avatar> |
| 113 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> | 113 | <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> |
| 114 | </v-list-tile-avatar> | 114 | </v-list-tile-avatar> |
| 115 | <v-list-tile-content> | 115 | <v-list-tile-content> |
| 116 | <v-list-tile-title class="mt-2"> | 116 | <v-list-tile-title class="mt-2"> |
| 117 | <p class="subheading font-color">Fees</p> | 117 | <p class="subheading font-color">Fees</p> |
| 118 | </v-list-tile-title> | 118 | </v-list-tile-title> |
| 119 | <v-list-tile-title>Rs 1000</v-list-tile-title> | 119 | <v-list-tile-title>Rs 1000</v-list-tile-title> |
| 120 | </v-list-tile-content> | 120 | </v-list-tile-content> |
| 121 | </v-list-tile> | 121 | </v-list-tile> |
| 122 | <v-list-tile> | 122 | <v-list-tile> |
| 123 | <v-list-tile-avatar> | 123 | <v-list-tile-avatar> |
| 124 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> | 124 | <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> |
| 125 | </v-list-tile-avatar> | 125 | </v-list-tile-avatar> |
| 126 | <v-list-tile-content> | 126 | <v-list-tile-content> |
| 127 | <v-list-tile-title class="mt-2"> | 127 | <v-list-tile-title class="mt-2"> |
| 128 | <p class="subheading font-color">Collection</p> | 128 | <p class="subheading font-color">Collection</p> |
| 129 | </v-list-tile-title> | 129 | </v-list-tile-title> |
| 130 | <v-list-tile-title>Rs 2000</v-list-tile-title> | 130 | <v-list-tile-title>Rs 2000</v-list-tile-title> |
| 131 | </v-list-tile-content> | 131 | </v-list-tile-content> |
| 132 | </v-list-tile> | 132 | </v-list-tile> |
| 133 | <v-list-tile> | 133 | <v-list-tile> |
| 134 | <v-list-tile-avatar> | 134 | <v-list-tile-avatar> |
| 135 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> | 135 | <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> |
| 136 | </v-list-tile-avatar> | 136 | </v-list-tile-avatar> |
| 137 | <v-list-tile-content> | 137 | <v-list-tile-content> |
| 138 | <v-list-tile-title class="mt-2"> | 138 | <v-list-tile-title class="mt-2"> |
| 139 | <p class="subheading font-color">Expences</p> | 139 | <p class="subheading font-color">Expences</p> |
| 140 | </v-list-tile-title> | 140 | </v-list-tile-title> |
| 141 | <v-list-tile-title>Rs 3000</v-list-tile-title> | 141 | <v-list-tile-title>Rs 3000</v-list-tile-title> |
| 142 | </v-list-tile-content> | 142 | </v-list-tile-content> |
| 143 | </v-list-tile> | 143 | </v-list-tile> |
| 144 | </template> | 144 | </template> |
| 145 | </v-list> | 145 | </v-list> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | <v-flex xs12 sm12 md9 lg9 > | 147 | <v-flex xs12 sm12 md9 lg9 > |
| 148 | <!-- <div id="chart"> --> | 148 | <!-- <div id="chart"> --> |
| 149 | <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart> | 149 | <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart> |
| 150 | <!-- </div> --> | 150 | <!-- </div> --> |
| 151 | </v-flex> | 151 | </v-flex> |
| 152 | </v-layout> | 152 | </v-layout> |
| 153 | </v-card> | 153 | </v-card> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-card class="mt-2 card"> | 156 | <v-card class="mt-2 card"> |
| 157 | <!-- <full-calendar | 157 | <!-- <full-calendar |
| 158 | ref="calendar" | 158 | ref="calendar" |
| 159 | defaultView="month" | 159 | defaultView="month" |
| 160 | droppable="false" | 160 | droppable="false" |
| 161 | :events="events" | 161 | :events="events" |
| 162 | :config="config" | 162 | :config="config" |
| 163 | ></full-calendar>--> | 163 | ></full-calendar>--> |
| 164 | <h4 class="pa-3"> | 164 | <h4 class="pa-3"> |
| 165 | <b>Notice</b> | 165 | <b>Notice</b> |
| 166 | </h4> | 166 | </h4> |
| 167 | 167 | ||
| 168 | <v-data-table | 168 | <v-data-table |
| 169 | :items="noticeData" | 169 | :items="noticeData" |
| 170 | class="elevation-0" | 170 | class="elevation-0" |
| 171 | flat | 171 | flat |
| 172 | hide-actions | 172 | hide-actions |
| 173 | hide-headers | 173 | hide-headers |
| 174 | style="border-spacing: 0 !important;" | 174 | style="border-spacing: 0 !important;" |
| 175 | > | 175 | > |
| 176 | <template | 176 | <template |
| 177 | slot="items" | 177 | slot="items" |
| 178 | slot-scope="props" | 178 | slot-scope="props" |
| 179 | v-if="props.index < 5" | 179 | v-if="props.index < 5" |
| 180 | style="border-spacing: 0 !important;" | 180 | style="border-spacing: 0 !important;" |
| 181 | > | 181 | > |
| 182 | <tr class="td-notice"> | 182 | <tr class="td-notice"> |
| 183 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> | 183 | <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> |
| 184 | <td> | 184 | <td> |
| 185 | <span class="grey--text caption">{{ date(props.item.created) }}</span> | 185 | <span class="grey--text caption">{{ date(props.item.created) }}</span> |
| 186 | <br /> | 186 | <br /> |
| 187 | <span class="body-2">{{ props.item.title}}</span> | 187 | <span class="body-2">{{ props.item.title}}</span> |
| 188 | </td> | 188 | </td> |
| 189 | <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> | 189 | <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> |
| 190 | 190 | ||
| 191 | <td class="text-xs-center"> | 191 | <td class="text-xs-center"> |
| 192 | <span> | 192 | <span> |
| 193 | <v-tooltip top> | 193 | <v-tooltip top> |
| 194 | <img | 194 | <img |
| 195 | slot="activator" | 195 | slot="activator" |
| 196 | style="cursor:pointer; width:25px; height:25px; " | 196 | style="cursor:pointer; width:25px; height:25px; " |
| 197 | @click="profile" | 197 | @click="profile" |
| 198 | src="/static/icon/view.png" | 198 | src="/static/icon/view.png" |
| 199 | /> | 199 | /> |
| 200 | <span>View</span> | 200 | <span>View</span> |
| 201 | </v-tooltip> | 201 | </v-tooltip> |
| 202 | </span> | 202 | </span> |
| 203 | </td> | 203 | </td> |
| 204 | </tr> | 204 | </tr> |
| 205 | </template> | 205 | </template> |
| 206 | </v-data-table> | 206 | </v-data-table> |
| 207 | </v-card> | 207 | </v-card> |
| 208 | </v-container> | 208 | </v-container> |
| 209 | </v-flex> | 209 | </v-flex> |
| 210 | <v-flex xs12 sm12 md3> | 210 | <v-flex xs12 sm12 md3> |
| 211 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> | 211 | <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> |
| 212 | <v-card-text> | 212 | <v-card-text> |
| 213 | <h4 class="text-xs-center py-3"> | 213 | <h4 class="text-xs-center py-3"> |
| 214 | <b>Profile</b> | 214 | <b>Profile</b> |
| 215 | </h4> | 215 | </h4> |
| 216 | <v-flex xs12 class="py-3"> | 216 | <v-flex xs12 class="py-3"> |
| 217 | <v-layout wrap> | 217 | <v-layout wrap> |
| 218 | <v-flex xs12 sm12 md4> | 218 | <v-flex xs12 sm12 md4> |
| 219 | <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> | 219 | <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> |
| 220 | <img | 220 | <img |
| 221 | :src="userData.schoolLogoUrl" | 221 | :src="userData.schoolLogoUrl" |
| 222 | v-else-if="userData.schoolLogoUrl" | 222 | v-else-if="userData.schoolLogoUrl" |
| 223 | width="80" | 223 | width="80" |
| 224 | /> | 224 | /> |
| 225 | </v-flex> | 225 | </v-flex> |
| 226 | <v-flex xs12 sm12 md6> | 226 | <v-flex xs12 sm12 md6> |
| 227 | <p class="mb-0 body-1"> | 227 | <p class="mb-0 body-1"> |
| 228 | <i>{{ userData.name }}</i> | 228 | <i>{{ userData.name }}</i> |
| 229 | </p> | 229 | </p> |
| 230 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> | 230 | <p class="mb-0 caption grey--text">{{ userData.email }}</p> |
| 231 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> | 231 | <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> |
| 232 | <address class="caption grey--text mb-3">{{ userData.address }}</address> | 232 | <address class="caption grey--text mb-3">{{ userData.address }}</address> |
| 233 | </v-flex> | 233 | </v-flex> |
| 234 | </v-layout> | 234 | </v-layout> |
| 235 | </v-flex> | 235 | </v-flex> |
| 236 | <hr /> | 236 | <hr /> |
| 237 | <h4 class="text-xs-center py-3"> | 237 | <h4 class="text-xs-center py-3"> |
| 238 | <b>Calender</b> | 238 | <b>Calender</b> |
| 239 | </h4> | 239 | </h4> |
| 240 | <vue-event-calendar :events="demoEvents"></vue-event-calendar> | 240 | <vue-event-calendar :events="demoEvents"></vue-event-calendar> |
| 241 | </v-card-text> | 241 | </v-card-text> |
| 242 | </v-card> | 242 | </v-card> |
| 243 | </v-flex> | 243 | </v-flex> |
| 244 | </v-layout> | 244 | </v-layout> |
| 245 | </v-flex> | 245 | </v-flex> |
| 246 | </v-layout> | 246 | </v-layout> |
| 247 | <v-dialog v-model="dialog" max-width="500"> | 247 | <v-dialog v-model="dialog" max-width="500" persistent> |
| 248 | <v-card color="grey lighten-4" flat> | 248 | <v-card color="grey lighten-4" flat> |
| 249 | <v-toolbar dark color="fixcolors"> | 249 | <v-toolbar dark color="fixcolors"> |
| 250 | <v-spacer></v-spacer> | 250 | <v-spacer></v-spacer> |
| 251 | <v-btn icon @click="dialog= false"> | 251 | <v-btn icon @click="dialog= false"> |
| 252 | <v-icon>close</v-icon> | 252 | <v-icon>close</v-icon> |
| 253 | </v-btn> | 253 | </v-btn> |
| 254 | </v-toolbar> | 254 | </v-toolbar> |
| 255 | <v-flex class="py-4"> | 255 | <v-flex class="py-4"> |
| 256 | <v-list-tile> | 256 | <v-list-tile> |
| 257 | <v-list-tile-action> | 257 | <v-list-tile-action> |
| 258 | <v-icon>edit</v-icon> | 258 | <v-icon>edit</v-icon> |
| 259 | </v-list-tile-action> | 259 | </v-list-tile-action> |
| 260 | <v-list-tile-content> | 260 | <v-list-tile-content> |
| 261 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> | 261 | <v-list-tile-title>{{ selected.title }}</v-list-tile-title> |
| 262 | </v-list-tile-content> | 262 | </v-list-tile-content> |
| 263 | </v-list-tile> | 263 | </v-list-tile> |
| 264 | <v-list-tile> | 264 | <v-list-tile> |
| 265 | <v-list-tile-action> | 265 | <v-list-tile-action> |
| 266 | <v-icon>access_time</v-icon> | 266 | <v-icon>access_time</v-icon> |
| 267 | </v-list-tile-action> | 267 | </v-list-tile-action> |
| 268 | <v-list-tile-content> | 268 | <v-list-tile-content> |
| 269 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> | 269 | <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> |
| 270 | </v-list-tile-content> | 270 | </v-list-tile-content> |
| 271 | </v-list-tile> | 271 | </v-list-tile> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | </v-card> | 273 | </v-card> |
| 274 | </v-dialog> | 274 | </v-dialog> |
| 275 | <div class="loader" v-if="showLoader"> | 275 | <div class="loader" v-if="showLoader"> |
| 276 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 276 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 277 | </div> | 277 | </div> |
| 278 | </v-app> | 278 | </v-app> |
| 279 | </template> | 279 | </template> |
| 280 | 280 | ||
| 281 | <script> | 281 | <script> |
| 282 | import http from "@/Services/http.js"; | 282 | import http from "@/Services/http.js"; |
| 283 | import moment from "moment"; | 283 | import moment from "moment"; |
| 284 | // import { FunctionalCalendar } from "vue-functional-calendar"; | 284 | // import { FunctionalCalendar } from "vue-functional-calendar"; |
| 285 | 285 | ||
| 286 | export default { | 286 | export default { |
| 287 | components: { | 287 | components: { |
| 288 | // FunctionalCalendar | 288 | // FunctionalCalendar |
| 289 | }, | 289 | }, |
| 290 | data() { | 290 | data() { |
| 291 | return { | 291 | return { |
| 292 | // data: { | 292 | // data: { |
| 293 | // clieckedToday: false | 293 | // clieckedToday: false |
| 294 | // }, | 294 | // }, |
| 295 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], | 295 | // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], |
| 296 | // calendarData: {}, | 296 | // calendarData: {}, |
| 297 | // calendar: {}, | 297 | // calendar: {}, |
| 298 | demoEvents: [ | 298 | demoEvents: [ |
| 299 | { | 299 | { |
| 300 | date: "2020/01/10", // Required | 300 | date: "2020/01/10", // Required |
| 301 | title: "Foo" // Required | 301 | title: "Foo" // Required |
| 302 | }, | 302 | }, |
| 303 | { | 303 | { |
| 304 | date: "2020/01/12", | 304 | date: "2020/01/12", |
| 305 | title: "Bar", | 305 | title: "Bar", |
| 306 | desc: "description", | 306 | desc: "description", |
| 307 | customClass: "disabled highlight" // Custom classes to an calendar cell | 307 | customClass: "disabled highlight" // Custom classes to an calendar cell |
| 308 | } | 308 | } |
| 309 | ], | 309 | ], |
| 310 | 310 | ||
| 311 | showLoader: false, | 311 | showLoader: false, |
| 312 | calendarData: {}, | 312 | calendarData: {}, |
| 313 | dialog: false, | 313 | dialog: false, |
| 314 | dialogNotice: false, | 314 | dialogNotice: false, |
| 315 | HolidaysList: [], | 315 | HolidaysList: [], |
| 316 | EventsList: [], | 316 | EventsList: [], |
| 317 | events: [], | 317 | events: [], |
| 318 | config: { | 318 | config: { |
| 319 | eventClick: event => { | 319 | eventClick: event => { |
| 320 | this.selected = event; | 320 | this.selected = event; |
| 321 | this.dialog = true; | 321 | this.dialog = true; |
| 322 | } | 322 | } |
| 323 | }, | 323 | }, |
| 324 | selected: {}, | 324 | selected: {}, |
| 325 | // notice: {}, | 325 | // notice: {}, |
| 326 | userData: {}, | 326 | userData: {}, |
| 327 | dated: new Date(2018, 0, 9), | 327 | dated: new Date(2018, 0, 9), |
| 328 | userList: [], | 328 | userList: [], |
| 329 | sectionList: [], | 329 | sectionList: [], |
| 330 | students: "", | 330 | students: "", |
| 331 | parents: "", | 331 | parents: "", |
| 332 | teachers: "", | 332 | teachers: "", |
| 333 | classes: "", | 333 | classes: "", |
| 334 | noticeData: [], | 334 | noticeData: [], |
| 335 | attrs: [ | 335 | attrs: [ |
| 336 | { | 336 | { |
| 337 | key: "today", | 337 | key: "today", |
| 338 | highlight: true, | 338 | highlight: true, |
| 339 | dates: new Date() | 339 | dates: new Date() |
| 340 | } | 340 | } |
| 341 | ], | 341 | ], |
| 342 | drawer: true, | 342 | drawer: true, |
| 343 | items: [ | 343 | items: [ |
| 344 | { title: "Home", icon: "dashboard" }, | 344 | { title: "Home", icon: "dashboard" }, |
| 345 | { title: "About", icon: "question_answer" } | 345 | { title: "About", icon: "question_answer" } |
| 346 | ], | 346 | ], |
| 347 | right: null, | 347 | right: null, |
| 348 | 348 | ||
| 349 | series: [ | 349 | series: [ |
| 350 | { | 350 | { |
| 351 | name: "Total", | 351 | name: "Total", |
| 352 | data: [66, 44, 33] | 352 | data: [66, 44, 33] |
| 353 | } | 353 | } |
| 354 | ], | 354 | ], |
| 355 | chartOptions: { | 355 | chartOptions: { |
| 356 | chart: { | 356 | chart: { |
| 357 | // type: "bar", | 357 | // type: "bar", |
| 358 | height: 150, | 358 | height: 150, |
| 359 | stacked: true | 359 | stacked: true |
| 360 | 360 | ||
| 361 | // animations: { | 361 | // animations: { |
| 362 | // enabled: true, | 362 | // enabled: true, |
| 363 | // easing: "easeinout", | 363 | // easing: "easeinout", |
| 364 | // speed: 1200, | 364 | // speed: 1200, |
| 365 | // animateGradually: { | 365 | // animateGradually: { |
| 366 | // enabled: true, | 366 | // enabled: true, |
| 367 | // delay: 450 | 367 | // delay: 450 |
| 368 | // }, | 368 | // }, |
| 369 | // dynamicAnimation: { | 369 | // dynamicAnimation: { |
| 370 | // enabled: true, | 370 | // enabled: true, |
| 371 | // speed: 450 | 371 | // speed: 450 |
| 372 | // } | 372 | // } |
| 373 | // } | 373 | // } |
| 374 | }, | 374 | }, |
| 375 | plotOptions: { | 375 | plotOptions: { |
| 376 | bar: { | 376 | bar: { |
| 377 | horizontal: false, | 377 | horizontal: false, |
| 378 | columnWidth: "25%", | 378 | columnWidth: "25%", |
| 379 | // endingShape: "rounded", | 379 | // endingShape: "rounded", |
| 380 | distributed: true | 380 | distributed: true |
| 381 | } | 381 | } |
| 382 | }, | 382 | }, |
| 383 | responsive: [ | 383 | responsive: [ |
| 384 | { | 384 | { |
| 385 | breakpoint: 480, | 385 | breakpoint: 480, |
| 386 | options: { | 386 | options: { |
| 387 | legend: { | 387 | legend: { |
| 388 | position: "bottom", | 388 | position: "bottom", |
| 389 | offsetX: -10, | 389 | offsetX: -10, |
| 390 | offsetY: 0 | 390 | offsetY: 0 |
| 391 | } | 391 | } |
| 392 | } | 392 | } |
| 393 | } | 393 | } |
| 394 | ], | 394 | ], |
| 395 | 395 | ||
| 396 | legend: { | 396 | legend: { |
| 397 | position: "right", | 397 | position: "right", |
| 398 | offsetY: 40 | 398 | offsetY: 40 |
| 399 | }, | 399 | }, |
| 400 | colors: ["#7852cc", "#f9a825", "#ff8a89"], | 400 | colors: ["#7852cc", "#f9a825", "#ff8a89"], |
| 401 | dataLabels: { | 401 | dataLabels: { |
| 402 | enabled: false | 402 | enabled: false |
| 403 | }, | 403 | }, |
| 404 | stroke: { | 404 | stroke: { |
| 405 | show: true, | 405 | show: true, |
| 406 | width: 2, | 406 | width: 2, |
| 407 | colors: ["transparent"] | 407 | colors: ["transparent"] |
| 408 | }, | 408 | }, |
| 409 | xaxis: { | 409 | xaxis: { |
| 410 | categories: ["Fee", "Collections", "Expences"] | 410 | categories: ["Fee", "Collections", "Expences"] |
| 411 | }, | 411 | }, |
| 412 | yaxis: { | 412 | yaxis: { |
| 413 | title: { | 413 | title: { |
| 414 | text: "" | 414 | text: "" |
| 415 | } | 415 | } |
| 416 | }, | 416 | }, |
| 417 | fill: { | 417 | fill: { |
| 418 | opacity: 1 | 418 | opacity: 1 |
| 419 | }, | 419 | }, |
| 420 | tooltip: { | 420 | tooltip: { |
| 421 | y: { | 421 | y: { |
| 422 | formatter: function(val, opts) { | 422 | formatter: function(val, opts) { |
| 423 | // console.log("opts",opts.w.config.xaxis.categories) | 423 | // console.log("opts",opts.w.config.xaxis.categories) |
| 424 | return "" + val + " "; | 424 | return "" + val + " "; |
| 425 | } | 425 | } |
| 426 | } | 426 | } |
| 427 | } | 427 | } |
| 428 | } | 428 | } |
| 429 | }; | 429 | }; |
| 430 | }, | 430 | }, |
| 431 | mounted() { | 431 | mounted() { |
| 432 | // = this.$store.state.schoolToken; | 432 | // = this.$store.state.schoolToken; |
| 433 | // console.log("this.$store.state.role", this.token); | 433 | // console.log("this.$store.state.role", this.token); |
| 434 | if (this.$store.state.role === "ADMIN") { | 434 | if (this.$store.state.role === "ADMIN") { |
| 435 | this.token = this.$store.state.token; | 435 | this.token = this.$store.state.token; |
| 436 | } else if (this.$store.state.schoolRole === "SUPERADMIN") { | 436 | } else if (this.$store.state.schoolRole === "SUPERADMIN") { |
| 437 | this.token = this.$store.state.schoolToken; | 437 | this.token = this.$store.state.schoolToken; |
| 438 | } | 438 | } |
| 439 | // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); | 439 | // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); |
| 440 | // this.getData(); | 440 | // this.getData(); |
| 441 | this.getStudents(); | 441 | this.getStudents(); |
| 442 | this.getTeachers(); | 442 | this.getTeachers(); |
| 443 | this.getParents(); | 443 | this.getParents(); |
| 444 | this.getClasses(); | 444 | this.getClasses(); |
| 445 | this.getNoticeData(); | 445 | this.getNoticeData(); |
| 446 | this.getUserData(); | 446 | this.getUserData(); |
| 447 | // this.getUsersList(); | 447 | // this.getUsersList(); |
| 448 | }, | 448 | }, |
| 449 | methods: { | 449 | methods: { |
| 450 | closeNotice() { | 450 | closeNotice() { |
| 451 | this.dialogNotice = false; | 451 | this.dialogNotice = false; |
| 452 | }, | 452 | }, |
| 453 | profile() { | 453 | profile() { |
| 454 | // this.editedIndex = this.desserts.indexOf(item); | 454 | // this.editedIndex = this.desserts.indexOf(item); |
| 455 | // this.notice = Object.assign({}, item); | 455 | // this.notice = Object.assign({}, item); |
| 456 | // this.dialogNotice = true; | 456 | // this.dialogNotice = true; |
| 457 | this.$router.push({ name: "NoticeBoard" }); | 457 | this.$router.push({ name: "NoticeBoard" }); |
| 458 | }, | 458 | }, |
| 459 | date: function(date) { | 459 | date: function(date) { |
| 460 | return moment(date).format("MMMM DD, YYYY HH:mm"); | 460 | return moment(date).format("MMMM DD, YYYY HH:mm"); |
| 461 | }, | 461 | }, |
| 462 | refreshEvents() { | 462 | refreshEvents() { |
| 463 | this.$refs.calendar.$emit("refetch-events"); | 463 | this.$refs.calendar.$emit("refetch-events"); |
| 464 | }, | 464 | }, |
| 465 | removeEvent() { | 465 | removeEvent() { |
| 466 | this.$refs.calendar.$emit("remove-event", this.selected); | 466 | this.$refs.calendar.$emit("remove-event", this.selected); |
| 467 | this.selected = {}; | 467 | this.selected = {}; |
| 468 | }, | 468 | }, |
| 469 | eventSelected(event) { | 469 | eventSelected(event) { |
| 470 | this.selected = event; | 470 | this.selected = event; |
| 471 | console.log("this.selected", this.selected); | 471 | console.log("this.selected", this.selected); |
| 472 | }, | 472 | }, |
| 473 | // eventDropStart: function(event) { | 473 | // eventDropStart: function(event) { |
| 474 | // event.editable = false; | 474 | // event.editable = false; |
| 475 | // }, | 475 | // }, |
| 476 | eventCreated(...test) { | 476 | eventCreated(...test) { |
| 477 | console.log(test); | 477 | console.log(test); |
| 478 | }, | 478 | }, |
| 479 | getStudents() { | 479 | getStudents() { |
| 480 | http() | 480 | http() |
| 481 | .get("/getStudentsList", { | 481 | .get("/getStudentsList", { |
| 482 | headers: { | 482 | headers: { |
| 483 | Authorization: "Bearer " + this.token | 483 | Authorization: "Bearer " + this.token |
| 484 | } | 484 | } |
| 485 | }) | 485 | }) |
| 486 | .then(response => { | 486 | .then(response => { |
| 487 | this.students = response.data.data; | 487 | this.students = response.data.data; |
| 488 | this.showLoader = false; | 488 | this.showLoader = false; |
| 489 | }) | 489 | }) |
| 490 | .catch(error => { | 490 | .catch(error => { |
| 491 | // console.log("err====>", err); | 491 | // console.log("err====>", err); |
| 492 | this.showLoader = false; | 492 | this.showLoader = false; |
| 493 | // if (error.response.status === 401) { | 493 | // if (error.response.status === 401) { |
| 494 | // this.$router.replace({ path: "/" }); | 494 | // this.$router.replace({ path: "/" }); |
| 495 | // this.$store.dispatch("setToken", null); | 495 | // this.$store.dispatch("setToken", null); |
| 496 | // this.$store.dispatch("Id", null); | 496 | // this.$store.dispatch("Id", null); |
| 497 | // } | 497 | // } |
| 498 | }); | 498 | }); |
| 499 | }, | 499 | }, |
| 500 | getParents() { | 500 | getParents() { |
| 501 | http() | 501 | http() |
| 502 | .get("/getParentsList", { | 502 | .get("/getParentsList", { |
| 503 | headers: { | 503 | headers: { |
| 504 | Authorization: "Bearer " + this.token | 504 | Authorization: "Bearer " + this.token |
| 505 | } | 505 | } |
| 506 | }) | 506 | }) |
| 507 | .then(response => { | 507 | .then(response => { |
| 508 | this.parents = response.data.data; | 508 | this.parents = response.data.data; |
| 509 | this.showLoader = false; | 509 | this.showLoader = false; |
| 510 | }) | 510 | }) |
| 511 | .catch(error => { | 511 | .catch(error => { |
| 512 | // console.log("err====>", err); | 512 | // console.log("err====>", err); |
| 513 | this.showLoader = false; | 513 | this.showLoader = false; |
| 514 | // if (error.response.status === 401) { | 514 | // if (error.response.status === 401) { |
| 515 | // this.$router.replace({ path: "/" }); | 515 | // this.$router.replace({ path: "/" }); |
| 516 | // this.$store.dispatch("setToken", null); | 516 | // this.$store.dispatch("setToken", null); |
| 517 | // this.$store.dispatch("Id", null); | 517 | // this.$store.dispatch("Id", null); |
| 518 | // } | 518 | // } |
| 519 | }); | 519 | }); |
| 520 | }, | 520 | }, |
| 521 | getTeachers() { | 521 | getTeachers() { |
| 522 | http() | 522 | http() |
| 523 | .get("/getTeachersList", { | 523 | .get("/getTeachersList", { |
| 524 | headers: { | 524 | headers: { |
| 525 | Authorization: "Bearer " + this.token | 525 | Authorization: "Bearer " + this.token |
| 526 | } | 526 | } |
| 527 | }) | 527 | }) |
| 528 | .then(response => { | 528 | .then(response => { |
| 529 | this.teachers = response.data.data; | 529 | this.teachers = response.data.data; |
| 530 | this.showLoader = false; | 530 | this.showLoader = false; |
| 531 | }) | 531 | }) |
| 532 | .catch(error => { | 532 | .catch(error => { |
| 533 | // console.log("err====>", err); | 533 | // console.log("err====>", err); |
| 534 | this.showLoader = false; | 534 | this.showLoader = false; |
| 535 | // if (error.response.status === 401) { | 535 | // if (error.response.status === 401) { |
| 536 | // this.$router.replace({ path: "/" }); | 536 | // this.$router.replace({ path: "/" }); |
| 537 | // this.$store.dispatch("setToken", null); | 537 | // this.$store.dispatch("setToken", null); |
| 538 | // this.$store.dispatch("Id", null); | 538 | // this.$store.dispatch("Id", null); |
| 539 | // } | 539 | // } |
| 540 | }); | 540 | }); |
| 541 | }, | 541 | }, |
| 542 | getClasses() { | 542 | getClasses() { |
| 543 | http() | 543 | http() |
| 544 | .get("/getClassesList", { | 544 | .get("/getClassesList", { |
| 545 | headers: { | 545 | headers: { |
| 546 | Authorization: "Bearer " + this.token | 546 | Authorization: "Bearer " + this.token |
| 547 | } | 547 | } |
| 548 | }) | 548 | }) |
| 549 | .then(response => { | 549 | .then(response => { |
| 550 | this.classes = response.data.data; | 550 | this.classes = response.data.data; |
| 551 | this.showLoader = false; | 551 | this.showLoader = false; |
| 552 | }) | 552 | }) |
| 553 | .catch(error => { | 553 | .catch(error => { |
| 554 | this.showLoader = false; | 554 | this.showLoader = false; |
| 555 | // if (error.response.status === 401) { | 555 | // if (error.response.status === 401) { |
| 556 | // this.$router.replace({ path: "/" }); | 556 | // this.$router.replace({ path: "/" }); |
| 557 | // this.$store.dispatch("setToken", null); | 557 | // this.$store.dispatch("setToken", null); |
| 558 | // this.$store.dispatch("Id", null); | 558 | // this.$store.dispatch("Id", null); |
| 559 | // this.$store.dispatch("Role", null); | 559 | // this.$store.dispatch("Role", null); |
| 560 | // } | 560 | // } |
| 561 | }); | 561 | }); |
| 562 | }, | 562 | }, |
| 563 | getNoticeData() { | 563 | getNoticeData() { |
| 564 | this.showLoader = true; | 564 | this.showLoader = true; |
| 565 | http() | 565 | http() |
| 566 | .get("/getEventsList", { | 566 | .get("/getEventsList", { |
| 567 | headers: { | 567 | headers: { |
| 568 | Authorization: "Bearer " + this.token | 568 | Authorization: "Bearer " + this.token |
| 569 | } | 569 | } |
| 570 | }) | 570 | }) |
| 571 | .then(response => { | 571 | .then(response => { |
| 572 | this.noticeData = response.data.data; | 572 | this.noticeData = response.data.data; |
| 573 | this.showLoader = false; | 573 | this.showLoader = false; |
| 574 | }) | 574 | }) |
| 575 | .catch(error => { | 575 | .catch(error => { |
| 576 | this.showLoader = false; | 576 | this.showLoader = false; |
| 577 | // if (error.response.status === 401) { | 577 | // if (error.response.status === 401) { |
| 578 | // this.$router.replace({ path: "/" }); | 578 | // this.$router.replace({ path: "/" }); |
| 579 | // this.$store.dispatch("setToken", null); | 579 | // this.$store.dispatch("setToken", null); |
| 580 | // this.$store.dispatch("Id", null); | 580 | // this.$store.dispatch("Id", null); |
| 581 | // } | 581 | // } |
| 582 | }); | 582 | }); |
| 583 | }, | 583 | }, |
| 584 | getUserData() { | 584 | getUserData() { |
| 585 | // this.showLoader = true; | 585 | // this.showLoader = true; |
| 586 | http() | 586 | http() |
| 587 | .get("/getParticularUserDetail", { | 587 | .get("/getParticularUserDetail", { |
| 588 | headers: { | 588 | headers: { |
| 589 | Authorization: "Bearer " + this.token | 589 | Authorization: "Bearer " + this.token |
| 590 | } | 590 | } |
| 591 | }) | 591 | }) |
| 592 | .then(response => { | 592 | .then(response => { |
| 593 | this.userData = response.data.data; | 593 | this.userData = response.data.data; |
| 594 | this.showLoader = false; | 594 | this.showLoader = false; |
| 595 | }) | 595 | }) |
| 596 | .catch(error => { | 596 | .catch(error => { |
| 597 | this.showLoader = false; | 597 | this.showLoader = false; |
| 598 | // if (error.response.status === 401) { | 598 | // if (error.response.status === 401) { |
| 599 | // this.$router.replace({ path: "/" }); | 599 | // this.$router.replace({ path: "/" }); |
| 600 | // this.$store.dispatch("setToken", null); | 600 | // this.$store.dispatch("setToken", null); |
| 601 | // this.$store.dispatch("Id", null); | 601 | // this.$store.dispatch("Id", null); |
| 602 | // } | 602 | // } |
| 603 | }); | 603 | }); |
| 604 | } | 604 | } |
| 605 | } | 605 | } |
| 606 | }; | 606 | }; |
| 607 | </script> | 607 | </script> |
| 608 | 608 | ||
| 609 | <style scoped> | 609 | <style scoped> |
| 610 | @import "fullcalendar/dist/fullcalendar.css"; | 610 | @import "fullcalendar/dist/fullcalendar.css"; |
| 611 | </style> | 611 | </style> |
src/pages/Section/section.vue
| 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" persistent> |
| 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" persistent> |
| 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-if="showSearch"> | 167 | <v-flex xs8 v-if="showSearch"> |
| 168 | <v-layout> | 168 | <v-layout> |
| 169 | <v-text-field | 169 | <v-text-field |
| 170 | autofocus | 170 | autofocus |
| 171 | v-model="search" | 171 | v-model="search" |
| 172 | label="Search" | 172 | label="Search" |
| 173 | prepend-inner-icon="search" | 173 | prepend-inner-icon="search" |
| 174 | color="primary" | 174 | color="primary" |
| 175 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 175 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 176 | ></v-text-field> | 176 | ></v-text-field> |
| 177 | <v-icon @click="closeSearch" color="error">close</v-icon> | 177 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 178 | </v-layout> | 178 | </v-layout> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | </v-toolbar> | 180 | </v-toolbar> |
| 181 | <v-data-table | 181 | <v-data-table |
| 182 | :headers="headers" | 182 | :headers="headers" |
| 183 | :items="sectionList" | 183 | :items="sectionList" |
| 184 | :pagination.sync="pagination" | 184 | :pagination.sync="pagination" |
| 185 | :search="search" | 185 | :search="search" |
| 186 | > | 186 | > |
| 187 | <template slot="items" slot-scope="props"> | 187 | <template slot="items" slot-scope="props"> |
| 188 | <tr class="tr"> | 188 | <tr class="tr"> |
| 189 | <td class="td td-row">{{ props.index + 1 }}</td> | 189 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 190 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> | 190 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> |
| 191 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> | 191 | <td class="text-xs-center td td-row">{{ props.item.name }}</td> |
| 192 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> | 192 | <td class="text-xs-center td td-row">{{ props.item.session }}</td> |
| 193 | <td class="text-xs-center td td-row"> | 193 | <td class="text-xs-center td td-row"> |
| 194 | <span> | 194 | <span> |
| 195 | <v-tooltip top> | 195 | <v-tooltip top> |
| 196 | <img | 196 | <img |
| 197 | slot="activator" | 197 | slot="activator" |
| 198 | style="cursor:pointer; width:25px; height:25px;" | 198 | style="cursor:pointer; width:25px; height:25px;" |
| 199 | class="mr-3" | 199 | class="mr-3" |
| 200 | @click="profile(props.item)" | 200 | @click="profile(props.item)" |
| 201 | src="/static/icon/view.png" | 201 | src="/static/icon/view.png" |
| 202 | /> | 202 | /> |
| 203 | <span>View</span> | 203 | <span>View</span> |
| 204 | </v-tooltip> | 204 | </v-tooltip> |
| 205 | <v-tooltip top> | 205 | <v-tooltip top> |
| 206 | <img | 206 | <img |
| 207 | slot="activator" | 207 | slot="activator" |
| 208 | style="cursor:pointer; width:20px; height:18px; " | 208 | style="cursor:pointer; width:20px; height:18px; " |
| 209 | class="mr-3" | 209 | class="mr-3" |
| 210 | @click="editItem(props.item)" | 210 | @click="editItem(props.item)" |
| 211 | src="/static/icon/edit.png" | 211 | src="/static/icon/edit.png" |
| 212 | /> | 212 | /> |
| 213 | <span>Edit</span> | 213 | <span>Edit</span> |
| 214 | </v-tooltip> | 214 | </v-tooltip> |
| 215 | <!-- <v-tooltip top> | 215 | <!-- <v-tooltip top> |
| 216 | <img | 216 | <img |
| 217 | slot="activator" | 217 | slot="activator" |
| 218 | style="cursor:pointer; width:20px; height:20px; " | 218 | style="cursor:pointer; width:20px; height:20px; " |
| 219 | @click="deleteItem(props.item)" | 219 | @click="deleteItem(props.item)" |
| 220 | src="/static/icon/delete.png" | 220 | src="/static/icon/delete.png" |
| 221 | class="mr-3" | 221 | class="mr-3" |
| 222 | /> | 222 | /> |
| 223 | <span>Delete</span> | 223 | <span>Delete</span> |
| 224 | </v-tooltip>--> | 224 | </v-tooltip>--> |
| 225 | </span> | 225 | </span> |
| 226 | </td> | 226 | </td> |
| 227 | </tr> | 227 | </tr> |
| 228 | </template> | 228 | </template> |
| 229 | <v-alert | 229 | <v-alert |
| 230 | slot="no-results" | 230 | slot="no-results" |
| 231 | :value="true" | 231 | :value="true" |
| 232 | color="error" | 232 | color="error" |
| 233 | icon="warning" | 233 | icon="warning" |
| 234 | >Your search for "{{ search }}" found no results.</v-alert> | 234 | >Your search for "{{ search }}" found no results.</v-alert> |
| 235 | </v-data-table> | 235 | </v-data-table> |
| 236 | <!-- </v-tab-item> --> | 236 | <!-- </v-tab-item> --> |
| 237 | 237 | ||
| 238 | <!-- DIALOG BOX - ADD Students Dialog box --> | 238 | <!-- DIALOG BOX - ADD Students Dialog box --> |
| 239 | <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog"> | 239 | <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent> |
| 240 | <v-card flat class="card-style pa-2" dark> | 240 | <v-card flat class="card-style pa-2" dark> |
| 241 | <v-layout> | 241 | <v-layout> |
| 242 | <v-flex xs12> | 242 | <v-flex xs12> |
| 243 | <label class="title text-xs-center">Add Section</label> | 243 | <label class="title text-xs-center">Add Section</label> |
| 244 | <v-icon | 244 | <v-icon |
| 245 | size="24" | 245 | size="24" |
| 246 | class="right" | 246 | class="right" |
| 247 | @click="$refs.form.reset();addSectionDialog = false" | 247 | @click="$refs.form.reset();addSectionDialog = false" |
| 248 | >cancel</v-icon> | 248 | >cancel</v-icon> |
| 249 | </v-flex> | 249 | </v-flex> |
| 250 | </v-layout> | 250 | </v-layout> |
| 251 | <v-container fluid fill-height> | 251 | <v-container fluid fill-height> |
| 252 | <v-layout align-center> | 252 | <v-layout align-center> |
| 253 | <v-flex xs12> | 253 | <v-flex xs12> |
| 254 | <v-form ref="form" v-model="valid" lazy-validation> | 254 | <v-form ref="form" v-model="valid" lazy-validation> |
| 255 | <v-layout> | 255 | <v-layout> |
| 256 | <v-flex xs4 class="pt-4 subheading"> | 256 | <v-flex xs4 class="pt-4 subheading"> |
| 257 | <label class="right">Section :</label> | 257 | <label class="right">Section :</label> |
| 258 | </v-flex> | 258 | </v-flex> |
| 259 | <v-flex xs8 class="ml-3"> | 259 | <v-flex xs8 class="ml-3"> |
| 260 | <v-autocomplete | 260 | <v-autocomplete |
| 261 | v-model="sectionData.name" | 261 | v-model="sectionData.name" |
| 262 | placeholder="fill your Section Name" | 262 | placeholder="fill your Section Name" |
| 263 | :items="SectionName" | 263 | :items="SectionName" |
| 264 | :rules="nameRules" | 264 | :rules="nameRules" |
| 265 | required | 265 | required |
| 266 | ></v-autocomplete> | 266 | ></v-autocomplete> |
| 267 | </v-flex> | 267 | </v-flex> |
| 268 | </v-layout> | 268 | </v-layout> |
| 269 | <v-layout> | 269 | <v-layout> |
| 270 | <v-flex xs4 class="pt-4 subheading"> | 270 | <v-flex xs4 class="pt-4 subheading"> |
| 271 | <label class="right">Class :</label> | 271 | <label class="right">Class :</label> |
| 272 | </v-flex> | 272 | </v-flex> |
| 273 | <v-flex xs8 class="ml-3"> | 273 | <v-flex xs8 class="ml-3"> |
| 274 | <v-select | 274 | <v-select |
| 275 | :items="addclass" | 275 | :items="addclass" |
| 276 | label="Select Class" | 276 | label="Select Class" |
| 277 | v-model="sectionData.classNum" | 277 | v-model="sectionData.classNum" |
| 278 | item-text="classNum" | 278 | item-text="classNum" |
| 279 | item-value="_id" | 279 | item-value="_id" |
| 280 | name="Select Class" | 280 | name="Select Class" |
| 281 | :rules="classRules" | 281 | :rules="classRules" |
| 282 | required | 282 | required |
| 283 | ></v-select> | 283 | ></v-select> |
| 284 | </v-flex> | 284 | </v-flex> |
| 285 | </v-layout> | 285 | </v-layout> |
| 286 | <v-layout> | 286 | <v-layout> |
| 287 | <v-flex xs4 class="pt-4 subheading"> | 287 | <v-flex xs4 class="pt-4 subheading"> |
| 288 | <label class="right">Incharge :</label> | 288 | <label class="right">Incharge :</label> |
| 289 | </v-flex> | 289 | </v-flex> |
| 290 | <v-flex xs8 class="ml-3"> | 290 | <v-flex xs8 class="ml-3"> |
| 291 | <v-select | 291 | <v-select |
| 292 | :items="teacherList" | 292 | :items="teacherList" |
| 293 | label="Select Incharge" | 293 | label="Select Incharge" |
| 294 | v-model="sectionData.sectionId" | 294 | v-model="sectionData.sectionId" |
| 295 | item-text="name" | 295 | item-text="name" |
| 296 | item-value="_id" | 296 | item-value="_id" |
| 297 | name="Select Class" | 297 | name="Select Class" |
| 298 | :rules="inchargeRules" | 298 | :rules="inchargeRules" |
| 299 | required | 299 | required |
| 300 | ></v-select> | 300 | ></v-select> |
| 301 | </v-flex> | 301 | </v-flex> |
| 302 | </v-layout> | 302 | </v-layout> |
| 303 | <v-layout> | 303 | <v-layout> |
| 304 | <v-flex xs4 class="pt-4 subheading"> | 304 | <v-flex xs4 class="pt-4 subheading"> |
| 305 | <label class="right">Session:</label> | 305 | <label class="right">Session:</label> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | <v-flex xs8 class="ml-3"> | 307 | <v-flex xs8 class="ml-3"> |
| 308 | <v-text-field | 308 | <v-text-field |
| 309 | v-model="sectionData.session" | 309 | v-model="sectionData.session" |
| 310 | placeholder="fill your Session" | 310 | placeholder="fill your Session" |
| 311 | name="name" | 311 | name="name" |
| 312 | type="text" | 312 | type="text" |
| 313 | :rules="sessionRules" | 313 | :rules="sessionRules" |
| 314 | required | 314 | required |
| 315 | ></v-text-field> | 315 | ></v-text-field> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | <v-layout> | 318 | <v-layout> |
| 319 | <v-flex xs12 sm12> | 319 | <v-flex xs12 sm12> |
| 320 | <v-card-actions> | 320 | <v-card-actions> |
| 321 | <v-btn @click="clear" class="add-button" round dark>Clear</v-btn> | 321 | <v-btn @click="clear" class="add-button" round dark>Clear</v-btn> |
| 322 | <v-spacer></v-spacer> | 322 | <v-spacer></v-spacer> |
| 323 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> | 323 | <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> |
| 324 | </v-card-actions> | 324 | </v-card-actions> |
| 325 | </v-flex> | 325 | </v-flex> |
| 326 | </v-layout> | 326 | </v-layout> |
| 327 | </v-form> | 327 | </v-form> |
| 328 | </v-flex> | 328 | </v-flex> |
| 329 | </v-layout> | 329 | </v-layout> |
| 330 | </v-container> | 330 | </v-container> |
| 331 | </v-card> | 331 | </v-card> |
| 332 | </v-dialog> | 332 | </v-dialog> |
| 333 | <v-snackbar | 333 | <v-snackbar |
| 334 | :timeout="timeout" | 334 | :timeout="timeout" |
| 335 | :top="y === 'top'" | 335 | :top="y === 'top'" |
| 336 | :right="x === 'right'" | 336 | :right="x === 'right'" |
| 337 | :vertical="mode === 'vertical'" | 337 | :vertical="mode === 'vertical'" |
| 338 | v-model="snackbar" | 338 | v-model="snackbar" |
| 339 | :color="color" | 339 | :color="color" |
| 340 | >{{ text }}</v-snackbar> | 340 | >{{ text }}</v-snackbar> |
| 341 | <div class="loader" v-if="showLoader"> | 341 | <div class="loader" v-if="showLoader"> |
| 342 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 342 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 343 | </div> | 343 | </div> |
| 344 | </v-container> | 344 | </v-container> |
| 345 | </template> | 345 | </template> |
| 346 | 346 | ||
| 347 | <script> | 347 | <script> |
| 348 | import http from "@/Services/http.js"; | 348 | import http from "@/Services/http.js"; |
| 349 | // import { apiCollection } from "@/schoolApi/apiCollection"; | 349 | // import { apiCollection } from "@/schoolApi/apiCollection"; |
| 350 | // const getSectionData = apiCollection.get("posts"); | 350 | // const getSectionData = apiCollection.get("posts"); |
| 351 | 351 | ||
| 352 | export default { | 352 | export default { |
| 353 | data: () => ({ | 353 | data: () => ({ |
| 354 | snackbar: false, | 354 | snackbar: false, |
| 355 | y: "top", | 355 | y: "top", |
| 356 | x: "right", | 356 | x: "right", |
| 357 | mode: "", | 357 | mode: "", |
| 358 | timeout: 5000, | 358 | timeout: 5000, |
| 359 | text: "", | 359 | text: "", |
| 360 | color: "", | 360 | color: "", |
| 361 | show: true, | 361 | show: true, |
| 362 | showSearch: false, | 362 | showSearch: false, |
| 363 | showLoader: false, | 363 | showLoader: false, |
| 364 | loading: false, | 364 | loading: false, |
| 365 | date: null, | 365 | date: null, |
| 366 | search: "", | 366 | search: "", |
| 367 | editSectionDialog: false, | 367 | editSectionDialog: false, |
| 368 | viewSectionDialog: false, | 368 | viewSectionDialog: false, |
| 369 | valid: true, | 369 | valid: true, |
| 370 | validEdit: true, | 370 | validEdit: true, |
| 371 | addSectionDialog: false, | 371 | addSectionDialog: false, |
| 372 | editLoading: false, | 372 | editLoading: false, |
| 373 | details: [], | 373 | details: [], |
| 374 | pagination: { | 374 | pagination: { |
| 375 | rowsPerPage: 10, | 375 | rowsPerPage: 10, |
| 376 | }, | 376 | }, |
| 377 | nameRules: [(v) => !!v || " Section Name is required"], | 377 | nameRules: [(v) => !!v || " Section Name is required"], |
| 378 | classRules: [(v) => !!v || " Class Name is required"], | 378 | classRules: [(v) => !!v || " Class Name is required"], |
| 379 | sessionRules: [(v) => !!v || " Session is required"], | 379 | sessionRules: [(v) => !!v || " Session is required"], |
| 380 | inchargeRules: [(v) => !!v || " Incharge Name is required"], | 380 | inchargeRules: [(v) => !!v || " Incharge Name is required"], |
| 381 | SectionName: ["A", "B", "C", "D", "E", "F"], | 381 | SectionName: ["A", "B", "C", "D", "E", "F"], |
| 382 | headers: [ | 382 | headers: [ |
| 383 | { | 383 | { |
| 384 | text: "No", | 384 | text: "No", |
| 385 | align: "", | 385 | align: "", |
| 386 | sortable: false, | 386 | sortable: false, |
| 387 | value: "No", | 387 | value: "No", |
| 388 | }, | 388 | }, |
| 389 | { | 389 | { |
| 390 | text: "Class Name", | 390 | text: "Class Name", |
| 391 | value: "classData.classNum", | 391 | value: "classData.classNum", |
| 392 | sortable: false, | 392 | sortable: false, |
| 393 | align: "center", | 393 | align: "center", |
| 394 | }, | 394 | }, |
| 395 | { text: "Section Name", value: "name", sortable: false, align: "center" }, | 395 | { text: "Section Name", value: "name", sortable: false, align: "center" }, |
| 396 | { text: "Session", value: "session", sortable: false, align: "center" }, | 396 | { text: "Session", value: "session", sortable: false, align: "center" }, |
| 397 | { text: "Action", value: "", sortable: false, align: "center" }, | 397 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 398 | ], | 398 | ], |
| 399 | sectionList: [], | 399 | sectionList: [], |
| 400 | addclass: [], | 400 | addclass: [], |
| 401 | teacherList: [], | 401 | teacherList: [], |
| 402 | select: "", | 402 | select: "", |
| 403 | selectId: "", | 403 | selectId: "", |
| 404 | token: "", | 404 | token: "", |
| 405 | editedIndex: -1, | 405 | editedIndex: -1, |
| 406 | editedItem: { | 406 | editedItem: { |
| 407 | classData: { | 407 | classData: { |
| 408 | classNum: "", | 408 | classNum: "", |
| 409 | }, | 409 | }, |
| 410 | teacherData: [ | 410 | teacherData: [ |
| 411 | { | 411 | { |
| 412 | name: "", | 412 | name: "", |
| 413 | }, | 413 | }, |
| 414 | ], | 414 | ], |
| 415 | // name: "", | 415 | // name: "", |
| 416 | // session: new Date().getFullYear() | 416 | // session: new Date().getFullYear() |
| 417 | }, | 417 | }, |
| 418 | sectionData: { | 418 | sectionData: { |
| 419 | session: new Date().getFullYear(), | 419 | session: new Date().getFullYear(), |
| 420 | }, | 420 | }, |
| 421 | }), | 421 | }), |
| 422 | watch: { | 422 | watch: { |
| 423 | addSectionDialog: function (val) { | 423 | addSectionDialog: function (val) { |
| 424 | if (!val) { | 424 | if (!val) { |
| 425 | this.sectionData = []; | 425 | this.sectionData = []; |
| 426 | } | 426 | } |
| 427 | }, | 427 | }, |
| 428 | }, | 428 | }, |
| 429 | methods: { | 429 | methods: { |
| 430 | getSectionList() { | 430 | getSectionList() { |
| 431 | // const { data } = await getSectionData.get(); | 431 | // const { data } = await getSectionData.get(); |
| 432 | this.showLoader = true; | 432 | this.showLoader = true; |
| 433 | http() | 433 | http() |
| 434 | .get("/getAllSections", { | 434 | .get("/getAllSections", { |
| 435 | headers: { Authorization: "Bearer " + this.token }, | 435 | headers: { Authorization: "Bearer " + this.token }, |
| 436 | }) | 436 | }) |
| 437 | .then((response) => { | 437 | .then((response) => { |
| 438 | this.sectionList = response.data.data; | 438 | this.sectionList = response.data.data; |
| 439 | this.showLoader = false; | 439 | this.showLoader = false; |
| 440 | // console.log("getAllSections=====>",response.data.data) | 440 | // console.log("getAllSections=====>",response.data.data) |
| 441 | }) | 441 | }) |
| 442 | .catch((error) => { | 442 | .catch((error) => { |
| 443 | this.showLoader = false; | 443 | this.showLoader = false; |
| 444 | if (error.response.status === 401) { | 444 | if (error.response.status === 401) { |
| 445 | this.$router.replace({ path: "/" }); | 445 | this.$router.replace({ path: "/" }); |
| 446 | this.$store.dispatch("setToken", null); | 446 | this.$store.dispatch("setToken", null); |
| 447 | this.$store.dispatch("Id", null); | 447 | this.$store.dispatch("Id", null); |
| 448 | } | 448 | } |
| 449 | }); | 449 | }); |
| 450 | }, | 450 | }, |
| 451 | editItem(item) { | 451 | editItem(item) { |
| 452 | this.editedIndex = this.sectionList.indexOf(item); | 452 | this.editedIndex = this.sectionList.indexOf(item); |
| 453 | this.editedItem = Object.assign({}, item); | 453 | this.editedItem = Object.assign({}, item); |
| 454 | this.editSectionDialog = true; | 454 | this.editSectionDialog = true; |
| 455 | }, | 455 | }, |
| 456 | profile(item) { | 456 | profile(item) { |
| 457 | this.editedIndex = this.sectionList.indexOf(item); | 457 | this.editedIndex = this.sectionList.indexOf(item); |
| 458 | this.editedItem = Object.assign({}, item); | 458 | this.editedItem = Object.assign({}, item); |
| 459 | this.viewSectionDialog = true; | 459 | this.viewSectionDialog = true; |
| 460 | }, | 460 | }, |
| 461 | deleteItem(item) { | 461 | deleteItem(item) { |
| 462 | let deleteStudent = { | 462 | let deleteStudent = { |
| 463 | sectionId: item._id, | 463 | sectionId: item._id, |
| 464 | }; | 464 | }; |
| 465 | http() | 465 | http() |
| 466 | .delete( | 466 | .delete( |
| 467 | "/deleteSection", | 467 | "/deleteSection", |
| 468 | confirm("Are you sure you want to delete this?") && { | 468 | confirm("Are you sure you want to delete this?") && { |
| 469 | params: deleteStudent, | 469 | params: deleteStudent, |
| 470 | } | 470 | } |
| 471 | ) | 471 | ) |
| 472 | .then((response) => { | 472 | .then((response) => { |
| 473 | this.snackbar = true; | 473 | this.snackbar = true; |
| 474 | this.text = response.data.message; | 474 | this.text = response.data.message; |
| 475 | this.color = "green"; | 475 | this.color = "green"; |
| 476 | this.getSectionList(); | 476 | this.getSectionList(); |
| 477 | }) | 477 | }) |
| 478 | .catch((error) => { | 478 | .catch((error) => { |
| 479 | this.snackbar = true; | 479 | this.snackbar = true; |
| 480 | this.text = error.response.data.message; | 480 | this.text = error.response.data.message; |
| 481 | this.color = "green"; | 481 | this.color = "green"; |
| 482 | }); | 482 | }); |
| 483 | }, | 483 | }, |
| 484 | closeSectionDialog() { | 484 | closeSectionDialog() { |
| 485 | this.editSectionDialog = false; | 485 | this.editSectionDialog = false; |
| 486 | }, | 486 | }, |
| 487 | closeviewSectionDialog() { | 487 | closeviewSectionDialog() { |
| 488 | this.viewSectionDialog = false; | 488 | this.viewSectionDialog = false; |
| 489 | }, | 489 | }, |
| 490 | submit() { | 490 | submit() { |
| 491 | if (this.$refs.form.validate()) { | 491 | if (this.$refs.form.validate()) { |
| 492 | let addSection = { | 492 | let addSection = { |
| 493 | name: this.sectionData.name, | 493 | name: this.sectionData.name, |
| 494 | classId: this.sectionData.classNum, | 494 | classId: this.sectionData.classNum, |
| 495 | session: this.sectionData.session, | 495 | session: this.sectionData.session, |
| 496 | classInchargeId: this.sectionData.sectionId, | 496 | classInchargeId: this.sectionData.sectionId, |
| 497 | }; | 497 | }; |
| 498 | this.loading = true; | 498 | this.loading = true; |
| 499 | http() | 499 | http() |
| 500 | .post("/createSection", addSection) | 500 | .post("/createSection", addSection) |
| 501 | .then((response) => { | 501 | .then((response) => { |
| 502 | this.getSectionList(); | 502 | this.getSectionList(); |
| 503 | this.snackbar = true; | 503 | this.snackbar = true; |
| 504 | this.color = "green"; | 504 | this.color = "green"; |
| 505 | this.text = "New Section added successfully"; | 505 | this.text = "New Section added successfully"; |
| 506 | this.clear(); | 506 | this.clear(); |
| 507 | this.addSectionDialog = false; | 507 | this.addSectionDialog = false; |
| 508 | this.loading = false; | 508 | this.loading = false; |
| 509 | }) | 509 | }) |
| 510 | .catch((error) => { | 510 | .catch((error) => { |
| 511 | this.snackbar = true; | 511 | this.snackbar = true; |
| 512 | this.color = "error"; | 512 | this.color = "error"; |
| 513 | this.text = error.response.data.message; | 513 | this.text = error.response.data.message; |
| 514 | this.loading = false; | 514 | this.loading = false; |
| 515 | }); | 515 | }); |
| 516 | } | 516 | } |
| 517 | }, | 517 | }, |
| 518 | clear() { | 518 | clear() { |
| 519 | this.$refs.form.reset(); | 519 | this.$refs.form.reset(); |
| 520 | }, | 520 | }, |
| 521 | save() { | 521 | save() { |
| 522 | this.editedItem.sectionId = this.editedItem._id; | 522 | this.editedItem.sectionId = this.editedItem._id; |
| 523 | this.editLoading = true; | 523 | this.editLoading = true; |
| 524 | http() | 524 | http() |
| 525 | .put("/updateSection", this.editedItem) | 525 | .put("/updateSection", this.editedItem) |
| 526 | .then((response) => { | 526 | .then((response) => { |
| 527 | this.editLoading = false; | 527 | this.editLoading = false; |
| 528 | this.snackbar = true; | 528 | this.snackbar = true; |
| 529 | this.color = "green"; | 529 | this.color = "green"; |
| 530 | this.text = response.data.message; | 530 | this.text = response.data.message; |
| 531 | this.getSectionList(); | 531 | this.getSectionList(); |
| 532 | this.closeSectionDialog(); | 532 | this.closeSectionDialog(); |
| 533 | }) | 533 | }) |
| 534 | .catch((error) => { | 534 | .catch((error) => { |
| 535 | this.editLoading = false; | 535 | this.editLoading = false; |
| 536 | this.snackbar = true; | 536 | this.snackbar = true; |
| 537 | this.color = "error"; | 537 | this.color = "error"; |
| 538 | this.text = error.response.data.message; | 538 | this.text = error.response.data.message; |
| 539 | }); | 539 | }); |
| 540 | }, | 540 | }, |
| 541 | getAllTeacher() { | 541 | getAllTeacher() { |
| 542 | http() | 542 | http() |
| 543 | .get("/getTeachersList", { | 543 | .get("/getTeachersList", { |
| 544 | headers: { Authorization: "Bearer " + this.token }, | 544 | headers: { Authorization: "Bearer " + this.token }, |
| 545 | }) | 545 | }) |
| 546 | .then((response) => { | 546 | .then((response) => { |
| 547 | this.teacherList = response.data.data; | 547 | this.teacherList = response.data.data; |
| 548 | this.showLoader = false; | 548 | this.showLoader = false; |
| 549 | }) | 549 | }) |
| 550 | .catch((err) => { | 550 | .catch((err) => { |
| 551 | // console.log("err====>", err); | 551 | // console.log("err====>", err); |
| 552 | this.showLoader = false; | 552 | this.showLoader = false; |
| 553 | }); | 553 | }); |
| 554 | }, | 554 | }, |
| 555 | getAllClasses() { | 555 | getAllClasses() { |
| 556 | http() | 556 | http() |
| 557 | .get("/getClassesList", { | 557 | .get("/getClassesList", { |
| 558 | headers: { Authorization: "Bearer " + this.token }, | 558 | headers: { Authorization: "Bearer " + this.token }, |
| 559 | }) | 559 | }) |
| 560 | .then((response) => { | 560 | .then((response) => { |
| 561 | this.addclass = response.data.data; | 561 | this.addclass = response.data.data; |
| 562 | }) | 562 | }) |
| 563 | .catch((err) => { | 563 | .catch((err) => { |
| 564 | // console.log("err====>", err); | 564 | // console.log("err====>", err); |
| 565 | // this.$router.replace({ path: "/" }); | 565 | // this.$router.replace({ path: "/" }); |
| 566 | }); | 566 | }); |
| 567 | }, | 567 | }, |
| 568 | displaySearch() { | 568 | displaySearch() { |
| 569 | (this.show = false), (this.showSearch = true); | 569 | (this.show = false), (this.showSearch = true); |
| 570 | }, | 570 | }, |
| 571 | closeSearch() { | 571 | closeSearch() { |
| 572 | this.showSearch = false; | 572 | this.showSearch = false; |
| 573 | this.show = true; | 573 | this.show = true; |
| 574 | this.search = ""; | 574 | this.search = ""; |
| 575 | }, | 575 | }, |
| 576 | }, | 576 | }, |
| 577 | mounted() { | 577 | mounted() { |
| 578 | this.token = this.$store.state.token; | 578 | this.token = this.$store.state.token; |
| 579 | this.getSectionList(); | 579 | this.getSectionList(); |
| 580 | this.getAllClasses(); | 580 | this.getAllClasses(); |
| 581 | this.getAllTeacher(); | 581 | this.getAllTeacher(); |
| 582 | }, | 582 | }, |
| 583 | }; | 583 | }; |
| 584 | </script> | 584 | </script> |
| 585 | 585 |
src/pages/Students/students.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> | 3 | <!-- ****** EDITS STUDENTS DETAILS ****** --> |
| 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable> | 4 | <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Student Details</label> | 8 | <label class="title text-xs-center">Edit Student Details</label> |
| 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-form ref="form"> | 13 | <v-form ref="form"> |
| 14 | <v-container fluid> | 14 | <v-container fluid> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> | 16 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> |
| 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> | 17 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> |
| 18 | <img src="/static/icon/user.png" /> | 18 | <img src="/static/icon/user.png" /> |
| 19 | </v-avatar> | 19 | </v-avatar> |
| 20 | <img | 20 | <img |
| 21 | :src="editedItem.profilePicUrl" | 21 | :src="editedItem.profilePicUrl" |
| 22 | v-else-if="editedItem.profilePicUrl && !editImageUrl" | 22 | v-else-if="editedItem.profilePicUrl && !editImageUrl" |
| 23 | height="150" | 23 | height="150" |
| 24 | style="border-radius:50%; width:150px" | 24 | style="border-radius:50%; width:150px" |
| 25 | /> | 25 | /> |
| 26 | <img | 26 | <img |
| 27 | v-if="editImageUrl" | 27 | v-if="editImageUrl" |
| 28 | :src="editImageUrl" | 28 | :src="editImageUrl" |
| 29 | style="border-radius:50%; width:150px;height:150px" | 29 | style="border-radius:50%; width:150px;height:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display: none" | 33 | style="display: none" |
| 34 | ref="editDataImage" | 34 | ref="editDataImage" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onEditFilePicked" | 36 | @change="onEditFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm4> | 41 | <v-flex xs12 sm4> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-select | 48 | <v-select |
| 49 | :items="addclass" | 49 | :items="addclass" |
| 50 | label="Select Class" | 50 | label="Select Class" |
| 51 | v-model="editedItem.select" | 51 | v-model="editedItem.select" |
| 52 | item-text="classNum" | 52 | item-text="classNum" |
| 53 | item-value="_id" | 53 | item-value="_id" |
| 54 | name="Select Class" | 54 | name="Select Class" |
| 55 | @change="getSections(editedItem.select)" | 55 | @change="getSections(editedItem.select)" |
| 56 | required | 56 | required |
| 57 | ></v-select> | 57 | ></v-select> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | </v-layout> | 59 | </v-layout> |
| 60 | </v-flex> | 60 | </v-flex> |
| 61 | <v-flex xs12 sm4> | 61 | <v-flex xs12 sm4> |
| 62 | <v-layout> | 62 | <v-layout> |
| 63 | <v-flex xs4 class="pt-4 subheading"> | 63 | <v-flex xs4 class="pt-4 subheading"> |
| 64 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 64 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 65 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 65 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 66 | </v-flex> | 66 | </v-flex> |
| 67 | <v-flex xs8 class="ml-3"> | 67 | <v-flex xs8 class="ml-3"> |
| 68 | <v-select | 68 | <v-select |
| 69 | :items="addSection" | 69 | :items="addSection" |
| 70 | label="Select Section" | 70 | label="Select Section" |
| 71 | v-model="editedItem.selectSection" | 71 | v-model="editedItem.selectSection" |
| 72 | item-text="name" | 72 | item-text="name" |
| 73 | item-value="_id" | 73 | item-value="_id" |
| 74 | name="Select Section" | 74 | name="Select Section" |
| 75 | required | 75 | required |
| 76 | ></v-select> | 76 | ></v-select> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | </v-layout> | 78 | </v-layout> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs12 sm4> | 80 | <v-flex xs12 sm4> |
| 81 | <v-layout> | 81 | <v-layout> |
| 82 | <v-flex xs4 class="pt-4 subheading"> | 82 | <v-flex xs4 class="pt-4 subheading"> |
| 83 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 83 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 84 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 84 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 85 | </v-flex> | 85 | </v-flex> |
| 86 | <v-flex xs8 class="ml-3"> | 86 | <v-flex xs8 class="ml-3"> |
| 87 | <v-text-field | 87 | <v-text-field |
| 88 | v-model="editedItem.name" | 88 | v-model="editedItem.name" |
| 89 | placeholder="fill your full Name" | 89 | placeholder="fill your full Name" |
| 90 | name="name" | 90 | name="name" |
| 91 | type="text" | 91 | type="text" |
| 92 | required | 92 | required |
| 93 | ></v-text-field> | 93 | ></v-text-field> |
| 94 | </v-flex> | 94 | </v-flex> |
| 95 | </v-layout> | 95 | </v-layout> |
| 96 | </v-flex> | 96 | </v-flex> |
| 97 | </v-layout> | 97 | </v-layout> |
| 98 | <v-layout wrap> | 98 | <v-layout wrap> |
| 99 | <v-flex xs12 sm4> | 99 | <v-flex xs12 sm4> |
| 100 | <v-layout> | 100 | <v-layout> |
| 101 | <v-flex xs4 class="pt-4 subheading"> | 101 | <v-flex xs4 class="pt-4 subheading"> |
| 102 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> | 102 | <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> |
| 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> | 103 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> |
| 104 | </v-flex> | 104 | </v-flex> |
| 105 | <v-flex xs8 class="ml-3"> | 105 | <v-flex xs8 class="ml-3"> |
| 106 | <v-text-field | 106 | <v-text-field |
| 107 | placeholder="fill your email" | 107 | placeholder="fill your email" |
| 108 | v-model="editedItem.email" | 108 | v-model="editedItem.email" |
| 109 | type="text" | 109 | type="text" |
| 110 | name="email" | 110 | name="email" |
| 111 | required | 111 | required |
| 112 | ></v-text-field> | 112 | ></v-text-field> |
| 113 | </v-flex> | 113 | </v-flex> |
| 114 | </v-layout> | 114 | </v-layout> |
| 115 | </v-flex> | 115 | </v-flex> |
| 116 | <v-flex xs12 sm4> | 116 | <v-flex xs12 sm4> |
| 117 | <v-layout> | 117 | <v-layout> |
| 118 | <v-flex xs4 class="pt-4 subheading"> | 118 | <v-flex xs4 class="pt-4 subheading"> |
| 119 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 119 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 120 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 120 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | <v-flex xs8 class="ml-3"> | 122 | <v-flex xs8 class="ml-3"> |
| 123 | <v-menu | 123 | <v-menu |
| 124 | ref="menu" | 124 | ref="menu" |
| 125 | :close-on-content-click="false" | 125 | :close-on-content-click="false" |
| 126 | v-model="menu1" | 126 | v-model="menu1" |
| 127 | :nudge-right="40" | 127 | :nudge-right="40" |
| 128 | lazy | 128 | lazy |
| 129 | transition="scale-transition" | 129 | transition="scale-transition" |
| 130 | offset-y | 130 | offset-y |
| 131 | full-width | 131 | full-width |
| 132 | min-width="290px" | 132 | min-width="290px" |
| 133 | > | 133 | > |
| 134 | <v-text-field | 134 | <v-text-field |
| 135 | slot="activator" | 135 | slot="activator" |
| 136 | v-model="editedItem.dob" | 136 | v-model="editedItem.dob" |
| 137 | placeholder="Select Dob" | 137 | placeholder="Select Dob" |
| 138 | ></v-text-field> | 138 | ></v-text-field> |
| 139 | <v-date-picker | 139 | <v-date-picker |
| 140 | ref="picker" | 140 | ref="picker" |
| 141 | v-model="editedItem.dob" | 141 | v-model="editedItem.dob" |
| 142 | :max="new Date().toISOString().substr(0, 10)" | 142 | :max="new Date().toISOString().substr(0, 10)" |
| 143 | min="1950-01-01" | 143 | min="1950-01-01" |
| 144 | @input="menu1 = false" | 144 | @input="menu1 = false" |
| 145 | ></v-date-picker> | 145 | ></v-date-picker> |
| 146 | </v-menu> | 146 | </v-menu> |
| 147 | </v-flex> | 147 | </v-flex> |
| 148 | </v-layout> | 148 | </v-layout> |
| 149 | </v-flex> | 149 | </v-flex> |
| 150 | <v-flex xs12 sm4> | 150 | <v-flex xs12 sm4> |
| 151 | <v-layout> | 151 | <v-layout> |
| 152 | <v-flex xs4 class="pt-4 subheading"> | 152 | <v-flex xs4 class="pt-4 subheading"> |
| 153 | <label class="right">City:</label> | 153 | <label class="right">City:</label> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | <v-flex xs8 class="ml-3"> | 155 | <v-flex xs8 class="ml-3"> |
| 156 | <v-text-field | 156 | <v-text-field |
| 157 | v-model="editedItem.city" | 157 | v-model="editedItem.city" |
| 158 | placeholder="fill your City Name" | 158 | placeholder="fill your City Name" |
| 159 | name="City" | 159 | name="City" |
| 160 | type="text" | 160 | type="text" |
| 161 | required | 161 | required |
| 162 | ></v-text-field> | 162 | ></v-text-field> |
| 163 | </v-flex> | 163 | </v-flex> |
| 164 | </v-layout> | 164 | </v-layout> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | </v-layout> | 166 | </v-layout> |
| 167 | <v-layout wrap> | 167 | <v-layout wrap> |
| 168 | <v-flex xs12 sm4> | 168 | <v-flex xs12 sm4> |
| 169 | <v-layout> | 169 | <v-layout> |
| 170 | <v-flex xs4 class="pt-4 subheading"> | 170 | <v-flex xs4 class="pt-4 subheading"> |
| 171 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 171 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 172 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> | 172 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> |
| 173 | </v-flex> | 173 | </v-flex> |
| 174 | <v-flex xs8 class="ml-3"> | 174 | <v-flex xs8 class="ml-3"> |
| 175 | <v-text-field | 175 | <v-text-field |
| 176 | v-model="editedItem.bloodGroup" | 176 | v-model="editedItem.bloodGroup" |
| 177 | placeholder="fill your BloodGroup" | 177 | placeholder="fill your BloodGroup" |
| 178 | name="state" | 178 | name="state" |
| 179 | type="text" | 179 | type="text" |
| 180 | required | 180 | required |
| 181 | ></v-text-field> | 181 | ></v-text-field> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | <v-flex xs12 sm4> | 185 | <v-flex xs12 sm4> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="pt-4 subheading"> | 187 | <v-flex xs4 class="pt-4 subheading"> |
| 188 | <label class="right">Gender:</label> | 188 | <label class="right">Gender:</label> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs8 class="ml-3"> | 190 | <v-flex xs8 class="ml-3"> |
| 191 | <v-select | 191 | <v-select |
| 192 | :items="gender" | 192 | :items="gender" |
| 193 | v-model="editedItem.gender" | 193 | v-model="editedItem.gender" |
| 194 | placeholder="Select Gender" | 194 | placeholder="Select Gender" |
| 195 | required | 195 | required |
| 196 | ></v-select> | 196 | ></v-select> |
| 197 | </v-flex> | 197 | </v-flex> |
| 198 | </v-layout> | 198 | </v-layout> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex xs12 sm4> | 200 | <v-flex xs12 sm4> |
| 201 | <v-layout> | 201 | <v-layout> |
| 202 | <v-flex xs4 class="pt-4 subheading"> | 202 | <v-flex xs4 class="pt-4 subheading"> |
| 203 | <label class="right">Medical Notes:</label> | 203 | <label class="right">Medical Notes:</label> |
| 204 | </v-flex> | 204 | </v-flex> |
| 205 | <v-flex xs8 class="ml-3"> | 205 | <v-flex xs8 class="ml-3"> |
| 206 | <v-text-field | 206 | <v-text-field |
| 207 | v-model="editedItem.medicalNotes" | 207 | v-model="editedItem.medicalNotes" |
| 208 | placeholder="fill your medicalNotes" | 208 | placeholder="fill your medicalNotes" |
| 209 | required | 209 | required |
| 210 | ></v-text-field> | 210 | ></v-text-field> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | <v-layout wrap> | 215 | <v-layout wrap> |
| 216 | <v-flex xs12 sm4> | 216 | <v-flex xs12 sm4> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs4 class="pt-4 subheading"> | 218 | <v-flex xs4 class="pt-4 subheading"> |
| 219 | <label class="right">Height:</label> | 219 | <label class="right">Height:</label> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex xs8 class="ml-3"> | 221 | <v-flex xs8 class="ml-3"> |
| 222 | <v-text-field | 222 | <v-text-field |
| 223 | v-model="editedItem.height" | 223 | v-model="editedItem.height" |
| 224 | placeholder="fill your Height" | 224 | placeholder="fill your Height" |
| 225 | name="state" | 225 | name="state" |
| 226 | type="text" | 226 | type="text" |
| 227 | required | 227 | required |
| 228 | ></v-text-field> | 228 | ></v-text-field> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | </v-layout> | 230 | </v-layout> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs12 sm4> | 232 | <v-flex xs12 sm4> |
| 233 | <v-layout> | 233 | <v-layout> |
| 234 | <v-flex xs4 class="pt-4 subheading"> | 234 | <v-flex xs4 class="pt-4 subheading"> |
| 235 | <label class="right">Weight:</label> | 235 | <label class="right">Weight:</label> |
| 236 | </v-flex> | 236 | </v-flex> |
| 237 | <v-flex xs8 class="ml-3"> | 237 | <v-flex xs8 class="ml-3"> |
| 238 | <v-text-field | 238 | <v-text-field |
| 239 | v-model="editedItem.weight" | 239 | v-model="editedItem.weight" |
| 240 | placeholder="fill your Weight" | 240 | placeholder="fill your Weight" |
| 241 | name="pincode" | 241 | name="pincode" |
| 242 | required | 242 | required |
| 243 | ></v-text-field> | 243 | ></v-text-field> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs12 sm4> | 247 | <v-flex xs12 sm4> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 250 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 251 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 251 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 252 | </v-flex> | 252 | </v-flex> |
| 253 | <v-flex xs8 class="ml-3"> | 253 | <v-flex xs8 class="ml-3"> |
| 254 | <v-text-field | 254 | <v-text-field |
| 255 | label="Select Image" | 255 | label="Select Image" |
| 256 | @click="pickEditFile" | 256 | @click="pickEditFile" |
| 257 | v-model="editImageName" | 257 | v-model="editImageName" |
| 258 | append-icon="attach_file" | 258 | append-icon="attach_file" |
| 259 | ></v-text-field> | 259 | ></v-text-field> |
| 260 | </v-flex> | 260 | </v-flex> |
| 261 | </v-layout> | 261 | </v-layout> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 264 | <v-layout wrap> | 264 | <v-layout wrap> |
| 265 | <v-flex xs12 sm4> | 265 | <v-flex xs12 sm4> |
| 266 | <v-layout> | 266 | <v-layout> |
| 267 | <v-flex xs4 class="pt-4 subheading"> | 267 | <v-flex xs4 class="pt-4 subheading"> |
| 268 | <label class="right">State:</label> | 268 | <label class="right">State:</label> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | <v-flex xs8 class="ml-3"> | 270 | <v-flex xs8 class="ml-3"> |
| 271 | <v-text-field | 271 | <v-text-field |
| 272 | v-model="editedItem.state" | 272 | v-model="editedItem.state" |
| 273 | placeholder="fill your State Name" | 273 | placeholder="fill your State Name" |
| 274 | name="state" | 274 | name="state" |
| 275 | type="text" | 275 | type="text" |
| 276 | required | 276 | required |
| 277 | ></v-text-field> | 277 | ></v-text-field> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | </v-flex> | 280 | </v-flex> |
| 281 | <v-flex xs12 sm4> | 281 | <v-flex xs12 sm4> |
| 282 | <v-layout> | 282 | <v-layout> |
| 283 | <v-flex xs4 class="pt-4 subheading"> | 283 | <v-flex xs4 class="pt-4 subheading"> |
| 284 | <label class="right">Pincode:</label> | 284 | <label class="right">Pincode:</label> |
| 285 | </v-flex> | 285 | </v-flex> |
| 286 | <v-flex xs8 class="ml-3"> | 286 | <v-flex xs8 class="ml-3"> |
| 287 | <v-text-field | 287 | <v-text-field |
| 288 | v-model="editedItem.pincode" | 288 | v-model="editedItem.pincode" |
| 289 | placeholder="fill your pincode" | 289 | placeholder="fill your pincode" |
| 290 | name="pincode" | 290 | name="pincode" |
| 291 | type="number" | 291 | type="number" |
| 292 | required | 292 | required |
| 293 | ></v-text-field> | 293 | ></v-text-field> |
| 294 | </v-flex> | 294 | </v-flex> |
| 295 | </v-layout> | 295 | </v-layout> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | <v-flex xs12 sm4> | 297 | <v-flex xs12 sm4> |
| 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 hidden-xs-only hidden-sm-only">Mobile No:</label> | 300 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 301 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 301 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 302 | </v-flex> | 302 | </v-flex> |
| 303 | <v-flex xs8 class="ml-3"> | 303 | <v-flex xs8 class="ml-3"> |
| 304 | <v-text-field | 304 | <v-text-field |
| 305 | v-model="editedItem.mobile" | 305 | v-model="editedItem.mobile" |
| 306 | placeholder="fill your MobileNo" | 306 | placeholder="fill your MobileNo" |
| 307 | name="mobileNo" | 307 | name="mobileNo" |
| 308 | type="number" | 308 | type="number" |
| 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-flex> | 313 | </v-flex> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | <v-layout wrap> | 315 | <v-layout wrap> |
| 316 | <v-flex xs12 sm4> | 316 | <v-flex xs12 sm4> |
| 317 | <v-layout> | 317 | <v-layout> |
| 318 | <v-flex xs4 class="pt-4 subheading"> | 318 | <v-flex xs4 class="pt-4 subheading"> |
| 319 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 319 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 320 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 320 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 321 | </v-flex> | 321 | </v-flex> |
| 322 | <v-flex xs8 class="ml-3"> | 322 | <v-flex xs8 class="ml-3"> |
| 323 | <v-autocomplete | 323 | <v-autocomplete |
| 324 | v-model="editedItem.country" | 324 | v-model="editedItem.country" |
| 325 | :items="countries" | 325 | :items="countries" |
| 326 | placeholder="Select Country Name" | 326 | placeholder="Select Country Name" |
| 327 | required | 327 | required |
| 328 | ></v-autocomplete> | 328 | ></v-autocomplete> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> | 332 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> |
| 333 | <v-layout> | 333 | <v-layout> |
| 334 | <v-flex xs4 class="pt-4 subheading"> | 334 | <v-flex xs4 class="pt-4 subheading"> |
| 335 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 335 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 336 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> | 336 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> |
| 337 | </v-flex> | 337 | </v-flex> |
| 338 | <v-flex xs8 class="ml-3"> | 338 | <v-flex xs8 class="ml-3"> |
| 339 | <v-text-field | 339 | <v-text-field |
| 340 | v-model="editedItem.rollNo" | 340 | v-model="editedItem.rollNo" |
| 341 | placeholder="fill roll number" | 341 | placeholder="fill roll number" |
| 342 | required | 342 | required |
| 343 | ></v-text-field> | 343 | ></v-text-field> |
| 344 | </v-flex> | 344 | </v-flex> |
| 345 | </v-layout> | 345 | </v-layout> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> | 347 | <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> |
| 348 | <v-layout> | 348 | <v-layout> |
| 349 | <v-flex xs4 sm4 class="pt-4 subheading"> | 349 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 350 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> | 350 | <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> |
| 351 | <label | 351 | <label |
| 352 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 352 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 353 | >Permanent Address:</label> | 353 | >Permanent Address:</label> |
| 354 | </v-flex> | 354 | </v-flex> |
| 355 | <v-flex xs12 sm8 class="ml-3"> | 355 | <v-flex xs12 sm8 class="ml-3"> |
| 356 | <v-text-field | 356 | <v-text-field |
| 357 | v-model="editedItem.permanentAddress" | 357 | v-model="editedItem.permanentAddress" |
| 358 | placeholder="fill Your Permanent Address" | 358 | placeholder="fill Your Permanent Address" |
| 359 | required | 359 | required |
| 360 | ></v-text-field> | 360 | ></v-text-field> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | </v-flex> | 363 | </v-flex> |
| 364 | </v-layout> | 364 | </v-layout> |
| 365 | <v-layout class="hidden-xs-only hidden-sm-only"> | 365 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 366 | <v-flex xs12 sm4> | 366 | <v-flex xs12 sm4> |
| 367 | <v-layout> | 367 | <v-layout> |
| 368 | <v-flex xs4 class="pt-4 subheading"> | 368 | <v-flex xs4 class="pt-4 subheading"> |
| 369 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> | 369 | <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> |
| 370 | <label | 370 | <label |
| 371 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 371 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 372 | >Present Address:</label> | 372 | >Present Address:</label> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | <v-flex xs8 class="ml-3"> | 374 | <v-flex xs8 class="ml-3"> |
| 375 | <v-text-field | 375 | <v-text-field |
| 376 | v-model="editedItem.presentAddress" | 376 | v-model="editedItem.presentAddress" |
| 377 | placeholder="Select Country Name" | 377 | placeholder="Select Country Name" |
| 378 | required | 378 | required |
| 379 | ></v-text-field> | 379 | ></v-text-field> |
| 380 | </v-flex> | 380 | </v-flex> |
| 381 | </v-layout> | 381 | </v-layout> |
| 382 | </v-flex> | 382 | </v-flex> |
| 383 | </v-layout> | 383 | </v-layout> |
| 384 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 384 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 385 | <v-flex xs12 sm12> | 385 | <v-flex xs12 sm12> |
| 386 | <v-layout> | 386 | <v-layout> |
| 387 | <v-flex xs4 class="pt-4 subheading"> | 387 | <v-flex xs4 class="pt-4 subheading"> |
| 388 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 388 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 389 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> | 389 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> |
| 390 | </v-flex> | 390 | </v-flex> |
| 391 | <v-flex xs8 class="ml-3"> | 391 | <v-flex xs8 class="ml-3"> |
| 392 | <v-text-field | 392 | <v-text-field |
| 393 | v-model="editedItem.rollNo" | 393 | v-model="editedItem.rollNo" |
| 394 | placeholder="fill roll number" | 394 | placeholder="fill roll number" |
| 395 | required | 395 | required |
| 396 | ></v-text-field> | 396 | ></v-text-field> |
| 397 | </v-flex> | 397 | </v-flex> |
| 398 | </v-layout> | 398 | </v-layout> |
| 399 | </v-flex> | 399 | </v-flex> |
| 400 | </v-layout> | 400 | </v-layout> |
| 401 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 401 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 402 | <v-flex xs12 sm12> | 402 | <v-flex xs12 sm12> |
| 403 | <v-layout> | 403 | <v-layout> |
| 404 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 404 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 405 | <label class>Present Address :</label> | 405 | <label class>Present Address :</label> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-flex xs12 sm12> | 409 | <v-flex xs12 sm12> |
| 410 | <v-textarea | 410 | <v-textarea |
| 411 | v-model="editedItem.presentAddress" | 411 | v-model="editedItem.presentAddress" |
| 412 | placeholder="fill Your present Address" | 412 | placeholder="fill Your present Address" |
| 413 | required | 413 | required |
| 414 | ></v-textarea> | 414 | ></v-textarea> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | </v-layout> | 416 | </v-layout> |
| 417 | </v-flex> | 417 | </v-flex> |
| 418 | <v-flex xs12 sm12> | 418 | <v-flex xs12 sm12> |
| 419 | <v-layout> | 419 | <v-layout> |
| 420 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 420 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 421 | <label>Permanent addr:</label> | 421 | <label>Permanent addr:</label> |
| 422 | </v-flex> | 422 | </v-flex> |
| 423 | </v-layout> | 423 | </v-layout> |
| 424 | <v-layout> | 424 | <v-layout> |
| 425 | <v-flex xs12 sm12> | 425 | <v-flex xs12 sm12> |
| 426 | <v-textarea | 426 | <v-textarea |
| 427 | name="input-4-3" | 427 | name="input-4-3" |
| 428 | v-model="editedItem.permanentAddress" | 428 | v-model="editedItem.permanentAddress" |
| 429 | placeholder="fill Your Permanent Address" | 429 | placeholder="fill Your Permanent Address" |
| 430 | required | 430 | required |
| 431 | ></v-textarea> | 431 | ></v-textarea> |
| 432 | </v-flex> | 432 | </v-flex> |
| 433 | </v-layout> | 433 | </v-layout> |
| 434 | </v-flex> | 434 | </v-flex> |
| 435 | </v-layout> | 435 | </v-layout> |
| 436 | <v-layout> | 436 | <v-layout> |
| 437 | <v-flex xs12 sm12> | 437 | <v-flex xs12 sm12> |
| 438 | <v-layout class="right"> | 438 | <v-layout class="right"> |
| 439 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> | 439 | <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> |
| 440 | </v-layout> | 440 | </v-layout> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | </v-layout> | 442 | </v-layout> |
| 443 | </v-container> | 443 | </v-container> |
| 444 | </v-form> | 444 | </v-form> |
| 445 | </v-card-text> | 445 | </v-card-text> |
| 446 | </v-card> | 446 | </v-card> |
| 447 | </v-dialog> | 447 | </v-dialog> |
| 448 | 448 | ||
| 449 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> | 449 | <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> |
| 450 | 450 | ||
| 451 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable> | 451 | <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent> |
| 452 | <v-card flat class="card-style pa-3" dark> | 452 | <v-card flat class="card-style pa-3" dark> |
| 453 | <v-layout> | 453 | <v-layout> |
| 454 | <v-flex xs12> | 454 | <v-flex xs12> |
| 455 | <label class="title text-xs-center">View Student Details</label> | 455 | <label class="title text-xs-center">View Student Details</label> |
| 456 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> | 456 | <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> |
| 457 | </v-flex> | 457 | </v-flex> |
| 458 | </v-layout> | 458 | </v-layout> |
| 459 | <v-card-text> | 459 | <v-card-text> |
| 460 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> | 460 | <v-flex align-center justify-center layout text-xs-center class="mt-3"> |
| 461 | <v-avatar size="100px"> | 461 | <v-avatar size="100px"> |
| 462 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 462 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 463 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 463 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 464 | </v-avatar> | 464 | </v-avatar> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-container grid-list-md> | 466 | <v-container grid-list-md> |
| 467 | <v-layout wrap> | 467 | <v-layout wrap> |
| 468 | <v-flex xs12 sm5> | 468 | <v-flex xs12 sm5> |
| 469 | <v-layout> | 469 | <v-layout> |
| 470 | <v-flex xs6 sm6> | 470 | <v-flex xs6 sm6> |
| 471 | <h5 class="right my-1"> | 471 | <h5 class="right my-1"> |
| 472 | <b>Full Name:</b> | 472 | <b>Full Name:</b> |
| 473 | </h5> | 473 | </h5> |
| 474 | </v-flex> | 474 | </v-flex> |
| 475 | <v-flex sm6 xs6> | 475 | <v-flex sm6 xs6> |
| 476 | <h5 class="my-1 left">{{ editedItem.name }}</h5> | 476 | <h5 class="my-1 left">{{ editedItem.name }}</h5> |
| 477 | </v-flex> | 477 | </v-flex> |
| 478 | </v-layout> | 478 | </v-layout> |
| 479 | </v-flex> | 479 | </v-flex> |
| 480 | <v-flex xs12 sm7> | 480 | <v-flex xs12 sm7> |
| 481 | <v-layout> | 481 | <v-layout> |
| 482 | <v-flex xs6 sm4> | 482 | <v-flex xs6 sm4> |
| 483 | <h5 class="right my-1"> | 483 | <h5 class="right my-1"> |
| 484 | <b>Email:</b> | 484 | <b>Email:</b> |
| 485 | </h5> | 485 | </h5> |
| 486 | </v-flex> | 486 | </v-flex> |
| 487 | <v-flex sm8 xs6> | 487 | <v-flex sm8 xs6> |
| 488 | <h5 class="my-1 left">{{ editedItem.email }}</h5> | 488 | <h5 class="my-1 left">{{ editedItem.email }}</h5> |
| 489 | </v-flex> | 489 | </v-flex> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | </v-flex> | 491 | </v-flex> |
| 492 | </v-layout> | 492 | </v-layout> |
| 493 | <v-layout wrap> | 493 | <v-layout wrap> |
| 494 | <v-flex xs12 sm5> | 494 | <v-flex xs12 sm5> |
| 495 | <v-layout> | 495 | <v-layout> |
| 496 | <v-flex xs6 sm6> | 496 | <v-flex xs6 sm6> |
| 497 | <b> | 497 | <b> |
| 498 | <h5 class="right my-1"> | 498 | <h5 class="right my-1"> |
| 499 | <b>Gender:</b> | 499 | <b>Gender:</b> |
| 500 | </h5> | 500 | </h5> |
| 501 | </b> | 501 | </b> |
| 502 | </v-flex> | 502 | </v-flex> |
| 503 | <v-flex sm6 xs6> | 503 | <v-flex sm6 xs6> |
| 504 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> | 504 | <h5 class="my-1 left">{{ editedItem.gender }}</h5> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | </v-layout> | 506 | </v-layout> |
| 507 | </v-flex> | 507 | </v-flex> |
| 508 | <v-flex xs12 sm7> | 508 | <v-flex xs12 sm7> |
| 509 | <v-layout> | 509 | <v-layout> |
| 510 | <v-flex xs6 sm4> | 510 | <v-flex xs6 sm4> |
| 511 | <b> | 511 | <b> |
| 512 | <h5 class="right my-1"> | 512 | <h5 class="right my-1"> |
| 513 | <b>D.O.B:</b> | 513 | <b>D.O.B:</b> |
| 514 | </h5> | 514 | </h5> |
| 515 | </b> | 515 | </b> |
| 516 | </v-flex> | 516 | </v-flex> |
| 517 | <v-flex sm8 xs6> | 517 | <v-flex sm8 xs6> |
| 518 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 518 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 519 | </v-flex> | 519 | </v-flex> |
| 520 | </v-layout> | 520 | </v-layout> |
| 521 | </v-flex> | 521 | </v-flex> |
| 522 | </v-layout> | 522 | </v-layout> |
| 523 | <v-layout wrap> | 523 | <v-layout wrap> |
| 524 | <v-flex xs12 sm5> | 524 | <v-flex xs12 sm5> |
| 525 | <v-layout> | 525 | <v-layout> |
| 526 | <v-flex xs6 sm6> | 526 | <v-flex xs6 sm6> |
| 527 | <b> | 527 | <b> |
| 528 | <h5 class="right my-1"> | 528 | <h5 class="right my-1"> |
| 529 | <b>BloodGroup:</b> | 529 | <b>BloodGroup:</b> |
| 530 | </h5> | 530 | </h5> |
| 531 | </b> | 531 | </b> |
| 532 | </v-flex> | 532 | </v-flex> |
| 533 | <v-flex sm6 xs6> | 533 | <v-flex sm6 xs6> |
| 534 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> | 534 | <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> |
| 535 | </v-flex> | 535 | </v-flex> |
| 536 | </v-layout> | 536 | </v-layout> |
| 537 | </v-flex> | 537 | </v-flex> |
| 538 | <v-flex xs12 sm7> | 538 | <v-flex xs12 sm7> |
| 539 | <v-layout> | 539 | <v-layout> |
| 540 | <v-flex xs6 sm4> | 540 | <v-flex xs6 sm4> |
| 541 | <b> | 541 | <b> |
| 542 | <h5 class="right my-1"> | 542 | <h5 class="right my-1"> |
| 543 | <b>Roll No. :</b> | 543 | <b>Roll No. :</b> |
| 544 | </h5> | 544 | </h5> |
| 545 | </b> | 545 | </b> |
| 546 | </v-flex> | 546 | </v-flex> |
| 547 | <v-flex sm8 xs6> | 547 | <v-flex sm8 xs6> |
| 548 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> | 548 | <h5 class="my-1">{{ editedItem.rollNo }}</h5> |
| 549 | </v-flex> | 549 | </v-flex> |
| 550 | </v-layout> | 550 | </v-layout> |
| 551 | </v-flex> | 551 | </v-flex> |
| 552 | </v-layout> | 552 | </v-layout> |
| 553 | <v-layout wrap> | 553 | <v-layout wrap> |
| 554 | <v-flex xs12 sm5> | 554 | <v-flex xs12 sm5> |
| 555 | <v-layout> | 555 | <v-layout> |
| 556 | <v-flex xs6 sm6> | 556 | <v-flex xs6 sm6> |
| 557 | <b> | 557 | <b> |
| 558 | <h5 class="right my-1"> | 558 | <h5 class="right my-1"> |
| 559 | <b>Height:</b> | 559 | <b>Height:</b> |
| 560 | </h5> | 560 | </h5> |
| 561 | </b> | 561 | </b> |
| 562 | </v-flex> | 562 | </v-flex> |
| 563 | <v-flex sm6 xs6> | 563 | <v-flex sm6 xs6> |
| 564 | <h5 class="my-1 left">{{ editedItem.height }}</h5> | 564 | <h5 class="my-1 left">{{ editedItem.height }}</h5> |
| 565 | </v-flex> | 565 | </v-flex> |
| 566 | </v-layout> | 566 | </v-layout> |
| 567 | </v-flex> | 567 | </v-flex> |
| 568 | <v-flex xs12 sm7> | 568 | <v-flex xs12 sm7> |
| 569 | <v-layout> | 569 | <v-layout> |
| 570 | <v-flex xs6 sm4> | 570 | <v-flex xs6 sm4> |
| 571 | <b> | 571 | <b> |
| 572 | <h5 class="right my-1"> | 572 | <h5 class="right my-1"> |
| 573 | <b>Weight:</b> | 573 | <b>Weight:</b> |
| 574 | </h5> | 574 | </h5> |
| 575 | </b> | 575 | </b> |
| 576 | </v-flex> | 576 | </v-flex> |
| 577 | <v-flex sm8 xs6> | 577 | <v-flex sm8 xs6> |
| 578 | <h5 class="my-1">{{ editedItem.weight }}</h5> | 578 | <h5 class="my-1">{{ editedItem.weight }}</h5> |
| 579 | </v-flex> | 579 | </v-flex> |
| 580 | </v-layout> | 580 | </v-layout> |
| 581 | </v-flex> | 581 | </v-flex> |
| 582 | </v-layout> | 582 | </v-layout> |
| 583 | <v-layout wrap> | 583 | <v-layout wrap> |
| 584 | <v-flex xs12 sm5> | 584 | <v-flex xs12 sm5> |
| 585 | <v-layout> | 585 | <v-layout> |
| 586 | <v-flex xs6 sm6> | 586 | <v-flex xs6 sm6> |
| 587 | <b> | 587 | <b> |
| 588 | <h5 class="right my-1"> | 588 | <h5 class="right my-1"> |
| 589 | <b>City:</b> | 589 | <b>City:</b> |
| 590 | </h5> | 590 | </h5> |
| 591 | </b> | 591 | </b> |
| 592 | </v-flex> | 592 | </v-flex> |
| 593 | <v-flex sm6 xs6> | 593 | <v-flex sm6 xs6> |
| 594 | <h5 class="my-1 left">{{ editedItem.city }}</h5> | 594 | <h5 class="my-1 left">{{ editedItem.city }}</h5> |
| 595 | </v-flex> | 595 | </v-flex> |
| 596 | </v-layout> | 596 | </v-layout> |
| 597 | </v-flex> | 597 | </v-flex> |
| 598 | <v-flex xs12 sm7> | 598 | <v-flex xs12 sm7> |
| 599 | <v-layout> | 599 | <v-layout> |
| 600 | <v-flex xs6 sm4> | 600 | <v-flex xs6 sm4> |
| 601 | <b> | 601 | <b> |
| 602 | <h5 class="right my-1"> | 602 | <h5 class="right my-1"> |
| 603 | <b>State:</b> | 603 | <b>State:</b> |
| 604 | </h5> | 604 | </h5> |
| 605 | </b> | 605 | </b> |
| 606 | </v-flex> | 606 | </v-flex> |
| 607 | <v-flex sm8 xs6> | 607 | <v-flex sm8 xs6> |
| 608 | <h5 class="my-1">{{ editedItem.state }}</h5> | 608 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 609 | </v-flex> | 609 | </v-flex> |
| 610 | </v-layout> | 610 | </v-layout> |
| 611 | </v-flex> | 611 | </v-flex> |
| 612 | </v-layout> | 612 | </v-layout> |
| 613 | <v-layout wrap> | 613 | <v-layout wrap> |
| 614 | <v-flex xs12 sm5> | 614 | <v-flex xs12 sm5> |
| 615 | <v-layout> | 615 | <v-layout> |
| 616 | <v-flex xs6 sm6> | 616 | <v-flex xs6 sm6> |
| 617 | <b> | 617 | <b> |
| 618 | <h5 class="right my-1"> | 618 | <h5 class="right my-1"> |
| 619 | <b>Pincode:</b> | 619 | <b>Pincode:</b> |
| 620 | </h5> | 620 | </h5> |
| 621 | </b> | 621 | </b> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | <v-flex sm6 xs6> | 623 | <v-flex sm6 xs6> |
| 624 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 624 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 625 | </v-flex> | 625 | </v-flex> |
| 626 | </v-layout> | 626 | </v-layout> |
| 627 | </v-flex> | 627 | </v-flex> |
| 628 | <v-flex xs12 sm7> | 628 | <v-flex xs12 sm7> |
| 629 | <v-layout> | 629 | <v-layout> |
| 630 | <v-flex xs6 sm4> | 630 | <v-flex xs6 sm4> |
| 631 | <b> | 631 | <b> |
| 632 | <h5 class="right my-1"> | 632 | <h5 class="right my-1"> |
| 633 | <b>Country:</b> | 633 | <b>Country:</b> |
| 634 | </h5> | 634 | </h5> |
| 635 | </b> | 635 | </b> |
| 636 | </v-flex> | 636 | </v-flex> |
| 637 | <v-flex sm7 xs6> | 637 | <v-flex sm7 xs6> |
| 638 | <h5 class="my-1">{{ editedItem.country }}</h5> | 638 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 639 | </v-flex> | 639 | </v-flex> |
| 640 | </v-layout> | 640 | </v-layout> |
| 641 | </v-flex> | 641 | </v-flex> |
| 642 | </v-layout> | 642 | </v-layout> |
| 643 | <v-layout wrap> | 643 | <v-layout wrap> |
| 644 | <v-flex xs12 sm5> | 644 | <v-flex xs12 sm5> |
| 645 | <v-layout> | 645 | <v-layout> |
| 646 | <v-flex sm6 xs6> | 646 | <v-flex sm6 xs6> |
| 647 | <b> | 647 | <b> |
| 648 | <h5 class="right my-1"> | 648 | <h5 class="right my-1"> |
| 649 | <b>Mobile No:</b> | 649 | <b>Mobile No:</b> |
| 650 | </h5> | 650 | </h5> |
| 651 | </b> | 651 | </b> |
| 652 | </v-flex> | 652 | </v-flex> |
| 653 | <v-flex sm6 xs6> | 653 | <v-flex sm6 xs6> |
| 654 | <h5 class="my-1">{{ editedItem.mobile }}</h5> | 654 | <h5 class="my-1">{{ editedItem.mobile }}</h5> |
| 655 | </v-flex> | 655 | </v-flex> |
| 656 | </v-layout> | 656 | </v-layout> |
| 657 | </v-flex> | 657 | </v-flex> |
| 658 | <v-flex xs12 sm7> | 658 | <v-flex xs12 sm7> |
| 659 | <v-layout> | 659 | <v-layout> |
| 660 | <v-flex xs6 sm4> | 660 | <v-flex xs6 sm4> |
| 661 | <b> | 661 | <b> |
| 662 | <h5 class="right my-1"> | 662 | <h5 class="right my-1"> |
| 663 | <b>FahterName:</b> | 663 | <b>FahterName:</b> |
| 664 | </h5> | 664 | </h5> |
| 665 | </b> | 665 | </b> |
| 666 | </v-flex> | 666 | </v-flex> |
| 667 | <v-flex sm8 xs6> | 667 | <v-flex sm8 xs6> |
| 668 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> | 668 | <h5 class="my-1">{{ editedItem.fatherName }}</h5> |
| 669 | </v-flex> | 669 | </v-flex> |
| 670 | </v-layout> | 670 | </v-layout> |
| 671 | </v-flex> | 671 | </v-flex> |
| 672 | </v-layout> | 672 | </v-layout> |
| 673 | <v-layout wrap> | 673 | <v-layout wrap> |
| 674 | <v-flex xs12 sm5> | 674 | <v-flex xs12 sm5> |
| 675 | <v-layout> | 675 | <v-layout> |
| 676 | <v-flex xs6 sm6> | 676 | <v-flex xs6 sm6> |
| 677 | <b> | 677 | <b> |
| 678 | <h5 class="right my-1"> | 678 | <h5 class="right my-1"> |
| 679 | <b>MotherName:</b> | 679 | <b>MotherName:</b> |
| 680 | </h5> | 680 | </h5> |
| 681 | </b> | 681 | </b> |
| 682 | </v-flex> | 682 | </v-flex> |
| 683 | <v-flex sm6 xs6> | 683 | <v-flex sm6 xs6> |
| 684 | <h5 class="my-1">{{ editedItem.motherName }}</h5> | 684 | <h5 class="my-1">{{ editedItem.motherName }}</h5> |
| 685 | </v-flex> | 685 | </v-flex> |
| 686 | </v-layout> | 686 | </v-layout> |
| 687 | </v-flex> | 687 | </v-flex> |
| 688 | <v-flex xs12 sm7> | 688 | <v-flex xs12 sm7> |
| 689 | <v-layout> | 689 | <v-layout> |
| 690 | <v-flex xs6 sm4> | 690 | <v-flex xs6 sm4> |
| 691 | <b> | 691 | <b> |
| 692 | <h5 class="right my-1"> | 692 | <h5 class="right my-1"> |
| 693 | <b>FatherCellNo:</b> | 693 | <b>FatherCellNo:</b> |
| 694 | </h5> | 694 | </h5> |
| 695 | </b> | 695 | </b> |
| 696 | </v-flex> | 696 | </v-flex> |
| 697 | <v-flex sm6 xs6> | 697 | <v-flex sm6 xs6> |
| 698 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> | 698 | <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> |
| 699 | </v-flex> | 699 | </v-flex> |
| 700 | </v-layout> | 700 | </v-layout> |
| 701 | </v-flex> | 701 | </v-flex> |
| 702 | </v-layout> | 702 | </v-layout> |
| 703 | <v-layout wrap> | 703 | <v-layout wrap> |
| 704 | <v-flex xs12 sm5> | 704 | <v-flex xs12 sm5> |
| 705 | <v-layout> | 705 | <v-layout> |
| 706 | <v-flex xs6 sm6> | 706 | <v-flex xs6 sm6> |
| 707 | <b> | 707 | <b> |
| 708 | <h5 class="right my-1"> | 708 | <h5 class="right my-1"> |
| 709 | <b>MotherCellNo:</b> | 709 | <b>MotherCellNo:</b> |
| 710 | </h5> | 710 | </h5> |
| 711 | </b> | 711 | </b> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | <v-flex sm6 xs6> | 713 | <v-flex sm6 xs6> |
| 714 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> | 714 | <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> |
| 715 | </v-flex> | 715 | </v-flex> |
| 716 | </v-layout> | 716 | </v-layout> |
| 717 | </v-flex> | 717 | </v-flex> |
| 718 | <v-flex xs12 sm7> | 718 | <v-flex xs12 sm7> |
| 719 | <v-layout> | 719 | <v-layout> |
| 720 | <v-flex xs6 sm4> | 720 | <v-flex xs6 sm4> |
| 721 | <b> | 721 | <b> |
| 722 | <h5 class="my-1 right"> | 722 | <h5 class="my-1 right"> |
| 723 | <b>AcademicYear:</b> | 723 | <b>AcademicYear:</b> |
| 724 | </h5> | 724 | </h5> |
| 725 | </b> | 725 | </b> |
| 726 | </v-flex> | 726 | </v-flex> |
| 727 | <v-flex sm5 xs8> | 727 | <v-flex sm5 xs8> |
| 728 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> | 728 | <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | </v-layout> | 732 | </v-layout> |
| 733 | <v-layout wrap> | 733 | <v-layout wrap> |
| 734 | <v-flex xs12 sm5> | 734 | <v-flex xs12 sm5> |
| 735 | <v-layout> | 735 | <v-layout> |
| 736 | <v-flex xs6 sm6> | 736 | <v-flex xs6 sm6> |
| 737 | <b> | 737 | <b> |
| 738 | <h5 class="my-1 right"> | 738 | <h5 class="my-1 right"> |
| 739 | <b>MedicalNotes:</b> | 739 | <b>MedicalNotes:</b> |
| 740 | </h5> | 740 | </h5> |
| 741 | </b> | 741 | </b> |
| 742 | </v-flex> | 742 | </v-flex> |
| 743 | <v-flex sm5 xs6> | 743 | <v-flex sm5 xs6> |
| 744 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> | 744 | <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> |
| 745 | </v-flex> | 745 | </v-flex> |
| 746 | </v-layout> | 746 | </v-layout> |
| 747 | </v-flex> | 747 | </v-flex> |
| 748 | <v-flex xs12 sm7 class="hidden-xs-only"> | 748 | <v-flex xs12 sm7 class="hidden-xs-only"> |
| 749 | <v-layout wrap> | 749 | <v-layout wrap> |
| 750 | <v-flex sm4> | 750 | <v-flex sm4> |
| 751 | <b> | 751 | <b> |
| 752 | <h5 class="my-1 right"> | 752 | <h5 class="my-1 right"> |
| 753 | <b>present Address:</b> | 753 | <b>present Address:</b> |
| 754 | </h5> | 754 | </h5> |
| 755 | </b> | 755 | </b> |
| 756 | </v-flex> | 756 | </v-flex> |
| 757 | <v-flex sm8> | 757 | <v-flex sm8> |
| 758 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 758 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 759 | </v-flex> | 759 | </v-flex> |
| 760 | </v-layout> | 760 | </v-layout> |
| 761 | </v-flex> | 761 | </v-flex> |
| 762 | <v-flex sm6 class="hidden-xs-only"> | 762 | <v-flex sm6 class="hidden-xs-only"> |
| 763 | <v-layout wrap> | 763 | <v-layout wrap> |
| 764 | <v-flex sm5> | 764 | <v-flex sm5> |
| 765 | <b> | 765 | <b> |
| 766 | <h5 class="my-1 right"> | 766 | <h5 class="my-1 right"> |
| 767 | <b>Permanent Address:</b> | 767 | <b>Permanent Address:</b> |
| 768 | </h5> | 768 | </h5> |
| 769 | </b> | 769 | </b> |
| 770 | </v-flex> | 770 | </v-flex> |
| 771 | <v-flex sm7> | 771 | <v-flex sm7> |
| 772 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 772 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 773 | </v-flex> | 773 | </v-flex> |
| 774 | </v-layout> | 774 | </v-layout> |
| 775 | </v-flex> | 775 | </v-flex> |
| 776 | </v-layout> | 776 | </v-layout> |
| 777 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> | 777 | <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> |
| 778 | <v-flex xs12 sm5> | 778 | <v-flex xs12 sm5> |
| 779 | <v-layout wrap> | 779 | <v-layout wrap> |
| 780 | <v-flex xs12 sm6> | 780 | <v-flex xs12 sm6> |
| 781 | <b> | 781 | <b> |
| 782 | <h5 class="my-1"> | 782 | <h5 class="my-1"> |
| 783 | <b>present Address:-</b> | 783 | <b>present Address:-</b> |
| 784 | </h5> | 784 | </h5> |
| 785 | </b> | 785 | </b> |
| 786 | </v-flex> | 786 | </v-flex> |
| 787 | <v-flex sm5 xs12> | 787 | <v-flex sm5 xs12> |
| 788 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 788 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 789 | </v-flex> | 789 | </v-flex> |
| 790 | </v-layout> | 790 | </v-layout> |
| 791 | </v-flex> | 791 | </v-flex> |
| 792 | <v-flex xs12 sm6> | 792 | <v-flex xs12 sm6> |
| 793 | <v-layout wrap> | 793 | <v-layout wrap> |
| 794 | <v-flex xs12 sm6> | 794 | <v-flex xs12 sm6> |
| 795 | <b> | 795 | <b> |
| 796 | <h5 class="my-1"> | 796 | <h5 class="my-1"> |
| 797 | <b>Permanent Address:-</b> | 797 | <b>Permanent Address:-</b> |
| 798 | </h5> | 798 | </h5> |
| 799 | </b> | 799 | </b> |
| 800 | </v-flex> | 800 | </v-flex> |
| 801 | <v-flex sm6 xs12> | 801 | <v-flex sm6 xs12> |
| 802 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 802 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 803 | </v-flex> | 803 | </v-flex> |
| 804 | </v-layout> | 804 | </v-layout> |
| 805 | </v-flex> | 805 | </v-flex> |
| 806 | </v-layout> | 806 | </v-layout> |
| 807 | </v-container> | 807 | </v-container> |
| 808 | </v-card-text> | 808 | </v-card-text> |
| 809 | </v-card> | 809 | </v-card> |
| 810 | </v-dialog> | 810 | </v-dialog> |
| 811 | 811 | ||
| 812 | <!-- ****** STUDENTS TABLE ****** --> | 812 | <!-- ****** STUDENTS TABLE ****** --> |
| 813 | <v-toolbar color="transparent" flat> | 813 | <v-toolbar color="transparent" flat> |
| 814 | <v-btn | 814 | <v-btn |
| 815 | fab | 815 | fab |
| 816 | dark | 816 | dark |
| 817 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 817 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 818 | small | 818 | small |
| 819 | @click="addStudentDialog = true" | 819 | @click="addStudentDialog = true" |
| 820 | > | 820 | > |
| 821 | <v-icon dark>add</v-icon> | 821 | <v-icon dark>add</v-icon> |
| 822 | </v-btn> | 822 | </v-btn> |
| 823 | <v-btn | 823 | <v-btn |
| 824 | v-if="role != 'TEACHER' " | 824 | v-if="role != 'TEACHER' " |
| 825 | round | 825 | round |
| 826 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 826 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 827 | dark | 827 | dark |
| 828 | @click="addStudentDialog = true" | 828 | @click="addStudentDialog = true" |
| 829 | > | 829 | > |
| 830 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student | 830 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student |
| 831 | </v-btn> | 831 | </v-btn> |
| 832 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 832 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 833 | <v-flex md13 lg12> | 833 | <v-flex md13 lg12> |
| 834 | <v-layout> | 834 | <v-layout> |
| 835 | <v-flex lg3 md4> | 835 | <v-flex lg3 md4> |
| 836 | <v-select | 836 | <v-select |
| 837 | :items="addclass" | 837 | :items="addclass" |
| 838 | label="Select Class" | 838 | label="Select Class" |
| 839 | v-model="selectStudents.select" | 839 | v-model="selectStudents.select" |
| 840 | item-text="classNum" | 840 | item-text="classNum" |
| 841 | item-value="_id" | 841 | item-value="_id" |
| 842 | name="Select Class" | 842 | name="Select Class" |
| 843 | :rules="classRules" | 843 | :rules="classRules" |
| 844 | @change="getSections(selectStudents.select)" | 844 | @change="getSections(selectStudents.select)" |
| 845 | required | 845 | required |
| 846 | class="ml-2" | 846 | class="ml-2" |
| 847 | ></v-select> | 847 | ></v-select> |
| 848 | </v-flex> | 848 | </v-flex> |
| 849 | <v-flex lg3 md4 class="ml-2"> | 849 | <v-flex lg3 md4 class="ml-2"> |
| 850 | <v-layout> | 850 | <v-layout> |
| 851 | <v-select | 851 | <v-select |
| 852 | :items="addSection" | 852 | :items="addSection" |
| 853 | label="Select Section" | 853 | label="Select Section" |
| 854 | v-model="selectStudents.selectSection" | 854 | v-model="selectStudents.selectSection" |
| 855 | item-text="name" | 855 | item-text="name" |
| 856 | item-value="_id" | 856 | item-value="_id" |
| 857 | name="Select Section" | 857 | name="Select Section" |
| 858 | :rules="sectionRules" | 858 | :rules="sectionRules" |
| 859 | required | 859 | required |
| 860 | ></v-select> | 860 | ></v-select> |
| 861 | </v-layout> | 861 | </v-layout> |
| 862 | </v-flex> | 862 | </v-flex> |
| 863 | </v-layout> | 863 | </v-layout> |
| 864 | </v-flex> | 864 | </v-flex> |
| 865 | </v-card-actions> | 865 | </v-card-actions> |
| 866 | <v-spacer></v-spacer> | 866 | <v-spacer></v-spacer> |
| 867 | <v-btn | 867 | <v-btn |
| 868 | @click="findStudents()" | 868 | @click="findStudents()" |
| 869 | round | 869 | round |
| 870 | dark | 870 | dark |
| 871 | :loading="loading" | 871 | :loading="loading" |
| 872 | class="open-dialog-button hidden-xs-only hidden-sm-only" | 872 | class="open-dialog-button hidden-xs-only hidden-sm-only" |
| 873 | >Find</v-btn> | 873 | >Find</v-btn> |
| 874 | <v-card-title class="body-1" v-show="show"> | 874 | <v-card-title class="body-1" v-show="show"> |
| 875 | <v-btn icon large flat @click="displaySearch"> | 875 | <v-btn icon large flat @click="displaySearch"> |
| 876 | <v-avatar size="27"> | 876 | <v-avatar size="27"> |
| 877 | <img src="/static/icon/search.png" alt="icon" /> | 877 | <img src="/static/icon/search.png" alt="icon" /> |
| 878 | </v-avatar> | 878 | </v-avatar> |
| 879 | </v-btn> | 879 | </v-btn> |
| 880 | </v-card-title> | 880 | </v-card-title> |
| 881 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> | 881 | <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> |
| 882 | <v-layout> | 882 | <v-layout> |
| 883 | <v-text-field | 883 | <v-text-field |
| 884 | autofocus | 884 | autofocus |
| 885 | v-model="search" | 885 | v-model="search" |
| 886 | label="Search" | 886 | label="Search" |
| 887 | prepend-inner-icon="search" | 887 | prepend-inner-icon="search" |
| 888 | color="primary" | 888 | color="primary" |
| 889 | ></v-text-field> | 889 | ></v-text-field> |
| 890 | <v-icon @click="closeSearch" color="error">close</v-icon> | 890 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 891 | </v-layout> | 891 | </v-layout> |
| 892 | </v-flex> | 892 | </v-flex> |
| 893 | </v-toolbar> | 893 | </v-toolbar> |
| 894 | <v-card flat class="elevation-0 transparent"> | 894 | <v-card flat class="elevation-0 transparent"> |
| 895 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> | 895 | <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 896 | <v-layout> | 896 | <v-layout> |
| 897 | <v-flex xs4> | 897 | <v-flex xs4> |
| 898 | <label class="right mt-4">Select Class:</label> | 898 | <label class="right mt-4">Select Class:</label> |
| 899 | </v-flex> | 899 | </v-flex> |
| 900 | <v-flex xs8> | 900 | <v-flex xs8> |
| 901 | <v-select | 901 | <v-select |
| 902 | :items="addclass" | 902 | :items="addclass" |
| 903 | label="Select Class" | 903 | label="Select Class" |
| 904 | v-model="selectStudents.select" | 904 | v-model="selectStudents.select" |
| 905 | item-text="classNum" | 905 | item-text="classNum" |
| 906 | item-value="_id" | 906 | item-value="_id" |
| 907 | name="Select Class" | 907 | name="Select Class" |
| 908 | :rules="classRules" | 908 | :rules="classRules" |
| 909 | @change="getSections(selectStudents.select)" | 909 | @change="getSections(selectStudents.select)" |
| 910 | class="px-2" | 910 | class="px-2" |
| 911 | ></v-select> | 911 | ></v-select> |
| 912 | </v-flex> | 912 | </v-flex> |
| 913 | </v-layout> | 913 | </v-layout> |
| 914 | <v-layout> | 914 | <v-layout> |
| 915 | <v-flex xs4> | 915 | <v-flex xs4> |
| 916 | <label class="right mt-4">Select Section:</label> | 916 | <label class="right mt-4">Select Section:</label> |
| 917 | </v-flex> | 917 | </v-flex> |
| 918 | <v-flex xs8> | 918 | <v-flex xs8> |
| 919 | <v-select | 919 | <v-select |
| 920 | :items="addSection" | 920 | :items="addSection" |
| 921 | label="Select Section" | 921 | label="Select Section" |
| 922 | v-model="selectStudents.selectSection" | 922 | v-model="selectStudents.selectSection" |
| 923 | item-text="name" | 923 | item-text="name" |
| 924 | item-value="_id" | 924 | item-value="_id" |
| 925 | name="Select Section" | 925 | name="Select Section" |
| 926 | :rules="sectionRules" | 926 | :rules="sectionRules" |
| 927 | class="px-2" | 927 | class="px-2" |
| 928 | required | 928 | required |
| 929 | ></v-select> | 929 | ></v-select> |
| 930 | </v-flex> | 930 | </v-flex> |
| 931 | </v-layout> | 931 | </v-layout> |
| 932 | <v-layout> | 932 | <v-layout> |
| 933 | <v-flex xs5 class="mx-auto mb-2"> | 933 | <v-flex xs5 class="mx-auto mb-2"> |
| 934 | <v-btn | 934 | <v-btn |
| 935 | @click="findStudents()" | 935 | @click="findStudents()" |
| 936 | block | 936 | block |
| 937 | round | 937 | round |
| 938 | dark | 938 | dark |
| 939 | :loading="loading" | 939 | :loading="loading" |
| 940 | class="add-button" | 940 | class="add-button" |
| 941 | >Find</v-btn> | 941 | >Find</v-btn> |
| 942 | </v-flex> | 942 | </v-flex> |
| 943 | </v-layout> | 943 | </v-layout> |
| 944 | </v-flex> | 944 | </v-flex> |
| 945 | </v-card> | 945 | </v-card> |
| 946 | <v-data-table | 946 | <v-data-table |
| 947 | :headers="headers" | 947 | :headers="headers" |
| 948 | :items="studentsData" | 948 | :items="studentsData" |
| 949 | :pagination.sync="pagination" | 949 | :pagination.sync="pagination" |
| 950 | :search="search" | 950 | :search="search" |
| 951 | > | 951 | > |
| 952 | <template slot="items" slot-scope="props"> | 952 | <template slot="items" slot-scope="props"> |
| 953 | <tr class="tr"> | 953 | <tr class="tr"> |
| 954 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> | 954 | <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> |
| 955 | <td class="text-xs-center td td-row"> | 955 | <td class="text-xs-center td td-row"> |
| 956 | <v-avatar size="40"> | 956 | <v-avatar size="40"> |
| 957 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 957 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 958 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 958 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 959 | </v-avatar> | 959 | </v-avatar> |
| 960 | </td> | 960 | </td> |
| 961 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 961 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 962 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> | 962 | <td class="text-xs-center td td-row">{{ props.item.gender }}</td> |
| 963 | <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> | 963 | <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> |
| 964 | <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> | 964 | <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> |
| 965 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> | 965 | <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> |
| 966 | <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> | 966 | <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> |
| 967 | <td class="text-xs-center td td-row"> | 967 | <td class="text-xs-center td td-row"> |
| 968 | <v-switch | 968 | <v-switch |
| 969 | class="pl-3" | 969 | class="pl-3" |
| 970 | :disabled="role === 'TEACHER'" | 970 | :disabled="role === 'TEACHER'" |
| 971 | v-model="props.item.status" | 971 | v-model="props.item.status" |
| 972 | @change="suspendStudentStatus(props.item.status,props.item._id)" | 972 | @change="suspendStudentStatus(props.item.status,props.item._id)" |
| 973 | ></v-switch> | 973 | ></v-switch> |
| 974 | </td> | 974 | </td> |
| 975 | <td class="text-xs-center td td-row"> | 975 | <td class="text-xs-center td td-row"> |
| 976 | <span> | 976 | <span> |
| 977 | <v-tooltip top> | 977 | <v-tooltip top> |
| 978 | <img | 978 | <img |
| 979 | slot="activator" | 979 | slot="activator" |
| 980 | style="cursor:pointer; width:25px; height:25px; " | 980 | style="cursor:pointer; width:25px; height:25px; " |
| 981 | class="mr-3" | 981 | class="mr-3" |
| 982 | @click="profile(props.item)" | 982 | @click="profile(props.item)" |
| 983 | src="/static/icon/view.png" | 983 | src="/static/icon/view.png" |
| 984 | /> | 984 | /> |
| 985 | <span>View</span> | 985 | <span>View</span> |
| 986 | </v-tooltip> | 986 | </v-tooltip> |
| 987 | <v-tooltip top v-if="role != 'TEACHER' "> | 987 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 988 | <img | 988 | <img |
| 989 | slot="activator" | 989 | slot="activator" |
| 990 | style="cursor:pointer; width:20px; height:18px; " | 990 | style="cursor:pointer; width:20px; height:18px; " |
| 991 | class="mr-3" | 991 | class="mr-3" |
| 992 | @click="editItem(props.item)" | 992 | @click="editItem(props.item)" |
| 993 | src="/static/icon/edit.png" | 993 | src="/static/icon/edit.png" |
| 994 | /> | 994 | /> |
| 995 | <span>Edit</span> | 995 | <span>Edit</span> |
| 996 | </v-tooltip> | 996 | </v-tooltip> |
| 997 | <v-tooltip top v-if="role != 'TEACHER' "> | 997 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 998 | <img | 998 | <img |
| 999 | slot="activator" | 999 | slot="activator" |
| 1000 | style="cursor:pointer; width:20px; height:20px; " | 1000 | style="cursor:pointer; width:20px; height:20px; " |
| 1001 | class="mr-3" | 1001 | class="mr-3" |
| 1002 | @click="deleteItem(props.item)" | 1002 | @click="deleteItem(props.item)" |
| 1003 | src="/static/icon/delete.png" | 1003 | src="/static/icon/delete.png" |
| 1004 | /> | 1004 | /> |
| 1005 | <span>Delete</span> | 1005 | <span>Delete</span> |
| 1006 | </v-tooltip> | 1006 | </v-tooltip> |
| 1007 | </span> | 1007 | </span> |
| 1008 | </td> | 1008 | </td> |
| 1009 | </tr> | 1009 | </tr> |
| 1010 | </template> | 1010 | </template> |
| 1011 | <v-alert | 1011 | <v-alert |
| 1012 | slot="no-results" | 1012 | slot="no-results" |
| 1013 | :value="true" | 1013 | :value="true" |
| 1014 | color="error" | 1014 | color="error" |
| 1015 | icon="warning" | 1015 | icon="warning" |
| 1016 | >Your search for "{{ search }}" found no results.</v-alert> | 1016 | >Your search for "{{ search }}" found no results.</v-alert> |
| 1017 | </v-data-table> | 1017 | </v-data-table> |
| 1018 | <!-- DIALOG -- ADD STUDENTS DETAILS --> | 1018 | <!-- DIALOG -- ADD STUDENTS DETAILS --> |
| 1019 | <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog"> | 1019 | <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent> |
| 1020 | <v-card flat class="card-style pa-2" dark> | 1020 | <v-card flat class="card-style pa-2" dark> |
| 1021 | <v-layout> | 1021 | <v-layout> |
| 1022 | <v-flex xs12> | 1022 | <v-flex xs12> |
| 1023 | <label class="title text-xs-center">Add Student</label> | 1023 | <label class="title text-xs-center">Add Student</label> |
| 1024 | <v-icon | 1024 | <v-icon |
| 1025 | size="24" | 1025 | size="24" |
| 1026 | class="right" | 1026 | class="right" |
| 1027 | @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" | 1027 | @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" |
| 1028 | >cancel</v-icon> | 1028 | >cancel</v-icon> |
| 1029 | </v-flex> | 1029 | </v-flex> |
| 1030 | </v-layout> | 1030 | </v-layout> |
| 1031 | <v-container fluid> | 1031 | <v-container fluid> |
| 1032 | <v-layout align-center> | 1032 | <v-layout align-center> |
| 1033 | <v-flex xs12> | 1033 | <v-flex xs12> |
| 1034 | <v-stepper v-model="e2" flat class="card-style elevation-0" dark> | 1034 | <v-stepper v-model="e2" flat class="card-style elevation-0" dark> |
| 1035 | <v-stepper-header> | 1035 | <v-stepper-header> |
| 1036 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> | 1036 | <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> |
| 1037 | <v-divider></v-divider> | 1037 | <v-divider></v-divider> |
| 1038 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> | 1038 | <v-stepper-step step="2">Fill Student Details</v-stepper-step> |
| 1039 | </v-stepper-header> | 1039 | </v-stepper-header> |
| 1040 | <v-stepper-items> | 1040 | <v-stepper-items> |
| 1041 | <v-stepper-content step="1"> | 1041 | <v-stepper-content step="1"> |
| 1042 | <v-container fluid class> | 1042 | <v-container fluid class> |
| 1043 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> | 1043 | <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> |
| 1044 | <v-form ref="parentForm" v-model="valid" lazy-validation> | 1044 | <v-form ref="parentForm" v-model="valid" lazy-validation> |
| 1045 | <v-layout wrap> | 1045 | <v-layout wrap> |
| 1046 | <v-flex xs12 sm6> | 1046 | <v-flex xs12 sm6> |
| 1047 | <v-layout wrap> | 1047 | <v-layout wrap> |
| 1048 | <v-flex xs12 class="pt-4 subheading"> | 1048 | <v-flex xs12 class="pt-4 subheading"> |
| 1049 | <label>Father Cell No:</label> | 1049 | <label>Father Cell No:</label> |
| 1050 | </v-flex> | 1050 | </v-flex> |
| 1051 | <v-flex xs12> | 1051 | <v-flex xs12> |
| 1052 | <v-text-field | 1052 | <v-text-field |
| 1053 | v-model.trim="parentData.fatherCellNo" | 1053 | v-model.trim="parentData.fatherCellNo" |
| 1054 | placeholder="fill your father Cell Number" | 1054 | placeholder="fill your father Cell Number" |
| 1055 | type="number" | 1055 | type="number" |
| 1056 | :rules="fatheCellNoRules" | 1056 | :rules="fatheCellNoRules" |
| 1057 | counter="10" | 1057 | counter="10" |
| 1058 | v-on:keyup="getParentDetails()" | 1058 | v-on:keyup="getParentDetails()" |
| 1059 | required | 1059 | required |
| 1060 | ></v-text-field> | 1060 | ></v-text-field> |
| 1061 | </v-flex> | 1061 | </v-flex> |
| 1062 | </v-layout> | 1062 | </v-layout> |
| 1063 | </v-flex> | 1063 | </v-flex> |
| 1064 | <v-flex xs12 sm6> | 1064 | <v-flex xs12 sm6> |
| 1065 | <v-layout wrap> | 1065 | <v-layout wrap> |
| 1066 | <v-flex xs12 class="pt-4 subheading"> | 1066 | <v-flex xs12 class="pt-4 subheading"> |
| 1067 | <label>Parent Email Id:</label> | 1067 | <label>Parent Email Id:</label> |
| 1068 | </v-flex> | 1068 | </v-flex> |
| 1069 | <v-flex xs12> | 1069 | <v-flex xs12> |
| 1070 | <v-text-field | 1070 | <v-text-field |
| 1071 | placeholder="fill Parent email" | 1071 | placeholder="fill Parent email" |
| 1072 | v-model="parentData.email" | 1072 | v-model="parentData.email" |
| 1073 | type="text" | 1073 | type="text" |
| 1074 | required | 1074 | required |
| 1075 | ></v-text-field> | 1075 | ></v-text-field> |
| 1076 | </v-flex> | 1076 | </v-flex> |
| 1077 | </v-layout> | 1077 | </v-layout> |
| 1078 | </v-flex> | 1078 | </v-flex> |
| 1079 | </v-layout> | 1079 | </v-layout> |
| 1080 | <v-layout wrap> | 1080 | <v-layout wrap> |
| 1081 | <v-flex xs12 sm6> | 1081 | <v-flex xs12 sm6> |
| 1082 | <v-layout wrap> | 1082 | <v-layout wrap> |
| 1083 | <v-flex xs12 class="pt-4 subheading"> | 1083 | <v-flex xs12 class="pt-4 subheading"> |
| 1084 | <label>Father Name:</label> | 1084 | <label>Father Name:</label> |
| 1085 | </v-flex> | 1085 | </v-flex> |
| 1086 | <v-flex xs12> | 1086 | <v-flex xs12> |
| 1087 | <v-text-field | 1087 | <v-text-field |
| 1088 | v-model="parentData.fatherName" | 1088 | v-model="parentData.fatherName" |
| 1089 | placeholder="Fill your father Name" | 1089 | placeholder="Fill your father Name" |
| 1090 | required | 1090 | required |
| 1091 | ></v-text-field> | 1091 | ></v-text-field> |
| 1092 | </v-flex> | 1092 | </v-flex> |
| 1093 | </v-layout> | 1093 | </v-layout> |
| 1094 | </v-flex> | 1094 | </v-flex> |
| 1095 | <v-flex xs12 sm6> | 1095 | <v-flex xs12 sm6> |
| 1096 | <v-layout wrap> | 1096 | <v-layout wrap> |
| 1097 | <v-flex xs12 class="pt-4 subheading"> | 1097 | <v-flex xs12 class="pt-4 subheading"> |
| 1098 | <label>Mother Name:</label> | 1098 | <label>Mother Name:</label> |
| 1099 | </v-flex> | 1099 | </v-flex> |
| 1100 | <v-flex xs12> | 1100 | <v-flex xs12> |
| 1101 | <v-text-field | 1101 | <v-text-field |
| 1102 | v-model="parentData.motherName" | 1102 | v-model="parentData.motherName" |
| 1103 | placeholder="fill your Mother Name" | 1103 | placeholder="fill your Mother Name" |
| 1104 | type="text" | 1104 | type="text" |
| 1105 | required | 1105 | required |
| 1106 | ></v-text-field> | 1106 | ></v-text-field> |
| 1107 | </v-flex> | 1107 | </v-flex> |
| 1108 | </v-layout> | 1108 | </v-layout> |
| 1109 | </v-flex> | 1109 | </v-flex> |
| 1110 | </v-layout> | 1110 | </v-layout> |
| 1111 | <v-layout wrap> | 1111 | <v-layout wrap> |
| 1112 | <v-flex xs12 sm6> | 1112 | <v-flex xs12 sm6> |
| 1113 | <v-layout wrap> | 1113 | <v-layout wrap> |
| 1114 | <v-flex xs12 class="pt-4 subheading"> | 1114 | <v-flex xs12 class="pt-4 subheading"> |
| 1115 | <label>Mother Cell No:</label> | 1115 | <label>Mother Cell No:</label> |
| 1116 | </v-flex> | 1116 | </v-flex> |
| 1117 | <v-flex xs12> | 1117 | <v-flex xs12> |
| 1118 | <v-text-field | 1118 | <v-text-field |
| 1119 | v-model="parentData.motherCellNo" | 1119 | v-model="parentData.motherCellNo" |
| 1120 | placeholder="fill your Mother Cell Number" | 1120 | placeholder="fill your Mother Cell Number" |
| 1121 | type="number" | 1121 | type="number" |
| 1122 | required | 1122 | required |
| 1123 | ></v-text-field> | 1123 | ></v-text-field> |
| 1124 | </v-flex> | 1124 | </v-flex> |
| 1125 | </v-layout> | 1125 | </v-layout> |
| 1126 | </v-flex> | 1126 | </v-flex> |
| 1127 | <v-flex xs12 sm6> | 1127 | <v-flex xs12 sm6> |
| 1128 | <v-layout wrap> | 1128 | <v-layout wrap> |
| 1129 | <v-flex xs12 class="pt-4 subheading"> | 1129 | <v-flex xs12 class="pt-4 subheading"> |
| 1130 | <label>Father Profession:</label> | 1130 | <label>Father Profession:</label> |
| 1131 | </v-flex> | 1131 | </v-flex> |
| 1132 | <v-flex xs12> | 1132 | <v-flex xs12> |
| 1133 | <v-text-field | 1133 | <v-text-field |
| 1134 | v-model="parentData.fatherProfession" | 1134 | v-model="parentData.fatherProfession" |
| 1135 | placeholder="fill your father profession" | 1135 | placeholder="fill your father profession" |
| 1136 | ></v-text-field> | 1136 | ></v-text-field> |
| 1137 | </v-flex> | 1137 | </v-flex> |
| 1138 | </v-layout> | 1138 | </v-layout> |
| 1139 | </v-flex> | 1139 | </v-flex> |
| 1140 | </v-layout> | 1140 | </v-layout> |
| 1141 | <v-layout wrap> | 1141 | <v-layout wrap> |
| 1142 | <v-flex xs12 sm6> | 1142 | <v-flex xs12 sm6> |
| 1143 | <v-layout wrap> | 1143 | <v-layout wrap> |
| 1144 | <v-flex xs12 class="pt-4 subheading"> | 1144 | <v-flex xs12 class="pt-4 subheading"> |
| 1145 | <label>Mother Profession:</label> | 1145 | <label>Mother Profession:</label> |
| 1146 | </v-flex> | 1146 | </v-flex> |
| 1147 | <v-flex xs12> | 1147 | <v-flex xs12> |
| 1148 | <v-text-field | 1148 | <v-text-field |
| 1149 | v-model="parentData.motherProfession" | 1149 | v-model="parentData.motherProfession" |
| 1150 | placeholder="fill your mother profession" | 1150 | placeholder="fill your mother profession" |
| 1151 | ></v-text-field> | 1151 | ></v-text-field> |
| 1152 | </v-flex> | 1152 | </v-flex> |
| 1153 | </v-layout> | 1153 | </v-layout> |
| 1154 | </v-flex> | 1154 | </v-flex> |
| 1155 | <v-flex xs12 sm6> | 1155 | <v-flex xs12 sm6> |
| 1156 | <v-layout wrap> | 1156 | <v-layout wrap> |
| 1157 | <v-flex xs12 class="pt-4 subheading"> | 1157 | <v-flex xs12 class="pt-4 subheading"> |
| 1158 | <label>Password:</label> | 1158 | <label>Password:</label> |
| 1159 | </v-flex> | 1159 | </v-flex> |
| 1160 | <v-flex xs12> | 1160 | <v-flex xs12> |
| 1161 | <v-text-field | 1161 | <v-text-field |
| 1162 | v-model="parentData.password" | 1162 | v-model="parentData.password" |
| 1163 | placeholder="Enter Your Password" | 1163 | placeholder="Enter Your Password" |
| 1164 | ></v-text-field> | 1164 | ></v-text-field> |
| 1165 | </v-flex> | 1165 | </v-flex> |
| 1166 | </v-layout> | 1166 | </v-layout> |
| 1167 | </v-flex> | 1167 | </v-flex> |
| 1168 | </v-layout> | 1168 | </v-layout> |
| 1169 | <v-flex sm12 class="hidden-xs-only"> | 1169 | <v-flex sm12 class="hidden-xs-only"> |
| 1170 | <v-card-actions> | 1170 | <v-card-actions> |
| 1171 | <v-spacer></v-spacer> | 1171 | <v-spacer></v-spacer> |
| 1172 | <v-btn | 1172 | <v-btn |
| 1173 | @click="submitParentDetails" | 1173 | @click="submitParentDetails" |
| 1174 | round | 1174 | round |
| 1175 | dark | 1175 | dark |
| 1176 | :loading="loading" | 1176 | :loading="loading" |
| 1177 | v-show="showParent" | 1177 | v-show="showParent" |
| 1178 | class="add-button" | 1178 | class="add-button" |
| 1179 | >Add</v-btn> | 1179 | >Add</v-btn> |
| 1180 | <v-btn | 1180 | <v-btn |
| 1181 | v-show="showNext" | 1181 | v-show="showNext" |
| 1182 | @click="e2 = 2" | 1182 | @click="e2 = 2" |
| 1183 | round | 1183 | round |
| 1184 | dark | 1184 | dark |
| 1185 | class="add-button" | 1185 | class="add-button" |
| 1186 | >Next</v-btn> | 1186 | >Next</v-btn> |
| 1187 | </v-card-actions> | 1187 | </v-card-actions> |
| 1188 | </v-flex> | 1188 | </v-flex> |
| 1189 | <v-flex | 1189 | <v-flex |
| 1190 | xs6 | 1190 | xs6 |
| 1191 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1191 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1192 | > | 1192 | > |
| 1193 | <v-btn | 1193 | <v-btn |
| 1194 | @click="submitParentDetails" | 1194 | @click="submitParentDetails" |
| 1195 | round | 1195 | round |
| 1196 | dark | 1196 | dark |
| 1197 | :loading="loading" | 1197 | :loading="loading" |
| 1198 | v-show="showParent" | 1198 | v-show="showParent" |
| 1199 | class="add-button" | 1199 | class="add-button" |
| 1200 | >Add</v-btn> | 1200 | >Add</v-btn> |
| 1201 | <v-btn | 1201 | <v-btn |
| 1202 | v-show="showNext" | 1202 | v-show="showNext" |
| 1203 | @click="e2 = 2" | 1203 | @click="e2 = 2" |
| 1204 | round | 1204 | round |
| 1205 | dark | 1205 | dark |
| 1206 | class="add-button" | 1206 | class="add-button" |
| 1207 | >Next</v-btn> | 1207 | >Next</v-btn> |
| 1208 | </v-flex> | 1208 | </v-flex> |
| 1209 | </v-form> | 1209 | </v-form> |
| 1210 | </v-flex> | 1210 | </v-flex> |
| 1211 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> | 1211 | <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> |
| 1212 | <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> | 1212 | <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> |
| 1213 | <v-layout wrap> | 1213 | <v-layout wrap> |
| 1214 | <v-flex xs12 sm6> | 1214 | <v-flex xs12 sm6> |
| 1215 | <v-layout> | 1215 | <v-layout> |
| 1216 | <v-flex xs4 class="pt-4 subheading"> | 1216 | <v-flex xs4 class="pt-4 subheading"> |
| 1217 | <label class="right">Father Cell No:</label> | 1217 | <label class="right">Father Cell No:</label> |
| 1218 | </v-flex> | 1218 | </v-flex> |
| 1219 | <v-flex xs8 class="ml-3"> | 1219 | <v-flex xs8 class="ml-3"> |
| 1220 | <v-text-field | 1220 | <v-text-field |
| 1221 | v-model.trim="parentData.fatherCellNo" | 1221 | v-model.trim="parentData.fatherCellNo" |
| 1222 | placeholder="fill your father Cell Number" | 1222 | placeholder="fill your father Cell Number" |
| 1223 | type="number" | 1223 | type="number" |
| 1224 | :rules="fatheCellNoRules" | 1224 | :rules="fatheCellNoRules" |
| 1225 | counter="10" | 1225 | counter="10" |
| 1226 | required | 1226 | required |
| 1227 | v-on:keyup="getParentDetails()" | 1227 | v-on:keyup="getParentDetails()" |
| 1228 | ></v-text-field> | 1228 | ></v-text-field> |
| 1229 | </v-flex> | 1229 | </v-flex> |
| 1230 | </v-layout> | 1230 | </v-layout> |
| 1231 | </v-flex> | 1231 | </v-flex> |
| 1232 | <v-flex xs12 sm6> | 1232 | <v-flex xs12 sm6> |
| 1233 | <v-layout> | 1233 | <v-layout> |
| 1234 | <v-flex xs4 class="pt-4 subheading"> | 1234 | <v-flex xs4 class="pt-4 subheading"> |
| 1235 | <label class="right">Parent Email Id:</label> | 1235 | <label class="right">Parent Email Id:</label> |
| 1236 | </v-flex> | 1236 | </v-flex> |
| 1237 | <v-flex xs8 class="ml-3"> | 1237 | <v-flex xs8 class="ml-3"> |
| 1238 | <v-text-field | 1238 | <v-text-field |
| 1239 | placeholder="fill Parent email" | 1239 | placeholder="fill Parent email" |
| 1240 | v-model="parentData.email" | 1240 | v-model="parentData.email" |
| 1241 | type="text" | 1241 | type="text" |
| 1242 | required | 1242 | required |
| 1243 | ></v-text-field> | 1243 | ></v-text-field> |
| 1244 | </v-flex> | 1244 | </v-flex> |
| 1245 | </v-layout> | 1245 | </v-layout> |
| 1246 | </v-flex> | 1246 | </v-flex> |
| 1247 | </v-layout> | 1247 | </v-layout> |
| 1248 | <v-layout wrap> | 1248 | <v-layout wrap> |
| 1249 | <v-flex xs12 sm6> | 1249 | <v-flex xs12 sm6> |
| 1250 | <v-layout> | 1250 | <v-layout> |
| 1251 | <v-flex xs4 class="pt-4 subheading"> | 1251 | <v-flex xs4 class="pt-4 subheading"> |
| 1252 | <label class="right">Father Name:</label> | 1252 | <label class="right">Father Name:</label> |
| 1253 | </v-flex> | 1253 | </v-flex> |
| 1254 | <v-flex xs8 class="ml-3"> | 1254 | <v-flex xs8 class="ml-3"> |
| 1255 | <v-text-field | 1255 | <v-text-field |
| 1256 | v-model="parentData.fatherName" | 1256 | v-model="parentData.fatherName" |
| 1257 | placeholder="Fill your father Name" | 1257 | placeholder="Fill your father Name" |
| 1258 | required | 1258 | required |
| 1259 | ></v-text-field> | 1259 | ></v-text-field> |
| 1260 | </v-flex> | 1260 | </v-flex> |
| 1261 | </v-layout> | 1261 | </v-layout> |
| 1262 | </v-flex> | 1262 | </v-flex> |
| 1263 | <v-flex xs12 sm6> | 1263 | <v-flex xs12 sm6> |
| 1264 | <v-layout> | 1264 | <v-layout> |
| 1265 | <v-flex xs4 class="pt-4 subheading"> | 1265 | <v-flex xs4 class="pt-4 subheading"> |
| 1266 | <label class="right">Mother Name:</label> | 1266 | <label class="right">Mother Name:</label> |
| 1267 | </v-flex> | 1267 | </v-flex> |
| 1268 | <v-flex xs8 class="ml-3"> | 1268 | <v-flex xs8 class="ml-3"> |
| 1269 | <v-text-field | 1269 | <v-text-field |
| 1270 | v-model="parentData.motherName" | 1270 | v-model="parentData.motherName" |
| 1271 | placeholder="fill your Mother Name" | 1271 | placeholder="fill your Mother Name" |
| 1272 | type="text" | 1272 | type="text" |
| 1273 | required | 1273 | required |
| 1274 | ></v-text-field> | 1274 | ></v-text-field> |
| 1275 | </v-flex> | 1275 | </v-flex> |
| 1276 | </v-layout> | 1276 | </v-layout> |
| 1277 | </v-flex> | 1277 | </v-flex> |
| 1278 | </v-layout> | 1278 | </v-layout> |
| 1279 | <v-layout wrap> | 1279 | <v-layout wrap> |
| 1280 | <v-flex xs12 sm6> | 1280 | <v-flex xs12 sm6> |
| 1281 | <v-layout> | 1281 | <v-layout> |
| 1282 | <v-flex xs4 class="pt-4 subheading"> | 1282 | <v-flex xs4 class="pt-4 subheading"> |
| 1283 | <label class="right">Mother Cell No:</label> | 1283 | <label class="right">Mother Cell No:</label> |
| 1284 | </v-flex> | 1284 | </v-flex> |
| 1285 | <v-flex xs8 class="ml-3"> | 1285 | <v-flex xs8 class="ml-3"> |
| 1286 | <v-text-field | 1286 | <v-text-field |
| 1287 | v-model="parentData.motherCellNo" | 1287 | v-model="parentData.motherCellNo" |
| 1288 | placeholder="fill your Mother Cell Number" | 1288 | placeholder="fill your Mother Cell Number" |
| 1289 | type="number" | 1289 | type="number" |
| 1290 | required | 1290 | required |
| 1291 | ></v-text-field> | 1291 | ></v-text-field> |
| 1292 | </v-flex> | 1292 | </v-flex> |
| 1293 | </v-layout> | 1293 | </v-layout> |
| 1294 | </v-flex> | 1294 | </v-flex> |
| 1295 | <v-flex xs12 sm6> | 1295 | <v-flex xs12 sm6> |
| 1296 | <v-layout> | 1296 | <v-layout> |
| 1297 | <v-flex xs4 class="pt-4 subheading"> | 1297 | <v-flex xs4 class="pt-4 subheading"> |
| 1298 | <label class="right">Father Profession:</label> | 1298 | <label class="right">Father Profession:</label> |
| 1299 | </v-flex> | 1299 | </v-flex> |
| 1300 | <v-flex xs8 class="ml-3"> | 1300 | <v-flex xs8 class="ml-3"> |
| 1301 | <v-text-field | 1301 | <v-text-field |
| 1302 | v-model="parentData.fatherProfession" | 1302 | v-model="parentData.fatherProfession" |
| 1303 | placeholder="fill your father profession" | 1303 | placeholder="fill your father profession" |
| 1304 | ></v-text-field> | 1304 | ></v-text-field> |
| 1305 | </v-flex> | 1305 | </v-flex> |
| 1306 | </v-layout> | 1306 | </v-layout> |
| 1307 | </v-flex> | 1307 | </v-flex> |
| 1308 | </v-layout> | 1308 | </v-layout> |
| 1309 | <v-layout wrap> | 1309 | <v-layout wrap> |
| 1310 | <v-flex xs12 sm6> | 1310 | <v-flex xs12 sm6> |
| 1311 | <v-layout> | 1311 | <v-layout> |
| 1312 | <v-flex xs4 class="pt-4 subheading"> | 1312 | <v-flex xs4 class="pt-4 subheading"> |
| 1313 | <label class="right">Mother Profession:</label> | 1313 | <label class="right">Mother Profession:</label> |
| 1314 | </v-flex> | 1314 | </v-flex> |
| 1315 | <v-flex xs8 class="ml-3"> | 1315 | <v-flex xs8 class="ml-3"> |
| 1316 | <v-text-field | 1316 | <v-text-field |
| 1317 | v-model="parentData.motherProfession" | 1317 | v-model="parentData.motherProfession" |
| 1318 | placeholder="fill your mother profession" | 1318 | placeholder="fill your mother profession" |
| 1319 | ></v-text-field> | 1319 | ></v-text-field> |
| 1320 | </v-flex> | 1320 | </v-flex> |
| 1321 | </v-layout> | 1321 | </v-layout> |
| 1322 | </v-flex> | 1322 | </v-flex> |
| 1323 | <v-flex xs12 sm6> | 1323 | <v-flex xs12 sm6> |
| 1324 | <v-layout> | 1324 | <v-layout> |
| 1325 | <v-flex xs4 class="pt-4 subheading"> | 1325 | <v-flex xs4 class="pt-4 subheading"> |
| 1326 | <label class="right">Password:</label> | 1326 | <label class="right">Password:</label> |
| 1327 | </v-flex> | 1327 | </v-flex> |
| 1328 | <v-flex xs8 class="ml-3"> | 1328 | <v-flex xs8 class="ml-3"> |
| 1329 | <v-text-field | 1329 | <v-text-field |
| 1330 | :append-icon="e1 ? 'visibility_off' : 'visibility'" | 1330 | :append-icon="e1 ? 'visibility_off' : 'visibility'" |
| 1331 | :append-icon-cb="() => (e1 = !e1)" | 1331 | :append-icon-cb="() => (e1 = !e1)" |
| 1332 | :type="e1 ? 'password' : 'text'" | 1332 | :type="e1 ? 'password' : 'text'" |
| 1333 | :rules="password" | 1333 | :rules="password" |
| 1334 | v-model="parentData.password" | 1334 | v-model="parentData.password" |
| 1335 | placeholder="Enter Your Password" | 1335 | placeholder="Enter Your Password" |
| 1336 | :disabled="isFatherCellExists" | 1336 | :disabled="isFatherCellExists" |
| 1337 | required | 1337 | required |
| 1338 | ></v-text-field> | 1338 | ></v-text-field> |
| 1339 | </v-flex> | 1339 | </v-flex> |
| 1340 | </v-layout> | 1340 | </v-layout> |
| 1341 | </v-flex> | 1341 | </v-flex> |
| 1342 | </v-layout> | 1342 | </v-layout> |
| 1343 | <v-flex sm12 class="hidden-xs-only"> | 1343 | <v-flex sm12 class="hidden-xs-only"> |
| 1344 | <v-card-actions> | 1344 | <v-card-actions> |
| 1345 | <v-spacer></v-spacer> | 1345 | <v-spacer></v-spacer> |
| 1346 | <v-btn | 1346 | <v-btn |
| 1347 | @click="submitParentDetails" | 1347 | @click="submitParentDetails" |
| 1348 | round | 1348 | round |
| 1349 | dark | 1349 | dark |
| 1350 | :loading="loading" | 1350 | :loading="loading" |
| 1351 | v-show="showParent" | 1351 | v-show="showParent" |
| 1352 | class="add-button" | 1352 | class="add-button" |
| 1353 | >Add</v-btn> | 1353 | >Add</v-btn> |
| 1354 | <v-btn | 1354 | <v-btn |
| 1355 | v-show="showNext" | 1355 | v-show="showNext" |
| 1356 | @click="e2 = 2" | 1356 | @click="e2 = 2" |
| 1357 | round | 1357 | round |
| 1358 | dark | 1358 | dark |
| 1359 | class="add-button" | 1359 | class="add-button" |
| 1360 | >Next</v-btn> | 1360 | >Next</v-btn> |
| 1361 | </v-card-actions> | 1361 | </v-card-actions> |
| 1362 | </v-flex> | 1362 | </v-flex> |
| 1363 | <v-flex | 1363 | <v-flex |
| 1364 | xs6 | 1364 | xs6 |
| 1365 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" | 1365 | class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" |
| 1366 | > | 1366 | > |
| 1367 | <v-btn | 1367 | <v-btn |
| 1368 | @click="submitParentDetails" | 1368 | @click="submitParentDetails" |
| 1369 | round | 1369 | round |
| 1370 | dark | 1370 | dark |
| 1371 | :loading="loading" | 1371 | :loading="loading" |
| 1372 | v-show="showParent" | 1372 | v-show="showParent" |
| 1373 | class="add-button" | 1373 | class="add-button" |
| 1374 | >Add</v-btn> | 1374 | >Add</v-btn> |
| 1375 | <v-btn | 1375 | <v-btn |
| 1376 | v-show="showNext" | 1376 | v-show="showNext" |
| 1377 | @click="e2 = 2" | 1377 | @click="e2 = 2" |
| 1378 | round | 1378 | round |
| 1379 | dark | 1379 | dark |
| 1380 | class="add-button" | 1380 | class="add-button" |
| 1381 | >Next</v-btn> | 1381 | >Next</v-btn> |
| 1382 | </v-flex> | 1382 | </v-flex> |
| 1383 | </v-form> | 1383 | </v-form> |
| 1384 | </v-flex> | 1384 | </v-flex> |
| 1385 | </v-container> | 1385 | </v-container> |
| 1386 | </v-stepper-content> | 1386 | </v-stepper-content> |
| 1387 | <v-stepper-content step="2"> | 1387 | <v-stepper-content step="2"> |
| 1388 | <v-flex xs12 sm12> | 1388 | <v-flex xs12 sm12> |
| 1389 | <v-form ref="form" v-model="valid" lazy-validation> | 1389 | <v-form ref="form" v-model="valid" lazy-validation> |
| 1390 | <v-layout> | 1390 | <v-layout> |
| 1391 | <v-flex | 1391 | <v-flex |
| 1392 | xs12 | 1392 | xs12 |
| 1393 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 1393 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 1394 | > | 1394 | > |
| 1395 | <v-avatar size="100px"> | 1395 | <v-avatar size="100px"> |
| 1396 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 1396 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 1397 | </v-avatar> | 1397 | </v-avatar> |
| 1398 | <input | 1398 | <input |
| 1399 | type="file" | 1399 | type="file" |
| 1400 | style="display: none" | 1400 | style="display: none" |
| 1401 | ref="image" | 1401 | ref="image" |
| 1402 | accept="image/*" | 1402 | accept="image/*" |
| 1403 | @change="onFilePicked" | 1403 | @change="onFilePicked" |
| 1404 | /> | 1404 | /> |
| 1405 | <img | 1405 | <img |
| 1406 | :src="imageData.imageUrl" | 1406 | :src="imageData.imageUrl" |
| 1407 | height="150" | 1407 | height="150" |
| 1408 | v-if="imageUrl" | 1408 | v-if="imageUrl" |
| 1409 | style="border-radius:50%; width:200px" | 1409 | style="border-radius:50%; width:200px" |
| 1410 | /> | 1410 | /> |
| 1411 | </v-flex> | 1411 | </v-flex> |
| 1412 | </v-layout> | 1412 | </v-layout> |
| 1413 | <v-layout wrap> | 1413 | <v-layout wrap> |
| 1414 | <v-flex xs12 sm6> | 1414 | <v-flex xs12 sm6> |
| 1415 | <v-layout> | 1415 | <v-layout> |
| 1416 | <v-flex x4 sm4 class="pt-4 subheading"> | 1416 | <v-flex x4 sm4 class="pt-4 subheading"> |
| 1417 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 1417 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 1418 | <label | 1418 | <label |
| 1419 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1419 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1420 | >Class:</label> | 1420 | >Class:</label> |
| 1421 | </v-flex> | 1421 | </v-flex> |
| 1422 | <v-flex xs8 sm8 class="ml-3"> | 1422 | <v-flex xs8 sm8 class="ml-3"> |
| 1423 | <v-select | 1423 | <v-select |
| 1424 | :items="addclass" | 1424 | :items="addclass" |
| 1425 | label="Select Class" | 1425 | label="Select Class" |
| 1426 | v-model="addStudents.select" | 1426 | v-model="addStudents.select" |
| 1427 | item-text="classNum" | 1427 | item-text="classNum" |
| 1428 | item-value="_id" | 1428 | item-value="_id" |
| 1429 | name="Select Class" | 1429 | name="Select Class" |
| 1430 | :rules="classRules" | 1430 | :rules="classRules" |
| 1431 | @change="getSection(addStudents.select)" | 1431 | @change="getSection(addStudents.select)" |
| 1432 | required | 1432 | required |
| 1433 | ></v-select> | 1433 | ></v-select> |
| 1434 | </v-flex> | 1434 | </v-flex> |
| 1435 | </v-layout> | 1435 | </v-layout> |
| 1436 | </v-flex> | 1436 | </v-flex> |
| 1437 | <v-flex xs12 sm6> | 1437 | <v-flex xs12 sm6> |
| 1438 | <v-layout> | 1438 | <v-layout> |
| 1439 | <v-flex xs4 class="pt-4 subheading"> | 1439 | <v-flex xs4 class="pt-4 subheading"> |
| 1440 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 1440 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 1441 | <label | 1441 | <label |
| 1442 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1442 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1443 | >Section:</label> | 1443 | >Section:</label> |
| 1444 | </v-flex> | 1444 | </v-flex> |
| 1445 | <v-flex xs8 class="ml-3"> | 1445 | <v-flex xs8 class="ml-3"> |
| 1446 | <v-select | 1446 | <v-select |
| 1447 | :items="addSection" | 1447 | :items="addSection" |
| 1448 | label="Select Section" | 1448 | label="Select Section" |
| 1449 | v-model="addStudents.selectSection" | 1449 | v-model="addStudents.selectSection" |
| 1450 | item-text="name" | 1450 | item-text="name" |
| 1451 | item-value="_id" | 1451 | item-value="_id" |
| 1452 | name="Select Section" | 1452 | name="Select Section" |
| 1453 | :rules="sectionRules" | 1453 | :rules="sectionRules" |
| 1454 | required | 1454 | required |
| 1455 | ></v-select> | 1455 | ></v-select> |
| 1456 | </v-flex> | 1456 | </v-flex> |
| 1457 | </v-layout> | 1457 | </v-layout> |
| 1458 | </v-flex> | 1458 | </v-flex> |
| 1459 | </v-layout> | 1459 | </v-layout> |
| 1460 | <v-layout wrap> | 1460 | <v-layout wrap> |
| 1461 | <v-flex xs12 sm6> | 1461 | <v-flex xs12 sm6> |
| 1462 | <v-layout> | 1462 | <v-layout> |
| 1463 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1463 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1464 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 1464 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 1465 | <label | 1465 | <label |
| 1466 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1466 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1467 | >Name:</label> | 1467 | >Name:</label> |
| 1468 | </v-flex> | 1468 | </v-flex> |
| 1469 | <v-flex xs8 sm8 class="ml-3"> | 1469 | <v-flex xs8 sm8 class="ml-3"> |
| 1470 | <v-text-field | 1470 | <v-text-field |
| 1471 | v-model="addStudents.name" | 1471 | v-model="addStudents.name" |
| 1472 | placeholder="fill your full Name" | 1472 | placeholder="fill your full Name" |
| 1473 | name="name" | 1473 | name="name" |
| 1474 | type="text" | 1474 | type="text" |
| 1475 | :rules="nameRules" | 1475 | :rules="nameRules" |
| 1476 | required | 1476 | required |
| 1477 | ></v-text-field> | 1477 | ></v-text-field> |
| 1478 | </v-flex> | 1478 | </v-flex> |
| 1479 | </v-layout> | 1479 | </v-layout> |
| 1480 | </v-flex> | 1480 | </v-flex> |
| 1481 | <v-flex xs12 sm6> | 1481 | <v-flex xs12 sm6> |
| 1482 | <v-layout> | 1482 | <v-layout> |
| 1483 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1483 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1484 | <label class="right">Email:</label> | 1484 | <label class="right">Email:</label> |
| 1485 | </v-flex> | 1485 | </v-flex> |
| 1486 | <v-flex xs8 sm8 class="ml-3"> | 1486 | <v-flex xs8 sm8 class="ml-3"> |
| 1487 | <v-text-field | 1487 | <v-text-field |
| 1488 | placeholder="fill your email" | 1488 | placeholder="fill your email" |
| 1489 | v-model="addStudents.email" | 1489 | v-model="addStudents.email" |
| 1490 | type="text" | 1490 | type="text" |
| 1491 | name="email" | 1491 | name="email" |
| 1492 | required | 1492 | required |
| 1493 | ></v-text-field> | 1493 | ></v-text-field> |
| 1494 | </v-flex> | 1494 | </v-flex> |
| 1495 | </v-layout> | 1495 | </v-layout> |
| 1496 | </v-flex> | 1496 | </v-flex> |
| 1497 | </v-layout> | 1497 | </v-layout> |
| 1498 | <v-layout wrap> | 1498 | <v-layout wrap> |
| 1499 | <v-flex xs12 sm6> | 1499 | <v-flex xs12 sm6> |
| 1500 | <v-layout> | 1500 | <v-layout> |
| 1501 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1501 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1502 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 1502 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 1503 | <label | 1503 | <label |
| 1504 | class="right hidden-lg-only hidden-xl-only hidden-md-only" | 1504 | class="right hidden-lg-only hidden-xl-only hidden-md-only" |
| 1505 | >D.O.B:</label> | 1505 | >D.O.B:</label> |
| 1506 | </v-flex> | 1506 | </v-flex> |
| 1507 | <v-flex xs8 sm8 class="ml-3"> | 1507 | <v-flex xs8 sm8 class="ml-3"> |
| 1508 | <v-menu | 1508 | <v-menu |
| 1509 | ref="menu" | 1509 | ref="menu" |
| 1510 | :close-on-content-click="false" | 1510 | :close-on-content-click="false" |
| 1511 | v-model="menu" | 1511 | v-model="menu" |
| 1512 | :nudge-right="40" | 1512 | :nudge-right="40" |
| 1513 | lazy | 1513 | lazy |
| 1514 | transition="scale-transition" | 1514 | transition="scale-transition" |
| 1515 | offset-y | 1515 | offset-y |
| 1516 | full-width | 1516 | full-width |
| 1517 | min-width="290px" | 1517 | min-width="290px" |
| 1518 | > | 1518 | > |
| 1519 | <v-text-field | 1519 | <v-text-field |
| 1520 | slot="activator" | 1520 | slot="activator" |
| 1521 | :rules="dateRules" | 1521 | :rules="dateRules" |
| 1522 | v-model="addStudents.date" | 1522 | v-model="addStudents.date" |
| 1523 | placeholder="Select date" | 1523 | placeholder="Select date" |
| 1524 | ></v-text-field> | 1524 | ></v-text-field> |
| 1525 | <v-date-picker | 1525 | <v-date-picker |
| 1526 | ref="picker" | 1526 | ref="picker" |
| 1527 | v-model="addStudents.date" | 1527 | v-model="addStudents.date" |
| 1528 | :max="new Date().toISOString().substr(0, 10)" | 1528 | :max="new Date().toISOString().substr(0, 10)" |
| 1529 | min="1950-01-01" | 1529 | min="1950-01-01" |
| 1530 | @input="menu = false" | 1530 | @input="menu = false" |
| 1531 | ></v-date-picker> | 1531 | ></v-date-picker> |
| 1532 | </v-menu> | 1532 | </v-menu> |
| 1533 | </v-flex> | 1533 | </v-flex> |
| 1534 | </v-layout> | 1534 | </v-layout> |
| 1535 | </v-flex> | 1535 | </v-flex> |
| 1536 | <v-flex xs12 sm6> | 1536 | <v-flex xs12 sm6> |
| 1537 | <v-layout> | 1537 | <v-layout> |
| 1538 | <v-flex xs4 class="pt-4 subheading"> | 1538 | <v-flex xs4 class="pt-4 subheading"> |
| 1539 | <label class="right">City:</label> | 1539 | <label class="right">City:</label> |
| 1540 | </v-flex> | 1540 | </v-flex> |
| 1541 | <v-flex xs8 class="ml-3"> | 1541 | <v-flex xs8 class="ml-3"> |
| 1542 | <v-text-field | 1542 | <v-text-field |
| 1543 | v-model="addStudents.city" | 1543 | v-model="addStudents.city" |
| 1544 | placeholder="fill your City Name" | 1544 | placeholder="fill your City Name" |
| 1545 | name="City" | 1545 | name="City" |
| 1546 | type="text" | 1546 | type="text" |
| 1547 | :rules="cityRules" | 1547 | :rules="cityRules" |
| 1548 | required | 1548 | required |
| 1549 | ></v-text-field> | 1549 | ></v-text-field> |
| 1550 | </v-flex> | 1550 | </v-flex> |
| 1551 | </v-layout> | 1551 | </v-layout> |
| 1552 | </v-flex> | 1552 | </v-flex> |
| 1553 | </v-layout> | 1553 | </v-layout> |
| 1554 | <v-layout wrap> | 1554 | <v-layout wrap> |
| 1555 | <v-flex xs12 sm6> | 1555 | <v-flex xs12 sm6> |
| 1556 | <v-layout> | 1556 | <v-layout> |
| 1557 | <v-flex xs4 class="pt-4 subheading"> | 1557 | <v-flex xs4 class="pt-4 subheading"> |
| 1558 | <label class="right">State:</label> | 1558 | <label class="right">State:</label> |
| 1559 | </v-flex> | 1559 | </v-flex> |
| 1560 | <v-flex xs8 class="ml-3"> | 1560 | <v-flex xs8 class="ml-3"> |
| 1561 | <v-text-field | 1561 | <v-text-field |
| 1562 | v-model="addStudents.state" | 1562 | v-model="addStudents.state" |
| 1563 | placeholder="fill your State Name" | 1563 | placeholder="fill your State Name" |
| 1564 | name="state" | 1564 | name="state" |
| 1565 | type="text" | 1565 | type="text" |
| 1566 | :rules="stateRules" | 1566 | :rules="stateRules" |
| 1567 | required | 1567 | required |
| 1568 | ></v-text-field> | 1568 | ></v-text-field> |
| 1569 | </v-flex> | 1569 | </v-flex> |
| 1570 | </v-layout> | 1570 | </v-layout> |
| 1571 | </v-flex> | 1571 | </v-flex> |
| 1572 | <v-flex xs12 sm6> | 1572 | <v-flex xs12 sm6> |
| 1573 | <v-layout> | 1573 | <v-layout> |
| 1574 | <v-flex xs4 class="pt-4 subheading"> | 1574 | <v-flex xs4 class="pt-4 subheading"> |
| 1575 | <label class="right">Pincode:</label> | 1575 | <label class="right">Pincode:</label> |
| 1576 | </v-flex> | 1576 | </v-flex> |
| 1577 | <v-flex xs8 class="ml-3"> | 1577 | <v-flex xs8 class="ml-3"> |
| 1578 | <v-text-field | 1578 | <v-text-field |
| 1579 | v-model="addStudents.pincode" | 1579 | v-model="addStudents.pincode" |
| 1580 | placeholder="fill your pincode" | 1580 | placeholder="fill your pincode" |
| 1581 | name="pincode" | 1581 | name="pincode" |
| 1582 | type="number" | 1582 | type="number" |
| 1583 | :rules="pincode" | 1583 | :rules="pincode" |
| 1584 | required | 1584 | required |
| 1585 | ></v-text-field> | 1585 | ></v-text-field> |
| 1586 | </v-flex> | 1586 | </v-flex> |
| 1587 | </v-layout> | 1587 | </v-layout> |
| 1588 | </v-flex> | 1588 | </v-flex> |
| 1589 | </v-layout> | 1589 | </v-layout> |
| 1590 | <v-layout wrap> | 1590 | <v-layout wrap> |
| 1591 | <v-flex xs12 sm6> | 1591 | <v-flex xs12 sm6> |
| 1592 | <v-layout> | 1592 | <v-layout> |
| 1593 | <v-flex xs4 class="pt-4 subheading"> | 1593 | <v-flex xs4 class="pt-4 subheading"> |
| 1594 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 1594 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 1595 | <label | 1595 | <label |
| 1596 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1596 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1597 | >Mobile:</label> | 1597 | >Mobile:</label> |
| 1598 | </v-flex> | 1598 | </v-flex> |
| 1599 | <v-flex xs8 class="ml-3"> | 1599 | <v-flex xs8 class="ml-3"> |
| 1600 | <v-text-field | 1600 | <v-text-field |
| 1601 | v-model="addStudents.mobile" | 1601 | v-model="addStudents.mobile" |
| 1602 | placeholder="fill your MobileNo" | 1602 | placeholder="fill your MobileNo" |
| 1603 | name="mobileNo" | 1603 | name="mobileNo" |
| 1604 | type="number" | 1604 | type="number" |
| 1605 | ></v-text-field> | 1605 | ></v-text-field> |
| 1606 | </v-flex> | 1606 | </v-flex> |
| 1607 | </v-layout> | 1607 | </v-layout> |
| 1608 | </v-flex> | 1608 | </v-flex> |
| 1609 | <v-flex xs12 sm6> | 1609 | <v-flex xs12 sm6> |
| 1610 | <v-layout> | 1610 | <v-layout> |
| 1611 | <v-flex xs4 class="pt-4 subheading"> | 1611 | <v-flex xs4 class="pt-4 subheading"> |
| 1612 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 1612 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 1613 | <label | 1613 | <label |
| 1614 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1614 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1615 | >Country:</label> | 1615 | >Country:</label> |
| 1616 | </v-flex> | 1616 | </v-flex> |
| 1617 | <v-flex xs8 class="ml-3"> | 1617 | <v-flex xs8 class="ml-3"> |
| 1618 | <v-autocomplete | 1618 | <v-autocomplete |
| 1619 | v-model="addStudents.country" | 1619 | v-model="addStudents.country" |
| 1620 | :rules="country" | 1620 | :rules="country" |
| 1621 | :items="countries" | 1621 | :items="countries" |
| 1622 | placeholder="Select Country Name" | 1622 | placeholder="Select Country Name" |
| 1623 | required | 1623 | required |
| 1624 | ></v-autocomplete> | 1624 | ></v-autocomplete> |
| 1625 | </v-flex> | 1625 | </v-flex> |
| 1626 | </v-layout> | 1626 | </v-layout> |
| 1627 | </v-flex> | 1627 | </v-flex> |
| 1628 | </v-layout> | 1628 | </v-layout> |
| 1629 | <v-layout wrap> | 1629 | <v-layout wrap> |
| 1630 | <v-flex xs12 sm6> | 1630 | <v-flex xs12 sm6> |
| 1631 | <v-layout> | 1631 | <v-layout> |
| 1632 | <v-flex xs4 class="pt-4 subheading"> | 1632 | <v-flex xs4 class="pt-4 subheading"> |
| 1633 | <label class="right">Gender:</label> | 1633 | <label class="right">Gender:</label> |
| 1634 | </v-flex> | 1634 | </v-flex> |
| 1635 | <v-flex xs8 class="ml-3"> | 1635 | <v-flex xs8 class="ml-3"> |
| 1636 | <v-select | 1636 | <v-select |
| 1637 | :items="gender" | 1637 | :items="gender" |
| 1638 | v-model="addStudents.gender" | 1638 | v-model="addStudents.gender" |
| 1639 | :rules="genderRules" | 1639 | :rules="genderRules" |
| 1640 | label="Select Gender" | 1640 | label="Select Gender" |
| 1641 | required | 1641 | required |
| 1642 | ></v-select> | 1642 | ></v-select> |
| 1643 | </v-flex> | 1643 | </v-flex> |
| 1644 | </v-layout> | 1644 | </v-layout> |
| 1645 | </v-flex> | 1645 | </v-flex> |
| 1646 | <v-flex xs12 sm6> | 1646 | <v-flex xs12 sm6> |
| 1647 | <v-layout> | 1647 | <v-layout> |
| 1648 | <v-flex xs4 class="pt-4 subheading"> | 1648 | <v-flex xs4 class="pt-4 subheading"> |
| 1649 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> | 1649 | <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> |
| 1650 | <label | 1650 | <label |
| 1651 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1651 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1652 | >Blood:</label> | 1652 | >Blood:</label> |
| 1653 | </v-flex> | 1653 | </v-flex> |
| 1654 | <v-flex xs8 class="ml-3"> | 1654 | <v-flex xs8 class="ml-3"> |
| 1655 | <v-text-field | 1655 | <v-text-field |
| 1656 | v-model="addStudents.bloodGroup" | 1656 | v-model="addStudents.bloodGroup" |
| 1657 | placeholder="Fill your Blood Group" | 1657 | placeholder="Fill your Blood Group" |
| 1658 | required | 1658 | required |
| 1659 | ></v-text-field> | 1659 | ></v-text-field> |
| 1660 | </v-flex> | 1660 | </v-flex> |
| 1661 | </v-layout> | 1661 | </v-layout> |
| 1662 | </v-flex> | 1662 | </v-flex> |
| 1663 | </v-layout> | 1663 | </v-layout> |
| 1664 | <v-layout wrap> | 1664 | <v-layout wrap> |
| 1665 | <v-flex xs12 sm6> | 1665 | <v-flex xs12 sm6> |
| 1666 | <v-layout> | 1666 | <v-layout> |
| 1667 | <v-flex xs4 class="pt-4 subheading"> | 1667 | <v-flex xs4 class="pt-4 subheading"> |
| 1668 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> | 1668 | <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> |
| 1669 | <label | 1669 | <label |
| 1670 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1670 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1671 | >Roll No:</label> | 1671 | >Roll No:</label> |
| 1672 | </v-flex> | 1672 | </v-flex> |
| 1673 | <v-flex xs8 class="ml-3"> | 1673 | <v-flex xs8 class="ml-3"> |
| 1674 | <v-text-field | 1674 | <v-text-field |
| 1675 | v-model="addStudents.rollNo" | 1675 | v-model="addStudents.rollNo" |
| 1676 | placeholder="Fill your Roll Number" | 1676 | placeholder="Fill your Roll Number" |
| 1677 | :rules="rollNo" | 1677 | :rules="rollNo" |
| 1678 | required | 1678 | required |
| 1679 | ></v-text-field> | 1679 | ></v-text-field> |
| 1680 | </v-flex> | 1680 | </v-flex> |
| 1681 | </v-layout> | 1681 | </v-layout> |
| 1682 | </v-flex> | 1682 | </v-flex> |
| 1683 | <v-flex xs12 sm6> | 1683 | <v-flex xs12 sm6> |
| 1684 | <v-layout> | 1684 | <v-layout> |
| 1685 | <v-flex xs4 class="pt-4 subheading"> | 1685 | <v-flex xs4 class="pt-4 subheading"> |
| 1686 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> | 1686 | <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> |
| 1687 | <label | 1687 | <label |
| 1688 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1688 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1689 | >Medical:</label> | 1689 | >Medical:</label> |
| 1690 | </v-flex> | 1690 | </v-flex> |
| 1691 | <v-flex xs8 class="ml-3"> | 1691 | <v-flex xs8 class="ml-3"> |
| 1692 | <v-text-field | 1692 | <v-text-field |
| 1693 | v-model="addStudents.medicalNotes" | 1693 | v-model="addStudents.medicalNotes" |
| 1694 | placeholder="Fill your Medical Notes" | 1694 | placeholder="Fill your Medical Notes" |
| 1695 | required | 1695 | required |
| 1696 | ></v-text-field> | 1696 | ></v-text-field> |
| 1697 | </v-flex> | 1697 | </v-flex> |
| 1698 | </v-layout> | 1698 | </v-layout> |
| 1699 | </v-flex> | 1699 | </v-flex> |
| 1700 | </v-layout> | 1700 | </v-layout> |
| 1701 | <v-layout wrap> | 1701 | <v-layout wrap> |
| 1702 | <v-flex xs12 sm6> | 1702 | <v-flex xs12 sm6> |
| 1703 | <v-layout> | 1703 | <v-layout> |
| 1704 | <v-flex xs4 class="pt-4 subheading"> | 1704 | <v-flex xs4 class="pt-4 subheading"> |
| 1705 | <label class="right">Height:</label> | 1705 | <label class="right">Height:</label> |
| 1706 | </v-flex> | 1706 | </v-flex> |
| 1707 | <v-flex xs8 class="ml-3"> | 1707 | <v-flex xs8 class="ml-3"> |
| 1708 | <v-text-field | 1708 | <v-text-field |
| 1709 | v-model="addStudents.height" | 1709 | v-model="addStudents.height" |
| 1710 | placeholder="Fill your Height" | 1710 | placeholder="Fill your Height" |
| 1711 | required | 1711 | required |
| 1712 | ></v-text-field> | 1712 | ></v-text-field> |
| 1713 | </v-flex> | 1713 | </v-flex> |
| 1714 | </v-layout> | 1714 | </v-layout> |
| 1715 | </v-flex> | 1715 | </v-flex> |
| 1716 | <v-flex xs12 sm6> | 1716 | <v-flex xs12 sm6> |
| 1717 | <v-layout> | 1717 | <v-layout> |
| 1718 | <v-flex xs4 class="pt-4 subheading"> | 1718 | <v-flex xs4 class="pt-4 subheading"> |
| 1719 | <label class="right">Weight:</label> | 1719 | <label class="right">Weight:</label> |
| 1720 | </v-flex> | 1720 | </v-flex> |
| 1721 | <v-flex xs8 class="ml-3"> | 1721 | <v-flex xs8 class="ml-3"> |
| 1722 | <v-text-field | 1722 | <v-text-field |
| 1723 | v-model="addStudents.weight" | 1723 | v-model="addStudents.weight" |
| 1724 | placeholder="Fill your Weight" | 1724 | placeholder="Fill your Weight" |
| 1725 | required | 1725 | required |
| 1726 | ></v-text-field> | 1726 | ></v-text-field> |
| 1727 | </v-flex> | 1727 | </v-flex> |
| 1728 | </v-layout> | 1728 | </v-layout> |
| 1729 | </v-flex> | 1729 | </v-flex> |
| 1730 | </v-layout> | 1730 | </v-layout> |
| 1731 | <v-layout wrap> | 1731 | <v-layout wrap> |
| 1732 | <v-flex xs12 sm6> | 1732 | <v-flex xs12 sm6> |
| 1733 | <v-layout> | 1733 | <v-layout> |
| 1734 | <v-flex xs4 class="pt-4 subheading"> | 1734 | <v-flex xs4 class="pt-4 subheading"> |
| 1735 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 1735 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 1736 | <label | 1736 | <label |
| 1737 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1737 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1738 | >Uplaod :</label> | 1738 | >Uplaod :</label> |
| 1739 | </v-flex> | 1739 | </v-flex> |
| 1740 | <v-flex xs8 class="ml-3"> | 1740 | <v-flex xs8 class="ml-3"> |
| 1741 | <v-text-field | 1741 | <v-text-field |
| 1742 | label="Select Image" | 1742 | label="Select Image" |
| 1743 | @click="pickFile" | 1743 | @click="pickFile" |
| 1744 | v-model="imageName" | 1744 | v-model="imageName" |
| 1745 | append-icon="attach_file" | 1745 | append-icon="attach_file" |
| 1746 | ></v-text-field> | 1746 | ></v-text-field> |
| 1747 | </v-flex> | 1747 | </v-flex> |
| 1748 | </v-layout> | 1748 | </v-layout> |
| 1749 | </v-flex> | 1749 | </v-flex> |
| 1750 | <v-flex xs12 sm6> | 1750 | <v-flex xs12 sm6> |
| 1751 | <v-layout> | 1751 | <v-layout> |
| 1752 | <v-flex xs4 class="pt-4 subheading"> | 1752 | <v-flex xs4 class="pt-4 subheading"> |
| 1753 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> | 1753 | <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> |
| 1754 | <label | 1754 | <label |
| 1755 | class="right hidden-lg-only hidden-md-only hidden-xl-only" | 1755 | class="right hidden-lg-only hidden-md-only hidden-xl-only" |
| 1756 | >Year:</label> | 1756 | >Year:</label> |
| 1757 | </v-flex> | 1757 | </v-flex> |
| 1758 | <v-flex xs8 class="ml-3"> | 1758 | <v-flex xs8 class="ml-3"> |
| 1759 | <v-text-field | 1759 | <v-text-field |
| 1760 | v-model="addStudents.establishmentYear" | 1760 | v-model="addStudents.establishmentYear" |
| 1761 | placeholder="fill your Academic Year" | 1761 | placeholder="fill your Academic Year" |
| 1762 | name="state" | 1762 | name="state" |
| 1763 | type="number" | 1763 | type="number" |
| 1764 | :rules="establishmentYearRules" | 1764 | :rules="establishmentYearRules" |
| 1765 | required | 1765 | required |
| 1766 | ></v-text-field> | 1766 | ></v-text-field> |
| 1767 | </v-flex> | 1767 | </v-flex> |
| 1768 | </v-layout> | 1768 | </v-layout> |
| 1769 | </v-flex> | 1769 | </v-flex> |
| 1770 | </v-layout> | 1770 | </v-layout> |
| 1771 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> | 1771 | <v-layout wrap class="hidden-xs-only hidden-sm-only"> |
| 1772 | <v-flex xs12 sm6> | 1772 | <v-flex xs12 sm6> |
| 1773 | <v-layout> | 1773 | <v-layout> |
| 1774 | <v-flex xs4 sm4 class="pt-4 subheading"> | 1774 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 1775 | <label class="right">Present Address:</label> | 1775 | <label class="right">Present Address:</label> |
| 1776 | </v-flex> | 1776 | </v-flex> |
| 1777 | <v-flex xs8 sm8 class="ml-3"> | 1777 | <v-flex xs8 sm8 class="ml-3"> |
| 1778 | <v-text-field | 1778 | <v-text-field |
| 1779 | v-model="addStudents.presentAddress" | 1779 | v-model="addStudents.presentAddress" |
| 1780 | :rules="presentAddress" | 1780 | :rules="presentAddress" |
| 1781 | placeholder="fill Your present Address" | 1781 | placeholder="fill Your present Address" |
| 1782 | @keyup="copyData" | 1782 | @keyup="copyData" |
| 1783 | ></v-text-field> | 1783 | ></v-text-field> |
| 1784 | </v-flex> | 1784 | </v-flex> |
| 1785 | </v-layout> | 1785 | </v-layout> |
| 1786 | </v-flex> | 1786 | </v-flex> |
| 1787 | <v-flex xs12 sm6> | 1787 | <v-flex xs12 sm6> |
| 1788 | <v-layout> | 1788 | <v-layout> |
| 1789 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1789 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1790 | <label class="right">Permanent Address:</label> | 1790 | <label class="right">Permanent Address:</label> |
| 1791 | </v-flex> | 1791 | </v-flex> |
| 1792 | <v-flex xs12 sm8 class="ml-3"> | 1792 | <v-flex xs12 sm8 class="ml-3"> |
| 1793 | <v-switch | 1793 | <v-switch |
| 1794 | v-model="addStudents.permanentAddress" | 1794 | v-model="addStudents.permanentAddress" |
| 1795 | label="Select Permanent Address" | 1795 | label="Select Permanent Address" |
| 1796 | :value="addStudents.presentAddress" | 1796 | :value="addStudents.presentAddress" |
| 1797 | ></v-switch> | 1797 | ></v-switch> |
| 1798 | </v-flex> | 1798 | </v-flex> |
| 1799 | </v-layout> | 1799 | </v-layout> |
| 1800 | </v-flex> | 1800 | </v-flex> |
| 1801 | </v-layout> | 1801 | </v-layout> |
| 1802 | <v-layout class="hidden-xs-only hidden-sm-only"> | 1802 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 1803 | <v-flex xs12 sm6> | 1803 | <v-flex xs12 sm6> |
| 1804 | <v-layout> | 1804 | <v-layout> |
| 1805 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> | 1805 | <v-flex xs4 sm4 class="pt-4 subheading addressForm"> |
| 1806 | <label class="right">Permanent Address:</label> | 1806 | <label class="right">Permanent Address:</label> |
| 1807 | </v-flex> | 1807 | </v-flex> |
| 1808 | <v-flex xs12 sm8 class="ml-3"> | 1808 | <v-flex xs12 sm8 class="ml-3"> |
| 1809 | <v-text-field | 1809 | <v-text-field |
| 1810 | v-model="addStudents.permanentAddress" | 1810 | v-model="addStudents.permanentAddress" |
| 1811 | :rules="permanentAddress" | 1811 | :rules="permanentAddress" |
| 1812 | placeholder="fill Your Permanent Address" | 1812 | placeholder="fill Your Permanent Address" |
| 1813 | ></v-text-field> | 1813 | ></v-text-field> |
| 1814 | </v-flex> | 1814 | </v-flex> |
| 1815 | </v-layout> | 1815 | </v-layout> |
| 1816 | </v-flex> | 1816 | </v-flex> |
| 1817 | </v-layout> | 1817 | </v-layout> |
| 1818 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 1818 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 1819 | <v-flex xs12 sm12> | 1819 | <v-flex xs12 sm12> |
| 1820 | <v-layout> | 1820 | <v-layout> |
| 1821 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 1821 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 1822 | <label class>Present Address:</label> | 1822 | <label class>Present Address:</label> |
| 1823 | </v-flex> | 1823 | </v-flex> |
| 1824 | </v-layout> | 1824 | </v-layout> |
| 1825 | <v-layout> | 1825 | <v-layout> |
| 1826 | <v-flex xs12 sm12> | 1826 | <v-flex xs12 sm12> |
| 1827 | <v-textarea | 1827 | <v-textarea |
| 1828 | name="input-4-3" | 1828 | name="input-4-3" |
| 1829 | v-model="addStudents.presentAddress" | 1829 | v-model="addStudents.presentAddress" |
| 1830 | :rules="presentAddress" | 1830 | :rules="presentAddress" |
| 1831 | placeholder="fill Your present Address" | 1831 | placeholder="fill Your present Address" |
| 1832 | required | 1832 | required |
| 1833 | ></v-textarea> | 1833 | ></v-textarea> |
| 1834 | </v-flex> | 1834 | </v-flex> |
| 1835 | </v-layout> | 1835 | </v-layout> |
| 1836 | </v-flex> | 1836 | </v-flex> |
| 1837 | <v-flex xs12 sm12> | 1837 | <v-flex xs12 sm12> |
| 1838 | <v-layout> | 1838 | <v-layout> |
| 1839 | <v-flex | 1839 | <v-flex |
| 1840 | xs12 | 1840 | xs12 |
| 1841 | sm12 | 1841 | sm12 |
| 1842 | class="pt-4 pr-4 subheading text-xs-center addressForm" | 1842 | class="pt-4 pr-4 subheading text-xs-center addressForm" |
| 1843 | > | 1843 | > |
| 1844 | <label>Permanent Address:</label> | 1844 | <label>Permanent Address:</label> |
| 1845 | </v-flex> | 1845 | </v-flex> |
| 1846 | </v-layout> | 1846 | </v-layout> |
| 1847 | <v-layout> | 1847 | <v-layout> |
| 1848 | <v-flex xs12 sm12> | 1848 | <v-flex xs12 sm12> |
| 1849 | <v-textarea | 1849 | <v-textarea |
| 1850 | name="input-4-3" | 1850 | name="input-4-3" |
| 1851 | v-model="addStudents.permanentAddress" | 1851 | v-model="addStudents.permanentAddress" |
| 1852 | :rules="permanentAddress" | 1852 | :rules="permanentAddress" |
| 1853 | placeholder="fill Your Permanent Address" | 1853 | placeholder="fill Your Permanent Address" |
| 1854 | required | 1854 | required |
| 1855 | ></v-textarea> | 1855 | ></v-textarea> |
| 1856 | </v-flex> | 1856 | </v-flex> |
| 1857 | </v-layout> | 1857 | </v-layout> |
| 1858 | </v-flex> | 1858 | </v-flex> |
| 1859 | </v-layout> | 1859 | </v-layout> |
| 1860 | <v-layout> | 1860 | <v-layout> |
| 1861 | <v-flex xs12 sm12> | 1861 | <v-flex xs12 sm12> |
| 1862 | <v-layout class="right"> | 1862 | <v-layout class="right"> |
| 1863 | <!-- <v-flex xs6> --> | 1863 | <!-- <v-flex xs6> --> |
| 1864 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> | 1864 | <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> |
| 1865 | <!-- </v-flex> | 1865 | <!-- </v-flex> |
| 1866 | <v-flex xs6>--> | 1866 | <v-flex xs6>--> |
| 1867 | <v-btn | 1867 | <v-btn |
| 1868 | @click="submit" | 1868 | @click="submit" |
| 1869 | round | 1869 | round |
| 1870 | dark | 1870 | dark |
| 1871 | :loading="loading" | 1871 | :loading="loading" |
| 1872 | class="add-button" | 1872 | class="add-button" |
| 1873 | >Add</v-btn> | 1873 | >Add</v-btn> |
| 1874 | <!-- </v-flex> --> | 1874 | <!-- </v-flex> --> |
| 1875 | </v-layout> | 1875 | </v-layout> |
| 1876 | </v-flex> | 1876 | </v-flex> |
| 1877 | </v-layout> | 1877 | </v-layout> |
| 1878 | </v-form> | 1878 | </v-form> |
| 1879 | </v-flex> | 1879 | </v-flex> |
| 1880 | </v-stepper-content> | 1880 | </v-stepper-content> |
| 1881 | </v-stepper-items> | 1881 | </v-stepper-items> |
| 1882 | </v-stepper> | 1882 | </v-stepper> |
| 1883 | </v-flex> | 1883 | </v-flex> |
| 1884 | </v-layout> | 1884 | </v-layout> |
| 1885 | </v-container> | 1885 | </v-container> |
| 1886 | </v-card> | 1886 | </v-card> |
| 1887 | </v-dialog> | 1887 | </v-dialog> |
| 1888 | <v-snackbar | 1888 | <v-snackbar |
| 1889 | :timeout="timeout" | 1889 | :timeout="timeout" |
| 1890 | :top="y === 'top'" | 1890 | :top="y === 'top'" |
| 1891 | :right="x === 'right'" | 1891 | :right="x === 'right'" |
| 1892 | :vertical="mode === 'vertical'" | 1892 | :vertical="mode === 'vertical'" |
| 1893 | v-model="snackbar" | 1893 | v-model="snackbar" |
| 1894 | :color="color" | 1894 | :color="color" |
| 1895 | >{{ text }}</v-snackbar> | 1895 | >{{ text }}</v-snackbar> |
| 1896 | <div class="loader" v-if="showLoader"> | 1896 | <div class="loader" v-if="showLoader"> |
| 1897 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 1897 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 1898 | </div> | 1898 | </div> |
| 1899 | </v-container> | 1899 | </v-container> |
| 1900 | </template> | 1900 | </template> |
| 1901 | 1901 | ||
| 1902 | <script> | 1902 | <script> |
| 1903 | import http from "@/Services/http.js"; | 1903 | import http from "@/Services/http.js"; |
| 1904 | import moment from "moment"; | 1904 | import moment from "moment"; |
| 1905 | import countryList from "@/script/country.js"; | 1905 | import countryList from "@/script/country.js"; |
| 1906 | import parent from "@/script/parents.js"; | 1906 | import parent from "@/script/parents.js"; |
| 1907 | 1907 | ||
| 1908 | export default { | 1908 | export default { |
| 1909 | data: () => ({ | 1909 | data: () => ({ |
| 1910 | e1: true, | 1910 | e1: true, |
| 1911 | e2: 0, | 1911 | e2: 0, |
| 1912 | showParent: true, | 1912 | showParent: true, |
| 1913 | showNext: false, | 1913 | showNext: false, |
| 1914 | snackbar: false, | 1914 | snackbar: false, |
| 1915 | y: "top", | 1915 | y: "top", |
| 1916 | x: "right", | 1916 | x: "right", |
| 1917 | role: "", | 1917 | role: "", |
| 1918 | mode: "", | 1918 | mode: "", |
| 1919 | append: "", | 1919 | append: "", |
| 1920 | timeout: 3000, | 1920 | timeout: 3000, |
| 1921 | text: "", | 1921 | text: "", |
| 1922 | show: true, | 1922 | show: true, |
| 1923 | color: "", | 1923 | color: "", |
| 1924 | showSearch: false, | 1924 | showSearch: false, |
| 1925 | showLoader: false, | 1925 | showLoader: false, |
| 1926 | loading: false, | 1926 | loading: false, |
| 1927 | editLoading: false, | 1927 | editLoading: false, |
| 1928 | date: null, | 1928 | date: null, |
| 1929 | search: "", | 1929 | search: "", |
| 1930 | password: "", | 1930 | password: "", |
| 1931 | menu: false, | 1931 | menu: false, |
| 1932 | menu1: false, | 1932 | menu1: false, |
| 1933 | editStudentDialog: false, | 1933 | editStudentDialog: false, |
| 1934 | profileStudentDialog: false, | 1934 | profileStudentDialog: false, |
| 1935 | addStudentDialog: false, | 1935 | addStudentDialog: false, |
| 1936 | valid: true, | 1936 | valid: true, |
| 1937 | addclass: [], | 1937 | addclass: [], |
| 1938 | addSection: [], | 1938 | addSection: [], |
| 1939 | gender: ["Male", "Female"], | 1939 | gender: ["Male", "Female"], |
| 1940 | pagination: { | 1940 | pagination: { |
| 1941 | rowsPerPage: 10, | 1941 | rowsPerPage: 10, |
| 1942 | }, | 1942 | }, |
| 1943 | imageData: {}, | 1943 | imageData: {}, |
| 1944 | imageName: "", | 1944 | imageName: "", |
| 1945 | imageUrl: "", | 1945 | imageUrl: "", |
| 1946 | imageFile: "", | 1946 | imageFile: "", |
| 1947 | editImageName: "", | 1947 | editImageName: "", |
| 1948 | editImageUrl: "", | 1948 | editImageUrl: "", |
| 1949 | nameRules: [(v) => !!v || " Full Name is required"], | 1949 | nameRules: [(v) => !!v || " Full Name is required"], |
| 1950 | dateRules: [(v) => !!v || " DOB is required"], | 1950 | dateRules: [(v) => !!v || " DOB is required"], |
| 1951 | cityRules: [(v) => !!v || " City Name is required"], | 1951 | cityRules: [(v) => !!v || " City Name is required"], |
| 1952 | pincode: [(v) => !!v || " Pincode is required"], | 1952 | pincode: [(v) => !!v || " Pincode is required"], |
| 1953 | country: [(v) => !!v || " Country Name is required"], | 1953 | country: [(v) => !!v || " Country Name is required"], |
| 1954 | rollNo: [(v) => !!v || "Roll No is required"], | 1954 | rollNo: [(v) => !!v || "Roll No is required"], |
| 1955 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 1955 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 1956 | presentAddress: [(v) => !!v || " Present Address is required"], | 1956 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 1957 | stateRules: [(v) => !!v || "State Name is required"], | 1957 | stateRules: [(v) => !!v || "State Name is required"], |
| 1958 | classRules: [(v) => !!v || " Class Name is required"], | 1958 | classRules: [(v) => !!v || " Class Name is required"], |
| 1959 | sectionRules: [(v) => !!v || " Section Name is required"], | 1959 | sectionRules: [(v) => !!v || " Section Name is required"], |
| 1960 | genderRules: [(v) => !!v || " Select Gender is required"], | 1960 | genderRules: [(v) => !!v || " Select Gender is required"], |
| 1961 | fatheCellNoRules: [ | 1961 | fatheCellNoRules: [ |
| 1962 | (v) => !!v || " father Cell Number is required", | 1962 | (v) => !!v || " father Cell Number is required", |
| 1963 | (v) => v <= 10000000000 || "Max 10 characters is required", | 1963 | (v) => v <= 10000000000 || "Max 10 characters is required", |
| 1964 | ], | 1964 | ], |
| 1965 | password: [ | 1965 | password: [ |
| 1966 | (v) => !!v || "Password field is Required.", | 1966 | (v) => !!v || "Password field is Required.", |
| 1967 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 | 1967 | // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 |
| 1968 | ], | 1968 | ], |
| 1969 | mobileNoRule: [(v) => !!v || " Mobile Number is required"], | 1969 | mobileNoRule: [(v) => !!v || " Mobile Number is required"], |
| 1970 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], | 1970 | establishmentYearRules: [(v) => !!v || " Academic Year is required"], |
| 1971 | errorMessages: "", | 1971 | errorMessages: "", |
| 1972 | countries: [], | 1972 | countries: [], |
| 1973 | headers: [ | 1973 | headers: [ |
| 1974 | { | 1974 | { |
| 1975 | text: "Roll No.", | 1975 | text: "Roll No.", |
| 1976 | align: "center", | 1976 | align: "center", |
| 1977 | sortable: false, | 1977 | sortable: false, |
| 1978 | value: "rollNo", | 1978 | value: "rollNo", |
| 1979 | }, | 1979 | }, |
| 1980 | { | 1980 | { |
| 1981 | text: "Profile Pic", | 1981 | text: "Profile Pic", |
| 1982 | value: "profilePicUrl", | 1982 | value: "profilePicUrl", |
| 1983 | sortable: false, | 1983 | sortable: false, |
| 1984 | align: "center", | 1984 | align: "center", |
| 1985 | }, | 1985 | }, |
| 1986 | { text: "Name", value: "name", sortable: false, align: "center" }, | 1986 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 1987 | { text: "Gender", value: "gender", sortable: false, align: "center" }, | 1987 | { text: "Gender", value: "gender", sortable: false, align: "center" }, |
| 1988 | { | 1988 | { |
| 1989 | text: "Father Name", | 1989 | text: "Father Name", |
| 1990 | value: "fatherName", | 1990 | value: "fatherName", |
| 1991 | sortable: false, | 1991 | sortable: false, |
| 1992 | align: "center", | 1992 | align: "center", |
| 1993 | }, | 1993 | }, |
| 1994 | { | 1994 | { |
| 1995 | text: "Mother Name", | 1995 | text: "Mother Name", |
| 1996 | value: "motherName", | 1996 | value: "motherName", |
| 1997 | sortable: false, | 1997 | sortable: false, |
| 1998 | align: "center", | 1998 | align: "center", |
| 1999 | }, | 1999 | }, |
| 2000 | { | 2000 | { |
| 2001 | text: "Academic Year", | 2001 | text: "Academic Year", |
| 2002 | value: "establishmentYear", | 2002 | value: "establishmentYear", |
| 2003 | sortable: false, | 2003 | sortable: false, |
| 2004 | align: "center", | 2004 | align: "center", |
| 2005 | }, | 2005 | }, |
| 2006 | // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, | 2006 | // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, |
| 2007 | { | 2007 | { |
| 2008 | text: "Status", | 2008 | text: "Status", |
| 2009 | value: "status", | 2009 | value: "status", |
| 2010 | sortable: false, | 2010 | sortable: false, |
| 2011 | align: "center", | 2011 | align: "center", |
| 2012 | }, | 2012 | }, |
| 2013 | { text: "Action", value: "", sortable: false, align: "center" }, | 2013 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 2014 | ], | 2014 | ], |
| 2015 | studentsData: [], | 2015 | studentsData: [], |
| 2016 | parentId: "", | 2016 | parentId: "", |
| 2017 | editedIndex: -1, | 2017 | editedIndex: -1, |
| 2018 | parentData: {}, | 2018 | parentData: {}, |
| 2019 | addStudents: { | 2019 | addStudents: { |
| 2020 | role: "STUDENT", | 2020 | role: "STUDENT", |
| 2021 | name: "", | 2021 | name: "", |
| 2022 | email: "", | 2022 | email: "", |
| 2023 | date: "", | 2023 | date: "", |
| 2024 | city: "", | 2024 | city: "", |
| 2025 | pincode: "", | 2025 | pincode: "", |
| 2026 | country: "", | 2026 | country: "", |
| 2027 | permanentAddress: "", | 2027 | permanentAddress: "", |
| 2028 | presentAddress: "", | 2028 | presentAddress: "", |
| 2029 | mobile: "", | 2029 | mobile: "", |
| 2030 | state: "", | 2030 | state: "", |
| 2031 | gender: "", | 2031 | gender: "", |
| 2032 | select: "", | 2032 | select: "", |
| 2033 | selectSection: "", | 2033 | selectSection: "", |
| 2034 | bloodGroup: "", | 2034 | bloodGroup: "", |
| 2035 | allergies: "", | 2035 | allergies: "", |
| 2036 | medicalNotes: "", | 2036 | medicalNotes: "", |
| 2037 | height: "", | 2037 | height: "", |
| 2038 | weight: "", | 2038 | weight: "", |
| 2039 | rollNo: "", | 2039 | rollNo: "", |
| 2040 | establishmentYear: new Date().getFullYear(), | 2040 | establishmentYear: new Date().getFullYear(), |
| 2041 | }, | 2041 | }, |
| 2042 | selectStudents: { | 2042 | selectStudents: { |
| 2043 | select: "", | 2043 | select: "", |
| 2044 | selectSection: "", | 2044 | selectSection: "", |
| 2045 | }, | 2045 | }, |
| 2046 | editedItem: { | 2046 | editedItem: { |
| 2047 | role: "STUDENT", | 2047 | role: "STUDENT", |
| 2048 | name: "", | 2048 | name: "", |
| 2049 | email: "", | 2049 | email: "", |
| 2050 | dob: "", | 2050 | dob: "", |
| 2051 | city: "", | 2051 | city: "", |
| 2052 | pincode: "", | 2052 | pincode: "", |
| 2053 | country: "", | 2053 | country: "", |
| 2054 | permanentAddress: "", | 2054 | permanentAddress: "", |
| 2055 | presentAddress: "", | 2055 | presentAddress: "", |
| 2056 | mobile: "", | 2056 | mobile: "", |
| 2057 | state: "", | 2057 | state: "", |
| 2058 | gender: "", | 2058 | gender: "", |
| 2059 | select: "", | 2059 | select: "", |
| 2060 | selectSection: "", | 2060 | selectSection: "", |
| 2061 | bloodGroup: "", | 2061 | bloodGroup: "", |
| 2062 | allergies: "", | 2062 | allergies: "", |
| 2063 | medicalNotes: "", | 2063 | medicalNotes: "", |
| 2064 | height: "", | 2064 | height: "", |
| 2065 | weight: "", | 2065 | weight: "", |
| 2066 | rollNo: "", | 2066 | rollNo: "", |
| 2067 | establishmentYear: new Date().getFullYear(), | 2067 | establishmentYear: new Date().getFullYear(), |
| 2068 | }, | 2068 | }, |
| 2069 | isFatherCellExists: false, | 2069 | isFatherCellExists: false, |
| 2070 | }), | 2070 | }), |
| 2071 | watch: { | 2071 | watch: { |
| 2072 | menu(val) { | 2072 | menu(val) { |
| 2073 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 2073 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 2074 | }, | 2074 | }, |
| 2075 | menu1(val) { | 2075 | menu1(val) { |
| 2076 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 2076 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 2077 | }, | 2077 | }, |
| 2078 | addStudentDialog: function (val) { | 2078 | addStudentDialog: function (val) { |
| 2079 | if (!val) { | 2079 | if (!val) { |
| 2080 | this.parentData = []; | 2080 | this.parentData = []; |
| 2081 | this.addStudents = []; | 2081 | this.addStudents = []; |
| 2082 | this.imageName = ""; | 2082 | this.imageName = ""; |
| 2083 | this.imageFile = ""; | 2083 | this.imageFile = ""; |
| 2084 | this.imageUrl = ""; | 2084 | this.imageUrl = ""; |
| 2085 | this.e2 = 1; | 2085 | this.e2 = 1; |
| 2086 | } | 2086 | } |
| 2087 | }, | 2087 | }, |
| 2088 | }, | 2088 | }, |
| 2089 | methods: { | 2089 | methods: { |
| 2090 | findStudents() { | 2090 | findStudents() { |
| 2091 | this.showLoader = true; | 2091 | this.showLoader = true; |
| 2092 | http() | 2092 | http() |
| 2093 | .get("/getStudentWithClass", { | 2093 | .get("/getStudentWithClass", { |
| 2094 | params: { | 2094 | params: { |
| 2095 | classId: this.selectStudents.select, | 2095 | classId: this.selectStudents.select, |
| 2096 | sectionId: this.selectStudents.selectSection, | 2096 | sectionId: this.selectStudents.selectSection, |
| 2097 | }, | 2097 | }, |
| 2098 | }) | 2098 | }) |
| 2099 | .then((response) => { | 2099 | .then((response) => { |
| 2100 | this.studentsData = response.data.data; | 2100 | this.studentsData = response.data.data; |
| 2101 | this.showLoader = false; | 2101 | this.showLoader = false; |
| 2102 | }) | 2102 | }) |
| 2103 | .catch((err) => { | 2103 | .catch((err) => { |
| 2104 | console.log("err====>", err); | 2104 | console.log("err====>", err); |
| 2105 | this.showLoader = false; | 2105 | this.showLoader = false; |
| 2106 | }); | 2106 | }); |
| 2107 | }, | 2107 | }, |
| 2108 | getSections(_id) { | 2108 | getSections(_id) { |
| 2109 | var token = this.$store.state.token; | 2109 | var token = this.$store.state.token; |
| 2110 | this.showLoader = true; | 2110 | this.showLoader = true; |
| 2111 | http() | 2111 | http() |
| 2112 | .get( | 2112 | .get( |
| 2113 | "/getSectionsList", | 2113 | "/getSectionsList", |
| 2114 | { params: { classId: _id } }, | 2114 | { params: { classId: _id } }, |
| 2115 | { | 2115 | { |
| 2116 | headers: { Authorization: "Bearer " + token }, | 2116 | headers: { Authorization: "Bearer " + token }, |
| 2117 | } | 2117 | } |
| 2118 | ) | 2118 | ) |
| 2119 | .then((response) => { | 2119 | .then((response) => { |
| 2120 | this.addSection = response.data.data; | 2120 | this.addSection = response.data.data; |
| 2121 | this.showLoader = false; | 2121 | this.showLoader = false; |
| 2122 | }) | 2122 | }) |
| 2123 | .catch((err) => { | 2123 | .catch((err) => { |
| 2124 | this.showLoader = false; | 2124 | this.showLoader = false; |
| 2125 | }); | 2125 | }); |
| 2126 | }, | 2126 | }, |
| 2127 | getSection(_id) { | 2127 | getSection(_id) { |
| 2128 | var token = this.$store.state.token; | 2128 | var token = this.$store.state.token; |
| 2129 | this.showLoader = true; | 2129 | this.showLoader = true; |
| 2130 | http() | 2130 | http() |
| 2131 | .get( | 2131 | .get( |
| 2132 | "/getSectionsList", | 2132 | "/getSectionsList", |
| 2133 | { params: { classId: _id } }, | 2133 | { params: { classId: _id } }, |
| 2134 | { | 2134 | { |
| 2135 | headers: { Authorization: "Bearer " + token }, | 2135 | headers: { Authorization: "Bearer " + token }, |
| 2136 | } | 2136 | } |
| 2137 | ) | 2137 | ) |
| 2138 | .then((response) => { | 2138 | .then((response) => { |
| 2139 | this.addSection = response.data.data; | 2139 | this.addSection = response.data.data; |
| 2140 | this.showLoader = false; | 2140 | this.showLoader = false; |
| 2141 | }) | 2141 | }) |
| 2142 | .catch((err) => { | 2142 | .catch((err) => { |
| 2143 | this.showLoader = false; | 2143 | this.showLoader = false; |
| 2144 | }); | 2144 | }); |
| 2145 | }, | 2145 | }, |
| 2146 | pickFile() { | 2146 | pickFile() { |
| 2147 | this.$refs.image.click(); | 2147 | this.$refs.image.click(); |
| 2148 | }, | 2148 | }, |
| 2149 | pickEditFile() { | 2149 | pickEditFile() { |
| 2150 | this.$refs.editDataImage.click(); | 2150 | this.$refs.editDataImage.click(); |
| 2151 | }, | 2151 | }, |
| 2152 | dates: function (date) { | 2152 | dates: function (date) { |
| 2153 | return moment(date).format("MMMM DD, YYYY"); | 2153 | return moment(date).format("MMMM DD, YYYY"); |
| 2154 | return date; | 2154 | return date; |
| 2155 | }, | 2155 | }, |
| 2156 | onFilePicked(e) { | 2156 | onFilePicked(e) { |
| 2157 | // console.log(e) | 2157 | // console.log(e) |
| 2158 | const files = e.target.files; | 2158 | const files = e.target.files; |
| 2159 | this.imageData.upload = e.target.files[0]; | 2159 | this.imageData.upload = e.target.files[0]; |
| 2160 | if (files[0] !== undefined) { | 2160 | if (files[0] !== undefined) { |
| 2161 | this.imageName = files[0].name; | 2161 | this.imageName = files[0].name; |
| 2162 | if (this.imageName.lastIndexOf(".") <= 0) { | 2162 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 2163 | return; | 2163 | return; |
| 2164 | } | 2164 | } |
| 2165 | const fr = new FileReader(); | 2165 | const fr = new FileReader(); |
| 2166 | fr.readAsDataURL(files[0]); | 2166 | fr.readAsDataURL(files[0]); |
| 2167 | fr.addEventListener("load", () => { | 2167 | fr.addEventListener("load", () => { |
| 2168 | this.imageUrl = fr.result; | 2168 | this.imageUrl = fr.result; |
| 2169 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 2169 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 2170 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 2170 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 2171 | }); | 2171 | }); |
| 2172 | } else { | 2172 | } else { |
| 2173 | this.imageName = ""; | 2173 | this.imageName = ""; |
| 2174 | this.imageFile = ""; | 2174 | this.imageFile = ""; |
| 2175 | this.imageUrl = ""; | 2175 | this.imageUrl = ""; |
| 2176 | } | 2176 | } |
| 2177 | }, | 2177 | }, |
| 2178 | onEditFilePicked(e) { | 2178 | onEditFilePicked(e) { |
| 2179 | console.log(e); | 2179 | console.log(e); |
| 2180 | const files = e.target.files; | 2180 | const files = e.target.files; |
| 2181 | if (files[0] !== undefined) { | 2181 | if (files[0] !== undefined) { |
| 2182 | this.editImageName = files[0].name; | 2182 | this.editImageName = files[0].name; |
| 2183 | console.log("this.editImageName", this.editImageName); | 2183 | console.log("this.editImageName", this.editImageName); |
| 2184 | 2184 | ||
| 2185 | if (this.editImageName.lastIndexOf(".") <= 0) { | 2185 | if (this.editImageName.lastIndexOf(".") <= 0) { |
| 2186 | return; | 2186 | return; |
| 2187 | } | 2187 | } |
| 2188 | const fr = new FileReader(); | 2188 | const fr = new FileReader(); |
| 2189 | fr.readAsDataURL(files[0]); | 2189 | fr.readAsDataURL(files[0]); |
| 2190 | fr.addEventListener("load", () => { | 2190 | fr.addEventListener("load", () => { |
| 2191 | this.editImageUrl = fr.result; | 2191 | this.editImageUrl = fr.result; |
| 2192 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... | 2192 | this.editiImageFile = files[0]; // this is an image file that can be sent to server... |
| 2193 | }); | 2193 | }); |
| 2194 | } else { | 2194 | } else { |
| 2195 | this.editImageName = ""; | 2195 | this.editImageName = ""; |
| 2196 | this.editiImageFile = ""; | 2196 | this.editiImageFile = ""; |
| 2197 | } | 2197 | } |
| 2198 | }, | 2198 | }, |
| 2199 | editItem(item) { | 2199 | editItem(item) { |
| 2200 | this.editedIndex = this.studentsData.indexOf(item); | 2200 | this.editedIndex = this.studentsData.indexOf(item); |
| 2201 | this.editedItem = Object.assign({}, item); | 2201 | this.editedItem = Object.assign({}, item); |
| 2202 | this.editedItem.fatherName = item.parentId.fatherName; | 2202 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2203 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2203 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2204 | this.editedItem.motherName = item.parentId.motherName; | 2204 | this.editedItem.motherName = item.parentId.motherName; |
| 2205 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2205 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2206 | this.editedItem.dob = | 2206 | this.editedItem.dob = |
| 2207 | this.editedItem.dob != undefined | 2207 | this.editedItem.dob != undefined |
| 2208 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 2208 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 2209 | : (this.editedItem.dob = ""); | 2209 | : (this.editedItem.dob = ""); |
| 2210 | this.editStudentDialog = true; | 2210 | this.editStudentDialog = true; |
| 2211 | }, | 2211 | }, |
| 2212 | profile(item) { | 2212 | profile(item) { |
| 2213 | this.editedIndex = this.studentsData.indexOf(item); | 2213 | this.editedIndex = this.studentsData.indexOf(item); |
| 2214 | this.editedItem = Object.assign({}, item); | 2214 | this.editedItem = Object.assign({}, item); |
| 2215 | this.editedItem.fatherName = item.parentId.fatherName; | 2215 | this.editedItem.fatherName = item.parentId.fatherName; |
| 2216 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; | 2216 | this.editedItem.fatherCellNo = item.parentId.fatherCellNo; |
| 2217 | this.editedItem.motherName = item.parentId.motherName; | 2217 | this.editedItem.motherName = item.parentId.motherName; |
| 2218 | this.editedItem.motherCellNo = item.parentId.motherCellNo; | 2218 | this.editedItem.motherCellNo = item.parentId.motherCellNo; |
| 2219 | 2219 | ||
| 2220 | this.profileStudentDialog = true; | 2220 | this.profileStudentDialog = true; |
| 2221 | }, | 2221 | }, |
| 2222 | deleteItem(item) { | 2222 | deleteItem(item) { |
| 2223 | let deleteStudent = { | 2223 | let deleteStudent = { |
| 2224 | studentId: item._id, | 2224 | studentId: item._id, |
| 2225 | }; | 2225 | }; |
| 2226 | http() | 2226 | http() |
| 2227 | .delete( | 2227 | .delete( |
| 2228 | "/deleteStudent", | 2228 | "/deleteStudent", |
| 2229 | confirm("Are you sure you want to delete this?") && { | 2229 | confirm("Are you sure you want to delete this?") && { |
| 2230 | params: deleteStudent, | 2230 | params: deleteStudent, |
| 2231 | } | 2231 | } |
| 2232 | ) | 2232 | ) |
| 2233 | .then((response) => { | 2233 | .then((response) => { |
| 2234 | this.snackbar = true; | 2234 | this.snackbar = true; |
| 2235 | this.text = response.data.message; | 2235 | this.text = response.data.message; |
| 2236 | this.color = "green"; | 2236 | this.color = "green"; |
| 2237 | this.findStudents(); | 2237 | this.findStudents(); |
| 2238 | }) | 2238 | }) |
| 2239 | .catch((error) => { | 2239 | .catch((error) => { |
| 2240 | this.snackbar = true; | 2240 | this.snackbar = true; |
| 2241 | this.text = error.response.data.message; | 2241 | this.text = error.response.data.message; |
| 2242 | this.color = "error"; | 2242 | this.color = "error"; |
| 2243 | }); | 2243 | }); |
| 2244 | }, | 2244 | }, |
| 2245 | close() { | 2245 | close() { |
| 2246 | this.editStudentDialog = false; | 2246 | this.editStudentDialog = false; |
| 2247 | }, | 2247 | }, |
| 2248 | closeStudentProfile() { | 2248 | closeStudentProfile() { |
| 2249 | this.profileStudentDialog = false; | 2249 | this.profileStudentDialog = false; |
| 2250 | }, | 2250 | }, |
| 2251 | copyData() { | 2251 | copyData() { |
| 2252 | this.addStudents.permanentAddress = this.addStudents.presentAddress; | 2252 | this.addStudents.permanentAddress = this.addStudents.presentAddress; |
| 2253 | }, | 2253 | }, |
| 2254 | submit() { | 2254 | submit() { |
| 2255 | if (this.$refs.form.validate()) { | 2255 | if (this.$refs.form.validate()) { |
| 2256 | let addStudent = { | 2256 | let addStudent = { |
| 2257 | parentId: this.parentId, | 2257 | parentId: this.parentId, |
| 2258 | name: this.addStudents.name, | 2258 | name: this.addStudents.name, |
| 2259 | email: this.addStudents.email, | 2259 | email: this.addStudents.email, |
| 2260 | role: this.addStudents.role, | 2260 | role: this.addStudents.role, |
| 2261 | dob: this.addStudents.date, | 2261 | dob: this.addStudents.date, |
| 2262 | city: this.addStudents.city, | 2262 | city: this.addStudents.city, |
| 2263 | pincode: this.addStudents.pincode, | 2263 | pincode: this.addStudents.pincode, |
| 2264 | country: this.addStudents.country, | 2264 | country: this.addStudents.country, |
| 2265 | permanentAddress: this.addStudents.permanentAddress, | 2265 | permanentAddress: this.addStudents.permanentAddress, |
| 2266 | presentAddress: this.addStudents.presentAddress, | 2266 | presentAddress: this.addStudents.presentAddress, |
| 2267 | mobile: this.addStudents.mobile, | 2267 | mobile: this.addStudents.mobile, |
| 2268 | state: this.addStudents.state, | 2268 | state: this.addStudents.state, |
| 2269 | gender: this.addStudents.gender, | 2269 | gender: this.addStudents.gender, |
| 2270 | establishmentYear: this.addStudents.establishmentYear, | 2270 | establishmentYear: this.addStudents.establishmentYear, |
| 2271 | classId: this.addStudents.select, | 2271 | classId: this.addStudents.select, |
| 2272 | sectionId: this.addStudents.selectSection, | 2272 | sectionId: this.addStudents.selectSection, |
| 2273 | bloodGroup: this.addStudents.bloodGroup, | 2273 | bloodGroup: this.addStudents.bloodGroup, |
| 2274 | medicalNotes: this.addStudents.medicalNotes, | 2274 | medicalNotes: this.addStudents.medicalNotes, |
| 2275 | height: this.addStudents.height, | 2275 | height: this.addStudents.height, |
| 2276 | weight: this.addStudents.weight, | 2276 | weight: this.addStudents.weight, |
| 2277 | rollNo: this.addStudents.rollNo, | 2277 | rollNo: this.addStudents.rollNo, |
| 2278 | }; | 2278 | }; |
| 2279 | if (this.imageUrl) { | 2279 | if (this.imageUrl) { |
| 2280 | var str = this.imageUrl; | 2280 | var str = this.imageUrl; |
| 2281 | const [baseUrl, imageUrl] = str.split(/,/); | 2281 | const [baseUrl, imageUrl] = str.split(/,/); |
| 2282 | addStudent.upload = imageUrl; | 2282 | addStudent.upload = imageUrl; |
| 2283 | } | 2283 | } |
| 2284 | this.loading = true; | 2284 | this.loading = true; |
| 2285 | http() | 2285 | http() |
| 2286 | .post("/createStudent", addStudent) | 2286 | .post("/createStudent", addStudent) |
| 2287 | .then((response) => { | 2287 | .then((response) => { |
| 2288 | this.snackbar = true; | 2288 | this.snackbar = true; |
| 2289 | this.text = "New Student added successfully"; | 2289 | this.text = "New Student added successfully"; |
| 2290 | this.color = "green"; | 2290 | this.color = "green"; |
| 2291 | this.addStudentDialog = false; | 2291 | this.addStudentDialog = false; |
| 2292 | this.$refs.parentForm.reset(); | 2292 | this.$refs.parentForm.reset(); |
| 2293 | this.$refs.parentFormLgScr.reset(); | 2293 | this.$refs.parentFormLgScr.reset(); |
| 2294 | this.$refs.form.reset(); | 2294 | this.$refs.form.reset(); |
| 2295 | this.e2 = 1; | 2295 | this.e2 = 1; |
| 2296 | // this.clear(); | 2296 | // this.clear(); |
| 2297 | // this.clearParents(); | 2297 | // this.clearParents(); |
| 2298 | this.loading = false; | 2298 | this.loading = false; |
| 2299 | }) | 2299 | }) |
| 2300 | .catch((error) => { | 2300 | .catch((error) => { |
| 2301 | this.snackbar = true; | 2301 | this.snackbar = true; |
| 2302 | this.text = error.response.data.message; | 2302 | this.text = error.response.data.message; |
| 2303 | this.color = "error"; | 2303 | this.color = "error"; |
| 2304 | this.loading = false; | 2304 | this.loading = false; |
| 2305 | }); | 2305 | }); |
| 2306 | } | 2306 | } |
| 2307 | }, | 2307 | }, |
| 2308 | clear() { | 2308 | clear() { |
| 2309 | this.$refs.form.reset(); | 2309 | this.$refs.form.reset(); |
| 2310 | this.imageUrl = ""; | 2310 | this.imageUrl = ""; |
| 2311 | }, | 2311 | }, |
| 2312 | clearParents() { | 2312 | clearParents() { |
| 2313 | this.$refs.parentForm.reset(); | 2313 | this.$refs.parentForm.reset(); |
| 2314 | }, | 2314 | }, |
| 2315 | save() { | 2315 | save() { |
| 2316 | let editStudent = { | 2316 | let editStudent = { |
| 2317 | studentId: this.editedItem._id, | 2317 | studentId: this.editedItem._id, |
| 2318 | name: this.editedItem.name, | 2318 | name: this.editedItem.name, |
| 2319 | email: this.editedItem.email, | 2319 | email: this.editedItem.email, |
| 2320 | role: this.editedItem.role, | 2320 | role: this.editedItem.role, |
| 2321 | dob: this.editedItem.dob, | 2321 | dob: this.editedItem.dob, |
| 2322 | city: this.editedItem.city, | 2322 | city: this.editedItem.city, |
| 2323 | pincode: this.editedItem.pincode, | 2323 | pincode: this.editedItem.pincode, |
| 2324 | country: this.editedItem.country, | 2324 | country: this.editedItem.country, |
| 2325 | permanentAddress: this.editedItem.permanentAddress, | 2325 | permanentAddress: this.editedItem.permanentAddress, |
| 2326 | presentAddress: this.editedItem.presentAddress, | 2326 | presentAddress: this.editedItem.presentAddress, |
| 2327 | mobile: this.editedItem.mobile, | 2327 | mobile: this.editedItem.mobile, |
| 2328 | state: this.editedItem.state, | 2328 | state: this.editedItem.state, |
| 2329 | gender: this.editedItem.gender, | 2329 | gender: this.editedItem.gender, |
| 2330 | establishmentYear: this.editedItem.establishmentYear, | 2330 | establishmentYear: this.editedItem.establishmentYear, |
| 2331 | classId: this.editedItem.select, | 2331 | classId: this.editedItem.select, |
| 2332 | sectionId: this.editedItem.selectSection, | 2332 | sectionId: this.editedItem.selectSection, |
| 2333 | bloodGroup: this.editedItem.bloodGroup, | 2333 | bloodGroup: this.editedItem.bloodGroup, |
| 2334 | medicalNotes: this.editedItem.medicalNotes, | 2334 | medicalNotes: this.editedItem.medicalNotes, |
| 2335 | height: this.editedItem.height, | 2335 | height: this.editedItem.height, |
| 2336 | weight: this.editedItem.weight, | 2336 | weight: this.editedItem.weight, |
| 2337 | rollNo: this.editedItem.rollNo, | 2337 | rollNo: this.editedItem.rollNo, |
| 2338 | }; | 2338 | }; |
| 2339 | if (this.editImageUrl) { | 2339 | if (this.editImageUrl) { |
| 2340 | var str = this.editImageUrl; | 2340 | var str = this.editImageUrl; |
| 2341 | const [baseUrl, editImageUrl] = str.split(/,/); | 2341 | const [baseUrl, editImageUrl] = str.split(/,/); |
| 2342 | editStudent.upload = editImageUrl; | 2342 | editStudent.upload = editImageUrl; |
| 2343 | } | 2343 | } |
| 2344 | this.editLoading = true; | 2344 | this.editLoading = true; |
| 2345 | http() | 2345 | http() |
| 2346 | .put("/updateStudent", editStudent) | 2346 | .put("/updateStudent", editStudent) |
| 2347 | .then((response) => { | 2347 | .then((response) => { |
| 2348 | this.snackbar = true; | 2348 | this.snackbar = true; |
| 2349 | this.text = response.data.message; | 2349 | this.text = response.data.message; |
| 2350 | this.color = "green"; | 2350 | this.color = "green"; |
| 2351 | this.imageUrl = ""; | 2351 | this.imageUrl = ""; |
| 2352 | this.findStudents(); | 2352 | this.findStudents(); |
| 2353 | this.close(); | 2353 | this.close(); |
| 2354 | this.editLoading = false; | 2354 | this.editLoading = false; |
| 2355 | }) | 2355 | }) |
| 2356 | .catch((error) => { | 2356 | .catch((error) => { |
| 2357 | this.snackbar = true; | 2357 | this.snackbar = true; |
| 2358 | this.text = error.response.data.statusText; | 2358 | this.text = error.response.data.statusText; |
| 2359 | this.color = "error"; | 2359 | this.color = "error"; |
| 2360 | this.editLoading = false; | 2360 | this.editLoading = false; |
| 2361 | }); | 2361 | }); |
| 2362 | }, | 2362 | }, |
| 2363 | submitParentDetails() { | 2363 | submitParentDetails() { |
| 2364 | if (this.$refs.parentForm.validate()) { | 2364 | if (this.$refs.parentForm.validate()) { |
| 2365 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; | 2365 | this.parentData.fatherCellNo = this.parentData.fatherCellNo; |
| 2366 | this.parentData.motherCellNo = this.parentData.motherCellNo; | 2366 | this.parentData.motherCellNo = this.parentData.motherCellNo; |
| 2367 | let addparentDetails = { | 2367 | let addparentDetails = { |
| 2368 | email: this.parentData.email, | 2368 | email: this.parentData.email, |
| 2369 | fatherName: this.parentData.fatherName, | 2369 | fatherName: this.parentData.fatherName, |
| 2370 | fatherCellNo: this.parentData.fatherCellNo, | 2370 | fatherCellNo: this.parentData.fatherCellNo, |
| 2371 | motherName: this.parentData.motherName, | 2371 | motherName: this.parentData.motherName, |
| 2372 | motherCellNo: this.parentData.motherCellNo, | 2372 | motherCellNo: this.parentData.motherCellNo, |
| 2373 | fatherProfession: this.parentData.fatherProfession, | 2373 | fatherProfession: this.parentData.fatherProfession, |
| 2374 | motherProfession: this.parentData.motherProfession, | 2374 | motherProfession: this.parentData.motherProfession, |
| 2375 | password: this.parentData.password, | 2375 | password: this.parentData.password, |
| 2376 | role: "PARENT", | 2376 | role: "PARENT", |
| 2377 | }; | 2377 | }; |
| 2378 | this.loading = true; | 2378 | this.loading = true; |
| 2379 | http() | 2379 | http() |
| 2380 | .post("/createParent", addparentDetails) | 2380 | .post("/createParent", addparentDetails) |
| 2381 | .then((response) => { | 2381 | .then((response) => { |
| 2382 | this.parentId = response.data.data.id; | 2382 | this.parentId = response.data.data.id; |
| 2383 | this.e2 = 2; | 2383 | this.e2 = 2; |
| 2384 | this.snackbar = true; | 2384 | this.snackbar = true; |
| 2385 | this.text = response.data.message; | 2385 | this.text = response.data.message; |
| 2386 | this.color = "green"; | 2386 | this.color = "green"; |
| 2387 | // this.getStudentList(); | 2387 | // this.getStudentList(); |
| 2388 | this.clear(); | 2388 | this.clear(); |
| 2389 | this.loading = false; | 2389 | this.loading = false; |
| 2390 | }) | 2390 | }) |
| 2391 | .catch((error) => { | 2391 | .catch((error) => { |
| 2392 | this.snackbar = true; | 2392 | this.snackbar = true; |
| 2393 | this.text = error.response.data.message; | 2393 | this.text = error.response.data.message; |
| 2394 | this.color = "error"; | 2394 | this.color = "error"; |
| 2395 | if (error.response.data.statusText) { | 2395 | if (error.response.data.statusText) { |
| 2396 | this.text = error.response.data.statusText; | 2396 | this.text = error.response.data.statusText; |
| 2397 | } | 2397 | } |
| 2398 | this.loading = false; | 2398 | this.loading = false; |
| 2399 | }); | 2399 | }); |
| 2400 | } | 2400 | } |
| 2401 | }, | 2401 | }, |
| 2402 | getParentDetails() { | 2402 | getParentDetails() { |
| 2403 | if (this.parentData.fatherCellNo.length > 9) { | 2403 | if (this.parentData.fatherCellNo.length > 9) { |
| 2404 | this.showLoader = true; | 2404 | this.showLoader = true; |
| 2405 | this.isFatherCellExists = false; | 2405 | this.isFatherCellExists = false; |
| 2406 | http() | 2406 | http() |
| 2407 | .get("getParticularParent", { | 2407 | .get("getParticularParent", { |
| 2408 | params: { fatherCellNo: this.parentData.fatherCellNo }, | 2408 | params: { fatherCellNo: this.parentData.fatherCellNo }, |
| 2409 | headers: { | 2409 | headers: { |
| 2410 | Authorization: "Bearer " + this.$store.state.token, | 2410 | Authorization: "Bearer " + this.$store.state.token, |
| 2411 | }, | 2411 | }, |
| 2412 | }) | 2412 | }) |
| 2413 | .then((response) => { | 2413 | .then((response) => { |
| 2414 | this.showNext = true; | 2414 | this.showNext = true; |
| 2415 | this.showParent = false; | 2415 | this.showParent = false; |
| 2416 | this.parentData = response.data.data; | 2416 | this.parentData = response.data.data; |
| 2417 | this.parentId = response.data.data._id; | 2417 | this.parentId = response.data.data._id; |
| 2418 | this.showLoader = false; | 2418 | this.showLoader = false; |
| 2419 | this.isFatherCellExists = true; | 2419 | this.isFatherCellExists = true; |
| 2420 | }) | 2420 | }) |
| 2421 | .catch((error) => { | 2421 | .catch((error) => { |
| 2422 | console.log("err====>", error.response.data.message); | 2422 | console.log("err====>", error.response.data.message); |
| 2423 | this.text = error.response.data.message; | 2423 | this.text = error.response.data.message; |
| 2424 | this.snackbar = true; | 2424 | this.snackbar = true; |
| 2425 | this.color = "error"; | 2425 | this.color = "error"; |
| 2426 | if (this.text === "Data not found!") { | 2426 | if (this.text === "Data not found!") { |
| 2427 | this.showNext = false; | 2427 | this.showNext = false; |
| 2428 | this.showParent = true; | 2428 | this.showParent = true; |
| 2429 | this.parentData.email = ""; | 2429 | this.parentData.email = ""; |
| 2430 | this.parentData.fatherName = ""; | 2430 | this.parentData.fatherName = ""; |
| 2431 | this.parentData.motherName = ""; | 2431 | this.parentData.motherName = ""; |
| 2432 | this.parentData.motherCellNo = ""; | 2432 | this.parentData.motherCellNo = ""; |
| 2433 | this.parentData.fatherProfession = ""; | 2433 | this.parentData.fatherProfession = ""; |
| 2434 | this.parentData.motherProfession = ""; | 2434 | this.parentData.motherProfession = ""; |
| 2435 | this.parentData.password = ""; | 2435 | this.parentData.password = ""; |
| 2436 | } | 2436 | } |
| 2437 | this.showLoader = false; | 2437 | this.showLoader = false; |
| 2438 | }); | 2438 | }); |
| 2439 | } | 2439 | } |
| 2440 | }, | 2440 | }, |
| 2441 | suspendStudentStatus(status, id) { | 2441 | suspendStudentStatus(status, id) { |
| 2442 | let suspendStudentData = { | 2442 | let suspendStudentData = { |
| 2443 | studentId: id, | 2443 | studentId: id, |
| 2444 | status: status, | 2444 | status: status, |
| 2445 | }; | 2445 | }; |
| 2446 | http() | 2446 | http() |
| 2447 | .put("/suspendStudentAccount", suspendStudentData) | 2447 | .put("/suspendStudentAccount", suspendStudentData) |
| 2448 | .then((response) => { | 2448 | .then((response) => { |
| 2449 | this.findStudents(); | 2449 | this.findStudents(); |
| 2450 | this.text = response.data.message; | 2450 | this.text = response.data.message; |
| 2451 | this.color = "green"; | 2451 | this.color = "green"; |
| 2452 | this.snackbar = true; | 2452 | this.snackbar = true; |
| 2453 | }) | 2453 | }) |
| 2454 | .catch((error) => { | 2454 | .catch((error) => { |
| 2455 | this.snackbar = true; | 2455 | this.snackbar = true; |
| 2456 | this.color = "error"; | 2456 | this.color = "error"; |
| 2457 | this.text = error.response.data.message; | 2457 | this.text = error.response.data.message; |
| 2458 | }); | 2458 | }); |
| 2459 | }, | 2459 | }, |
| 2460 | displaySearch() { | 2460 | displaySearch() { |
| 2461 | (this.show = false), (this.showSearch = true); | 2461 | (this.show = false), (this.showSearch = true); |
| 2462 | }, | 2462 | }, |
| 2463 | closeSearch() { | 2463 | closeSearch() { |
| 2464 | this.showSearch = false; | 2464 | this.showSearch = false; |
| 2465 | this.show = true; | 2465 | this.show = true; |
| 2466 | this.search = ""; | 2466 | this.search = ""; |
| 2467 | }, | 2467 | }, |
| 2468 | }, | 2468 | }, |
| 2469 | mounted() { | 2469 | mounted() { |
| 2470 | const getCountryList = countryList(); | 2470 | const getCountryList = countryList(); |
| 2471 | this.role = this.$store.state.role; | 2471 | this.role = this.$store.state.role; |
| 2472 | this.countries = getCountryList; | 2472 | this.countries = getCountryList; |
| 2473 | var token = this.$store.state.token; | 2473 | var token = this.$store.state.token; |
| 2474 | http() | 2474 | http() |
| 2475 | .get("/getClassesList", { | 2475 | .get("/getClassesList", { |
| 2476 | headers: { Authorization: "Bearer " + token }, | 2476 | headers: { Authorization: "Bearer " + token }, |
| 2477 | }) | 2477 | }) |
| 2478 | .then((response) => { | 2478 | .then((response) => { |
| 2479 | this.addclass = response.data.data; | 2479 | this.addclass = response.data.data; |
| 2480 | }) | 2480 | }) |
| 2481 | .catch((error) => { | 2481 | .catch((error) => { |
| 2482 | this.showLoader = false; | 2482 | this.showLoader = false; |
| 2483 | if (error.response.status === 401) { | 2483 | if (error.response.status === 401) { |
| 2484 | this.$router.replace({ path: "/" }); | 2484 | this.$router.replace({ path: "/" }); |
| 2485 | this.$store.dispatch("setToken", null); | 2485 | this.$store.dispatch("setToken", null); |
| 2486 | this.$store.dispatch("Id", null); | 2486 | this.$store.dispatch("Id", null); |
| 2487 | this.$store.dispatch("Role", null); | 2487 | this.$store.dispatch("Role", null); |
| 2488 | } | 2488 | } |
| 2489 | }); | 2489 | }); |
| 2490 | }, | 2490 | }, |
| 2491 | }; | 2491 | }; |
| 2492 | </script> | 2492 | </script> |
| 2493 | <style scoped> | 2493 | <style scoped> |
| 2494 | .active { | 2494 | .active { |
| 2495 | background-color: gray; | 2495 | background-color: gray; |
| 2496 | color: white !important; | 2496 | color: white !important; |
| 2497 | } | 2497 | } |
| 2498 | .activebtn { | 2498 | .activebtn { |
| 2499 | color: black !important; | 2499 | color: black !important; |
| 2500 | } | 2500 | } |
| 2501 | </style> | 2501 | </style> |
src/pages/Subjects/subjects.vue
| 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" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit 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" persistent> |
| 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-if="showSearch"> | 279 | <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> |
| 280 | <v-layout> | 280 | <v-layout> |
| 281 | <v-text-field | 281 | <v-text-field |
| 282 | autofocus | 282 | autofocus |
| 283 | v-model="search" | 283 | v-model="search" |
| 284 | label="Search" | 284 | label="Search" |
| 285 | prepend-inner-icon="search" | 285 | prepend-inner-icon="search" |
| 286 | color="primary" | 286 | color="primary" |
| 287 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" | 287 | style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" |
| 288 | ></v-text-field> | 288 | ></v-text-field> |
| 289 | <v-icon @click="closeSearch" color="error">close</v-icon> | 289 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 290 | </v-layout> | 290 | </v-layout> |
| 291 | </v-flex> | 291 | </v-flex> |
| 292 | </v-toolbar> | 292 | </v-toolbar> |
| 293 | <v-data-table | 293 | <v-data-table |
| 294 | :headers="headers" | 294 | :headers="headers" |
| 295 | :items="subjectList.subjects" | 295 | :items="subjectList.subjects" |
| 296 | :pagination.sync="pagination" | 296 | :pagination.sync="pagination" |
| 297 | :search="search" | 297 | :search="search" |
| 298 | > | 298 | > |
| 299 | <template slot="items" slot-scope="props"> | 299 | <template slot="items" slot-scope="props"> |
| 300 | <tr class="tr"> | 300 | <tr class="tr"> |
| 301 | <td class="td-row td">{{ props.index + 1 }}</td> | 301 | <td class="td-row td">{{ props.index + 1 }}</td> |
| 302 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> | 302 | <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> |
| 303 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> | 303 | <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> |
| 304 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> | 304 | <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> |
| 305 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> | 305 | <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> |
| 306 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> | 306 | <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> |
| 307 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> | 307 | <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> |
| 308 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> | 308 | <td class="text-xs-center td td-row">{{ props.item.type }}</td> |
| 309 | 309 | ||
| 310 | <td class="text-xs-center td td-row"> | 310 | <td class="text-xs-center td td-row"> |
| 311 | <span> | 311 | <span> |
| 312 | <!-- <v-tooltip top> | 312 | <!-- <v-tooltip top> |
| 313 | <img | 313 | <img |
| 314 | slot="activator" | 314 | slot="activator" |
| 315 | style="cursor:pointer; width:25px; height:25px; " | 315 | style="cursor:pointer; width:25px; height:25px; " |
| 316 | class="mr-3" | 316 | class="mr-3" |
| 317 | @click="profile(props.item)" | 317 | @click="profile(props.item)" |
| 318 | src="/static/icon/view.png" | 318 | src="/static/icon/view.png" |
| 319 | /> | 319 | /> |
| 320 | <span>View</span> | 320 | <span>View</span> |
| 321 | </v-tooltip>--> | 321 | </v-tooltip>--> |
| 322 | <v-tooltip top> | 322 | <v-tooltip top> |
| 323 | <img | 323 | <img |
| 324 | slot="activator" | 324 | slot="activator" |
| 325 | style="cursor:pointer; width:20px; height:18px; " | 325 | style="cursor:pointer; width:20px; height:18px; " |
| 326 | class="mr-3" | 326 | class="mr-3" |
| 327 | @click="editItem(props.item)" | 327 | @click="editItem(props.item)" |
| 328 | src="/static/icon/edit.png" | 328 | src="/static/icon/edit.png" |
| 329 | /> | 329 | /> |
| 330 | <span>Edit</span> | 330 | <span>Edit</span> |
| 331 | </v-tooltip> | 331 | </v-tooltip> |
| 332 | <v-tooltip top> | 332 | <v-tooltip top> |
| 333 | <img | 333 | <img |
| 334 | slot="activator" | 334 | slot="activator" |
| 335 | style="cursor:pointer; width:20px; height:20px; " | 335 | style="cursor:pointer; width:20px; height:20px; " |
| 336 | class="mr-3" | 336 | class="mr-3" |
| 337 | @click="deleteItem(props.item)" | 337 | @click="deleteItem(props.item)" |
| 338 | src="/static/icon/delete.png" | 338 | src="/static/icon/delete.png" |
| 339 | /> | 339 | /> |
| 340 | <span>Delete</span> | 340 | <span>Delete</span> |
| 341 | </v-tooltip> | 341 | </v-tooltip> |
| 342 | </span> | 342 | </span> |
| 343 | </td> | 343 | </td> |
| 344 | </tr> | 344 | </tr> |
| 345 | </template> | 345 | </template> |
| 346 | <v-alert | 346 | <v-alert |
| 347 | slot="no-results" | 347 | slot="no-results" |
| 348 | :value="true" | 348 | :value="true" |
| 349 | color="error" | 349 | color="error" |
| 350 | icon="warning" | 350 | icon="warning" |
| 351 | >Your search for "{{ search }}" found no results.</v-alert> | 351 | >Your search for "{{ search }}" found no results.</v-alert> |
| 352 | </v-data-table> | 352 | </v-data-table> |
| 353 | <!-- ****** ADD MULTIPLE Subject ****** --> | 353 | <!-- ****** ADD MULTIPLE Subject ****** --> |
| 354 | <v-snackbar | 354 | <v-snackbar |
| 355 | :timeout="timeout" | 355 | :timeout="timeout" |
| 356 | :top="y === 'top'" | 356 | :top="y === 'top'" |
| 357 | :right="x === 'right'" | 357 | :right="x === 'right'" |
| 358 | :vertical="mode === 'vertical'" | 358 | :vertical="mode === 'vertical'" |
| 359 | v-model="snackbar" | 359 | v-model="snackbar" |
| 360 | :color="color" | 360 | :color="color" |
| 361 | >{{ text }}</v-snackbar> | 361 | >{{ text }}</v-snackbar> |
| 362 | <v-dialog v-model="addSubjectDialog" max-width="600px"> | 362 | <v-dialog v-model="addSubjectDialog" max-width="600px" persistent> |
| 363 | <v-card flat class="card-style pa-2" dark> | 363 | <v-card flat class="card-style pa-2" dark> |
| 364 | <v-layout> | 364 | <v-layout> |
| 365 | <v-flex xs12> | 365 | <v-flex xs12> |
| 366 | <label class="title text-xs-center">Add Subject</label> | 366 | <label class="title text-xs-center">Add Subject</label> |
| 367 | <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> | 367 | <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | </v-layout> | 369 | </v-layout> |
| 370 | <v-container fluid fill-height> | 370 | <v-container fluid fill-height> |
| 371 | <v-layout align-center> | 371 | <v-layout align-center> |
| 372 | <v-flex xs12> | 372 | <v-flex xs12> |
| 373 | <v-form ref="form" v-model="valid" lazy-validation> | 373 | <v-form ref="form" v-model="valid" lazy-validation> |
| 374 | <v-layout> | 374 | <v-layout> |
| 375 | <v-flex xs4 sm4 class="pt-4 subheading"> | 375 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 376 | <label class="right">Class Name :</label> | 376 | <label class="right">Class Name :</label> |
| 377 | </v-flex> | 377 | </v-flex> |
| 378 | <v-flex xs8 sm8 class="ml-3"> | 378 | <v-flex xs8 sm8 class="ml-3"> |
| 379 | <v-select | 379 | <v-select |
| 380 | v-model="addSubject.classId" | 380 | v-model="addSubject.classId" |
| 381 | label="Select your class" | 381 | label="Select your class" |
| 382 | type="text" | 382 | type="text" |
| 383 | :items="classList" | 383 | :items="classList" |
| 384 | item-text="classNum" | 384 | item-text="classNum" |
| 385 | item-value="_id" | 385 | item-value="_id" |
| 386 | :rules="classRules" | 386 | :rules="classRules" |
| 387 | required | 387 | required |
| 388 | ></v-select> | 388 | ></v-select> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | <v-layout> | 391 | <v-layout> |
| 392 | <v-flex xs4 sm4 class="pt-4 subheading"> | 392 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 393 | <label class="right">Teacher Name :</label> | 393 | <label class="right">Teacher Name :</label> |
| 394 | </v-flex> | 394 | </v-flex> |
| 395 | <v-flex xs8 sm8 class="ml-3"> | 395 | <v-flex xs8 sm8 class="ml-3"> |
| 396 | <v-select | 396 | <v-select |
| 397 | v-model="addSubject.teacherId" | 397 | v-model="addSubject.teacherId" |
| 398 | label="Select your teacher" | 398 | label="Select your teacher" |
| 399 | type="text" | 399 | type="text" |
| 400 | :items="teacherList" | 400 | :items="teacherList" |
| 401 | item-text="name" | 401 | item-text="name" |
| 402 | item-value="_id" | 402 | item-value="_id" |
| 403 | :rules="teacherRules" | 403 | :rules="teacherRules" |
| 404 | required | 404 | required |
| 405 | ></v-select> | 405 | ></v-select> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-flex xs4 sm4 class="pt-4 sybheading"> | 409 | <v-flex xs4 sm4 class="pt-4 sybheading"> |
| 410 | <label class="right">Type :</label> | 410 | <label class="right">Type :</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 | v-model="addSubject.type" | 414 | v-model="addSubject.type" |
| 415 | :items="type" | 415 | :items="type" |
| 416 | label="Select your Type" | 416 | label="Select your Type" |
| 417 | :rules="typeRules" | 417 | :rules="typeRules" |
| 418 | required | 418 | required |
| 419 | ></v-select> | 419 | ></v-select> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | </v-layout> | 421 | </v-layout> |
| 422 | <v-layout> | 422 | <v-layout> |
| 423 | <v-flex xs4 sm4 class="pt-4 subheading"> | 423 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 424 | <label class="right">Pass Mark :</label> | 424 | <label class="right">Pass Mark :</label> |
| 425 | </v-flex> | 425 | </v-flex> |
| 426 | <v-flex xs8 sm8 class="ml-3"> | 426 | <v-flex xs8 sm8 class="ml-3"> |
| 427 | <v-text-field | 427 | <v-text-field |
| 428 | label="Fill your Pass Mark" | 428 | label="Fill your Pass Mark" |
| 429 | name="name" | 429 | name="name" |
| 430 | type="text" | 430 | type="text" |
| 431 | :rules="markRules" | 431 | :rules="markRules" |
| 432 | v-model="addSubject.passMarks" | 432 | v-model="addSubject.passMarks" |
| 433 | required | 433 | required |
| 434 | ></v-text-field> | 434 | ></v-text-field> |
| 435 | </v-flex> | 435 | </v-flex> |
| 436 | </v-layout> | 436 | </v-layout> |
| 437 | <v-layout> | 437 | <v-layout> |
| 438 | <v-flex xs4 sm4 class="pt-4 subheading"> | 438 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 439 | <label class="right">Final Mark :</label> | 439 | <label class="right">Final Mark :</label> |
| 440 | </v-flex> | 440 | </v-flex> |
| 441 | <v-flex xs8 sm8 class="ml-3"> | 441 | <v-flex xs8 sm8 class="ml-3"> |
| 442 | <v-text-field | 442 | <v-text-field |
| 443 | label="Fill your final mark" | 443 | label="Fill your final mark" |
| 444 | name="name" | 444 | name="name" |
| 445 | type="text" | 445 | type="text" |
| 446 | :rules="finalRules" | 446 | :rules="finalRules" |
| 447 | v-model="addSubject.finalMarks" | 447 | v-model="addSubject.finalMarks" |
| 448 | required | 448 | required |
| 449 | ></v-text-field> | 449 | ></v-text-field> |
| 450 | </v-flex> | 450 | </v-flex> |
| 451 | </v-layout> | 451 | </v-layout> |
| 452 | <v-layout> | 452 | <v-layout> |
| 453 | <v-flex xs4 sm4 class="pt-4 subheading"> | 453 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 454 | <label class="right">Subject :</label> | 454 | <label class="right">Subject :</label> |
| 455 | </v-flex> | 455 | </v-flex> |
| 456 | <v-flex xs8 sm8 class="ml-3"> | 456 | <v-flex xs8 sm8 class="ml-3"> |
| 457 | <v-text-field | 457 | <v-text-field |
| 458 | v-model="addSubject.subjectName" | 458 | v-model="addSubject.subjectName" |
| 459 | placeholder="fill your Subject Name" | 459 | placeholder="fill your Subject Name" |
| 460 | name="name" | 460 | name="name" |
| 461 | type="text" | 461 | type="text" |
| 462 | :rules="subjectRules" | 462 | :rules="subjectRules" |
| 463 | required | 463 | required |
| 464 | ></v-text-field> | 464 | ></v-text-field> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | </v-layout> | 466 | </v-layout> |
| 467 | <v-layout> | 467 | <v-layout> |
| 468 | <v-flex xs4 sm4 class="pt-4 subheading"> | 468 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 469 | <label class="right">Subject Author :</label> | 469 | <label class="right">Subject Author :</label> |
| 470 | </v-flex> | 470 | </v-flex> |
| 471 | <v-flex xs8 sm8 class="ml-3"> | 471 | <v-flex xs8 sm8 class="ml-3"> |
| 472 | <v-text-field | 472 | <v-text-field |
| 473 | v-model="addSubject.subjectAuthor" | 473 | v-model="addSubject.subjectAuthor" |
| 474 | placeholder="fill your Subject Author" | 474 | placeholder="fill your Subject Author" |
| 475 | name="name" | 475 | name="name" |
| 476 | type="text" | 476 | type="text" |
| 477 | ></v-text-field> | 477 | ></v-text-field> |
| 478 | </v-flex> | 478 | </v-flex> |
| 479 | </v-layout> | 479 | </v-layout> |
| 480 | <v-layout> | 480 | <v-layout> |
| 481 | <v-flex xs4 sm4 class="pt-4 subheading"> | 481 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 482 | <label class="right">Subject Code:</label> | 482 | <label class="right">Subject Code:</label> |
| 483 | </v-flex> | 483 | </v-flex> |
| 484 | <v-flex xs8 sm8 class="ml-3"> | 484 | <v-flex xs8 sm8 class="ml-3"> |
| 485 | <v-text-field | 485 | <v-text-field |
| 486 | v-model="addSubject.subjectCode" | 486 | v-model="addSubject.subjectCode" |
| 487 | placeholder="fill your Subject Code" | 487 | placeholder="fill your Subject Code" |
| 488 | name="name" | 488 | name="name" |
| 489 | type="text" | 489 | type="text" |
| 490 | ></v-text-field> | 490 | ></v-text-field> |
| 491 | </v-flex> | 491 | </v-flex> |
| 492 | </v-layout> | 492 | </v-layout> |
| 493 | <v-layout> | 493 | <v-layout> |
| 494 | <v-flex xs12 sm12> | 494 | <v-flex xs12 sm12> |
| 495 | <v-card-actions> | 495 | <v-card-actions> |
| 496 | <v-spacer></v-spacer> | 496 | <v-spacer></v-spacer> |
| 497 | <v-btn | 497 | <v-btn |
| 498 | @click="submit" | 498 | @click="submit" |
| 499 | round | 499 | round |
| 500 | dark | 500 | dark |
| 501 | :loading="loading" | 501 | :loading="loading" |
| 502 | class="add-button" | 502 | class="add-button" |
| 503 | >Add Subject</v-btn> | 503 | >Add Subject</v-btn> |
| 504 | </v-card-actions> | 504 | </v-card-actions> |
| 505 | </v-flex> | 505 | </v-flex> |
| 506 | </v-layout> | 506 | </v-layout> |
| 507 | </v-form> | 507 | </v-form> |
| 508 | </v-flex> | 508 | </v-flex> |
| 509 | </v-layout> | 509 | </v-layout> |
| 510 | </v-container> | 510 | </v-container> |
| 511 | </v-card> | 511 | </v-card> |
| 512 | </v-dialog> | 512 | </v-dialog> |
| 513 | <div class="loader" v-if="showLoader"> | 513 | <div class="loader" v-if="showLoader"> |
| 514 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 514 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 515 | </div> | 515 | </div> |
| 516 | </v-container> | 516 | </v-container> |
| 517 | </template> | 517 | </template> |
| 518 | 518 | ||
| 519 | <script> | 519 | <script> |
| 520 | import http from "@/Services/http.js"; | 520 | import http from "@/Services/http.js"; |
| 521 | import Util from "@/util"; | 521 | import Util from "@/util"; |
| 522 | 522 | ||
| 523 | export default { | 523 | export default { |
| 524 | data: () => ({ | 524 | data: () => ({ |
| 525 | snackbar: false, | 525 | snackbar: false, |
| 526 | y: "top", | 526 | y: "top", |
| 527 | x: "right", | 527 | x: "right", |
| 528 | role: "", | 528 | role: "", |
| 529 | mode: "", | 529 | mode: "", |
| 530 | timeout: 3000, | 530 | timeout: 3000, |
| 531 | text: "", | 531 | text: "", |
| 532 | color: "", | 532 | color: "", |
| 533 | show: true, | 533 | show: true, |
| 534 | showSearch: false, | 534 | showSearch: false, |
| 535 | showLoader: false, | 535 | showLoader: false, |
| 536 | loading: false, | 536 | loading: false, |
| 537 | editLoading: false, | 537 | editLoading: 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.getClassSubject(_id); | 649 | this.getClassSubject(_id); |
| 650 | this.snackbar = true; | 650 | this.snackbar = true; |
| 651 | this.text = "Successfully delete Existing Subject"; | 651 | this.text = "Successfully delete Existing Subject"; |
| 652 | this.color = "green"; | 652 | this.color = "green"; |
| 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 | }); | 658 | }); |
| 659 | }, | 659 | }, |
| 660 | close() { | 660 | close() { |
| 661 | this.editSubjectDialog = false; | 661 | this.editSubjectDialog = false; |
| 662 | }, | 662 | }, |
| 663 | close1() { | 663 | close1() { |
| 664 | this.viewSubjectDialog = false; | 664 | this.viewSubjectDialog = false; |
| 665 | }, | 665 | }, |
| 666 | submit() { | 666 | submit() { |
| 667 | if (this.$refs.form.validate()) { | 667 | if (this.$refs.form.validate()) { |
| 668 | http() | 668 | http() |
| 669 | .post("/addSubject", this.addSubject) | 669 | .post("/addSubject", this.addSubject) |
| 670 | .then(response => { | 670 | .then(response => { |
| 671 | this.getClassSubject(_id); | 671 | this.getClassSubject(_id); |
| 672 | this.snackbar = true; | 672 | this.snackbar = true; |
| 673 | this.text = "New Subject added successfully"; | 673 | this.text = "New Subject added successfully"; |
| 674 | this.clear(); | 674 | this.clear(); |
| 675 | this.color = "green"; | 675 | this.color = "green"; |
| 676 | this.addSubjectDialog = false; | 676 | this.addSubjectDialog = false; |
| 677 | }) | 677 | }) |
| 678 | .catch(error => { | 678 | .catch(error => { |
| 679 | // console.log(error); | 679 | // console.log(error); |
| 680 | this.snackbar = true; | 680 | this.snackbar = true; |
| 681 | this.text = error.response.data.message; | 681 | this.text = error.response.data.message; |
| 682 | this.color = "error"; | 682 | this.color = "error"; |
| 683 | }); | 683 | }); |
| 684 | } | 684 | } |
| 685 | }, | 685 | }, |
| 686 | clear() { | 686 | clear() { |
| 687 | this.$refs.form.reset(); | 687 | this.$refs.form.reset(); |
| 688 | }, | 688 | }, |
| 689 | save() { | 689 | save() { |
| 690 | if (this.$refs.formEditSubject.validate()) { | 690 | if (this.$refs.formEditSubject.validate()) { |
| 691 | let editSubject = { | 691 | let editSubject = { |
| 692 | classId: this.editedItem.classId, | 692 | classId: this.editedItem.classId, |
| 693 | subjectId: this.editedItem._id, | 693 | subjectId: this.editedItem._id, |
| 694 | teacherId: this.editedItem.teacherId, | 694 | teacherId: this.editedItem.teacherId, |
| 695 | type: this.editedItem.type, | 695 | type: this.editedItem.type, |
| 696 | passMarks: this.editedItem.passMarks, | 696 | passMarks: this.editedItem.passMarks, |
| 697 | finalMarks: this.editedItem.finalMarks, | 697 | finalMarks: this.editedItem.finalMarks, |
| 698 | subjectAuthor: this.editedItem.subjectAuthor, | 698 | subjectAuthor: this.editedItem.subjectAuthor, |
| 699 | subjectCode: this.editedItem.subjectCode, | 699 | subjectCode: this.editedItem.subjectCode, |
| 700 | subjectName: this.editedItem.subjectName | 700 | subjectName: this.editedItem.subjectName |
| 701 | }; | 701 | }; |
| 702 | this.editLoading = true; | 702 | this.editLoading = true; |
| 703 | http() | 703 | http() |
| 704 | .put("/updateSubject", editSubject) | 704 | .put("/updateSubject", editSubject) |
| 705 | .then(response => { | 705 | .then(response => { |
| 706 | this.snackbar = true; | 706 | this.snackbar = true; |
| 707 | this.text = "Successfully Edit Existing Subject"; | 707 | this.text = "Successfully Edit Existing Subject"; |
| 708 | this.color = "green"; | 708 | this.color = "green"; |
| 709 | this.editLoading = false; | 709 | this.editLoading = false; |
| 710 | this.editSubjectDialog = false; | 710 | this.editSubjectDialog = false; |
| 711 | http() | 711 | http() |
| 712 | .get( | 712 | .get( |
| 713 | "/getParticularClass", | 713 | "/getParticularClass", |
| 714 | { params: { classId: _id } }, | 714 | { params: { classId: _id } }, |
| 715 | { | 715 | { |
| 716 | headers: { Authorization: "Bearer " + this.token } | 716 | headers: { Authorization: "Bearer " + this.token } |
| 717 | } | 717 | } |
| 718 | ) | 718 | ) |
| 719 | .then(response => { | 719 | .then(response => { |
| 720 | this.subjectList = response.data.data; | 720 | this.subjectList = response.data.data; |
| 721 | this.snackbar = true; | 721 | this.snackbar = true; |
| 722 | this.color = "green"; | 722 | this.color = "green"; |
| 723 | this.text = response.data.message; | 723 | this.text = response.data.message; |
| 724 | this.close(); | 724 | this.close(); |
| 725 | }) | 725 | }) |
| 726 | .catch(err => { | 726 | .catch(err => { |
| 727 | console.log("err====>", err); | 727 | console.log("err====>", err); |
| 728 | }); | 728 | }); |
| 729 | }) | 729 | }) |
| 730 | .catch(error => { | 730 | .catch(error => { |
| 731 | this.editLoading = false; | 731 | this.editLoading = false; |
| 732 | 732 | ||
| 733 | // console.log(error); | 733 | // console.log(error); |
| 734 | }); | 734 | }); |
| 735 | } | 735 | } |
| 736 | }, | 736 | }, |
| 737 | getClassSubject(_id) { | 737 | getClassSubject(_id) { |
| 738 | this.showLoader = true; | 738 | this.showLoader = true; |
| 739 | // this.classId = this.classId; | 739 | // this.classId = this.classId; |
| 740 | http() | 740 | http() |
| 741 | .get( | 741 | .get( |
| 742 | "/getParticularClass", | 742 | "/getParticularClass", |
| 743 | { params: { classId: _id } }, | 743 | { params: { classId: _id } }, |
| 744 | { | 744 | { |
| 745 | headers: { Authorization: "Bearer " + this.token } | 745 | headers: { Authorization: "Bearer " + this.token } |
| 746 | } | 746 | } |
| 747 | ) | 747 | ) |
| 748 | .then(response => { | 748 | .then(response => { |
| 749 | this.subjectList = response.data.data; | 749 | this.subjectList = response.data.data; |
| 750 | this.showLoader = false; | 750 | this.showLoader = false; |
| 751 | }) | 751 | }) |
| 752 | .catch(err => { | 752 | .catch(err => { |
| 753 | this.showLoader = false; | 753 | this.showLoader = false; |
| 754 | }); | 754 | }); |
| 755 | }, | 755 | }, |
| 756 | getClass() { | 756 | getClass() { |
| 757 | http() | 757 | http() |
| 758 | .get("/getClassesList", { | 758 | .get("/getClassesList", { |
| 759 | headers: { Authorization: "Bearer " + this.token } | 759 | headers: { Authorization: "Bearer " + this.token } |
| 760 | }) | 760 | }) |
| 761 | .then(response => { | 761 | .then(response => { |
| 762 | this.classList = response.data.data; | 762 | this.classList = response.data.data; |
| 763 | }) | 763 | }) |
| 764 | .catch(error => { | 764 | .catch(error => { |
| 765 | if (error.response.status === 401) { | 765 | if (error.response.status === 401) { |
| 766 | this.$router.replace({ path: "/" }); | 766 | this.$router.replace({ path: "/" }); |
| 767 | this.$store.dispatch("setToken", null); | 767 | this.$store.dispatch("setToken", null); |
| 768 | this.$store.dispatch("Id", null); | 768 | this.$store.dispatch("Id", null); |
| 769 | } | 769 | } |
| 770 | }); | 770 | }); |
| 771 | }, | 771 | }, |
| 772 | getTeacherList() { | 772 | getTeacherList() { |
| 773 | this.showLoader = true; | 773 | this.showLoader = true; |
| 774 | var token = this.$store.state.token; | 774 | var token = this.$store.state.token; |
| 775 | http() | 775 | http() |
| 776 | .get("/getTeachersList", { | 776 | .get("/getTeachersList", { |
| 777 | headers: { Authorization: "Bearer " + token } | 777 | headers: { Authorization: "Bearer " + token } |
| 778 | }) | 778 | }) |
| 779 | .then(response => { | 779 | .then(response => { |
| 780 | this.teacherList = response.data.data; | 780 | this.teacherList = response.data.data; |
| 781 | this.showLoader = false; | 781 | this.showLoader = false; |
| 782 | // console.log("getTeacherList=====>",this.desserts) | 782 | // console.log("getTeacherList=====>",this.desserts) |
| 783 | }) | 783 | }) |
| 784 | .catch(error => { | 784 | .catch(error => { |
| 785 | this.showLoader = false; | 785 | this.showLoader = false; |
| 786 | if (error.response.status === 401) { | 786 | if (error.response.status === 401) { |
| 787 | this.$router.replace({ path: "/" }); | 787 | this.$router.replace({ path: "/" }); |
| 788 | this.$store.dispatch("setToken", null); | 788 | this.$store.dispatch("setToken", null); |
| 789 | this.$store.dispatch("Id", null); | 789 | this.$store.dispatch("Id", null); |
| 790 | } | 790 | } |
| 791 | }); | 791 | }); |
| 792 | }, | 792 | }, |
| 793 | displaySearch() { | 793 | displaySearch() { |
| 794 | (this.show = false), (this.showSearch = true); | 794 | (this.show = false), (this.showSearch = true); |
| 795 | }, | 795 | }, |
| 796 | closeSearch() { | 796 | closeSearch() { |
| 797 | this.showSearch = false; | 797 | this.showSearch = false; |
| 798 | this.show = true; | 798 | this.show = true; |
| 799 | this.search = ""; | 799 | this.search = ""; |
| 800 | } | 800 | } |
| 801 | }, | 801 | }, |
| 802 | mounted() { | 802 | mounted() { |
| 803 | this.token = this.$store.state.token; | 803 | this.token = this.$store.state.token; |
| 804 | // this.getNoticeDataList(); | 804 | // this.getNoticeDataList(); |
| 805 | this.getClass(); | 805 | this.getClass(); |
| 806 | this.getTeacherList(); | 806 | this.getTeacherList(); |
| 807 | this.role = this.$store.state.role; | 807 | this.role = this.$store.state.role; |
| 808 | } | 808 | } |
| 809 | }; | 809 | }; |
| 810 | </script> | 810 | </script> |
src/pages/Teachers/teachers.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> | 3 | <!-- ****** EDIT TEACHERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable> | 4 | <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent> |
| 5 | <v-card flat class="card-style" dark> | 5 | <v-card flat class="card-style" dark> |
| 6 | <v-card-text> | 6 | <v-card-text> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Teacher Details</label> | 9 | <label class="title text-xs-center">Edit Teacher Details</label> |
| 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-layout> | 14 | <v-layout> |
| 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 15 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> | 16 | <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> |
| 17 | <img src="/static/icon/user.png" /> | 17 | <img src="/static/icon/user.png" /> |
| 18 | </v-avatar> | 18 | </v-avatar> |
| 19 | <img | 19 | <img |
| 20 | :src="editedItem.profilePicUrl" | 20 | :src="editedItem.profilePicUrl" |
| 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 21 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 22 | height="150" | 22 | height="150" |
| 23 | style="border-radius:50%; width:150px" | 23 | style="border-radius:50%; width:150px" |
| 24 | /> | 24 | /> |
| 25 | <img | 25 | <img |
| 26 | v-if="imageUrl" | 26 | v-if="imageUrl" |
| 27 | :src="imageUrl" | 27 | :src="imageUrl" |
| 28 | height="150" | 28 | height="150" |
| 29 | style="border-radius:50%; width:150px" | 29 | style="border-radius:50%; width:150px" |
| 30 | /> | 30 | /> |
| 31 | <input | 31 | <input |
| 32 | type="file" | 32 | type="file" |
| 33 | style="display:none" | 33 | style="display:none" |
| 34 | ref="image" | 34 | ref="image" |
| 35 | accept="image/*" | 35 | accept="image/*" |
| 36 | @change="onFilePicked" | 36 | @change="onFilePicked" |
| 37 | /> | 37 | /> |
| 38 | </v-flex> | 38 | </v-flex> |
| 39 | </v-layout> | 39 | </v-layout> |
| 40 | <v-layout wrap> | 40 | <v-layout wrap> |
| 41 | <v-flex xs12 sm6> | 41 | <v-flex xs12 sm6> |
| 42 | <v-layout> | 42 | <v-layout> |
| 43 | <v-flex xs4 class="pt-4 subheading"> | 43 | <v-flex xs4 class="pt-4 subheading"> |
| 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> | 44 | <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> |
| 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> | 45 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> |
| 46 | </v-flex> | 46 | </v-flex> |
| 47 | <v-flex xs8 class="ml-3"> | 47 | <v-flex xs8 class="ml-3"> |
| 48 | <v-text-field | 48 | <v-text-field |
| 49 | v-model="editedItem.name" | 49 | v-model="editedItem.name" |
| 50 | placeholder="fill your full Name" | 50 | placeholder="fill your full Name" |
| 51 | type="text" | 51 | type="text" |
| 52 | required | 52 | required |
| 53 | ></v-text-field> | 53 | ></v-text-field> |
| 54 | </v-flex> | 54 | </v-flex> |
| 55 | </v-layout> | 55 | </v-layout> |
| 56 | </v-flex> | 56 | </v-flex> |
| 57 | <v-flex xs12 sm6> | 57 | <v-flex xs12 sm6> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs4 sm4 class="pt-4 subheading"> | 59 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 60 | <label class="right">Email ID:</label> | 60 | <label class="right">Email ID:</label> |
| 61 | </v-flex> | 61 | </v-flex> |
| 62 | <v-flex xs8 sm8 class="ml-3"> | 62 | <v-flex xs8 sm8 class="ml-3"> |
| 63 | <v-text-field | 63 | <v-text-field |
| 64 | placeholder="fill your email" | 64 | placeholder="fill your email" |
| 65 | v-model="editedItem.email" | 65 | v-model="editedItem.email" |
| 66 | type="text" | 66 | type="text" |
| 67 | required | 67 | required |
| 68 | ></v-text-field> | 68 | ></v-text-field> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | </v-layout> | 72 | </v-layout> |
| 73 | <v-layout wrap> | 73 | <v-layout wrap> |
| 74 | <v-flex xs12 sm6> | 74 | <v-flex xs12 sm6> |
| 75 | <v-layout> | 75 | <v-layout> |
| 76 | <v-flex xs4 class="pt-4 subheading"> | 76 | <v-flex xs4 class="pt-4 subheading"> |
| 77 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 77 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 78 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 79 | </v-flex> | 79 | </v-flex> |
| 80 | <v-flex xs8 class="ml-3"> | 80 | <v-flex xs8 class="ml-3"> |
| 81 | <v-menu | 81 | <v-menu |
| 82 | ref="menu" | 82 | ref="menu" |
| 83 | :close-on-content-click="false" | 83 | :close-on-content-click="false" |
| 84 | v-model="menu2" | 84 | v-model="menu2" |
| 85 | :nudge-right="40" | 85 | :nudge-right="40" |
| 86 | lazy | 86 | lazy |
| 87 | transition="scale-transition" | 87 | transition="scale-transition" |
| 88 | offset-y | 88 | offset-y |
| 89 | full-width | 89 | full-width |
| 90 | min-width="290px" | 90 | min-width="290px" |
| 91 | > | 91 | > |
| 92 | <v-text-field | 92 | <v-text-field |
| 93 | slot="activator" | 93 | slot="activator" |
| 94 | v-model="editedItem.dob" | 94 | v-model="editedItem.dob" |
| 95 | placeholder="Select date" | 95 | placeholder="Select date" |
| 96 | ></v-text-field> | 96 | ></v-text-field> |
| 97 | <v-date-picker | 97 | <v-date-picker |
| 98 | ref="picker" | 98 | ref="picker" |
| 99 | v-model="editedItem.dob" | 99 | v-model="editedItem.dob" |
| 100 | :max="new Date().toISOString().substr(0, 10)" | 100 | :max="new Date().toISOString().substr(0, 10)" |
| 101 | min="1950-01-01" | 101 | min="1950-01-01" |
| 102 | @input="menu2 = false" | 102 | @input="menu2 = false" |
| 103 | ></v-date-picker> | 103 | ></v-date-picker> |
| 104 | </v-menu> | 104 | </v-menu> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | </v-layout> | 106 | </v-layout> |
| 107 | </v-flex> | 107 | </v-flex> |
| 108 | <v-flex xs12 sm6> | 108 | <v-flex xs12 sm6> |
| 109 | <v-layout> | 109 | <v-layout> |
| 110 | <v-flex xs4 class="pt-4 subheading"> | 110 | <v-flex xs4 class="pt-4 subheading"> |
| 111 | <label class="right">City:</label> | 111 | <label class="right">City:</label> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-flex xs8 class="ml-3"> | 113 | <v-flex xs8 class="ml-3"> |
| 114 | <v-text-field | 114 | <v-text-field |
| 115 | v-model="editedItem.city" | 115 | v-model="editedItem.city" |
| 116 | placeholder="fill your City Name" | 116 | placeholder="fill your City Name" |
| 117 | type="text" | 117 | type="text" |
| 118 | required | 118 | required |
| 119 | ></v-text-field> | 119 | ></v-text-field> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-flex> | 122 | </v-flex> |
| 123 | </v-layout> | 123 | </v-layout> |
| 124 | <v-layout wrap> | 124 | <v-layout wrap> |
| 125 | <v-flex xs12 sm6> | 125 | <v-flex xs12 sm6> |
| 126 | <v-layout> | 126 | <v-layout> |
| 127 | <v-flex xs4 class="pt-4 subheading"> | 127 | <v-flex xs4 class="pt-4 subheading"> |
| 128 | <label class="right">State:</label> | 128 | <label class="right">State:</label> |
| 129 | </v-flex> | 129 | </v-flex> |
| 130 | <v-flex xs8 class="ml-3"> | 130 | <v-flex xs8 class="ml-3"> |
| 131 | <v-text-field | 131 | <v-text-field |
| 132 | v-model="editedItem.state" | 132 | v-model="editedItem.state" |
| 133 | placeholder="fill your State Name" | 133 | placeholder="fill your State Name" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">PinCode:</label> | 143 | <label class="right">PinCode:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-text-field | 146 | <v-text-field |
| 147 | v-model="editedItem.pincode" | 147 | v-model="editedItem.pincode" |
| 148 | placeholder="fill your pincode" | 148 | placeholder="fill your pincode" |
| 149 | type="number" | 149 | type="number" |
| 150 | required | 150 | required |
| 151 | ></v-text-field> | 151 | ></v-text-field> |
| 152 | </v-flex> | 152 | </v-flex> |
| 153 | </v-layout> | 153 | </v-layout> |
| 154 | </v-flex> | 154 | </v-flex> |
| 155 | </v-layout> | 155 | </v-layout> |
| 156 | <v-layout wrap> | 156 | <v-layout wrap> |
| 157 | <v-flex xs12 sm6> | 157 | <v-flex xs12 sm6> |
| 158 | <v-layout> | 158 | <v-layout> |
| 159 | <v-flex xs4 class="pt-4 subheading"> | 159 | <v-flex xs4 class="pt-4 subheading"> |
| 160 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 160 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 161 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 161 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 162 | </v-flex> | 162 | </v-flex> |
| 163 | <v-flex xs8 class="ml-3"> | 163 | <v-flex xs8 class="ml-3"> |
| 164 | <v-text-field | 164 | <v-text-field |
| 165 | v-model="editedItem.mobileNo" | 165 | v-model="editedItem.mobileNo" |
| 166 | placeholder="fill your MobileNo" | 166 | placeholder="fill your MobileNo" |
| 167 | type="number" | 167 | type="number" |
| 168 | required | 168 | required |
| 169 | ></v-text-field> | 169 | ></v-text-field> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | <v-flex xs12 sm6> | 173 | <v-flex xs12 sm6> |
| 174 | <v-layout> | 174 | <v-layout> |
| 175 | <v-flex xs4 class="pt-4 subheading"> | 175 | <v-flex xs4 class="pt-4 subheading"> |
| 176 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 176 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 177 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 177 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 178 | </v-flex> | 178 | </v-flex> |
| 179 | <v-flex xs8 sm8 class="ml-3"> | 179 | <v-flex xs8 sm8 class="ml-3"> |
| 180 | <v-autocomplete | 180 | <v-autocomplete |
| 181 | v-model="editedItem.country" | 181 | v-model="editedItem.country" |
| 182 | :items="countries" | 182 | :items="countries" |
| 183 | placeholder="Select Country Name" | 183 | placeholder="Select Country Name" |
| 184 | required | 184 | required |
| 185 | ></v-autocomplete> | 185 | ></v-autocomplete> |
| 186 | </v-flex> | 186 | </v-flex> |
| 187 | </v-layout> | 187 | </v-layout> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | <v-layout wrap> | 190 | <v-layout wrap> |
| 191 | <v-flex xs12 sm6> | 191 | <v-flex xs12 sm6> |
| 192 | <v-layout> | 192 | <v-layout> |
| 193 | <v-flex xs4 class="pt-4 subheading"> | 193 | <v-flex xs4 class="pt-4 subheading"> |
| 194 | <label class="right">Join Date:</label> | 194 | <label class="right">Join Date:</label> |
| 195 | </v-flex> | 195 | </v-flex> |
| 196 | <v-flex xs8 sm8 class="ml-3"> | 196 | <v-flex xs8 sm8 class="ml-3"> |
| 197 | <v-menu | 197 | <v-menu |
| 198 | ref="menu" | 198 | ref="menu" |
| 199 | :close-on-content-click="false" | 199 | :close-on-content-click="false" |
| 200 | v-model="menu3" | 200 | v-model="menu3" |
| 201 | :nudge-right="40" | 201 | :nudge-right="40" |
| 202 | lazy | 202 | lazy |
| 203 | transition="scale-transition" | 203 | transition="scale-transition" |
| 204 | offset-y | 204 | offset-y |
| 205 | full-width | 205 | full-width |
| 206 | min-width="290px" | 206 | min-width="290px" |
| 207 | > | 207 | > |
| 208 | <v-text-field | 208 | <v-text-field |
| 209 | slot="activator" | 209 | slot="activator" |
| 210 | v-model="editedItem.joinDate" | 210 | v-model="editedItem.joinDate" |
| 211 | placeholder="Select date" | 211 | placeholder="Select date" |
| 212 | ></v-text-field> | 212 | ></v-text-field> |
| 213 | <v-date-picker | 213 | <v-date-picker |
| 214 | ref="picker" | 214 | ref="picker" |
| 215 | v-model="editedItem.joinDate" | 215 | v-model="editedItem.joinDate" |
| 216 | :max="new Date().toISOString().substr(0, 10)" | 216 | :max="new Date().toISOString().substr(0, 10)" |
| 217 | min="1950-01-01" | 217 | min="1950-01-01" |
| 218 | @input="menu3 = false" | 218 | @input="menu3 = false" |
| 219 | ></v-date-picker> | 219 | ></v-date-picker> |
| 220 | </v-menu> | 220 | </v-menu> |
| 221 | </v-flex> | 221 | </v-flex> |
| 222 | </v-layout> | 222 | </v-layout> |
| 223 | </v-flex> | 223 | </v-flex> |
| 224 | <v-flex xs12 sm6> | 224 | <v-flex xs12 sm6> |
| 225 | <v-layout> | 225 | <v-layout> |
| 226 | <v-flex xs4 class="pt-4 subheading"> | 226 | <v-flex xs4 class="pt-4 subheading"> |
| 227 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 227 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 228 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> | 228 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-flex xs8 sm8 class="ml-3"> | 230 | <v-flex xs8 sm8 class="ml-3"> |
| 231 | <v-text-field | 231 | <v-text-field |
| 232 | label="Select Image" | 232 | label="Select Image" |
| 233 | @click="pickFile" | 233 | @click="pickFile" |
| 234 | v-model="imageName" | 234 | v-model="imageName" |
| 235 | append-icon="attach_file" | 235 | append-icon="attach_file" |
| 236 | ></v-text-field> | 236 | ></v-text-field> |
| 237 | </v-flex> | 237 | </v-flex> |
| 238 | </v-layout> | 238 | </v-layout> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> | 241 | <v-layout class="hidden-xs-only hidden-sm-only" wrap> |
| 242 | <v-flex xs12 sm6> | 242 | <v-flex xs12 sm6> |
| 243 | <v-layout> | 243 | <v-layout> |
| 244 | <v-flex xs4 sm4 class="pt-4 subheading"> | 244 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 245 | <label class="right">Present Address:</label> | 245 | <label class="right">Present Address:</label> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs8 sm8 class="ml-3"> | 247 | <v-flex xs8 sm8 class="ml-3"> |
| 248 | <v-text-field | 248 | <v-text-field |
| 249 | name="input-4-3" | 249 | name="input-4-3" |
| 250 | v-model="editedItem.presentAddress" | 250 | v-model="editedItem.presentAddress" |
| 251 | placeholder="fill Your present Address" | 251 | placeholder="fill Your present Address" |
| 252 | required | 252 | required |
| 253 | ></v-text-field> | 253 | ></v-text-field> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-layout> | 255 | </v-layout> |
| 256 | </v-flex> | 256 | </v-flex> |
| 257 | <v-flex xs12 sm6> | 257 | <v-flex xs12 sm6> |
| 258 | <v-layout> | 258 | <v-layout> |
| 259 | <v-flex xs4 sm4 class="pt-4 subheading"> | 259 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 260 | <label class="right">Permanent Address:</label> | 260 | <label class="right">Permanent Address:</label> |
| 261 | </v-flex> | 261 | </v-flex> |
| 262 | <v-flex xs12 sm8 class="ml-3"> | 262 | <v-flex xs12 sm8 class="ml-3"> |
| 263 | <v-text-field | 263 | <v-text-field |
| 264 | name="input-4-3" | 264 | name="input-4-3" |
| 265 | v-model="editedItem.permanentAddress" | 265 | v-model="editedItem.permanentAddress" |
| 266 | placeholder="fill Your Permanent Address" | 266 | placeholder="fill Your Permanent Address" |
| 267 | required | 267 | required |
| 268 | ></v-text-field> | 268 | ></v-text-field> |
| 269 | </v-flex> | 269 | </v-flex> |
| 270 | </v-layout> | 270 | </v-layout> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 273 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 274 | <v-flex xs12 sm12> | 274 | <v-flex xs12 sm12> |
| 275 | <v-layout> | 275 | <v-layout> |
| 276 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> | 276 | <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> |
| 277 | <label class>Present Address:</label> | 277 | <label class>Present Address:</label> |
| 278 | </v-flex> | 278 | </v-flex> |
| 279 | </v-layout> | 279 | </v-layout> |
| 280 | <v-layout> | 280 | <v-layout> |
| 281 | <v-flex xs12 sm12> | 281 | <v-flex xs12 sm12> |
| 282 | <v-textarea | 282 | <v-textarea |
| 283 | name="input-4-3" | 283 | name="input-4-3" |
| 284 | v-model="editedItem.presentAddress" | 284 | v-model="editedItem.presentAddress" |
| 285 | placeholder="fill Your present Address" | 285 | placeholder="fill Your present Address" |
| 286 | required | 286 | required |
| 287 | ></v-textarea> | 287 | ></v-textarea> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | </v-flex> | 290 | </v-flex> |
| 291 | <v-flex xs12 sm12> | 291 | <v-flex xs12 sm12> |
| 292 | <v-layout> | 292 | <v-layout> |
| 293 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 293 | <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 294 | <label>Permanent Address:</label> | 294 | <label>Permanent Address:</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | </v-layout> | 296 | </v-layout> |
| 297 | <v-layout> | 297 | <v-layout> |
| 298 | <v-flex xs12 sm12> | 298 | <v-flex xs12 sm12> |
| 299 | <v-textarea | 299 | <v-textarea |
| 300 | name="input-4-3" | 300 | name="input-4-3" |
| 301 | v-model="editedItem.permanentAddress" | 301 | v-model="editedItem.permanentAddress" |
| 302 | placeholder="fill Your Permanent Address" | 302 | placeholder="fill Your Permanent Address" |
| 303 | required | 303 | required |
| 304 | ></v-textarea> | 304 | ></v-textarea> |
| 305 | </v-flex> | 305 | </v-flex> |
| 306 | </v-layout> | 306 | </v-layout> |
| 307 | </v-flex> | 307 | </v-flex> |
| 308 | </v-layout> | 308 | </v-layout> |
| 309 | <v-layout> | 309 | <v-layout> |
| 310 | <v-flex xs12 sm12> | 310 | <v-flex xs12 sm12> |
| 311 | <v-flex xs12 sm12> | 311 | <v-flex xs12 sm12> |
| 312 | <v-layout class="right"> | 312 | <v-layout class="right"> |
| 313 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> | 313 | <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> |
| 314 | </v-layout> | 314 | </v-layout> |
| 315 | </v-flex> | 315 | </v-flex> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | </v-container> | 318 | </v-container> |
| 319 | </v-card-text> | 319 | </v-card-text> |
| 320 | </v-card> | 320 | </v-card> |
| 321 | </v-dialog> | 321 | </v-dialog> |
| 322 | 322 | ||
| 323 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> | 323 | <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> |
| 324 | 324 | ||
| 325 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable> | 325 | <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable persistent> |
| 326 | <v-card flat class="card-style pa-3" dark> | 326 | <v-card flat class="card-style pa-3" dark> |
| 327 | <v-layout> | 327 | <v-layout> |
| 328 | <v-flex xs12> | 328 | <v-flex xs12> |
| 329 | <label class="title text-xs-center">View Teacher</label> | 329 | <label class="title text-xs-center">View Teacher</label> |
| 330 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> | 330 | <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | </v-layout> | 332 | </v-layout> |
| 333 | <v-card-text> | 333 | <v-card-text> |
| 334 | <v-container grid-list-md> | 334 | <v-container grid-list-md> |
| 335 | <v-layout wrap> | 335 | <v-layout wrap> |
| 336 | <v-flex> | 336 | <v-flex> |
| 337 | <v-flex align-center justify-center layout text-xs-center> | 337 | <v-flex align-center justify-center layout text-xs-center> |
| 338 | <v-avatar size="80"> | 338 | <v-avatar size="80"> |
| 339 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 339 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 340 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 340 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 341 | </v-avatar> | 341 | </v-avatar> |
| 342 | </v-flex> | 342 | </v-flex> |
| 343 | <v-layout> | 343 | <v-layout> |
| 344 | <v-flex xs5 sm6> | 344 | <v-flex xs5 sm6> |
| 345 | <h5 class="right my-1"> | 345 | <h5 class="right my-1"> |
| 346 | <b>Full Name:</b> | 346 | <b>Full Name:</b> |
| 347 | </h5> | 347 | </h5> |
| 348 | </v-flex> | 348 | </v-flex> |
| 349 | <v-flex sm6 xs8> | 349 | <v-flex sm6 xs8> |
| 350 | <h5 class="my-1">{{ editedItem.name }}</h5> | 350 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 351 | </v-flex> | 351 | </v-flex> |
| 352 | </v-layout> | 352 | </v-layout> |
| 353 | <v-layout> | 353 | <v-layout> |
| 354 | <v-flex xs5 sm6> | 354 | <v-flex xs5 sm6> |
| 355 | <h5 class="right my-1"> | 355 | <h5 class="right my-1"> |
| 356 | <b>Email:</b> | 356 | <b>Email:</b> |
| 357 | </h5> | 357 | </h5> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex sm6 xs8> | 359 | <v-flex sm6 xs8> |
| 360 | <h5 class="my-1">{{ editedItem.email }}</h5> | 360 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs5 sm6> | 364 | <v-flex xs5 sm6> |
| 365 | <h5 class="right my-1"> | 365 | <h5 class="right my-1"> |
| 366 | <b>City:</b> | 366 | <b>City:</b> |
| 367 | </h5> | 367 | </h5> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | <v-flex sm6 xs8> | 369 | <v-flex sm6 xs8> |
| 370 | <h5 class="my-1">{{ editedItem.city }}</h5> | 370 | <h5 class="my-1">{{ editedItem.city }}</h5> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | </v-layout> | 372 | </v-layout> |
| 373 | <v-layout> | 373 | <v-layout> |
| 374 | <v-flex xs5 sm6> | 374 | <v-flex xs5 sm6> |
| 375 | <h5 class="right my-1"> | 375 | <h5 class="right my-1"> |
| 376 | <b>State:</b> | 376 | <b>State:</b> |
| 377 | </h5> | 377 | </h5> |
| 378 | </v-flex> | 378 | </v-flex> |
| 379 | <v-flex sm6 xs8> | 379 | <v-flex sm6 xs8> |
| 380 | <h5 class="my-1">{{ editedItem.state }}</h5> | 380 | <h5 class="my-1">{{ editedItem.state }}</h5> |
| 381 | </v-flex> | 381 | </v-flex> |
| 382 | </v-layout> | 382 | </v-layout> |
| 383 | <v-layout> | 383 | <v-layout> |
| 384 | <v-flex xs5 sm6> | 384 | <v-flex xs5 sm6> |
| 385 | <h5 class="right my-1"> | 385 | <h5 class="right my-1"> |
| 386 | <b>Country:</b> | 386 | <b>Country:</b> |
| 387 | </h5> | 387 | </h5> |
| 388 | </v-flex> | 388 | </v-flex> |
| 389 | <v-flex sm6 xs8> | 389 | <v-flex sm6 xs8> |
| 390 | <h5 class="my-1">{{ editedItem.country }}</h5> | 390 | <h5 class="my-1">{{ editedItem.country }}</h5> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | </v-layout> | 392 | </v-layout> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs5 sm6> | 394 | <v-flex xs5 sm6> |
| 395 | <h5 class="right my-1"> | 395 | <h5 class="right my-1"> |
| 396 | <b>Pincode:</b> | 396 | <b>Pincode:</b> |
| 397 | </h5> | 397 | </h5> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | <v-flex sm6 xs8> | 399 | <v-flex sm6 xs8> |
| 400 | <h5 class="my-1">{{ editedItem.pincode }}</h5> | 400 | <h5 class="my-1">{{ editedItem.pincode }}</h5> |
| 401 | </v-flex> | 401 | </v-flex> |
| 402 | </v-layout> | 402 | </v-layout> |
| 403 | <v-layout> | 403 | <v-layout> |
| 404 | <v-flex xs5 sm6> | 404 | <v-flex xs5 sm6> |
| 405 | <h5 class="right my-1"> | 405 | <h5 class="right my-1"> |
| 406 | <b>Mobile No:</b> | 406 | <b>Mobile No:</b> |
| 407 | </h5> | 407 | </h5> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | <v-flex sm6 xs8> | 409 | <v-flex sm6 xs8> |
| 410 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> | 410 | <h5 class="my-1">{{ editedItem.mobileNo }}</h5> |
| 411 | </v-flex> | 411 | </v-flex> |
| 412 | </v-layout> | 412 | </v-layout> |
| 413 | <v-layout> | 413 | <v-layout> |
| 414 | <v-flex xs5 sm6> | 414 | <v-flex xs5 sm6> |
| 415 | <h5 class="right my-1"> | 415 | <h5 class="right my-1"> |
| 416 | <b>Join Date:</b> | 416 | <b>Join Date:</b> |
| 417 | </h5> | 417 | </h5> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | <v-flex sm6 xs8> | 419 | <v-flex sm6 xs8> |
| 420 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> | 420 | <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | <v-layout> | 423 | <v-layout> |
| 424 | <v-flex xs5 sm6> | 424 | <v-flex xs5 sm6> |
| 425 | <h5 class="right my-1"> | 425 | <h5 class="right my-1"> |
| 426 | <b>D.O.B :</b> | 426 | <b>D.O.B :</b> |
| 427 | </h5> | 427 | </h5> |
| 428 | </v-flex> | 428 | </v-flex> |
| 429 | <v-flex sm6 xs8> | 429 | <v-flex sm6 xs8> |
| 430 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 430 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 431 | </v-flex> | 431 | </v-flex> |
| 432 | </v-layout> | 432 | </v-layout> |
| 433 | <v-layout> | 433 | <v-layout> |
| 434 | <v-flex xs6 sm6> | 434 | <v-flex xs6 sm6> |
| 435 | <h5 class="right my-1"> | 435 | <h5 class="right my-1"> |
| 436 | <b>Permanent Address:</b> | 436 | <b>Permanent Address:</b> |
| 437 | </h5> | 437 | </h5> |
| 438 | </v-flex> | 438 | </v-flex> |
| 439 | <v-flex sm6 xs8> | 439 | <v-flex sm6 xs8> |
| 440 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> | 440 | <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> |
| 441 | </v-flex> | 441 | </v-flex> |
| 442 | </v-layout> | 442 | </v-layout> |
| 443 | <v-layout> | 443 | <v-layout> |
| 444 | <v-flex xs6 sm6> | 444 | <v-flex xs6 sm6> |
| 445 | <h5 class="right my-1"> | 445 | <h5 class="right my-1"> |
| 446 | <b>present Address:</b> | 446 | <b>present Address:</b> |
| 447 | </h5> | 447 | </h5> |
| 448 | </v-flex> | 448 | </v-flex> |
| 449 | <v-flex sm6 xs8> | 449 | <v-flex sm6 xs8> |
| 450 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> | 450 | <h5 class="my-1">{{ editedItem.presentAddress }}</h5> |
| 451 | </v-flex> | 451 | </v-flex> |
| 452 | </v-layout> | 452 | </v-layout> |
| 453 | </v-flex> | 453 | </v-flex> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | </v-container> | 455 | </v-container> |
| 456 | </v-card-text> | 456 | </v-card-text> |
| 457 | </v-card> | 457 | </v-card> |
| 458 | </v-dialog> | 458 | </v-dialog> |
| 459 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> | 459 | <!-- ****** EXISTING-Teachers TABLE DATA****** --> |
| 460 | <v-toolbar color="transparent" flat> | 460 | <v-toolbar color="transparent" flat> |
| 461 | <v-btn | 461 | <v-btn |
| 462 | fab | 462 | fab |
| 463 | dark | 463 | dark |
| 464 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 464 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 465 | small | 465 | small |
| 466 | @click="addTeacherDialog = true" | 466 | @click="addTeacherDialog = true" |
| 467 | > | 467 | > |
| 468 | <v-icon dark>add</v-icon> | 468 | <v-icon dark>add</v-icon> |
| 469 | </v-btn> | 469 | </v-btn> |
| 470 | <v-btn | 470 | <v-btn |
| 471 | v-if="role != 'TEACHER' " | 471 | v-if="role != 'TEACHER' " |
| 472 | round | 472 | round |
| 473 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 473 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 474 | dark | 474 | dark |
| 475 | @click="addTeacherDialog = true" | 475 | @click="addTeacherDialog = true" |
| 476 | > | 476 | > |
| 477 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher | 477 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher |
| 478 | </v-btn> | 478 | </v-btn> |
| 479 | <v-spacer></v-spacer> | 479 | <v-spacer></v-spacer> |
| 480 | <v-card-title class="body-1" v-show="show"> | 480 | <v-card-title class="body-1" v-show="show"> |
| 481 | <v-btn icon large flat @click="displaySearch"> | 481 | <v-btn icon large flat @click="displaySearch"> |
| 482 | <v-avatar size="27"> | 482 | <v-avatar size="27"> |
| 483 | <img src="/static/icon/search.png" alt="icon" /> | 483 | <img src="/static/icon/search.png" alt="icon" /> |
| 484 | </v-avatar> | 484 | </v-avatar> |
| 485 | </v-btn> | 485 | </v-btn> |
| 486 | </v-card-title> | 486 | </v-card-title> |
| 487 | <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> | 487 | <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> |
| 488 | <v-layout> | 488 | <v-layout> |
| 489 | <v-text-field | 489 | <v-text-field |
| 490 | autofocus | 490 | autofocus |
| 491 | v-model="search" | 491 | v-model="search" |
| 492 | label="Search" | 492 | label="Search" |
| 493 | prepend-inner-icon="search" | 493 | prepend-inner-icon="search" |
| 494 | color="primary" | 494 | color="primary" |
| 495 | ></v-text-field> | 495 | ></v-text-field> |
| 496 | <v-icon @click="closeSearch" color="error">close</v-icon> | 496 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 497 | </v-layout> | 497 | </v-layout> |
| 498 | </v-flex> | 498 | </v-flex> |
| 499 | </v-toolbar> | 499 | </v-toolbar> |
| 500 | <v-data-table | 500 | <v-data-table |
| 501 | :headers="headers" | 501 | :headers="headers" |
| 502 | :items="desserts" | 502 | :items="desserts" |
| 503 | :pagination.sync="pagination" | 503 | :pagination.sync="pagination" |
| 504 | :search="search" | 504 | :search="search" |
| 505 | > | 505 | > |
| 506 | <template slot="items" slot-scope="props"> | 506 | <template slot="items" slot-scope="props"> |
| 507 | <tr class="tr"> | 507 | <tr class="tr"> |
| 508 | <td class="td td-row">{{ props.index + 1}}</td> | 508 | <td class="td td-row">{{ props.index + 1}}</td> |
| 509 | <td class="td td-row text-xs-center"> | 509 | <td class="td td-row text-xs-center"> |
| 510 | <v-avatar size="40"> | 510 | <v-avatar size="40"> |
| 511 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 511 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 512 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 512 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 513 | </v-avatar> | 513 | </v-avatar> |
| 514 | </td> | 514 | </td> |
| 515 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> | 515 | <td class="td td-row text-xs-center">{{ props.item.name}}</td> |
| 516 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> | 516 | <td class="td td-row text-xs-center">{{ props.item.email }}</td> |
| 517 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> | 517 | <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> |
| 518 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> | 518 | <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> |
| 519 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> | 519 | <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> |
| 520 | <td class="td td-row text-xs-center"> | 520 | <td class="td td-row text-xs-center"> |
| 521 | <v-switch | 521 | <v-switch |
| 522 | class="pl-3" | 522 | class="pl-3" |
| 523 | v-model="props.item.status" | 523 | v-model="props.item.status" |
| 524 | @change="suspendStatus(props.item.status,props.item._id)" | 524 | @change="suspendStatus(props.item.status,props.item._id)" |
| 525 | ></v-switch> | 525 | ></v-switch> |
| 526 | </td> | 526 | </td> |
| 527 | <td class="text-xs-center td td-row"> | 527 | <td class="text-xs-center td td-row"> |
| 528 | <span> | 528 | <span> |
| 529 | <v-tooltip top> | 529 | <v-tooltip top> |
| 530 | <img | 530 | <img |
| 531 | slot="activator" | 531 | slot="activator" |
| 532 | style="cursor:pointer; width:25px; height:25px; " | 532 | style="cursor:pointer; width:25px; height:25px; " |
| 533 | class="mr-3" | 533 | class="mr-3" |
| 534 | @click="profile(props.item)" | 534 | @click="profile(props.item)" |
| 535 | src="/static/icon/view.png" | 535 | src="/static/icon/view.png" |
| 536 | /> | 536 | /> |
| 537 | <span>View</span> | 537 | <span>View</span> |
| 538 | </v-tooltip> | 538 | </v-tooltip> |
| 539 | <v-tooltip top v-if="role != 'TEACHER' "> | 539 | <v-tooltip top v-if="role != 'TEACHER' "> |
| 540 | <img | 540 | <img |
| 541 | slot="activator" | 541 | slot="activator" |
| 542 | style="cursor:pointer; width:20px; height:18px; " | 542 | style="cursor:pointer; width:20px; height:18px; " |
| 543 | class="mr-3" | 543 | class="mr-3" |
| 544 | @click="editItem(props.item)" | 544 | @click="editItem(props.item)" |
| 545 | src="/static/icon/edit.png" | 545 | src="/static/icon/edit.png" |
| 546 | /> | 546 | /> |
| 547 | <span>Edit</span> | 547 | <span>Edit</span> |
| 548 | </v-tooltip> | 548 | </v-tooltip> |
| 549 | <!-- <v-tooltip top v-if="role != 'TEACHER' "> | 549 | <!-- <v-tooltip top v-if="role != 'TEACHER' "> |
| 550 | <img | 550 | <img |
| 551 | slot="activator" | 551 | slot="activator" |
| 552 | style="cursor:pointer; width:20px; height:20px; " | 552 | style="cursor:pointer; width:20px; height:20px; " |
| 553 | @click="deleteItem(props.item)" | 553 | @click="deleteItem(props.item)" |
| 554 | src="/static/icon/delete.png" | 554 | src="/static/icon/delete.png" |
| 555 | class="mr-3" | 555 | class="mr-3" |
| 556 | /> | 556 | /> |
| 557 | <span>Delete</span> | 557 | <span>Delete</span> |
| 558 | </v-tooltip>--> | 558 | </v-tooltip>--> |
| 559 | </span> | 559 | </span> |
| 560 | </td> | 560 | </td> |
| 561 | </tr> | 561 | </tr> |
| 562 | </template> | 562 | </template> |
| 563 | <v-alert | 563 | <v-alert |
| 564 | slot="no-results" | 564 | slot="no-results" |
| 565 | :value="true" | 565 | :value="true" |
| 566 | color="error" | 566 | color="error" |
| 567 | icon="warning" | 567 | icon="warning" |
| 568 | >Your search for "{{ search }}" found no results.</v-alert> | 568 | >Your search for "{{ search }}" found no results.</v-alert> |
| 569 | </v-data-table> | 569 | </v-data-table> |
| 570 | 570 | ||
| 571 | <!-- ****** DIALOG BOX - Add Teachers Data****** --> | 571 | <!-- ****** DIALOG BOX - Add Teachers Data****** --> |
| 572 | <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog"> | 572 | <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent> |
| 573 | <v-card flat class="card-style pa-2" dark> | 573 | <v-card flat class="card-style pa-2" dark> |
| 574 | <v-layout> | 574 | <v-layout> |
| 575 | <v-flex xs12 class="pa-0"> | 575 | <v-flex xs12 class="pa-0"> |
| 576 | <label class="title text-xs-center">Add Teacher</label> | 576 | <label class="title text-xs-center">Add Teacher</label> |
| 577 | <v-icon | 577 | <v-icon |
| 578 | size="24" | 578 | size="24" |
| 579 | class="right" | 579 | class="right" |
| 580 | @click="$refs.form.reset();addTeacherDialog = false" | 580 | @click="$refs.form.reset();addTeacherDialog = false" |
| 581 | >cancel</v-icon> | 581 | >cancel</v-icon> |
| 582 | </v-flex> | 582 | </v-flex> |
| 583 | </v-layout> | 583 | </v-layout> |
| 584 | <v-form ref="form" v-model="valid" lazy-validation> | 584 | <v-form ref="form" v-model="valid" lazy-validation> |
| 585 | <v-container fluid> | 585 | <v-container fluid> |
| 586 | <v-layout> | 586 | <v-layout> |
| 587 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 587 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 588 | <v-avatar size="120px"> | 588 | <v-avatar size="120px"> |
| 589 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 589 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 590 | </v-avatar> | 590 | </v-avatar> |
| 591 | <img | 591 | <img |
| 592 | :src="imageUrl" | 592 | :src="imageUrl" |
| 593 | height="150" | 593 | height="150" |
| 594 | v-if="imageUrl" | 594 | v-if="imageUrl" |
| 595 | style="border-radius:50%; width:150px" | 595 | style="border-radius:50%; width:150px" |
| 596 | /> | 596 | /> |
| 597 | </v-flex> | 597 | </v-flex> |
| 598 | </v-layout> | 598 | </v-layout> |
| 599 | <v-layout wrap> | 599 | <v-layout wrap> |
| 600 | <v-flex xs12 sm6> | 600 | <v-flex xs12 sm6> |
| 601 | <v-layout> | 601 | <v-layout> |
| 602 | <v-flex xs4 class="pt-4 subheading"> | 602 | <v-flex xs4 class="pt-4 subheading"> |
| 603 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> | 603 | <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> |
| 604 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> | 604 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> |
| 605 | </v-flex> | 605 | </v-flex> |
| 606 | <v-flex xs8 class="ml-3"> | 606 | <v-flex xs8 class="ml-3"> |
| 607 | <v-text-field | 607 | <v-text-field |
| 608 | v-model="addTeachers.name" | 608 | v-model="addTeachers.name" |
| 609 | placeholder="fill your full Name" | 609 | placeholder="fill your full Name" |
| 610 | name="name" | 610 | name="name" |
| 611 | type="text" | 611 | type="text" |
| 612 | :rules="nameRules" | 612 | :rules="nameRules" |
| 613 | required | 613 | required |
| 614 | ></v-text-field> | 614 | ></v-text-field> |
| 615 | </v-flex> | 615 | </v-flex> |
| 616 | </v-layout> | 616 | </v-layout> |
| 617 | </v-flex> | 617 | </v-flex> |
| 618 | <v-flex xs12 sm6> | 618 | <v-flex xs12 sm6> |
| 619 | <v-layout> | 619 | <v-layout> |
| 620 | <v-flex xs4 class="pt-4 subheading"> | 620 | <v-flex xs4 class="pt-4 subheading"> |
| 621 | <label class="right">Email ID:</label> | 621 | <label class="right">Email ID:</label> |
| 622 | </v-flex> | 622 | </v-flex> |
| 623 | <v-flex xs8 class="ml-3"> | 623 | <v-flex xs8 class="ml-3"> |
| 624 | <v-text-field | 624 | <v-text-field |
| 625 | placeholder="fill your email" | 625 | placeholder="fill your email" |
| 626 | v-model="addTeachers.email" | 626 | v-model="addTeachers.email" |
| 627 | type="text" | 627 | type="text" |
| 628 | name="email" | 628 | name="email" |
| 629 | required | 629 | required |
| 630 | ></v-text-field> | 630 | ></v-text-field> |
| 631 | </v-flex> | 631 | </v-flex> |
| 632 | </v-layout> | 632 | </v-layout> |
| 633 | </v-flex> | 633 | </v-flex> |
| 634 | </v-layout> | 634 | </v-layout> |
| 635 | <v-layout wrap> | 635 | <v-layout wrap> |
| 636 | <v-flex xs12 sm6> | 636 | <v-flex xs12 sm6> |
| 637 | <v-layout> | 637 | <v-layout> |
| 638 | <v-flex xs4 sm4 class="pt-4 subheading"> | 638 | <v-flex xs4 sm4 class="pt-4 subheading"> |
| 639 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 639 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 640 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 640 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 641 | </v-flex> | 641 | </v-flex> |
| 642 | <v-flex xs8 class="ml-3"> | 642 | <v-flex xs8 class="ml-3"> |
| 643 | <v-menu | 643 | <v-menu |
| 644 | ref="menu" | 644 | ref="menu" |
| 645 | :close-on-content-click="false" | 645 | :close-on-content-click="false" |
| 646 | v-model="menu" | 646 | v-model="menu" |
| 647 | :nudge-right="40" | 647 | :nudge-right="40" |
| 648 | lazy | 648 | lazy |
| 649 | transition="scale-transition" | 649 | transition="scale-transition" |
| 650 | offset-y | 650 | offset-y |
| 651 | full-width | 651 | full-width |
| 652 | min-width="290px" | 652 | min-width="290px" |
| 653 | > | 653 | > |
| 654 | <v-text-field | 654 | <v-text-field |
| 655 | slot="activator" | 655 | slot="activator" |
| 656 | :rules="dateRules" | 656 | :rules="dateRules" |
| 657 | v-model="addTeachers.date" | 657 | v-model="addTeachers.date" |
| 658 | placeholder="Select date" | 658 | placeholder="Select date" |
| 659 | ></v-text-field> | 659 | ></v-text-field> |
| 660 | <v-date-picker | 660 | <v-date-picker |
| 661 | ref="picker" | 661 | ref="picker" |
| 662 | v-model="addTeachers.date" | 662 | v-model="addTeachers.date" |
| 663 | :max="new Date().toISOString().substr(0, 10)" | 663 | :max="new Date().toISOString().substr(0, 10)" |
| 664 | min="1950-01-01" | 664 | min="1950-01-01" |
| 665 | @input="menu = false" | 665 | @input="menu = false" |
| 666 | ></v-date-picker> | 666 | ></v-date-picker> |
| 667 | </v-menu> | 667 | </v-menu> |
| 668 | </v-flex> | 668 | </v-flex> |
| 669 | </v-layout> | 669 | </v-layout> |
| 670 | </v-flex> | 670 | </v-flex> |
| 671 | <v-flex xs12 sm6> | 671 | <v-flex xs12 sm6> |
| 672 | <v-layout> | 672 | <v-layout> |
| 673 | <v-flex xs4 class="pt-4 subheading"> | 673 | <v-flex xs4 class="pt-4 subheading"> |
| 674 | <label class="right">City:</label> | 674 | <label class="right">City:</label> |
| 675 | </v-flex> | 675 | </v-flex> |
| 676 | <v-flex xs8 class="ml-3"> | 676 | <v-flex xs8 class="ml-3"> |
| 677 | <v-text-field | 677 | <v-text-field |
| 678 | v-model="addTeachers.city" | 678 | v-model="addTeachers.city" |
| 679 | placeholder="fill your City Name" | 679 | placeholder="fill your City Name" |
| 680 | name="City" | 680 | name="City" |
| 681 | type="text" | 681 | type="text" |
| 682 | :rules="cityRules" | 682 | :rules="cityRules" |
| 683 | required | 683 | required |
| 684 | ></v-text-field> | 684 | ></v-text-field> |
| 685 | </v-flex> | 685 | </v-flex> |
| 686 | </v-layout> | 686 | </v-layout> |
| 687 | </v-flex> | 687 | </v-flex> |
| 688 | </v-layout> | 688 | </v-layout> |
| 689 | <v-layout wrap> | 689 | <v-layout wrap> |
| 690 | <v-flex xs12 sm6> | 690 | <v-flex xs12 sm6> |
| 691 | <v-layout> | 691 | <v-layout> |
| 692 | <v-flex xs4 class="pt-4 subheading"> | 692 | <v-flex xs4 class="pt-4 subheading"> |
| 693 | <label class="right">State:</label> | 693 | <label class="right">State:</label> |
| 694 | </v-flex> | 694 | </v-flex> |
| 695 | <v-flex xs8 class="ml-3"> | 695 | <v-flex xs8 class="ml-3"> |
| 696 | <v-text-field | 696 | <v-text-field |
| 697 | v-model="addTeachers.state" | 697 | v-model="addTeachers.state" |
| 698 | placeholder="fill your State Name" | 698 | placeholder="fill your State Name" |
| 699 | name="state" | 699 | name="state" |
| 700 | type="text" | 700 | type="text" |
| 701 | :rules="stateRules" | 701 | :rules="stateRules" |
| 702 | required | 702 | required |
| 703 | ></v-text-field> | 703 | ></v-text-field> |
| 704 | </v-flex> | 704 | </v-flex> |
| 705 | </v-layout> | 705 | </v-layout> |
| 706 | </v-flex> | 706 | </v-flex> |
| 707 | <v-flex xs12 sm6> | 707 | <v-flex xs12 sm6> |
| 708 | <v-layout> | 708 | <v-layout> |
| 709 | <v-flex xs4 class="pt-4 subheading"> | 709 | <v-flex xs4 class="pt-4 subheading"> |
| 710 | <label class="right">PinCode:</label> | 710 | <label class="right">PinCode:</label> |
| 711 | </v-flex> | 711 | </v-flex> |
| 712 | <v-flex xs8 class="ml-3"> | 712 | <v-flex xs8 class="ml-3"> |
| 713 | <v-text-field | 713 | <v-text-field |
| 714 | v-model="addTeachers.pincode" | 714 | v-model="addTeachers.pincode" |
| 715 | placeholder="fill your pincode" | 715 | placeholder="fill your pincode" |
| 716 | name="pincode" | 716 | name="pincode" |
| 717 | type="number" | 717 | type="number" |
| 718 | :rules="pincode" | 718 | :rules="pincode" |
| 719 | required | 719 | required |
| 720 | ></v-text-field> | 720 | ></v-text-field> |
| 721 | </v-flex> | 721 | </v-flex> |
| 722 | </v-layout> | 722 | </v-layout> |
| 723 | </v-flex> | 723 | </v-flex> |
| 724 | </v-layout> | 724 | </v-layout> |
| 725 | <v-layout wrap> | 725 | <v-layout wrap> |
| 726 | <v-flex xs12 sm6> | 726 | <v-flex xs12 sm6> |
| 727 | <v-layout> | 727 | <v-layout> |
| 728 | <v-flex xs4 class="pt-4 subheading"> | 728 | <v-flex xs4 class="pt-4 subheading"> |
| 729 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> | 729 | <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> |
| 730 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> | 730 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> |
| 731 | </v-flex> | 731 | </v-flex> |
| 732 | <v-flex xs8 class="ml-3"> | 732 | <v-flex xs8 class="ml-3"> |
| 733 | <v-text-field | 733 | <v-text-field |
| 734 | v-model="addTeachers.mobileNo" | 734 | v-model="addTeachers.mobileNo" |
| 735 | placeholder="fill your Mobile No." | 735 | placeholder="fill your Mobile No." |
| 736 | name="mobileNo" | 736 | name="mobileNo" |
| 737 | type="number" | 737 | type="number" |
| 738 | :rules="mobileNoRules" | 738 | :rules="mobileNoRules" |
| 739 | required | 739 | required |
| 740 | ></v-text-field> | 740 | ></v-text-field> |
| 741 | </v-flex> | 741 | </v-flex> |
| 742 | </v-layout> | 742 | </v-layout> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | <v-flex xs12 sm6> | 744 | <v-flex xs12 sm6> |
| 745 | <v-layout> | 745 | <v-layout> |
| 746 | <v-flex xs4 class="pt-4 subheading"> | 746 | <v-flex xs4 class="pt-4 subheading"> |
| 747 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> | 747 | <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> |
| 748 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> | 748 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> |
| 749 | </v-flex> | 749 | </v-flex> |
| 750 | <v-flex xs8 class="ml-3"> | 750 | <v-flex xs8 class="ml-3"> |
| 751 | <v-autocomplete | 751 | <v-autocomplete |
| 752 | v-model="addTeachers.country" | 752 | v-model="addTeachers.country" |
| 753 | :rules="country" | 753 | :rules="country" |
| 754 | :items="countries" | 754 | :items="countries" |
| 755 | placeholder="Select Country Name" | 755 | placeholder="Select Country Name" |
| 756 | required | 756 | required |
| 757 | ></v-autocomplete> | 757 | ></v-autocomplete> |
| 758 | </v-flex> | 758 | </v-flex> |
| 759 | </v-layout> | 759 | </v-layout> |
| 760 | </v-flex> | 760 | </v-flex> |
| 761 | </v-layout> | 761 | </v-layout> |
| 762 | <v-layout wrap> | 762 | <v-layout wrap> |
| 763 | <v-flex xs12 sm6> | 763 | <v-flex xs12 sm6> |
| 764 | <v-layout> | 764 | <v-layout> |
| 765 | <v-flex xs4 class="pt-4 subheading"> | 765 | <v-flex xs4 class="pt-4 subheading"> |
| 766 | <label class="right">Join Date:</label> | 766 | <label class="right">Join Date:</label> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | <v-flex xs8 class="ml-3"> | 768 | <v-flex xs8 class="ml-3"> |
| 769 | <v-menu | 769 | <v-menu |
| 770 | ref="menu1" | 770 | ref="menu1" |
| 771 | :close-on-content-click="false" | 771 | :close-on-content-click="false" |
| 772 | v-model="menu1" | 772 | v-model="menu1" |
| 773 | :nudge-right="40" | 773 | :nudge-right="40" |
| 774 | lazy | 774 | lazy |
| 775 | transition="scale-transition" | 775 | transition="scale-transition" |
| 776 | offset-y | 776 | offset-y |
| 777 | full-width | 777 | full-width |
| 778 | min-width="290px" | 778 | min-width="290px" |
| 779 | > | 779 | > |
| 780 | <v-text-field | 780 | <v-text-field |
| 781 | slot="activator" | 781 | slot="activator" |
| 782 | :rules="joinDateRules" | 782 | :rules="joinDateRules" |
| 783 | v-model="addTeachers.joinDate" | 783 | v-model="addTeachers.joinDate" |
| 784 | placeholder="Select date" | 784 | placeholder="Select date" |
| 785 | ></v-text-field> | 785 | ></v-text-field> |
| 786 | <v-date-picker | 786 | <v-date-picker |
| 787 | ref="picker" | 787 | ref="picker" |
| 788 | v-model="addTeachers.joinDate" | 788 | v-model="addTeachers.joinDate" |
| 789 | :max="new Date().toISOString().substr(0, 10)" | 789 | :max="new Date().toISOString().substr(0, 10)" |
| 790 | min="1950-01-01" | 790 | min="1950-01-01" |
| 791 | @input="menu1 = false" | 791 | @input="menu1 = false" |
| 792 | ></v-date-picker> | 792 | ></v-date-picker> |
| 793 | </v-menu> | 793 | </v-menu> |
| 794 | </v-flex> | 794 | </v-flex> |
| 795 | </v-layout> | 795 | </v-layout> |
| 796 | </v-flex> | 796 | </v-flex> |
| 797 | <v-flex xs12 sm6> | 797 | <v-flex xs12 sm6> |
| 798 | <v-layout> | 798 | <v-layout> |
| 799 | <v-flex xs4 class="pt-4 subheading"> | 799 | <v-flex xs4 class="pt-4 subheading"> |
| 800 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> | 800 | <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> |
| 801 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> | 801 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> |
| 802 | </v-flex> | 802 | </v-flex> |
| 803 | <v-flex xs8 class="ml-3"> | 803 | <v-flex xs8 class="ml-3"> |
| 804 | <v-text-field | 804 | <v-text-field |
| 805 | label="Select Image" | 805 | label="Select Image" |
| 806 | @click="pickFile" | 806 | @click="pickFile" |
| 807 | v-model="imageName" | 807 | v-model="imageName" |
| 808 | append-icon="attach_file" | 808 | append-icon="attach_file" |
| 809 | ></v-text-field> | 809 | ></v-text-field> |
| 810 | <input | 810 | <input |
| 811 | type="file" | 811 | type="file" |
| 812 | style="display:none" | 812 | style="display:none" |
| 813 | ref="image" | 813 | ref="image" |
| 814 | accept="image/*" | 814 | accept="image/*" |
| 815 | @change="onFilePicked" | 815 | @change="onFilePicked" |
| 816 | /> | 816 | /> |
| 817 | </v-flex> | 817 | </v-flex> |
| 818 | </v-layout> | 818 | </v-layout> |
| 819 | </v-flex> | 819 | </v-flex> |
| 820 | </v-layout> | 820 | </v-layout> |
| 821 | <v-layout class="hidden-xs-only hidden-sm-only"> | 821 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 822 | <v-flex xs12 sm6> | 822 | <v-flex xs12 sm6> |
| 823 | <v-layout> | 823 | <v-layout> |
| 824 | <v-flex xs4 md4 class="pt-4 subheading"> | 824 | <v-flex xs4 md4 class="pt-4 subheading"> |
| 825 | <label class="right">Present Address:</label> | 825 | <label class="right">Present Address:</label> |
| 826 | </v-flex> | 826 | </v-flex> |
| 827 | <v-flex xs8 md8 class="ml-3"> | 827 | <v-flex xs8 md8 class="ml-3"> |
| 828 | <v-text-field | 828 | <v-text-field |
| 829 | name="input-4-3" | 829 | name="input-4-3" |
| 830 | v-model="addTeachers.presentAddress" | 830 | v-model="addTeachers.presentAddress" |
| 831 | :rules="presentAddress" | 831 | :rules="presentAddress" |
| 832 | placeholder="fill Your present Address" | 832 | placeholder="fill Your present Address" |
| 833 | @keyup="copyData" | 833 | @keyup="copyData" |
| 834 | ></v-text-field> | 834 | ></v-text-field> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | </v-layout> | 836 | </v-layout> |
| 837 | </v-flex> | 837 | </v-flex> |
| 838 | <v-flex xs12 sm6> | 838 | <v-flex xs12 sm6> |
| 839 | <v-layout> | 839 | <v-layout> |
| 840 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 840 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 841 | <label class="right">Permanent Address:</label> | 841 | <label class="right">Permanent Address:</label> |
| 842 | </v-flex> | 842 | </v-flex> |
| 843 | <v-flex xs12 md8 class="ml-3"> | 843 | <v-flex xs12 md8 class="ml-3"> |
| 844 | <v-switch | 844 | <v-switch |
| 845 | v-model="addTeachers.permanentAddress" | 845 | v-model="addTeachers.permanentAddress" |
| 846 | label="Select Permanent Address" | 846 | label="Select Permanent Address" |
| 847 | :value="addTeachers.presentAddress" | 847 | :value="addTeachers.presentAddress" |
| 848 | ></v-switch> | 848 | ></v-switch> |
| 849 | </v-flex> | 849 | </v-flex> |
| 850 | </v-layout> | 850 | </v-layout> |
| 851 | </v-flex> | 851 | </v-flex> |
| 852 | </v-layout> | 852 | </v-layout> |
| 853 | <v-layout class="hidden-xs-only hidden-sm-only"> | 853 | <v-layout class="hidden-xs-only hidden-sm-only"> |
| 854 | <v-flex xs12 sm6> | 854 | <v-flex xs12 sm6> |
| 855 | <v-layout> | 855 | <v-layout> |
| 856 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> | 856 | <v-flex xs4 md4 class="pt-4 subheading addressForm"> |
| 857 | <label class="right">Permanent Address:</label> | 857 | <label class="right">Permanent Address:</label> |
| 858 | </v-flex> | 858 | </v-flex> |
| 859 | <v-flex xs12 md8 class="ml-3"> | 859 | <v-flex xs12 md8 class="ml-3"> |
| 860 | <v-text-field | 860 | <v-text-field |
| 861 | name="input-4-3" | 861 | name="input-4-3" |
| 862 | v-model="addTeachers.permanentAddress" | 862 | v-model="addTeachers.permanentAddress" |
| 863 | :rules="permanentAddress" | 863 | :rules="permanentAddress" |
| 864 | placeholder="fill Your Permanent Address" | 864 | placeholder="fill Your Permanent Address" |
| 865 | required | 865 | required |
| 866 | ></v-text-field> | 866 | ></v-text-field> |
| 867 | </v-flex> | 867 | </v-flex> |
| 868 | </v-layout> | 868 | </v-layout> |
| 869 | </v-flex> | 869 | </v-flex> |
| 870 | </v-layout> | 870 | </v-layout> |
| 871 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> | 871 | <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> |
| 872 | <v-flex xs12 sm12> | 872 | <v-flex xs12 sm12> |
| 873 | <v-layout> | 873 | <v-layout> |
| 874 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> | 874 | <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> |
| 875 | <label class>Present Addres:</label> | 875 | <label class>Present Addres:</label> |
| 876 | </v-flex> | 876 | </v-flex> |
| 877 | </v-layout> | 877 | </v-layout> |
| 878 | <v-layout> | 878 | <v-layout> |
| 879 | <v-flex xs12 sm12> | 879 | <v-flex xs12 sm12> |
| 880 | <v-textarea | 880 | <v-textarea |
| 881 | name="input-4-3" | 881 | name="input-4-3" |
| 882 | v-model="addTeachers.presentAddress" | 882 | v-model="addTeachers.presentAddress" |
| 883 | :rules="presentAddress" | 883 | :rules="presentAddress" |
| 884 | placeholder="fill Your present Address" | 884 | placeholder="fill Your present Address" |
| 885 | required | 885 | required |
| 886 | ></v-textarea> | 886 | ></v-textarea> |
| 887 | </v-flex> | 887 | </v-flex> |
| 888 | </v-layout> | 888 | </v-layout> |
| 889 | </v-flex> | 889 | </v-flex> |
| 890 | <v-flex xs12 sm12> | 890 | <v-flex xs12 sm12> |
| 891 | <v-layout> | 891 | <v-layout> |
| 892 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> | 892 | <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> |
| 893 | <label>Permanent Address:</label> | 893 | <label>Permanent Address:</label> |
| 894 | </v-flex> | 894 | </v-flex> |
| 895 | </v-layout> | 895 | </v-layout> |
| 896 | <v-layout> | 896 | <v-layout> |
| 897 | <v-flex xs12 sm12> | 897 | <v-flex xs12 sm12> |
| 898 | <v-textarea | 898 | <v-textarea |
| 899 | name="input-4-3" | 899 | name="input-4-3" |
| 900 | v-model="addTeachers.permanentAddress" | 900 | v-model="addTeachers.permanentAddress" |
| 901 | :rules="permanentAddress" | 901 | :rules="permanentAddress" |
| 902 | placeholder="fill Your Permanent Address" | 902 | placeholder="fill Your Permanent Address" |
| 903 | required | 903 | required |
| 904 | ></v-textarea> | 904 | ></v-textarea> |
| 905 | </v-flex> | 905 | </v-flex> |
| 906 | </v-layout> | 906 | </v-layout> |
| 907 | </v-flex> | 907 | </v-flex> |
| 908 | </v-layout> | 908 | </v-layout> |
| 909 | <v-layout> | 909 | <v-layout> |
| 910 | <v-flex xs12 sm12> | 910 | <v-flex xs12 sm12> |
| 911 | <v-layout class="right"> | 911 | <v-layout class="right"> |
| 912 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 912 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 913 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 913 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 914 | </v-layout> | 914 | </v-layout> |
| 915 | </v-flex> | 915 | </v-flex> |
| 916 | </v-layout> | 916 | </v-layout> |
| 917 | </v-container> | 917 | </v-container> |
| 918 | </v-form> | 918 | </v-form> |
| 919 | </v-card> | 919 | </v-card> |
| 920 | </v-dialog> | 920 | </v-dialog> |
| 921 | <div class="loader" v-if="showLoader"> | 921 | <div class="loader" v-if="showLoader"> |
| 922 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 922 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 923 | </div> | 923 | </div> |
| 924 | </v-container> | 924 | </v-container> |
| 925 | </template> | 925 | </template> |
| 926 | 926 | ||
| 927 | <script> | 927 | <script> |
| 928 | import http from "@/Services/http.js"; | 928 | import http from "@/Services/http.js"; |
| 929 | import moment from "moment"; | 929 | import moment from "moment"; |
| 930 | import countryList from "@/script/country.js"; | 930 | import countryList from "@/script/country.js"; |
| 931 | 931 | ||
| 932 | export default { | 932 | export default { |
| 933 | data: () => ({ | 933 | data: () => ({ |
| 934 | component: "report-generate", | 934 | component: "report-generate", |
| 935 | snackbar: false, | 935 | snackbar: false, |
| 936 | y: "top", | 936 | y: "top", |
| 937 | x: "right", | 937 | x: "right", |
| 938 | role: "", | 938 | role: "", |
| 939 | mode: "", | 939 | mode: "", |
| 940 | timeout: 3000, | 940 | timeout: 3000, |
| 941 | text: "", | 941 | text: "", |
| 942 | color: "", | 942 | color: "", |
| 943 | showLoader: false, | 943 | showLoader: false, |
| 944 | loading: false, | 944 | loading: false, |
| 945 | date: null, | 945 | date: null, |
| 946 | search: "", | 946 | search: "", |
| 947 | show: true, | 947 | show: true, |
| 948 | showSearch: false, | 948 | showSearch: false, |
| 949 | menu: false, | 949 | menu: false, |
| 950 | menu1: false, | 950 | menu1: false, |
| 951 | menu2: false, | 951 | menu2: false, |
| 952 | menu3: false, | 952 | menu3: false, |
| 953 | editTeacherDialog: false, | 953 | editTeacherDialog: false, |
| 954 | viewTeacherProfileDialog: false, | 954 | viewTeacherProfileDialog: false, |
| 955 | addTeacherDialog: false, | 955 | addTeacherDialog: false, |
| 956 | valid: true, | 956 | valid: true, |
| 957 | pagination: { | 957 | pagination: { |
| 958 | rowsPerPage: 10, | 958 | rowsPerPage: 10, |
| 959 | }, | 959 | }, |
| 960 | imageData: {}, | 960 | imageData: {}, |
| 961 | imageName: "", | 961 | imageName: "", |
| 962 | imageUrl: "", | 962 | imageUrl: "", |
| 963 | imageFile: "", | 963 | imageFile: "", |
| 964 | nameRules: [(v) => !!v || " Full Name is required"], | 964 | nameRules: [(v) => !!v || " Full Name is required"], |
| 965 | dateRules: [(v) => !!v || " DOB is required"], | 965 | dateRules: [(v) => !!v || " DOB is required"], |
| 966 | cityRules: [(v) => !!v || " City Name is required"], | 966 | cityRules: [(v) => !!v || " City Name is required"], |
| 967 | pincode: [(v) => !!v || " Pincode is required"], | 967 | pincode: [(v) => !!v || " Pincode is required"], |
| 968 | country: [(v) => !!v || " Country Name is required"], | 968 | country: [(v) => !!v || " Country Name is required"], |
| 969 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 969 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 970 | presentAddress: [(v) => !!v || " Present Address is required"], | 970 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 971 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], | 971 | mobileNoRules: [(v) => !!v || "Mobile Number is required"], |
| 972 | stateRules: [(v) => !!v || "State Name is required"], | 972 | stateRules: [(v) => !!v || "State Name is required"], |
| 973 | joinDateRules: [(v) => !!v || " Join Date is required"], | 973 | joinDateRules: [(v) => !!v || " Join Date is required"], |
| 974 | errorMessages: "", | 974 | errorMessages: "", |
| 975 | switch1: true, | 975 | switch1: true, |
| 976 | countries: [], | 976 | countries: [], |
| 977 | headers: [ | 977 | headers: [ |
| 978 | { | 978 | { |
| 979 | text: "No", | 979 | text: "No", |
| 980 | align: "", | 980 | align: "", |
| 981 | sortable: false, | 981 | sortable: false, |
| 982 | value: "No", | 982 | value: "No", |
| 983 | }, | 983 | }, |
| 984 | { | 984 | { |
| 985 | text: "Profile Pic", | 985 | text: "Profile Pic", |
| 986 | value: "profilePicUrl", | 986 | value: "profilePicUrl", |
| 987 | sortable: false, | 987 | sortable: false, |
| 988 | align: "center", | 988 | align: "center", |
| 989 | }, | 989 | }, |
| 990 | { text: "Name", value: "name", sortable: false, align: "center" }, | 990 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 991 | { text: "Email", value: "email", sortable: false, align: "center" }, | 991 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 992 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 992 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 993 | { | 993 | { |
| 994 | text: "Join Date", | 994 | text: "Join Date", |
| 995 | value: "joinDate", | 995 | value: "joinDate", |
| 996 | sortable: false, | 996 | sortable: false, |
| 997 | align: "center", | 997 | align: "center", |
| 998 | }, | 998 | }, |
| 999 | { | 999 | { |
| 1000 | text: "Mobile No", | 1000 | text: "Mobile No", |
| 1001 | value: "mobileNo", | 1001 | value: "mobileNo", |
| 1002 | sortable: false, | 1002 | sortable: false, |
| 1003 | align: "center", | 1003 | align: "center", |
| 1004 | }, | 1004 | }, |
| 1005 | { | 1005 | { |
| 1006 | text: "Status", | 1006 | text: "Status", |
| 1007 | value: "status", | 1007 | value: "status", |
| 1008 | sortable: false, | 1008 | sortable: false, |
| 1009 | align: "center", | 1009 | align: "center", |
| 1010 | }, | 1010 | }, |
| 1011 | { text: "Action", value: "", sortable: false, align: "center" }, | 1011 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 1012 | ], | 1012 | ], |
| 1013 | desserts: [], | 1013 | desserts: [], |
| 1014 | editedIndex: -1, | 1014 | editedIndex: -1, |
| 1015 | upload: "", | 1015 | upload: "", |
| 1016 | editedItem: { | 1016 | editedItem: { |
| 1017 | role: "TEACHER", | 1017 | role: "TEACHER", |
| 1018 | name: "", | 1018 | name: "", |
| 1019 | email: "", | 1019 | email: "", |
| 1020 | date: null, | 1020 | date: null, |
| 1021 | city: "", | 1021 | city: "", |
| 1022 | pincode: "", | 1022 | pincode: "", |
| 1023 | country: "", | 1023 | country: "", |
| 1024 | permanentAddress: "", | 1024 | permanentAddress: "", |
| 1025 | presentAddress: "", | 1025 | presentAddress: "", |
| 1026 | mobileNo: "", | 1026 | mobileNo: "", |
| 1027 | state: "", | 1027 | state: "", |
| 1028 | joinDate: null, | 1028 | joinDate: null, |
| 1029 | }, | 1029 | }, |
| 1030 | addTeachers: { | 1030 | addTeachers: { |
| 1031 | role: "TEACHER", | 1031 | role: "TEACHER", |
| 1032 | name: "", | 1032 | name: "", |
| 1033 | email: "", | 1033 | email: "", |
| 1034 | date: null, | 1034 | date: null, |
| 1035 | city: "", | 1035 | city: "", |
| 1036 | pincode: "", | 1036 | pincode: "", |
| 1037 | country: "", | 1037 | country: "", |
| 1038 | permanentAddress: "", | 1038 | permanentAddress: "", |
| 1039 | presentAddress: "", | 1039 | presentAddress: "", |
| 1040 | mobileNo: "", | 1040 | mobileNo: "", |
| 1041 | state: "", | 1041 | state: "", |
| 1042 | joinDate: null, | 1042 | joinDate: null, |
| 1043 | }, | 1043 | }, |
| 1044 | status: "", | 1044 | status: "", |
| 1045 | }), | 1045 | }), |
| 1046 | watch: { | 1046 | watch: { |
| 1047 | menu(val) { | 1047 | menu(val) { |
| 1048 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1048 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1049 | }, | 1049 | }, |
| 1050 | menu1(val) { | 1050 | menu1(val) { |
| 1051 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 1051 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 1052 | }, | 1052 | }, |
| 1053 | addTeacherDialog: function (val) { | 1053 | addTeacherDialog: function (val) { |
| 1054 | if (!val) { | 1054 | if (!val) { |
| 1055 | this.addTeachers = { | 1055 | this.addTeachers = { |
| 1056 | role: "TEACHER", | 1056 | role: "TEACHER", |
| 1057 | }; | 1057 | }; |
| 1058 | this.imageName = ""; | 1058 | this.imageName = ""; |
| 1059 | this.imageFile = ""; | 1059 | this.imageFile = ""; |
| 1060 | this.imageUrl = ""; | 1060 | this.imageUrl = ""; |
| 1061 | } | 1061 | } |
| 1062 | }, | 1062 | }, |
| 1063 | }, | 1063 | }, |
| 1064 | methods: { | 1064 | methods: { |
| 1065 | save(date) { | 1065 | save(date) { |
| 1066 | this.$refs.menu.save(date); | 1066 | this.$refs.menu.save(date); |
| 1067 | }, | 1067 | }, |
| 1068 | save(date) { | 1068 | save(date) { |
| 1069 | this.$refs.menu1.save(date); | 1069 | this.$refs.menu1.save(date); |
| 1070 | }, | 1070 | }, |
| 1071 | pickFile() { | 1071 | pickFile() { |
| 1072 | this.$refs.image.click(); | 1072 | this.$refs.image.click(); |
| 1073 | }, | 1073 | }, |
| 1074 | onFilePicked(e) { | 1074 | onFilePicked(e) { |
| 1075 | const files = e.target.files; | 1075 | const files = e.target.files; |
| 1076 | this.upload = e.target.files[0]; | 1076 | this.upload = e.target.files[0]; |
| 1077 | if (files[0] !== undefined) { | 1077 | if (files[0] !== undefined) { |
| 1078 | this.imageName = files[0].name; | 1078 | this.imageName = files[0].name; |
| 1079 | if (this.imageName.lastIndexOf(".") <= 0) { | 1079 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1080 | return; | 1080 | return; |
| 1081 | } | 1081 | } |
| 1082 | const fr = new FileReader(); | 1082 | const fr = new FileReader(); |
| 1083 | fr.readAsDataURL(files[0]); | 1083 | fr.readAsDataURL(files[0]); |
| 1084 | fr.addEventListener("load", () => { | 1084 | fr.addEventListener("load", () => { |
| 1085 | this.imageUrl = fr.result; | 1085 | this.imageUrl = fr.result; |
| 1086 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1086 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1087 | }); | 1087 | }); |
| 1088 | } else { | 1088 | } else { |
| 1089 | this.imageName = ""; | 1089 | this.imageName = ""; |
| 1090 | this.imageFile = ""; | 1090 | this.imageFile = ""; |
| 1091 | this.imageUrl = ""; | 1091 | this.imageUrl = ""; |
| 1092 | } | 1092 | } |
| 1093 | }, | 1093 | }, |
| 1094 | dates: function (date) { | 1094 | dates: function (date) { |
| 1095 | return moment(date).format("MMMM DD, YYYY"); | 1095 | return moment(date).format("MMMM DD, YYYY"); |
| 1096 | }, | 1096 | }, |
| 1097 | getTeacherList() { | 1097 | getTeacherList() { |
| 1098 | this.showLoader = true; | 1098 | this.showLoader = true; |
| 1099 | var token = this.$store.state.token; | 1099 | var token = this.$store.state.token; |
| 1100 | http() | 1100 | http() |
| 1101 | .get("/getTeachersList", { | 1101 | .get("/getTeachersList", { |
| 1102 | headers: { Authorization: "Bearer " + token }, | 1102 | headers: { Authorization: "Bearer " + token }, |
| 1103 | }) | 1103 | }) |
| 1104 | .then((response) => { | 1104 | .then((response) => { |
| 1105 | this.desserts = response.data.data; | 1105 | this.desserts = response.data.data; |
| 1106 | this.showLoader = false; | 1106 | this.showLoader = false; |
| 1107 | // console.log("getTeacherList=====>",this.desserts) | 1107 | // console.log("getTeacherList=====>",this.desserts) |
| 1108 | }) | 1108 | }) |
| 1109 | .catch((error) => { | 1109 | .catch((error) => { |
| 1110 | this.showLoader = false; | 1110 | this.showLoader = false; |
| 1111 | if (error.response.status === 401) { | 1111 | if (error.response.status === 401) { |
| 1112 | this.$router.replace({ path: "/" }); | 1112 | this.$router.replace({ path: "/" }); |
| 1113 | this.$store.dispatch("setToken", null); | 1113 | this.$store.dispatch("setToken", null); |
| 1114 | this.$store.dispatch("Id", null); | 1114 | this.$store.dispatch("Id", null); |
| 1115 | } | 1115 | } |
| 1116 | }); | 1116 | }); |
| 1117 | }, | 1117 | }, |
| 1118 | editItem(item) { | 1118 | editItem(item) { |
| 1119 | this.editedIndex = this.desserts.indexOf(item); | 1119 | this.editedIndex = this.desserts.indexOf(item); |
| 1120 | this.editedItem = Object.assign({}, item); | 1120 | this.editedItem = Object.assign({}, item); |
| 1121 | this.editedItem.dob = | 1121 | this.editedItem.dob = |
| 1122 | this.editedItem.dob != undefined | 1122 | this.editedItem.dob != undefined |
| 1123 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 1123 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 1124 | : (this.editedItem.dob = ""); | 1124 | : (this.editedItem.dob = ""); |
| 1125 | this.editedItem.joinDate = | 1125 | this.editedItem.joinDate = |
| 1126 | this.editedItem.joinDate != undefined | 1126 | this.editedItem.joinDate != undefined |
| 1127 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( | 1127 | ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( |
| 1128 | 0, | 1128 | 0, |
| 1129 | 10 | 1129 | 10 |
| 1130 | )) | 1130 | )) |
| 1131 | : (this.editedItem.joinDate = ""); | 1131 | : (this.editedItem.joinDate = ""); |
| 1132 | 1132 | ||
| 1133 | this.editTeacherDialog = true; | 1133 | this.editTeacherDialog = true; |
| 1134 | }, | 1134 | }, |
| 1135 | profile(item) { | 1135 | profile(item) { |
| 1136 | this.editedIndex = this.desserts.indexOf(item); | 1136 | this.editedIndex = this.desserts.indexOf(item); |
| 1137 | this.editedItem = Object.assign({}, item); | 1137 | this.editedItem = Object.assign({}, item); |
| 1138 | this.viewTeacherProfileDialog = true; | 1138 | this.viewTeacherProfileDialog = true; |
| 1139 | }, | 1139 | }, |
| 1140 | deleteItem(item) { | 1140 | deleteItem(item) { |
| 1141 | let deleteTeachers = { | 1141 | let deleteTeachers = { |
| 1142 | teacherId: item._id, | 1142 | teacherId: item._id, |
| 1143 | }; | 1143 | }; |
| 1144 | http() | 1144 | http() |
| 1145 | .delete( | 1145 | .delete( |
| 1146 | "/deleteTeacher", | 1146 | "/deleteTeacher", |
| 1147 | confirm("Are you sure you want to delete this?") && { | 1147 | confirm("Are you sure you want to delete this?") && { |
| 1148 | params: deleteTeachers, | 1148 | params: deleteTeachers, |
| 1149 | } | 1149 | } |
| 1150 | ) | 1150 | ) |
| 1151 | .then((response) => { | 1151 | .then((response) => { |
| 1152 | this.snackbar = true; | 1152 | this.snackbar = true; |
| 1153 | this.text = "Successfully delete Existing Teacher"; | 1153 | this.text = "Successfully delete Existing Teacher"; |
| 1154 | this.color = "green"; | 1154 | this.color = "green"; |
| 1155 | this.getTeacherList(); | 1155 | this.getTeacherList(); |
| 1156 | }) | 1156 | }) |
| 1157 | .catch((error) => { | 1157 | .catch((error) => { |
| 1158 | this.snackbar = true; | 1158 | this.snackbar = true; |
| 1159 | this.text = error.response.data.message; | 1159 | this.text = error.response.data.message; |
| 1160 | this.color = "error"; | 1160 | this.color = "error"; |
| 1161 | }); | 1161 | }); |
| 1162 | }, | 1162 | }, |
| 1163 | closeEditTeacherDialog() { | 1163 | closeEditTeacherDialog() { |
| 1164 | this.editTeacherDialog = false; | 1164 | this.editTeacherDialog = false; |
| 1165 | }, | 1165 | }, |
| 1166 | close1() { | 1166 | close1() { |
| 1167 | this.viewTeacherProfileDialog = false; | 1167 | this.viewTeacherProfileDialog = false; |
| 1168 | }, | 1168 | }, |
| 1169 | copyData() { | 1169 | copyData() { |
| 1170 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; | 1170 | this.addTeachers.permanentAddress = this.addTeachers.presentAddress; |
| 1171 | }, | 1171 | }, |
| 1172 | submit() { | 1172 | submit() { |
| 1173 | if (this.$refs.form.validate()) { | 1173 | if (this.$refs.form.validate()) { |
| 1174 | let addTeacher = { | 1174 | let addTeacher = { |
| 1175 | name: this.addTeachers.name, | 1175 | name: this.addTeachers.name, |
| 1176 | email: this.addTeachers.email, | 1176 | email: this.addTeachers.email, |
| 1177 | role: this.addTeachers.role, | 1177 | role: this.addTeachers.role, |
| 1178 | dob: this.addTeachers.date, | 1178 | dob: this.addTeachers.date, |
| 1179 | city: this.addTeachers.city, | 1179 | city: this.addTeachers.city, |
| 1180 | pincode: this.addTeachers.pincode, | 1180 | pincode: this.addTeachers.pincode, |
| 1181 | country: this.addTeachers.country, | 1181 | country: this.addTeachers.country, |
| 1182 | permanentAddress: this.addTeachers.permanentAddress, | 1182 | permanentAddress: this.addTeachers.permanentAddress, |
| 1183 | presentAddress: this.addTeachers.presentAddress, | 1183 | presentAddress: this.addTeachers.presentAddress, |
| 1184 | mobileNo: this.addTeachers.mobileNo, | 1184 | mobileNo: this.addTeachers.mobileNo, |
| 1185 | state: this.addTeachers.state, | 1185 | state: this.addTeachers.state, |
| 1186 | joinDate: this.addTeachers.joinDate, | 1186 | joinDate: this.addTeachers.joinDate, |
| 1187 | }; | 1187 | }; |
| 1188 | if (this.imageUrl) { | 1188 | if (this.imageUrl) { |
| 1189 | var str = this.imageUrl; | 1189 | var str = this.imageUrl; |
| 1190 | const [baseUrl, imageUrl] = str.split(/,/); | 1190 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1191 | addTeacher.upload = imageUrl; | 1191 | addTeacher.upload = imageUrl; |
| 1192 | } | 1192 | } |
| 1193 | this.loading = true; | 1193 | this.loading = true; |
| 1194 | http() | 1194 | http() |
| 1195 | .post("/createTeacher", addTeacher) | 1195 | .post("/createTeacher", addTeacher) |
| 1196 | .then((response) => { | 1196 | .then((response) => { |
| 1197 | this.imageUrl = ""; | 1197 | this.imageUrl = ""; |
| 1198 | this.getTeacherList(); | 1198 | this.getTeacherList(); |
| 1199 | this.snackbar = true; | 1199 | this.snackbar = true; |
| 1200 | this.text = "New Teacher added successfully"; | 1200 | this.text = "New Teacher added successfully"; |
| 1201 | this.color = "green"; | 1201 | this.color = "green"; |
| 1202 | this.clear(); | 1202 | this.clear(); |
| 1203 | this.loading = false; | 1203 | this.loading = false; |
| 1204 | this.addTeacherDialog = false; | 1204 | this.addTeacherDialog = false; |
| 1205 | }) | 1205 | }) |
| 1206 | .catch((error) => { | 1206 | .catch((error) => { |
| 1207 | this.snackbar = true; | 1207 | this.snackbar = true; |
| 1208 | this.text = error.response.data.message; | 1208 | this.text = error.response.data.message; |
| 1209 | this.color = "error"; | 1209 | this.color = "error"; |
| 1210 | this.loading = false; | 1210 | this.loading = false; |
| 1211 | }); | 1211 | }); |
| 1212 | } | 1212 | } |
| 1213 | }, | 1213 | }, |
| 1214 | clear() { | 1214 | clear() { |
| 1215 | this.$refs.form.reset(); | 1215 | this.$refs.form.reset(); |
| 1216 | this.imageUrl = ""; | 1216 | this.imageUrl = ""; |
| 1217 | }, | 1217 | }, |
| 1218 | save() { | 1218 | save() { |
| 1219 | this.loading = true; | 1219 | this.loading = true; |
| 1220 | let editTeacher = { | 1220 | let editTeacher = { |
| 1221 | teacherId: this.editedItem._id, | 1221 | teacherId: this.editedItem._id, |
| 1222 | name: this.editedItem.name, | 1222 | name: this.editedItem.name, |
| 1223 | email: this.editedItem.email, | 1223 | email: this.editedItem.email, |
| 1224 | role: this.editedItem.role, | 1224 | role: this.editedItem.role, |
| 1225 | dob: this.editedItem.dob, | 1225 | dob: this.editedItem.dob, |
| 1226 | city: this.editedItem.city, | 1226 | city: this.editedItem.city, |
| 1227 | pincode: this.editedItem.pincode, | 1227 | pincode: this.editedItem.pincode, |
| 1228 | country: this.editedItem.country, | 1228 | country: this.editedItem.country, |
| 1229 | permanentAddress: this.editedItem.permanentAddress, | 1229 | permanentAddress: this.editedItem.permanentAddress, |
| 1230 | presentAddress: this.editedItem.presentAddress, | 1230 | presentAddress: this.editedItem.presentAddress, |
| 1231 | mobileNo: this.editedItem.mobileNo, | 1231 | mobileNo: this.editedItem.mobileNo, |
| 1232 | state: this.editedItem.state, | 1232 | state: this.editedItem.state, |
| 1233 | joinDate: this.editedItem.joinDate, | 1233 | joinDate: this.editedItem.joinDate, |
| 1234 | }; | 1234 | }; |
| 1235 | if (this.imageUrl) { | 1235 | if (this.imageUrl) { |
| 1236 | var str = this.imageUrl; | 1236 | var str = this.imageUrl; |
| 1237 | const [baseUrl, imageUrl] = str.split(/,/); | 1237 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1238 | editTeacher.upload = imageUrl; | 1238 | editTeacher.upload = imageUrl; |
| 1239 | } | 1239 | } |
| 1240 | http() | 1240 | http() |
| 1241 | .put("/updateTeacher", editTeacher) | 1241 | .put("/updateTeacher", editTeacher) |
| 1242 | .then((response) => { | 1242 | .then((response) => { |
| 1243 | this.snackbar = true; | 1243 | this.snackbar = true; |
| 1244 | this.text = "Successfully Edit Existing Teacher"; | 1244 | this.text = "Successfully Edit Existing Teacher"; |
| 1245 | this.color = "green"; | 1245 | this.color = "green"; |
| 1246 | this.loading = false; | 1246 | this.loading = false; |
| 1247 | this.getTeacherList(); | 1247 | this.getTeacherList(); |
| 1248 | this.closeEditTeacherDialog(); | 1248 | this.closeEditTeacherDialog(); |
| 1249 | }) | 1249 | }) |
| 1250 | .catch((error) => { | 1250 | .catch((error) => { |
| 1251 | this.snackbar = true; | 1251 | this.snackbar = true; |
| 1252 | this.text = error.response.data.message; | 1252 | this.text = error.response.data.message; |
| 1253 | this.color = "error"; | 1253 | this.color = "error"; |
| 1254 | this.loading = false; | 1254 | this.loading = false; |
| 1255 | }); | 1255 | }); |
| 1256 | }, | 1256 | }, |
| 1257 | suspendStatus(suspendStatus, id) { | 1257 | suspendStatus(suspendStatus, id) { |
| 1258 | let suspendStatusData = { | 1258 | let suspendStatusData = { |
| 1259 | teacherId: id, | 1259 | teacherId: id, |
| 1260 | status: suspendStatus, | 1260 | status: suspendStatus, |
| 1261 | }; | 1261 | }; |
| 1262 | this.showLoader = true; | 1262 | this.showLoader = true; |
| 1263 | http() | 1263 | http() |
| 1264 | .put("/suspendAccount", suspendStatusData) | 1264 | .put("/suspendAccount", suspendStatusData) |
| 1265 | .then((response) => { | 1265 | .then((response) => { |
| 1266 | this.getTeacherList(); | 1266 | this.getTeacherList(); |
| 1267 | this.text = response.data.message; | 1267 | this.text = response.data.message; |
| 1268 | this.color = "green"; | 1268 | this.color = "green"; |
| 1269 | this.snackbar = true; | 1269 | this.snackbar = true; |
| 1270 | this.showLoader = false; | 1270 | this.showLoader = false; |
| 1271 | }) | 1271 | }) |
| 1272 | .catch((error) => { | 1272 | .catch((error) => { |
| 1273 | this.snackbar = true; | 1273 | this.snackbar = true; |
| 1274 | this.color = "error"; | 1274 | this.color = "error"; |
| 1275 | this.text = error.response.data.message; | 1275 | this.text = error.response.data.message; |
| 1276 | this.showLoader = false; | 1276 | this.showLoader = false; |
| 1277 | }); | 1277 | }); |
| 1278 | }, | 1278 | }, |
| 1279 | displaySearch() { | 1279 | displaySearch() { |
| 1280 | (this.show = false), (this.showSearch = true); | 1280 | (this.show = false), (this.showSearch = true); |
| 1281 | }, | 1281 | }, |
| 1282 | closeSearch() { | 1282 | closeSearch() { |
| 1283 | this.showSearch = false; | 1283 | this.showSearch = false; |
| 1284 | this.show = true; | 1284 | this.show = true; |
| 1285 | this.search = ""; | 1285 | this.search = ""; |
| 1286 | }, | 1286 | }, |
| 1287 | }, | 1287 | }, |
| 1288 | mounted() { | 1288 | mounted() { |
| 1289 | const getCountryList = countryList(); | 1289 | const getCountryList = countryList(); |
| 1290 | this.countries = getCountryList; | 1290 | this.countries = getCountryList; |
| 1291 | this.getTeacherList(); | 1291 | this.getTeacherList(); |
| 1292 | this.role = this.$store.state.role; | 1292 | this.role = this.$store.state.role; |
| 1293 | }, | 1293 | }, |
| 1294 | }; | 1294 | }; |
| 1295 | </script> | 1295 | </script> |
| 1296 | <style scoped> | 1296 | <style scoped> |
| 1297 | .active { | 1297 | .active { |
| 1298 | background-color: gray; | 1298 | background-color: gray; |
| 1299 | color: white !important; | 1299 | color: white !important; |
| 1300 | } | 1300 | } |
| 1301 | .activebtn { | 1301 | .activebtn { |
| 1302 | color: black !important; | 1302 | color: black !important; |
| 1303 | } | 1303 | } |
| 1304 | </style> | 1304 | </style> |
src/pages/TimeTable/timeTable.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT TIME-TABLE****** --> | 3 | <!-- ****** EDIT TIME-TABLE****** --> |
| 4 | <v-dialog v-model="dialog" max-width="600px"> | 4 | <v-dialog v-model="dialog" max-width="600px" persistent> |
| 5 | <v-flex xs12 sm12> | 5 | <v-flex xs12 sm12> |
| 6 | <v-card flat class="card-style pa-2" dark> | 6 | <v-card flat class="card-style pa-2" dark> |
| 7 | <v-layout> | 7 | <v-layout> |
| 8 | <v-flex xs12> | 8 | <v-flex xs12> |
| 9 | <label class="title text-xs-center">Edit Time Table</label> | 9 | <label class="title text-xs-center">Edit Time Table</label> |
| 10 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> | 10 | <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon> |
| 11 | </v-flex> | 11 | </v-flex> |
| 12 | </v-layout> | 12 | </v-layout> |
| 13 | <!-- <v-layout> | 13 | <!-- <v-layout> |
| 14 | <v-flex | 14 | <v-flex |
| 15 | xs12 | 15 | xs12 |
| 16 | class="text-xs-center text-sm-center text-md-center text-lg-center" | 16 | class="text-xs-center text-sm-center text-md-center text-lg-center" |
| 17 | > | 17 | > |
| 18 | <v-avatar size="100px"> | 18 | <v-avatar size="100px"> |
| 19 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 19 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 20 | </v-avatar> | 20 | </v-avatar> |
| 21 | <input | 21 | <input |
| 22 | type="file" | 22 | type="file" |
| 23 | style="display: none" | 23 | style="display: none" |
| 24 | ref="image" | 24 | ref="image" |
| 25 | accept="image/*" | 25 | accept="image/*" |
| 26 | @change="onFilePicked" | 26 | @change="onFilePicked" |
| 27 | /> | 27 | /> |
| 28 | <img | 28 | <img |
| 29 | :src="imageData.imageUrl" | 29 | :src="imageData.imageUrl" |
| 30 | height="150" | 30 | height="150" |
| 31 | v-if="imageUrl" | 31 | v-if="imageUrl" |
| 32 | style="border-radius:50%; width:200px" | 32 | style="border-radius:50%; width:200px" |
| 33 | /> | 33 | /> |
| 34 | </v-flex> | 34 | </v-flex> |
| 35 | </v-layout>--> | 35 | </v-layout>--> |
| 36 | <v-flex xs12 sm12> | 36 | <v-flex xs12 sm12> |
| 37 | <v-layout> | 37 | <v-layout> |
| 38 | <v-flex xs4 class="pt-4 subheading"> | 38 | <v-flex xs4 class="pt-4 subheading"> |
| 39 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 39 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 40 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 40 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 41 | </v-flex> | 41 | </v-flex> |
| 42 | <v-flex xs8 sm5 class="ml-3"> | 42 | <v-flex xs8 sm5 class="ml-3"> |
| 43 | <v-select | 43 | <v-select |
| 44 | :items="addclass" | 44 | :items="addclass" |
| 45 | label="Select Class" | 45 | label="Select Class" |
| 46 | v-model="editedItem.classNum" | 46 | v-model="editedItem.classNum" |
| 47 | item-text="classNum" | 47 | item-text="classNum" |
| 48 | item-value="_id" | 48 | item-value="_id" |
| 49 | @change="getSections(editedItem.classNum)" | 49 | @change="getSections(editedItem.classNum)" |
| 50 | ></v-select> | 50 | ></v-select> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs12 sm12> | 54 | <v-flex xs12 sm12> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> | 57 | <label class="right hidden-xs-only hidden-sm-only">Section Name:</label> |
| 58 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 58 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 59 | </v-flex> | 59 | </v-flex> |
| 60 | <v-flex xs8 sm5 class="ml-3"> | 60 | <v-flex xs8 sm5 class="ml-3"> |
| 61 | <v-select | 61 | <v-select |
| 62 | :items="addSection" | 62 | :items="addSection" |
| 63 | label="Select Section" | 63 | label="Select Section" |
| 64 | v-model="editedItem.selectSection" | 64 | v-model="editedItem.selectSection" |
| 65 | item-text="name" | 65 | item-text="name" |
| 66 | item-value="_id" | 66 | item-value="_id" |
| 67 | ></v-select> | 67 | ></v-select> |
| 68 | </v-flex> | 68 | </v-flex> |
| 69 | </v-layout> | 69 | </v-layout> |
| 70 | </v-flex> | 70 | </v-flex> |
| 71 | <v-layout> | 71 | <v-layout> |
| 72 | <v-flex xs12 sm9 offset-sm1> | 72 | <v-flex xs12 sm9 offset-sm1> |
| 73 | <v-card-actions> | 73 | <v-card-actions> |
| 74 | <v-spacer></v-spacer> | 74 | <v-spacer></v-spacer> |
| 75 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> | 75 | <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn> |
| 76 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 76 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 77 | </v-card-actions> | 77 | </v-card-actions> |
| 78 | </v-flex> | 78 | </v-flex> |
| 79 | </v-layout> | 79 | </v-layout> |
| 80 | </v-card> | 80 | </v-card> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | </v-dialog> | 82 | </v-dialog> |
| 83 | 83 | ||
| 84 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> | 84 | <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> |
| 85 | 85 | ||
| 86 | <v-dialog v-model="dialogSchedule" max-width="600px"> | 86 | <v-dialog v-model="dialogSchedule" max-width="600px" persistent> |
| 87 | <v-flex xs12 sm12> | 87 | <v-flex xs12 sm12> |
| 88 | <v-card flat class="card-style pa-2" dark> | 88 | <v-card flat class="card-style pa-2" dark> |
| 89 | <v-layout> | 89 | <v-layout> |
| 90 | <v-flex xs12> | 90 | <v-flex xs12> |
| 91 | <label class="title text-xs-center">Add Schedule</label> | 91 | <label class="title text-xs-center">Add Schedule</label> |
| 92 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> | 92 | <v-icon size="24" class="right" @click="dialogSchedule = false">cancel</v-icon> |
| 93 | </v-flex> | 93 | </v-flex> |
| 94 | </v-layout> | 94 | </v-layout> |
| 95 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> | 95 | <v-form ref="formAddDay" v-model="validAddDay" lazy-validation> |
| 96 | <v-container fluid> | 96 | <v-container fluid> |
| 97 | <v-flex xs12 sm12 class="py-3"> | 97 | <v-flex xs12 sm12 class="py-3"> |
| 98 | <v-layout> | 98 | <v-layout> |
| 99 | <v-flex xs4 class="pt-4 subheading"> | 99 | <v-flex xs4 class="pt-4 subheading"> |
| 100 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> | 100 | <label class="right hidden-xs-only hidden-sm-only">Select Day:</label> |
| 101 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> | 101 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Day:</label> |
| 102 | </v-flex> | 102 | </v-flex> |
| 103 | <v-flex xs12 sm5 class="pl-3"> | 103 | <v-flex xs12 sm5 class="pl-3"> |
| 104 | <v-select | 104 | <v-select |
| 105 | :items="addOneDay" | 105 | :items="addOneDay" |
| 106 | label="Select Day" | 106 | label="Select Day" |
| 107 | v-model="schedule.selectDay" | 107 | v-model="schedule.selectDay" |
| 108 | :rules="selecDayRule" | 108 | :rules="selecDayRule" |
| 109 | ></v-select> | 109 | ></v-select> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | </v-layout> | 111 | </v-layout> |
| 112 | </v-flex> | 112 | </v-flex> |
| 113 | <v-layout> | 113 | <v-layout> |
| 114 | <v-flex xs12 sm8 offset-sm2> | 114 | <v-flex xs12 sm8 offset-sm2> |
| 115 | <v-card-actions> | 115 | <v-card-actions> |
| 116 | <v-spacer></v-spacer> | 116 | <v-spacer></v-spacer> |
| 117 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> | 117 | <v-btn round dark @click="submitSchedule" class="add-button">Save</v-btn> |
| 118 | <v-spacer></v-spacer> | 118 | <v-spacer></v-spacer> |
| 119 | </v-card-actions> | 119 | </v-card-actions> |
| 120 | </v-flex> | 120 | </v-flex> |
| 121 | </v-layout> | 121 | </v-layout> |
| 122 | </v-container> | 122 | </v-container> |
| 123 | </v-form> | 123 | </v-form> |
| 124 | </v-card> | 124 | </v-card> |
| 125 | </v-flex> | 125 | </v-flex> |
| 126 | </v-dialog> | 126 | </v-dialog> |
| 127 | 127 | ||
| 128 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> | 128 | <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> |
| 129 | 129 | ||
| 130 | <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> | 130 | <v-dialog v-model="dialogAddLecture" max-width="600px" persistent> |
| 131 | <v-flex xs12 sm12> | 131 | <v-flex xs12 sm12> |
| 132 | <v-card flat class="card-style pa-2" dark> | 132 | <v-card flat class="card-style pa-2" dark> |
| 133 | <v-layout> | 133 | <v-layout> |
| 134 | <v-flex xs12> | 134 | <v-flex xs12> |
| 135 | <label class="title text-xs-center">Add Lecture</label> | 135 | <label class="title text-xs-center">Add Lecture</label> |
| 136 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> | 136 | <v-icon size="24" class="right" @click="dialogAddLecture = false">cancel</v-icon> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | <v-form ref="lectureForm" v-model="valid" lazy-validation> | 139 | <v-form ref="lectureForm" v-model="valid" lazy-validation> |
| 140 | <v-container fluid> | 140 | <v-container fluid> |
| 141 | <v-flex xs12 sm12> | 141 | <v-flex xs12 sm12> |
| 142 | <v-layout> | 142 | <v-layout> |
| 143 | <v-flex xs4 class="pt-4 subheading"> | 143 | <v-flex xs4 class="pt-4 subheading"> |
| 144 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 144 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 145 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 145 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 146 | </v-flex> | 146 | </v-flex> |
| 147 | <v-flex xs5 class="ml-3"> | 147 | <v-flex xs5 class="ml-3"> |
| 148 | <v-select | 148 | <v-select |
| 149 | :items="addclass" | 149 | :items="addclass" |
| 150 | label="Select Class" | 150 | label="Select Class" |
| 151 | v-model="timeTable.select" | 151 | v-model="timeTable.select" |
| 152 | item-text="classNum" | 152 | item-text="classNum" |
| 153 | item-value="_id" | 153 | item-value="_id" |
| 154 | @change="getClassSubject(timeTable.select)" | 154 | @change="getClassSubject(timeTable.select)" |
| 155 | :rules="classRules" | 155 | :rules="classRules" |
| 156 | required | 156 | required |
| 157 | ></v-select> | 157 | ></v-select> |
| 158 | </v-flex> | 158 | </v-flex> |
| 159 | </v-layout> | 159 | </v-layout> |
| 160 | </v-flex> | 160 | </v-flex> |
| 161 | <v-flex xs12 sm12> | 161 | <v-flex xs12 sm12> |
| 162 | <v-layout> | 162 | <v-layout> |
| 163 | <v-flex xs4 class="pt-4 subheading"> | 163 | <v-flex xs4 class="pt-4 subheading"> |
| 164 | <label class="right">Subject Name:</label> | 164 | <label class="right">Subject Name:</label> |
| 165 | </v-flex> | 165 | </v-flex> |
| 166 | <v-flex xs5 class="ml-3"> | 166 | <v-flex xs5 class="ml-3"> |
| 167 | <v-select | 167 | <v-select |
| 168 | :items="subjectList.subjects" | 168 | :items="subjectList.subjects" |
| 169 | label="Select Subject" | 169 | label="Select Subject" |
| 170 | v-model="addlectures.subjectName" | 170 | v-model="addlectures.subjectName" |
| 171 | item-text="subjectName" | 171 | item-text="subjectName" |
| 172 | item-value="subjectName" | 172 | item-value="subjectName" |
| 173 | :rules="subjectNameRules" | 173 | :rules="subjectNameRules" |
| 174 | required | 174 | required |
| 175 | ></v-select> | 175 | ></v-select> |
| 176 | <!-- <v-text-field | 176 | <!-- <v-text-field |
| 177 | v-model="addlectures.subjectName" | 177 | v-model="addlectures.subjectName" |
| 178 | :rules="subjectNameRules" | 178 | :rules="subjectNameRules" |
| 179 | placeholder="fill your Subject Name" | 179 | placeholder="fill your Subject Name" |
| 180 | type="text" | 180 | type="text" |
| 181 | ></v-text-field>--> | 181 | ></v-text-field>--> |
| 182 | </v-flex> | 182 | </v-flex> |
| 183 | </v-layout> | 183 | </v-layout> |
| 184 | </v-flex> | 184 | </v-flex> |
| 185 | <v-flex xs12 sm12> | 185 | <v-flex xs12 sm12> |
| 186 | <v-layout> | 186 | <v-layout> |
| 187 | <v-flex xs4 class="pt-4 subheading"> | 187 | <v-flex xs4 class="pt-4 subheading"> |
| 188 | <label class="right">Time In:</label> | 188 | <label class="right">Time In:</label> |
| 189 | </v-flex> | 189 | </v-flex> |
| 190 | <v-flex xs5 class="ml-3"> | 190 | <v-flex xs5 class="ml-3"> |
| 191 | <v-menu | 191 | <v-menu |
| 192 | ref="menuD" | 192 | ref="menuD" |
| 193 | :close-on-content-click="false" | 193 | :close-on-content-click="false" |
| 194 | v-model="menu5" | 194 | v-model="menu5" |
| 195 | :nudge-right="40" | 195 | :nudge-right="40" |
| 196 | lazy | 196 | lazy |
| 197 | transition="scale-transition" | 197 | transition="scale-transition" |
| 198 | offset-y | 198 | offset-y |
| 199 | full-width | 199 | full-width |
| 200 | max-width="290px" | 200 | max-width="290px" |
| 201 | min-width="290px" | 201 | min-width="290px" |
| 202 | > | 202 | > |
| 203 | <v-text-field | 203 | <v-text-field |
| 204 | slot="activator" | 204 | slot="activator" |
| 205 | v-model="addlectures.timeIn" | 205 | v-model="addlectures.timeIn" |
| 206 | label="Select your Time In" | 206 | label="Select your Time In" |
| 207 | append-icon="access_time" | 207 | append-icon="access_time" |
| 208 | :rules="timeInRules" | 208 | :rules="timeInRules" |
| 209 | readonly | 209 | readonly |
| 210 | ></v-text-field> | 210 | ></v-text-field> |
| 211 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> | 211 | <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> |
| 212 | </v-menu> | 212 | </v-menu> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | </v-layout> | 214 | </v-layout> |
| 215 | </v-flex> | 215 | </v-flex> |
| 216 | <v-flex xs12 sm12> | 216 | <v-flex xs12 sm12> |
| 217 | <v-layout> | 217 | <v-layout> |
| 218 | <v-flex xs4 class="pt-4 subheading"> | 218 | <v-flex xs4 class="pt-4 subheading"> |
| 219 | <label class="right">Time Out:</label> | 219 | <label class="right">Time Out:</label> |
| 220 | </v-flex> | 220 | </v-flex> |
| 221 | <v-flex xs5 class="ml-3"> | 221 | <v-flex xs5 class="ml-3"> |
| 222 | <v-menu | 222 | <v-menu |
| 223 | ref="menuE" | 223 | ref="menuE" |
| 224 | :close-on-content-click="false" | 224 | :close-on-content-click="false" |
| 225 | v-model="menu6" | 225 | v-model="menu6" |
| 226 | :nudge-right="40" | 226 | :nudge-right="40" |
| 227 | lazy | 227 | lazy |
| 228 | transition="scale-transition" | 228 | transition="scale-transition" |
| 229 | offset-y | 229 | offset-y |
| 230 | full-width | 230 | full-width |
| 231 | max-width="290px" | 231 | max-width="290px" |
| 232 | min-width="290px" | 232 | min-width="290px" |
| 233 | > | 233 | > |
| 234 | <v-text-field | 234 | <v-text-field |
| 235 | slot="activator" | 235 | slot="activator" |
| 236 | :rules="timeOutRules" | 236 | :rules="timeOutRules" |
| 237 | v-model="addlectures.timeOut" | 237 | v-model="addlectures.timeOut" |
| 238 | label="Select your Time Out" | 238 | label="Select your Time Out" |
| 239 | append-icon="access_time" | 239 | append-icon="access_time" |
| 240 | readonly | 240 | readonly |
| 241 | ></v-text-field> | 241 | ></v-text-field> |
| 242 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> | 242 | <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> |
| 243 | </v-menu> | 243 | </v-menu> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-layout> | 245 | </v-layout> |
| 246 | </v-flex> | 246 | </v-flex> |
| 247 | <v-flex xs12 sm12> | 247 | <v-flex xs12 sm12> |
| 248 | <v-layout> | 248 | <v-layout> |
| 249 | <v-flex xs4 class="pt-4 subheading"> | 249 | <v-flex xs4 class="pt-4 subheading"> |
| 250 | <label class="right">Select Teacher:</label> | 250 | <label class="right">Select Teacher:</label> |
| 251 | </v-flex> | 251 | </v-flex> |
| 252 | <v-flex xs5 class="ml-3"> | 252 | <v-flex xs5 class="ml-3"> |
| 253 | <v-select | 253 | <v-select |
| 254 | :items="addTeachers" | 254 | :items="addTeachers" |
| 255 | label="Select Teacher" | 255 | label="Select Teacher" |
| 256 | v-model="addlectures.teacherId" | 256 | v-model="addlectures.teacherId" |
| 257 | :rules="teacherRules" | 257 | :rules="teacherRules" |
| 258 | item-text="name" | 258 | item-text="name" |
| 259 | item-value="_id" | 259 | item-value="_id" |
| 260 | required | 260 | required |
| 261 | ></v-select> | 261 | ></v-select> |
| 262 | </v-flex> | 262 | </v-flex> |
| 263 | </v-layout> | 263 | </v-layout> |
| 264 | </v-flex> | 264 | </v-flex> |
| 265 | <v-layout> | 265 | <v-layout> |
| 266 | <v-flex xs12 sm8 offset-sm2> | 266 | <v-flex xs12 sm8 offset-sm2> |
| 267 | <v-card-actions> | 267 | <v-card-actions> |
| 268 | <v-spacer></v-spacer> | 268 | <v-spacer></v-spacer> |
| 269 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> | 269 | <v-btn round dark @click="AddLecture" class="add-button">Save</v-btn> |
| 270 | </v-card-actions> | 270 | </v-card-actions> |
| 271 | </v-flex> | 271 | </v-flex> |
| 272 | </v-layout> | 272 | </v-layout> |
| 273 | </v-container> | 273 | </v-container> |
| 274 | </v-form> | 274 | </v-form> |
| 275 | </v-card> | 275 | </v-card> |
| 276 | </v-flex> | 276 | </v-flex> |
| 277 | </v-dialog> | 277 | </v-dialog> |
| 278 | 278 | ||
| 279 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> | 279 | <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> |
| 280 | 280 | ||
| 281 | <v-dialog v-model="dialogUpdateLectures" max-width="600px"> | 281 | <v-dialog v-model="dialogUpdateLectures" max-width="600px" persistent> |
| 282 | <v-flex xs12 sm12 class> | 282 | <v-flex xs12 sm12 class> |
| 283 | <v-card flat class="card-style pa-2" dark> | 283 | <v-card flat class="card-style pa-2" dark> |
| 284 | <v-layout> | 284 | <v-layout> |
| 285 | <v-flex xs12> | 285 | <v-flex xs12> |
| 286 | <label class="title text-xs-center">Edit Lecture</label> | 286 | <label class="title text-xs-center">Edit Lecture</label> |
| 287 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> | 287 | <v-icon size="24" class="right" @click="dialogUpdateLectures = false">cancel</v-icon> |
| 288 | </v-flex> | 288 | </v-flex> |
| 289 | </v-layout> | 289 | </v-layout> |
| 290 | <v-flex xs12 sm12> | 290 | <v-flex xs12 sm12> |
| 291 | <v-layout> | 291 | <v-layout> |
| 292 | <v-flex xs4 class="pt-4 subheading"> | 292 | <v-flex xs4 class="pt-4 subheading"> |
| 293 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 293 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 294 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 294 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 295 | </v-flex> | 295 | </v-flex> |
| 296 | <v-flex xs7 sm6 class="ml-3"> | 296 | <v-flex xs7 sm6 class="ml-3"> |
| 297 | <v-select | 297 | <v-select |
| 298 | :items="addclass" | 298 | :items="addclass" |
| 299 | label="Select Class" | 299 | label="Select Class" |
| 300 | v-model="updateLectures.select" | 300 | v-model="updateLectures.select" |
| 301 | item-text="classNum" | 301 | item-text="classNum" |
| 302 | item-value="_id" | 302 | item-value="_id" |
| 303 | @change="getClassSubject(updateLectures.select)" | 303 | @change="getClassSubject(updateLectures.select)" |
| 304 | required | 304 | required |
| 305 | ></v-select> | 305 | ></v-select> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | </v-flex> | 308 | </v-flex> |
| 309 | <v-flex xs12 sm12> | 309 | <v-flex xs12 sm12> |
| 310 | <v-layout> | 310 | <v-layout> |
| 311 | <v-flex xs4 class="pt-4 subheading"> | 311 | <v-flex xs4 class="pt-4 subheading"> |
| 312 | <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> | 312 | <label class="right hidden-xs-only hidden-sm-only">Select Subject:</label> |
| 313 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 313 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 314 | </v-flex> | 314 | </v-flex> |
| 315 | <v-flex xs7 sm6 class="ml-3"> | 315 | <v-flex xs7 sm6 class="ml-3"> |
| 316 | <v-select | 316 | <v-select |
| 317 | :items="subjectList.subjects" | 317 | :items="subjectList.subjects" |
| 318 | label="Select Subject" | 318 | label="Select Subject" |
| 319 | v-model="updateLectures.subjectName" | 319 | v-model="updateLectures.subjectName" |
| 320 | item-text="subjectName" | 320 | item-text="subjectName" |
| 321 | item-value="subjectName" | 321 | item-value="subjectName" |
| 322 | required | 322 | required |
| 323 | ></v-select> | 323 | ></v-select> |
| 324 | <!-- <v-text-field | 324 | <!-- <v-text-field |
| 325 | v-model="updateLectures.subjectName" | 325 | v-model="updateLectures.subjectName" |
| 326 | placeholder="fill your Subject Name" | 326 | placeholder="fill your Subject Name" |
| 327 | type="text" | 327 | type="text" |
| 328 | ></v-text-field>--> | 328 | ></v-text-field>--> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | </v-layout> | 330 | </v-layout> |
| 331 | </v-flex> | 331 | </v-flex> |
| 332 | <v-flex xs12 sm12> | 332 | <v-flex xs12 sm12> |
| 333 | <v-layout> | 333 | <v-layout> |
| 334 | <v-flex xs5 sm4 class="pt-4 subheading"> | 334 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 335 | <label class="right">Time In:</label> | 335 | <label class="right">Time In:</label> |
| 336 | </v-flex> | 336 | </v-flex> |
| 337 | <v-flex xs7 sm6 class="ml-3"> | 337 | <v-flex xs7 sm6 class="ml-3"> |
| 338 | <v-menu | 338 | <v-menu |
| 339 | ref="menuC" | 339 | ref="menuC" |
| 340 | :close-on-content-click="false" | 340 | :close-on-content-click="false" |
| 341 | v-model="menu4" | 341 | v-model="menu4" |
| 342 | :nudge-right="40" | 342 | :nudge-right="40" |
| 343 | lazy | 343 | lazy |
| 344 | transition="scale-transition" | 344 | transition="scale-transition" |
| 345 | offset-y | 345 | offset-y |
| 346 | full-width | 346 | full-width |
| 347 | max-width="290px" | 347 | max-width="290px" |
| 348 | min-width="290px" | 348 | min-width="290px" |
| 349 | > | 349 | > |
| 350 | <v-text-field | 350 | <v-text-field |
| 351 | slot="activator" | 351 | slot="activator" |
| 352 | v-model="updateLectures.timeIn" | 352 | v-model="updateLectures.timeIn" |
| 353 | placeholder="Select your Time In" | 353 | placeholder="Select your Time In" |
| 354 | append-icon="access_time" | 354 | append-icon="access_time" |
| 355 | readonly | 355 | readonly |
| 356 | ></v-text-field> | 356 | ></v-text-field> |
| 357 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> | 357 | <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> |
| 358 | </v-menu> | 358 | </v-menu> |
| 359 | </v-flex> | 359 | </v-flex> |
| 360 | </v-layout> | 360 | </v-layout> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | <v-flex xs12 sm12> | 362 | <v-flex xs12 sm12> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs5 sm4 class="pt-4 subheading"> | 364 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 365 | <label class="right">Time Out:</label> | 365 | <label class="right">Time Out:</label> |
| 366 | </v-flex> | 366 | </v-flex> |
| 367 | <v-flex xs7 sm6 class="ml-3"> | 367 | <v-flex xs7 sm6 class="ml-3"> |
| 368 | <v-menu | 368 | <v-menu |
| 369 | ref="menuB" | 369 | ref="menuB" |
| 370 | :close-on-content-click="false" | 370 | :close-on-content-click="false" |
| 371 | v-model="menu3" | 371 | v-model="menu3" |
| 372 | :nudge-right="40" | 372 | :nudge-right="40" |
| 373 | lazy | 373 | lazy |
| 374 | transition="scale-transition" | 374 | transition="scale-transition" |
| 375 | offset-y | 375 | offset-y |
| 376 | full-width | 376 | full-width |
| 377 | max-width="290px" | 377 | max-width="290px" |
| 378 | min-width="290px" | 378 | min-width="290px" |
| 379 | > | 379 | > |
| 380 | <v-text-field | 380 | <v-text-field |
| 381 | slot="activator" | 381 | slot="activator" |
| 382 | v-model="updateLectures.timeOut" | 382 | v-model="updateLectures.timeOut" |
| 383 | placeholder="Select your Time Out" | 383 | placeholder="Select your Time Out" |
| 384 | append-icon="access_time" | 384 | append-icon="access_time" |
| 385 | readonly | 385 | readonly |
| 386 | ></v-text-field> | 386 | ></v-text-field> |
| 387 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> | 387 | <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> |
| 388 | </v-menu> | 388 | </v-menu> |
| 389 | </v-flex> | 389 | </v-flex> |
| 390 | </v-layout> | 390 | </v-layout> |
| 391 | </v-flex> | 391 | </v-flex> |
| 392 | <v-flex xs12 sm12> | 392 | <v-flex xs12 sm12> |
| 393 | <v-layout> | 393 | <v-layout> |
| 394 | <v-flex xs5 sm4 class="pt-4 subheading"> | 394 | <v-flex xs5 sm4 class="pt-4 subheading"> |
| 395 | <label class="right">Select Teacher:</label> | 395 | <label class="right">Select Teacher:</label> |
| 396 | </v-flex> | 396 | </v-flex> |
| 397 | <v-flex xs7 sm6 class="ml-3"> | 397 | <v-flex xs7 sm6 class="ml-3"> |
| 398 | <v-select | 398 | <v-select |
| 399 | :items="addTeachers" | 399 | :items="addTeachers" |
| 400 | label="Select Teacher" | 400 | label="Select Teacher" |
| 401 | v-model="updateLectures.teacherId" | 401 | v-model="updateLectures.teacherId" |
| 402 | item-text="name" | 402 | item-text="name" |
| 403 | item-value="_id" | 403 | item-value="_id" |
| 404 | required | 404 | required |
| 405 | ></v-select> | 405 | ></v-select> |
| 406 | </v-flex> | 406 | </v-flex> |
| 407 | </v-layout> | 407 | </v-layout> |
| 408 | </v-flex> | 408 | </v-flex> |
| 409 | <v-layout> | 409 | <v-layout> |
| 410 | <v-flex xs12 sm10 offset-sm1> | 410 | <v-flex xs12 sm10 offset-sm1> |
| 411 | <v-card-actions> | 411 | <v-card-actions> |
| 412 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> | 412 | <!-- <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> --> |
| 413 | <v-spacer></v-spacer> | 413 | <v-spacer></v-spacer> |
| 414 | <v-btn | 414 | <v-btn |
| 415 | round | 415 | round |
| 416 | dark | 416 | dark |
| 417 | class="add-button" | 417 | class="add-button" |
| 418 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" | 418 | @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" |
| 419 | >Save</v-btn> | 419 | >Save</v-btn> |
| 420 | </v-card-actions> | 420 | </v-card-actions> |
| 421 | </v-flex> | 421 | </v-flex> |
| 422 | </v-layout> | 422 | </v-layout> |
| 423 | </v-card> | 423 | </v-card> |
| 424 | </v-flex> | 424 | </v-flex> |
| 425 | </v-dialog> | 425 | </v-dialog> |
| 426 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> | 426 | <!-- ****** EXISTING-USERS TIME-TABLE ****** --> |
| 427 | 427 | ||
| 428 | <!-- <v-card flat> | 428 | <!-- <v-card flat> |
| 429 | <v-card-actions class="hidden-xs-only hidden-sm-only"> | 429 | <v-card-actions class="hidden-xs-only hidden-sm-only"> |
| 430 | <v-layout> | 430 | <v-layout> |
| 431 | <label class="right mt-4 ml-5">Select Class:</label> | 431 | <label class="right mt-4 ml-5">Select Class:</label> |
| 432 | <v-select | 432 | <v-select |
| 433 | :items="addclass" | 433 | :items="addclass" |
| 434 | label="Select Class" | 434 | label="Select Class" |
| 435 | v-model="selectTimeTable.select" | 435 | v-model="selectTimeTable.select" |
| 436 | item-text="classNum" | 436 | item-text="classNum" |
| 437 | item-value="_id" | 437 | item-value="_id" |
| 438 | name="Select Class" | 438 | name="Select Class" |
| 439 | @change="getSections(selectTimeTable.select)" | 439 | @change="getSections(selectTimeTable.select)" |
| 440 | class="px-4" | 440 | class="px-4" |
| 441 | required | 441 | required |
| 442 | ></v-select> | 442 | ></v-select> |
| 443 | <label class="right mt-4">Select Section:</label> | 443 | <label class="right mt-4">Select Section:</label> |
| 444 | <v-select | 444 | <v-select |
| 445 | :items="addSection" | 445 | :items="addSection" |
| 446 | label="Select Section" | 446 | label="Select Section" |
| 447 | v-model="selectTimeTable.selectSection" | 447 | v-model="selectTimeTable.selectSection" |
| 448 | item-text="name" | 448 | item-text="name" |
| 449 | item-value="_id" | 449 | item-value="_id" |
| 450 | name="Select Section" | 450 | name="Select Section" |
| 451 | class="pl-3" | 451 | class="pl-3" |
| 452 | required | 452 | required |
| 453 | ></v-select> | 453 | ></v-select> |
| 454 | </v-layout> | 454 | </v-layout> |
| 455 | <v-spacer></v-spacer> | 455 | <v-spacer></v-spacer> |
| 456 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> | 456 | <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn> |
| 457 | </v-card-actions> | 457 | </v-card-actions> |
| 458 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 458 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 459 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 459 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 460 | <label>Select Class:</label> | 460 | <label>Select Class:</label> |
| 461 | </v-flex> | 461 | </v-flex> |
| 462 | <v-flex xs6 sm9> | 462 | <v-flex xs6 sm9> |
| 463 | <v-select | 463 | <v-select |
| 464 | :items="addclass" | 464 | :items="addclass" |
| 465 | label="Select Class" | 465 | label="Select Class" |
| 466 | v-model="selectTimeTable.select" | 466 | v-model="selectTimeTable.select" |
| 467 | item-text="classNum" | 467 | item-text="classNum" |
| 468 | item-value="_id" | 468 | item-value="_id" |
| 469 | name="Select Class" | 469 | name="Select Class" |
| 470 | @change="getSections(selectTimeTable.select)" | 470 | @change="getSections(selectTimeTable.select)" |
| 471 | required | 471 | required |
| 472 | ></v-select> | 472 | ></v-select> |
| 473 | </v-flex> | 473 | </v-flex> |
| 474 | </v-layout> | 474 | </v-layout> |
| 475 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 475 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 476 | <v-flex xs4 sm2 class="mt-4 ml-2"> | 476 | <v-flex xs4 sm2 class="mt-4 ml-2"> |
| 477 | <label>Select Section:</label> | 477 | <label>Select Section:</label> |
| 478 | </v-flex> | 478 | </v-flex> |
| 479 | <v-flex xs6 sm9> | 479 | <v-flex xs6 sm9> |
| 480 | <v-select | 480 | <v-select |
| 481 | :items="addSection" | 481 | :items="addSection" |
| 482 | label="Select Section" | 482 | label="Select Section" |
| 483 | v-model="selectTimeTable.selectSection" | 483 | v-model="selectTimeTable.selectSection" |
| 484 | item-text="name" | 484 | item-text="name" |
| 485 | item-value="_id" | 485 | item-value="_id" |
| 486 | name="Select Section" | 486 | name="Select Section" |
| 487 | required | 487 | required |
| 488 | ></v-select> | 488 | ></v-select> |
| 489 | </v-flex> | 489 | </v-flex> |
| 490 | </v-layout> | 490 | </v-layout> |
| 491 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> | 491 | <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> |
| 492 | <v-flex xs12> | 492 | <v-flex xs12> |
| 493 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> | 493 | <v-btn @click="findTimeTable()" round dark :loading="loading" class="right mr-4 mb-2">Find</v-btn> |
| 494 | </v-flex> | 494 | </v-flex> |
| 495 | </v-layout> | 495 | </v-layout> |
| 496 | </v-card>--> | 496 | </v-card>--> |
| 497 | <v-flex xs12> | 497 | <v-flex xs12> |
| 498 | <v-toolbar color="transparent" flat> | 498 | <v-toolbar color="transparent" flat> |
| 499 | <v-btn | 499 | <v-btn |
| 500 | fab | 500 | fab |
| 501 | dark | 501 | dark |
| 502 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 502 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 503 | small | 503 | small |
| 504 | @click="addTimeTableDialog = true" | 504 | @click="addTimeTableDialog = true" |
| 505 | > | 505 | > |
| 506 | <v-icon dark>add</v-icon> | 506 | <v-icon dark>add</v-icon> |
| 507 | </v-btn> | 507 | </v-btn> |
| 508 | <v-btn | 508 | <v-btn |
| 509 | round | 509 | round |
| 510 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 510 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 511 | dark | 511 | dark |
| 512 | @click="addTimeTableDialog = true" | 512 | @click="addTimeTableDialog = true" |
| 513 | > | 513 | > |
| 514 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table | 514 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Time Table |
| 515 | </v-btn> | 515 | </v-btn> |
| 516 | <v-flex xs4 md2> | 516 | <v-flex xs4 md2> |
| 517 | <v-select | 517 | <v-select |
| 518 | :items="addclass" | 518 | :items="addclass" |
| 519 | label="Select Class" | 519 | label="Select Class" |
| 520 | v-model="selectTimeTable.select" | 520 | v-model="selectTimeTable.select" |
| 521 | item-text="classNum" | 521 | item-text="classNum" |
| 522 | item-value="_id" | 522 | item-value="_id" |
| 523 | name="Select Class" | 523 | name="Select Class" |
| 524 | @change="getSections(selectTimeTable.select)" | 524 | @change="getSections(selectTimeTable.select)" |
| 525 | required | 525 | required |
| 526 | ></v-select> | 526 | ></v-select> |
| 527 | </v-flex> | 527 | </v-flex> |
| 528 | <v-flex xs4 md2 class="ml-4"> | 528 | <v-flex xs4 md2 class="ml-4"> |
| 529 | <v-select | 529 | <v-select |
| 530 | :items="addSection" | 530 | :items="addSection" |
| 531 | label="Select Section" | 531 | label="Select Section" |
| 532 | v-model="selectTimeTable.selectSection" | 532 | v-model="selectTimeTable.selectSection" |
| 533 | item-text="name" | 533 | item-text="name" |
| 534 | item-value="_id" | 534 | item-value="_id" |
| 535 | name="Select Section" | 535 | name="Select Section" |
| 536 | required | 536 | required |
| 537 | ></v-select> | 537 | ></v-select> |
| 538 | </v-flex> | 538 | </v-flex> |
| 539 | <v-spacer></v-spacer> | 539 | <v-spacer></v-spacer> |
| 540 | <v-btn | 540 | <v-btn |
| 541 | @click="findTimeTable()" | 541 | @click="findTimeTable()" |
| 542 | round | 542 | round |
| 543 | dark | 543 | dark |
| 544 | :loading="loading" | 544 | :loading="loading" |
| 545 | class="right mb-2 open-dialog-button" | 545 | class="right mb-2 open-dialog-button" |
| 546 | >Find</v-btn> | 546 | >Find</v-btn> |
| 547 | <v-card-title class="body-1" v-show="show"> | 547 | <v-card-title class="body-1" v-show="show"> |
| 548 | <v-btn icon large flat @click="displaySearch"> | 548 | <v-btn icon large flat @click="displaySearch"> |
| 549 | <v-avatar size="27"> | 549 | <v-avatar size="27"> |
| 550 | <img src="/static/icon/search.png" alt="icon" /> | 550 | <img src="/static/icon/search.png" alt="icon" /> |
| 551 | </v-avatar> | 551 | </v-avatar> |
| 552 | </v-btn> | 552 | </v-btn> |
| 553 | </v-card-title> | 553 | </v-card-title> |
| 554 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 554 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 555 | <v-layout> | 555 | <v-layout> |
| 556 | <v-text-field | 556 | <v-text-field |
| 557 | autofocus | 557 | autofocus |
| 558 | v-model="search" | 558 | v-model="search" |
| 559 | label="Search" | 559 | label="Search" |
| 560 | prepend-inner-icon="search" | 560 | prepend-inner-icon="search" |
| 561 | color="primary" | 561 | color="primary" |
| 562 | ></v-text-field> | 562 | ></v-text-field> |
| 563 | <v-icon @click="closeSearch" color="error">close</v-icon> | 563 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 564 | </v-layout> | 564 | </v-layout> |
| 565 | </v-flex> | 565 | </v-flex> |
| 566 | </v-toolbar> | 566 | </v-toolbar> |
| 567 | <v-data-table | 567 | <v-data-table |
| 568 | :headers="headers" | 568 | :headers="headers" |
| 569 | :items="desserts" | 569 | :items="desserts" |
| 570 | :pagination.sync="pagination" | 570 | :pagination.sync="pagination" |
| 571 | :search="search" | 571 | :search="search" |
| 572 | item-key="_id" | 572 | item-key="_id" |
| 573 | > | 573 | > |
| 574 | <template slot="items" slot-scope="props"> | 574 | <template slot="items" slot-scope="props"> |
| 575 | <tr | 575 | <tr |
| 576 | style="cursor: pointer;" | 576 | style="cursor: pointer;" |
| 577 | class="tr" | 577 | class="tr" |
| 578 | @click="getTimeTable(props.item), props.expanded = !props.expanded" | 578 | @click="getTimeTable(props.item), props.expanded = !props.expanded" |
| 579 | > | 579 | > |
| 580 | <td class="td td-row">{{ props.index + 1}}</td> | 580 | <td class="td td-row">{{ props.index + 1}}</td> |
| 581 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> | 581 | <td class="text-xs-center td td-row">{{ props.item.classData.classNum}}</td> |
| 582 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> | 582 | <td class="text-xs-center td td-row">{{ props.item.sectionData.name }}</td> |
| 583 | <td class="text-xs-center td td-row"> | 583 | <td class="text-xs-center td td-row"> |
| 584 | <span> | 584 | <span> |
| 585 | <v-tooltip top> | 585 | <v-tooltip top> |
| 586 | <img | 586 | <img |
| 587 | slot="activator" | 587 | slot="activator" |
| 588 | style="cursor:pointer; width:20px; height:20px; " | 588 | style="cursor:pointer; width:20px; height:20px; " |
| 589 | class="mr-3" | 589 | class="mr-3" |
| 590 | @click="editItem(props.item)" | 590 | @click="editItem(props.item)" |
| 591 | src="/static/icon/edit.png" | 591 | src="/static/icon/edit.png" |
| 592 | /> | 592 | /> |
| 593 | <span>Edit</span> | 593 | <span>Edit</span> |
| 594 | </v-tooltip> | 594 | </v-tooltip> |
| 595 | <v-tooltip top> | 595 | <v-tooltip top> |
| 596 | <img | 596 | <img |
| 597 | slot="activator" | 597 | slot="activator" |
| 598 | style="cursor:pointer; width:20px; height:20px; " | 598 | style="cursor:pointer; width:20px; height:20px; " |
| 599 | class="mr-3" | 599 | class="mr-3" |
| 600 | @click="deleteItem(props.item)" | 600 | @click="deleteItem(props.item)" |
| 601 | src="/static/icon/delete.png" | 601 | src="/static/icon/delete.png" |
| 602 | /> | 602 | /> |
| 603 | <span>Delete</span> | 603 | <span>Delete</span> |
| 604 | </v-tooltip> | 604 | </v-tooltip> |
| 605 | <v-tooltip top> | 605 | <v-tooltip top> |
| 606 | <img | 606 | <img |
| 607 | slot="activator" | 607 | slot="activator" |
| 608 | style="cursor:pointer; width:20px; height:20px; " | 608 | style="cursor:pointer; width:20px; height:20px; " |
| 609 | class="mr-3" | 609 | class="mr-3" |
| 610 | src="/static/icon/add1.png" | 610 | src="/static/icon/add1.png" |
| 611 | @click="addSchedule(props.item._id)" | 611 | @click="addSchedule(props.item._id)" |
| 612 | /> | 612 | /> |
| 613 | <span>Add</span> | 613 | <span>Add</span> |
| 614 | </v-tooltip> | 614 | </v-tooltip> |
| 615 | </span> | 615 | </span> |
| 616 | </td> | 616 | </td> |
| 617 | </tr> | 617 | </tr> |
| 618 | </template> | 618 | </template> |
| 619 | <template slot="expand" slot-scope="props"> | 619 | <template slot="expand" slot-scope="props"> |
| 620 | <v-data-table | 620 | <v-data-table |
| 621 | :items="timeTableList.schedule" | 621 | :items="timeTableList.schedule" |
| 622 | hide-actions | 622 | hide-actions |
| 623 | item-key="title" | 623 | item-key="title" |
| 624 | style="width: auto;" | 624 | style="width: auto;" |
| 625 | > | 625 | > |
| 626 | <template slot="items" slot-scope="props"> | 626 | <template slot="items" slot-scope="props"> |
| 627 | <tr class="tr"> | 627 | <tr class="tr"> |
| 628 | <td class="text-xs-left subheading table-td td td-row"> | 628 | <td class="text-xs-left subheading table-td td td-row"> |
| 629 | <b>{{ props.item.day }}</b> | 629 | <b>{{ props.item.day }}</b> |
| 630 | </td> | 630 | </td> |
| 631 | <td class="table-td td td-row"> | 631 | <td class="table-td td td-row"> |
| 632 | <b>Subject</b> | 632 | <b>Subject</b> |
| 633 | <br /> | 633 | <br /> |
| 634 | <b>Time In</b> | 634 | <b>Time In</b> |
| 635 | <br /> | 635 | <br /> |
| 636 | <b>Time Out</b> | 636 | <b>Time Out</b> |
| 637 | </td> | 637 | </td> |
| 638 | <td v-for="list in props.item.lectures" class="table-td td td-row"> | 638 | <td v-for="list in props.item.lectures" class="table-td td td-row"> |
| 639 | <b>{{ list.subjectName }}</b> | 639 | <b>{{ list.subjectName }}</b> |
| 640 | <img | 640 | <img |
| 641 | style="cursor:pointer; width:20px; height:18px; " | 641 | style="cursor:pointer; width:20px; height:18px; " |
| 642 | class="mr-2 ml-2" | 642 | class="mr-2 ml-2" |
| 643 | src="/static/icon/edit1.png" | 643 | src="/static/icon/edit1.png" |
| 644 | @click="updateTimeTable(list, timeTableList,props.item._id)" | 644 | @click="updateTimeTable(list, timeTableList,props.item._id)" |
| 645 | /> | 645 | /> |
| 646 | <img | 646 | <img |
| 647 | style="cursor:pointer; width:20px; height:20px; " | 647 | style="cursor:pointer; width:20px; height:20px; " |
| 648 | src="/static/icon/delete1.png" | 648 | src="/static/icon/delete1.png" |
| 649 | @click="deleteTimeTable(list,props.item.lectures)" | 649 | @click="deleteTimeTable(list,props.item.lectures)" |
| 650 | /> | 650 | /> |
| 651 | <br /> | 651 | <br /> |
| 652 | {{list.timeIn}} | 652 | {{list.timeIn}} |
| 653 | <br /> | 653 | <br /> |
| 654 | {{list.timeOut}} | 654 | {{list.timeOut}} |
| 655 | </td> | 655 | </td> |
| 656 | <td class="td td-row"> | 656 | <td class="td td-row"> |
| 657 | <v-tooltip top> | 657 | <v-tooltip top> |
| 658 | <v-icon | 658 | <v-icon |
| 659 | slot="activator" | 659 | slot="activator" |
| 660 | color="black" | 660 | color="black" |
| 661 | @click="addLecture(props.item._id, timeTableList._id)" | 661 | @click="addLecture(props.item._id, timeTableList._id)" |
| 662 | >add_circle_outline</v-icon> | 662 | >add_circle_outline</v-icon> |
| 663 | <span>Add</span> | 663 | <span>Add</span> |
| 664 | </v-tooltip> | 664 | </v-tooltip> |
| 665 | </td> | 665 | </td> |
| 666 | </tr> | 666 | </tr> |
| 667 | </template> | 667 | </template> |
| 668 | </v-data-table> | 668 | </v-data-table> |
| 669 | </template> | 669 | </template> |
| 670 | <v-alert | 670 | <v-alert |
| 671 | slot="no-results" | 671 | slot="no-results" |
| 672 | :value="true" | 672 | :value="true" |
| 673 | color="error" | 673 | color="error" |
| 674 | icon="warning" | 674 | icon="warning" |
| 675 | >Your search for "{{ search }}" found no results.</v-alert> | 675 | >Your search for "{{ search }}" found no results.</v-alert> |
| 676 | </v-data-table> | 676 | </v-data-table> |
| 677 | <br /> | 677 | <br /> |
| 678 | <br /> | 678 | <br /> |
| 679 | </v-flex> | 679 | </v-flex> |
| 680 | 680 | ||
| 681 | <!-- ****** ADD TIME-TABLE ****** --> | 681 | <!-- ****** ADD TIME-TABLE ****** --> |
| 682 | <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog"> | 682 | <v-dialog v-model="addTimeTableDialog" max-width="600px" v-if="addTimeTableDialog" persistent> |
| 683 | <v-card flat class="card-style pa-2" dark> | 683 | <v-card flat class="card-style pa-2" dark> |
| 684 | <v-layout> | 684 | <v-layout> |
| 685 | <v-flex xs12> | 685 | <v-flex xs12> |
| 686 | <label class="title text-xs-center">Add Time Table</label> | 686 | <label class="title text-xs-center">Add Time Table</label> |
| 687 | <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> | 687 | <v-icon size="24" class="right" @click="closeAddTimeTableModel">cancel</v-icon> |
| 688 | </v-flex> | 688 | </v-flex> |
| 689 | </v-layout> | 689 | </v-layout> |
| 690 | <v-form ref="form" v-model="valid" lazy-validation> | 690 | <v-form ref="form" v-model="valid" lazy-validation> |
| 691 | <v-container fluid class="pt-3"> | 691 | <v-container fluid class="pt-3"> |
| 692 | <v-flex xs12> | 692 | <v-flex xs12> |
| 693 | <v-layout> | 693 | <v-layout> |
| 694 | <v-flex xs4 class="pt-4 subheading"> | 694 | <v-flex xs4 class="pt-4 subheading"> |
| 695 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> | 695 | <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> |
| 696 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> | 696 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> |
| 697 | </v-flex> | 697 | </v-flex> |
| 698 | <v-flex xs8 sm6 class="ml-3"> | 698 | <v-flex xs8 sm6 class="ml-3"> |
| 699 | <v-select | 699 | <v-select |
| 700 | :items="addclass" | 700 | :items="addclass" |
| 701 | label="Select Class" | 701 | label="Select Class" |
| 702 | v-model="timeTable.select" | 702 | v-model="timeTable.select" |
| 703 | item-text="classNum" | 703 | item-text="classNum" |
| 704 | item-value="_id" | 704 | item-value="_id" |
| 705 | @change="getSections(timeTable.select)" | 705 | @change="getSections(timeTable.select)" |
| 706 | :rules="classRules" | 706 | :rules="classRules" |
| 707 | required | 707 | required |
| 708 | ></v-select> | 708 | ></v-select> |
| 709 | </v-flex> | 709 | </v-flex> |
| 710 | </v-layout> | 710 | </v-layout> |
| 711 | </v-flex> | 711 | </v-flex> |
| 712 | <v-flex xs12> | 712 | <v-flex xs12> |
| 713 | <v-layout> | 713 | <v-layout> |
| 714 | <v-flex xs4 class="pt-4 subheading"> | 714 | <v-flex xs4 class="pt-4 subheading"> |
| 715 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> | 715 | <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> |
| 716 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> | 716 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> |
| 717 | </v-flex> | 717 | </v-flex> |
| 718 | <v-flex sm6 xs8 class="ml-3"> | 718 | <v-flex sm6 xs8 class="ml-3"> |
| 719 | <v-select | 719 | <v-select |
| 720 | :items="addSection" | 720 | :items="addSection" |
| 721 | label="Select Section" | 721 | label="Select Section" |
| 722 | v-model="timeTable.selectSection" | 722 | v-model="timeTable.selectSection" |
| 723 | item-text="name" | 723 | item-text="name" |
| 724 | item-value="_id" | 724 | item-value="_id" |
| 725 | :rules="sectionRules" | 725 | :rules="sectionRules" |
| 726 | @change="getClassSubject(timeTable.select)" | 726 | @change="getClassSubject(timeTable.select)" |
| 727 | required | 727 | required |
| 728 | ></v-select> | 728 | ></v-select> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | </v-layout> | 730 | </v-layout> |
| 731 | <v-layout> | 731 | <v-layout> |
| 732 | <v-flex xs4 class="pt-4 subheading"> | 732 | <v-flex xs4 class="pt-4 subheading"> |
| 733 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> | 733 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> |
| 734 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 734 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 735 | </v-flex> | 735 | </v-flex> |
| 736 | <v-flex xs8 sm6 class="ml-3"> | 736 | <v-flex xs8 sm6 class="ml-3"> |
| 737 | <v-select | 737 | <v-select |
| 738 | :items="subjectList.subjects" | 738 | :items="subjectList.subjects" |
| 739 | label="Select Subject" | 739 | label="Select Subject" |
| 740 | v-model="timeTable.subjectName" | 740 | v-model="timeTable.subjectName" |
| 741 | item-text="subjectName" | 741 | item-text="subjectName" |
| 742 | item-value="subjectName" | 742 | item-value="subjectName" |
| 743 | :rules="subjectNameRules" | 743 | :rules="subjectNameRules" |
| 744 | required | 744 | required |
| 745 | ></v-select> | 745 | ></v-select> |
| 746 | </v-flex> | 746 | </v-flex> |
| 747 | </v-layout> | 747 | </v-layout> |
| 748 | </v-flex> | 748 | </v-flex> |
| 749 | <v-flex xs12> | 749 | <v-flex xs12> |
| 750 | <v-layout> | 750 | <v-layout> |
| 751 | <v-flex xs4 class="pt-4 subheading"> | 751 | <v-flex xs4 class="pt-4 subheading"> |
| 752 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> | 752 | <label class="right hidden-xs-only hidden-sm-only">Select Teacher:</label> |
| 753 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> | 753 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Teacher:</label> |
| 754 | </v-flex> | 754 | </v-flex> |
| 755 | <v-flex xs8 sm6 class="ml-3"> | 755 | <v-flex xs8 sm6 class="ml-3"> |
| 756 | <v-select | 756 | <v-select |
| 757 | :items="addTeachers" | 757 | :items="addTeachers" |
| 758 | label="Select Teacher" | 758 | label="Select Teacher" |
| 759 | v-model="timeTable.selectTeacher" | 759 | v-model="timeTable.selectTeacher" |
| 760 | item-text="name" | 760 | item-text="name" |
| 761 | item-value="_id" | 761 | item-value="_id" |
| 762 | :rules="teacherRules" | 762 | :rules="teacherRules" |
| 763 | required | 763 | required |
| 764 | ></v-select> | 764 | ></v-select> |
| 765 | </v-flex> | 765 | </v-flex> |
| 766 | </v-layout> | 766 | </v-layout> |
| 767 | </v-flex> | 767 | </v-flex> |
| 768 | <v-flex xs12> | 768 | <v-flex xs12> |
| 769 | <v-layout> | 769 | <v-layout> |
| 770 | <v-flex xs4 class="pt-4 subheading"> | 770 | <v-flex xs4 class="pt-4 subheading"> |
| 771 | <label class="right">Select Day:</label> | 771 | <label class="right">Select Day:</label> |
| 772 | </v-flex> | 772 | </v-flex> |
| 773 | <v-flex xs8 sm6 class="ml-3"> | 773 | <v-flex xs8 sm6 class="ml-3"> |
| 774 | <v-select | 774 | <v-select |
| 775 | :items="addOneDay" | 775 | :items="addOneDay" |
| 776 | label="Select Day" | 776 | label="Select Day" |
| 777 | v-model="timeTable.selectDay" | 777 | v-model="timeTable.selectDay" |
| 778 | :rules="dayRules" | 778 | :rules="dayRules" |
| 779 | item-text="name" | 779 | item-text="name" |
| 780 | item-value="_id" | 780 | item-value="_id" |
| 781 | required | 781 | required |
| 782 | ></v-select> | 782 | ></v-select> |
| 783 | </v-flex> | 783 | </v-flex> |
| 784 | </v-layout> | 784 | </v-layout> |
| 785 | </v-flex> | 785 | </v-flex> |
| 786 | <!-- <v-flex xs12> | 786 | <!-- <v-flex xs12> |
| 787 | <v-layout> | 787 | <v-layout> |
| 788 | <v-flex xs4 class="pt-4 subheading"> | 788 | <v-flex xs4 class="pt-4 subheading"> |
| 789 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> | 789 | <label class="right hidden-xs-only hidden-sm-only">Subject Name:</label> |
| 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> | 790 | <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> |
| 791 | </v-flex> | 791 | </v-flex> |
| 792 | <v-flex xs8 sm6 class="ml-3"> | 792 | <v-flex xs8 sm6 class="ml-3"> |
| 793 | <v-text-field | 793 | <v-text-field |
| 794 | placeholder="fill your Subject Name" | 794 | placeholder="fill your Subject Name" |
| 795 | :rules="subjectNameRules" | 795 | :rules="subjectNameRules" |
| 796 | v-model="timeTable.subjectName" | 796 | v-model="timeTable.subjectName" |
| 797 | type="text" | 797 | type="text" |
| 798 | required | 798 | required |
| 799 | ></v-text-field> | 799 | ></v-text-field> |
| 800 | </v-flex> | 800 | </v-flex> |
| 801 | </v-layout> | 801 | </v-layout> |
| 802 | </v-flex>--> | 802 | </v-flex>--> |
| 803 | <v-flex xs12> | 803 | <v-flex xs12> |
| 804 | <v-layout> | 804 | <v-layout> |
| 805 | <v-flex xs4 class="pt-4 subheading"> | 805 | <v-flex xs4 class="pt-4 subheading"> |
| 806 | <label class="right">Time In:</label> | 806 | <label class="right">Time In:</label> |
| 807 | </v-flex> | 807 | </v-flex> |
| 808 | <v-flex xs8 sm6 class="ml-3"> | 808 | <v-flex xs8 sm6 class="ml-3"> |
| 809 | <v-menu | 809 | <v-menu |
| 810 | ref="menuA" | 810 | ref="menuA" |
| 811 | :close-on-content-click="false" | 811 | :close-on-content-click="false" |
| 812 | v-model="menu2" | 812 | v-model="menu2" |
| 813 | :nudge-right="40" | 813 | :nudge-right="40" |
| 814 | :return-value.sync="timeTable.timeIn" | 814 | :return-value.sync="timeTable.timeIn" |
| 815 | lazy | 815 | lazy |
| 816 | transition="scale-transition" | 816 | transition="scale-transition" |
| 817 | offset-y | 817 | offset-y |
| 818 | full-width | 818 | full-width |
| 819 | max-width="290px" | 819 | max-width="290px" |
| 820 | min-width="290px" | 820 | min-width="290px" |
| 821 | > | 821 | > |
| 822 | <v-text-field | 822 | <v-text-field |
| 823 | slot="activator" | 823 | slot="activator" |
| 824 | v-model="timeTable.timeIn" | 824 | v-model="timeTable.timeIn" |
| 825 | label="Select your timeIn" | 825 | label="Select your timeIn" |
| 826 | append-icon="access_time" | 826 | append-icon="access_time" |
| 827 | :rules="timeInRules" | 827 | :rules="timeInRules" |
| 828 | readonly | 828 | readonly |
| 829 | ></v-text-field> | 829 | ></v-text-field> |
| 830 | <v-time-picker | 830 | <v-time-picker |
| 831 | v-model="timeTable.timeIn" | 831 | v-model="timeTable.timeIn" |
| 832 | @change="$refs.menuA.save(timeTable.timeIn)" | 832 | @change="$refs.menuA.save(timeTable.timeIn)" |
| 833 | ></v-time-picker> | 833 | ></v-time-picker> |
| 834 | </v-menu> | 834 | </v-menu> |
| 835 | </v-flex> | 835 | </v-flex> |
| 836 | </v-layout> | 836 | </v-layout> |
| 837 | </v-flex> | 837 | </v-flex> |
| 838 | <v-flex xs12> | 838 | <v-flex xs12> |
| 839 | <v-layout> | 839 | <v-layout> |
| 840 | <v-flex xs4 class="pt-4 subheading"> | 840 | <v-flex xs4 class="pt-4 subheading"> |
| 841 | <label class="right">Time Out:</label> | 841 | <label class="right">Time Out:</label> |
| 842 | </v-flex> | 842 | </v-flex> |
| 843 | <v-flex xs8 sm6 class="ml-3"> | 843 | <v-flex xs8 sm6 class="ml-3"> |
| 844 | <v-menu | 844 | <v-menu |
| 845 | ref="menu" | 845 | ref="menu" |
| 846 | :close-on-content-click="false" | 846 | :close-on-content-click="false" |
| 847 | v-model="menu1" | 847 | v-model="menu1" |
| 848 | :nudge-right="40" | 848 | :nudge-right="40" |
| 849 | :return-value.sync="timeTable.timeOut" | 849 | :return-value.sync="timeTable.timeOut" |
| 850 | lazy | 850 | lazy |
| 851 | transition="scale-transition" | 851 | transition="scale-transition" |
| 852 | offset-y | 852 | offset-y |
| 853 | full-width | 853 | full-width |
| 854 | max-width="290px" | 854 | max-width="290px" |
| 855 | min-width="290px" | 855 | min-width="290px" |
| 856 | > | 856 | > |
| 857 | <v-text-field | 857 | <v-text-field |
| 858 | slot="activator" | 858 | slot="activator" |
| 859 | v-model="timeTable.timeOut" | 859 | v-model="timeTable.timeOut" |
| 860 | label="Select your Time Out" | 860 | label="Select your Time Out" |
| 861 | append-icon="access_time" | 861 | append-icon="access_time" |
| 862 | :rules="timeOutRules" | 862 | :rules="timeOutRules" |
| 863 | readonly | 863 | readonly |
| 864 | ></v-text-field> | 864 | ></v-text-field> |
| 865 | <v-time-picker | 865 | <v-time-picker |
| 866 | v-model="timeTable.timeOut" | 866 | v-model="timeTable.timeOut" |
| 867 | @change="$refs.menu.save(timeTable.timeOut)" | 867 | @change="$refs.menu.save(timeTable.timeOut)" |
| 868 | ></v-time-picker> | 868 | ></v-time-picker> |
| 869 | </v-menu> | 869 | </v-menu> |
| 870 | </v-flex> | 870 | </v-flex> |
| 871 | </v-layout> | 871 | </v-layout> |
| 872 | </v-flex> | 872 | </v-flex> |
| 873 | <v-layout> | 873 | <v-layout> |
| 874 | <v-flex xs12 sm11> | 874 | <v-flex xs12 sm11> |
| 875 | <v-layout> | 875 | <v-layout> |
| 876 | <v-spacer></v-spacer> | 876 | <v-spacer></v-spacer> |
| 877 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 877 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 878 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 878 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 879 | </v-layout> | 879 | </v-layout> |
| 880 | </v-flex> | 880 | </v-flex> |
| 881 | </v-layout> | 881 | </v-layout> |
| 882 | </v-container> | 882 | </v-container> |
| 883 | </v-form> | 883 | </v-form> |
| 884 | </v-card> | 884 | </v-card> |
| 885 | </v-dialog> | 885 | </v-dialog> |
| 886 | <div class="loader" v-if="showLoader"> | 886 | <div class="loader" v-if="showLoader"> |
| 887 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 887 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 888 | </div> | 888 | </div> |
| 889 | <v-snackbar | 889 | <v-snackbar |
| 890 | :timeout="timeout" | 890 | :timeout="timeout" |
| 891 | :top="y === 'top'" | 891 | :top="y === 'top'" |
| 892 | :right="x === 'right'" | 892 | :right="x === 'right'" |
| 893 | :vertical="mode === 'vertical'" | 893 | :vertical="mode === 'vertical'" |
| 894 | v-model="snackbar" | 894 | v-model="snackbar" |
| 895 | :color="color" | 895 | :color="color" |
| 896 | >{{ text }}</v-snackbar> | 896 | >{{ text }}</v-snackbar> |
| 897 | </v-container> | 897 | </v-container> |
| 898 | </template> | 898 | </template> |
| 899 | <script> | 899 | <script> |
| 900 | import http from "@/Services/http.js"; | 900 | import http from "@/Services/http.js"; |
| 901 | import Util from "@/util"; | 901 | import Util from "@/util"; |
| 902 | 902 | ||
| 903 | export default { | 903 | export default { |
| 904 | data: () => ({ | 904 | data: () => ({ |
| 905 | y: "top", | 905 | y: "top", |
| 906 | x: "right", | 906 | x: "right", |
| 907 | mode: "", | 907 | mode: "", |
| 908 | timeout: 3000, | 908 | timeout: 3000, |
| 909 | text: "", | 909 | text: "", |
| 910 | search: "", | 910 | search: "", |
| 911 | color: "", | 911 | color: "", |
| 912 | snackbar: false, | 912 | snackbar: false, |
| 913 | loading: false, | 913 | loading: false, |
| 914 | showLoader: false, | 914 | showLoader: false, |
| 915 | dialog: false, | 915 | dialog: false, |
| 916 | show: true, | 916 | show: true, |
| 917 | showSearch: false, | 917 | showSearch: false, |
| 918 | dialogAddLecture: false, | 918 | dialogAddLecture: false, |
| 919 | dialogUpdateLectures: false, | 919 | dialogUpdateLectures: false, |
| 920 | dialogSchedule: false, | 920 | dialogSchedule: false, |
| 921 | dialog1: false, | 921 | dialog1: false, |
| 922 | valid: true, | 922 | valid: true, |
| 923 | addTimeTableDialog: false, | 923 | addTimeTableDialog: false, |
| 924 | validAddDay: true, | 924 | validAddDay: true, |
| 925 | loadingFindData: false, | 925 | loadingFindData: false, |
| 926 | addclass: [], | 926 | addclass: [], |
| 927 | addSection: [], | 927 | addSection: [], |
| 928 | subjectList: [], | 928 | subjectList: [], |
| 929 | addTeachers: [], | 929 | addTeachers: [], |
| 930 | gender: ["Male", "Female"], | 930 | gender: ["Male", "Female"], |
| 931 | pagination: { | 931 | pagination: { |
| 932 | rowsPerPage: 15, | 932 | rowsPerPage: 15, |
| 933 | }, | 933 | }, |
| 934 | imageData: {}, | 934 | imageData: {}, |
| 935 | imageName: "", | 935 | imageName: "", |
| 936 | imageUrl: "", | 936 | imageUrl: "", |
| 937 | imageFile: "", | 937 | imageFile: "", |
| 938 | timeInRules: [(v) => !!v || "Time In is required"], | 938 | timeInRules: [(v) => !!v || "Time In is required"], |
| 939 | timeOutRules: [(v) => !!v || "Time Out is required"], | 939 | timeOutRules: [(v) => !!v || "Time Out is required"], |
| 940 | lectureRules: [(v) => !!v || "Lecture No is required"], | 940 | lectureRules: [(v) => !!v || "Lecture No is required"], |
| 941 | subjectNameRules: [(v) => !!v || "Subject Name is required"], | 941 | subjectNameRules: [(v) => !!v || "Subject Name is required"], |
| 942 | classRules: [(v) => !!v || "Class Name is required"], | 942 | classRules: [(v) => !!v || "Class Name is required"], |
| 943 | sectionRules: [(v) => !!v || "Section Name is required"], | 943 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 944 | sectionRules: [(v) => !!v || "Section Name is required"], | 944 | sectionRules: [(v) => !!v || "Section Name is required"], |
| 945 | teacherRules: [(v) => !!v || "Teacher Name is required"], | 945 | teacherRules: [(v) => !!v || "Teacher Name is required"], |
| 946 | selecDayRule: [(v) => !!v || "Day is required"], | 946 | selecDayRule: [(v) => !!v || "Day is required"], |
| 947 | dayRules: [(v) => !!v || "Day is required"], | 947 | dayRules: [(v) => !!v || "Day is required"], |
| 948 | getParticulerLecture: "", | 948 | getParticulerLecture: "", |
| 949 | headers: [ | 949 | headers: [ |
| 950 | { | 950 | { |
| 951 | text: "No", | 951 | text: "No", |
| 952 | align: "", | 952 | align: "", |
| 953 | sortable: false, | 953 | sortable: false, |
| 954 | value: "No", | 954 | value: "No", |
| 955 | }, | 955 | }, |
| 956 | { | 956 | { |
| 957 | text: "Class Name", | 957 | text: "Class Name", |
| 958 | value: "classData.classNum", | 958 | value: "classData.classNum", |
| 959 | sortable: false, | 959 | sortable: false, |
| 960 | align: "center", | 960 | align: "center", |
| 961 | }, | 961 | }, |
| 962 | { | 962 | { |
| 963 | text: "Section Name", | 963 | text: "Section Name", |
| 964 | value: "sectionData.name", | 964 | value: "sectionData.name", |
| 965 | sortable: false, | 965 | sortable: false, |
| 966 | align: "center", | 966 | align: "center", |
| 967 | }, | 967 | }, |
| 968 | { text: "Action", value: "", sortable: false, align: "center" }, | 968 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 969 | ], | 969 | ], |
| 970 | daysHeaders: [ | 970 | daysHeaders: [ |
| 971 | { text: "Day", value: "dayday", sortable: false, align: "center" }, | 971 | { text: "Day", value: "dayday", sortable: false, align: "center" }, |
| 972 | { | 972 | { |
| 973 | text: "Subject Name", | 973 | text: "Subject Name", |
| 974 | value: "subjectName", | 974 | value: "subjectName", |
| 975 | sortable: false, | 975 | sortable: false, |
| 976 | align: "center", | 976 | align: "center", |
| 977 | }, | 977 | }, |
| 978 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, | 978 | { text: "Time In", value: "timeIn", sortable: false, align: "center" }, |
| 979 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, | 979 | { text: "Time Out", value: "timeOut", sortable: false, align: "center" }, |
| 980 | ], | 980 | ], |
| 981 | addOneDay: [ | 981 | addOneDay: [ |
| 982 | "Monday", | 982 | "Monday", |
| 983 | "Tuesday", | 983 | "Tuesday", |
| 984 | "Wednesday", | 984 | "Wednesday", |
| 985 | "Thursday", | 985 | "Thursday", |
| 986 | "Friday", | 986 | "Friday", |
| 987 | "Saturday", | 987 | "Saturday", |
| 988 | "Sunday", | 988 | "Sunday", |
| 989 | ], | 989 | ], |
| 990 | schedule: { | 990 | schedule: { |
| 991 | selectDay: "", | 991 | selectDay: "", |
| 992 | }, | 992 | }, |
| 993 | desserts: [], | 993 | desserts: [], |
| 994 | timeTableList: [], | 994 | timeTableList: [], |
| 995 | editedIndex: -1, | 995 | editedIndex: -1, |
| 996 | selectTimeTable: { | 996 | selectTimeTable: { |
| 997 | select: "", | 997 | select: "", |
| 998 | selectSection: "", | 998 | selectSection: "", |
| 999 | }, | 999 | }, |
| 1000 | timeTable: { | 1000 | timeTable: { |
| 1001 | select: "", | 1001 | select: "", |
| 1002 | selectSection: "", | 1002 | selectSection: "", |
| 1003 | selectDay: "", | 1003 | selectDay: "", |
| 1004 | timeIn: null, | 1004 | timeIn: null, |
| 1005 | timeOut: null, | 1005 | timeOut: null, |
| 1006 | subjectName: "", | 1006 | subjectName: "", |
| 1007 | selectTeacher: "", | 1007 | selectTeacher: "", |
| 1008 | }, | 1008 | }, |
| 1009 | editedItem: { | 1009 | editedItem: { |
| 1010 | classNum: "", | 1010 | classNum: "", |
| 1011 | selectSection: "", | 1011 | selectSection: "", |
| 1012 | }, | 1012 | }, |
| 1013 | addlectures: { | 1013 | addlectures: { |
| 1014 | timeIn: null, | 1014 | timeIn: null, |
| 1015 | timeOut: null, | 1015 | timeOut: null, |
| 1016 | subjectName: "", | 1016 | subjectName: "", |
| 1017 | teacherId: "", | 1017 | teacherId: "", |
| 1018 | scheduleId: "", | 1018 | scheduleId: "", |
| 1019 | timeTableId: "", | 1019 | timeTableId: "", |
| 1020 | select: "", | 1020 | select: "", |
| 1021 | }, | 1021 | }, |
| 1022 | updateLectures: { | 1022 | updateLectures: { |
| 1023 | timeIn: null, | 1023 | timeIn: null, |
| 1024 | timeOut: null, | 1024 | timeOut: null, |
| 1025 | subjectName: "", | 1025 | subjectName: "", |
| 1026 | teacherId: "", | 1026 | teacherId: "", |
| 1027 | select: "", | 1027 | select: "", |
| 1028 | }, | 1028 | }, |
| 1029 | updateLecturesId: { | 1029 | updateLecturesId: { |
| 1030 | lectureId: "", | 1030 | lectureId: "", |
| 1031 | scheduleId: "", | 1031 | scheduleId: "", |
| 1032 | }, | 1032 | }, |
| 1033 | menu1: false, | 1033 | menu1: false, |
| 1034 | menu2: false, | 1034 | menu2: false, |
| 1035 | menu3: false, | 1035 | menu3: false, |
| 1036 | menu4: false, | 1036 | menu4: false, |
| 1037 | menu5: false, | 1037 | menu5: false, |
| 1038 | menu6: false, | 1038 | menu6: false, |
| 1039 | scheduleDayId: "", | 1039 | scheduleDayId: "", |
| 1040 | showData: false, | 1040 | showData: false, |
| 1041 | }), | 1041 | }), |
| 1042 | watch: { | 1042 | watch: { |
| 1043 | addTimeTableDialog: function (val) { | 1043 | addTimeTableDialog: function (val) { |
| 1044 | if (!val) { | 1044 | if (!val) { |
| 1045 | this.timeTable = []; | 1045 | this.timeTable = []; |
| 1046 | } | 1046 | } |
| 1047 | }, | 1047 | }, |
| 1048 | }, | 1048 | }, |
| 1049 | methods: { | 1049 | methods: { |
| 1050 | findTimeTable() { | 1050 | findTimeTable() { |
| 1051 | this.loadingFindData = true; | 1051 | this.loadingFindData = true; |
| 1052 | http() | 1052 | http() |
| 1053 | .get("/getParticularClassTimeTable", { | 1053 | .get("/getParticularClassTimeTable", { |
| 1054 | params: { | 1054 | params: { |
| 1055 | sectionId: this.selectTimeTable.selectSection, | 1055 | sectionId: this.selectTimeTable.selectSection, |
| 1056 | classId: this.selectTimeTable.select, | 1056 | classId: this.selectTimeTable.select, |
| 1057 | }, | 1057 | }, |
| 1058 | }) | 1058 | }) |
| 1059 | .then((response) => { | 1059 | .then((response) => { |
| 1060 | this.desserts = response.data.data; | 1060 | this.desserts = response.data.data; |
| 1061 | if (this.desserts.length === 0) { | 1061 | if (this.desserts.length === 0) { |
| 1062 | this.showLoader = false; | 1062 | this.showLoader = false; |
| 1063 | this.snackbar = true; | 1063 | this.snackbar = true; |
| 1064 | this.text = "Data not found!"; | 1064 | this.text = "Data not found!"; |
| 1065 | this.color = "error"; | 1065 | this.color = "error"; |
| 1066 | return; | 1066 | return; |
| 1067 | } | 1067 | } |
| 1068 | this.showData = true; | 1068 | this.showData = true; |
| 1069 | this.loadingFindData = false; | 1069 | this.loadingFindData = false; |
| 1070 | }) | 1070 | }) |
| 1071 | .catch((error) => { | 1071 | .catch((error) => { |
| 1072 | this.loadingFindData = false; | 1072 | this.loadingFindData = false; |
| 1073 | this.snackbar = true; | 1073 | this.snackbar = true; |
| 1074 | this.text = error.response.data.message; | 1074 | this.text = error.response.data.message; |
| 1075 | this.text = error.response.data.statusText; | 1075 | this.text = error.response.data.statusText; |
| 1076 | }); | 1076 | }); |
| 1077 | }, | 1077 | }, |
| 1078 | getSections(_id) { | 1078 | getSections(_id) { |
| 1079 | var token = this.$store.state.token; | 1079 | var token = this.$store.state.token; |
| 1080 | http() | 1080 | http() |
| 1081 | .get( | 1081 | .get( |
| 1082 | "/getSectionsList", | 1082 | "/getSectionsList", |
| 1083 | { params: { classId: _id } }, | 1083 | { params: { classId: _id } }, |
| 1084 | { | 1084 | { |
| 1085 | headers: { Authorization: "Bearer " + token }, | 1085 | headers: { Authorization: "Bearer " + token }, |
| 1086 | } | 1086 | } |
| 1087 | ) | 1087 | ) |
| 1088 | .then((response) => { | 1088 | .then((response) => { |
| 1089 | this.addSection = response.data.data; | 1089 | this.addSection = response.data.data; |
| 1090 | }) | 1090 | }) |
| 1091 | .catch((err) => { | 1091 | .catch((err) => { |
| 1092 | // console.log("err====>", err); | 1092 | // console.log("err====>", err); |
| 1093 | }); | 1093 | }); |
| 1094 | }, | 1094 | }, |
| 1095 | getClassSubject(_id) { | 1095 | getClassSubject(_id) { |
| 1096 | this.showLoader = true; | 1096 | this.showLoader = true; |
| 1097 | // this.classId = this.classId; | 1097 | // this.classId = this.classId; |
| 1098 | http() | 1098 | http() |
| 1099 | .get( | 1099 | .get( |
| 1100 | "/getParticularClass", | 1100 | "/getParticularClass", |
| 1101 | { params: { classId: _id } }, | 1101 | { params: { classId: _id } }, |
| 1102 | { | 1102 | { |
| 1103 | headers: { Authorization: "Bearer " + this.token }, | 1103 | headers: { Authorization: "Bearer " + this.token }, |
| 1104 | } | 1104 | } |
| 1105 | ) | 1105 | ) |
| 1106 | .then((response) => { | 1106 | .then((response) => { |
| 1107 | this.subjectList = response.data.data; | 1107 | this.subjectList = response.data.data; |
| 1108 | this.showLoader = false; | 1108 | this.showLoader = false; |
| 1109 | }) | 1109 | }) |
| 1110 | .catch((err) => { | 1110 | .catch((err) => { |
| 1111 | this.showLoader = false; | 1111 | this.showLoader = false; |
| 1112 | }); | 1112 | }); |
| 1113 | }, | 1113 | }, |
| 1114 | getTimeTable(item) { | 1114 | getTimeTable(item) { |
| 1115 | this.showLoader = true; | 1115 | this.showLoader = true; |
| 1116 | this.getParticulerLecture = item._id; | 1116 | this.getParticulerLecture = item._id; |
| 1117 | this.getTimeTableDayData(); | 1117 | this.getTimeTableDayData(); |
| 1118 | }, | 1118 | }, |
| 1119 | getTimeTableDayData() { | 1119 | getTimeTableDayData() { |
| 1120 | var token = this.$store.state.token; | 1120 | var token = this.$store.state.token; |
| 1121 | http() | 1121 | http() |
| 1122 | .get( | 1122 | .get( |
| 1123 | "/getParticularTimeTable", | 1123 | "/getParticularTimeTable", |
| 1124 | { params: { timeTableId: this.getParticulerLecture } }, | 1124 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1125 | { | 1125 | { |
| 1126 | headers: { Authorization: "Bearer " + token }, | 1126 | headers: { Authorization: "Bearer " + token }, |
| 1127 | } | 1127 | } |
| 1128 | ) | 1128 | ) |
| 1129 | .then((response) => { | 1129 | .then((response) => { |
| 1130 | this.timeTableList = response.data.data; | 1130 | this.timeTableList = response.data.data; |
| 1131 | this.showLoader = false; | 1131 | this.showLoader = false; |
| 1132 | }) | 1132 | }) |
| 1133 | .catch((err) => { | 1133 | .catch((err) => { |
| 1134 | this.showLoader = false; | 1134 | this.showLoader = false; |
| 1135 | // console.log("err====>", err); | 1135 | // console.log("err====>", err); |
| 1136 | }); | 1136 | }); |
| 1137 | }, | 1137 | }, |
| 1138 | pickFile() { | 1138 | pickFile() { |
| 1139 | this.$refs.image.click(); | 1139 | this.$refs.image.click(); |
| 1140 | }, | 1140 | }, |
| 1141 | 1141 | ||
| 1142 | onFilePicked(e) { | 1142 | onFilePicked(e) { |
| 1143 | const files = e.target.files; | 1143 | const files = e.target.files; |
| 1144 | this.imageData.upload = e.target.files[0]; | 1144 | this.imageData.upload = e.target.files[0]; |
| 1145 | if (files[0] !== undefined) { | 1145 | if (files[0] !== undefined) { |
| 1146 | this.imageName = files[0].name; | 1146 | this.imageName = files[0].name; |
| 1147 | if (this.imageName.lastIndexOf(".") <= 0) { | 1147 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 1148 | return; | 1148 | return; |
| 1149 | } | 1149 | } |
| 1150 | const fr = new FileReader(); | 1150 | const fr = new FileReader(); |
| 1151 | fr.readAsDataURL(files[0]); | 1151 | fr.readAsDataURL(files[0]); |
| 1152 | fr.addEventListener("load", () => { | 1152 | fr.addEventListener("load", () => { |
| 1153 | this.imageUrl = fr.result; | 1153 | this.imageUrl = fr.result; |
| 1154 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 1154 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 1155 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 1155 | this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 1156 | }); | 1156 | }); |
| 1157 | } else { | 1157 | } else { |
| 1158 | this.imageName = ""; | 1158 | this.imageName = ""; |
| 1159 | this.imageFile = ""; | 1159 | this.imageFile = ""; |
| 1160 | this.imageUrl = ""; | 1160 | this.imageUrl = ""; |
| 1161 | } | 1161 | } |
| 1162 | }, | 1162 | }, |
| 1163 | // getTimeTableList() { | 1163 | // getTimeTableList() { |
| 1164 | // this.showLoader = true; | 1164 | // this.showLoader = true; |
| 1165 | // var token = this.$store.state.token; | 1165 | // var token = this.$store.state.token; |
| 1166 | // http() | 1166 | // http() |
| 1167 | // .get("/getTimeTablesList", { | 1167 | // .get("/getTimeTablesList", { |
| 1168 | // headers: { Authorization: "Bearer " + token } | 1168 | // headers: { Authorization: "Bearer " + token } |
| 1169 | // }) | 1169 | // }) |
| 1170 | // .then(response => { | 1170 | // .then(response => { |
| 1171 | // this.desserts = response.data.data; | 1171 | // this.desserts = response.data.data; |
| 1172 | // this.showLoader = false; | 1172 | // this.showLoader = false; |
| 1173 | // // console.log("getTimeTableList=====>", response.data.data); | 1173 | // // console.log("getTimeTableList=====>", response.data.data); |
| 1174 | // }) | 1174 | // }) |
| 1175 | // .catch(err => { | 1175 | // .catch(err => { |
| 1176 | // // console.log("err====>", err); | 1176 | // // console.log("err====>", err); |
| 1177 | // this.showLoader = false; | 1177 | // this.showLoader = false; |
| 1178 | // this.$router.replace({ path: "/" }); | 1178 | // this.$router.replace({ path: "/" }); |
| 1179 | // }); | 1179 | // }); |
| 1180 | // }, | 1180 | // }, |
| 1181 | editItem(item) { | 1181 | editItem(item) { |
| 1182 | this.editedIndex = this.desserts.indexOf(item); | 1182 | this.editedIndex = this.desserts.indexOf(item); |
| 1183 | this.editedItem = Object.assign({}, item); | 1183 | this.editedItem = Object.assign({}, item); |
| 1184 | this.dialog = true; | 1184 | this.dialog = true; |
| 1185 | }, | 1185 | }, |
| 1186 | updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { | 1186 | updateTimeTable(timeToUpdate, classToUpdate, scheduleId) { |
| 1187 | this.updateLecturesId.scheduleId = scheduleId; | 1187 | this.updateLecturesId.scheduleId = scheduleId; |
| 1188 | this.updateLecturesId.lectureId = timeToUpdate._id; | 1188 | this.updateLecturesId.lectureId = timeToUpdate._id; |
| 1189 | this.updateLectures = timeToUpdate; | 1189 | this.updateLectures = timeToUpdate; |
| 1190 | this.dialogUpdateLectures = true; | 1190 | this.dialogUpdateLectures = true; |
| 1191 | }, | 1191 | }, |
| 1192 | addLecture(scheduleId, timeTableId) { | 1192 | addLecture(scheduleId, timeTableId) { |
| 1193 | this.addlectures.scheduleId = scheduleId; | 1193 | this.addlectures.scheduleId = scheduleId; |
| 1194 | this.addlectures.timeTableId = timeTableId; | 1194 | this.addlectures.timeTableId = timeTableId; |
| 1195 | this.dialogAddLecture = true; | 1195 | this.dialogAddLecture = true; |
| 1196 | }, | 1196 | }, |
| 1197 | AddLecture() { | 1197 | AddLecture() { |
| 1198 | if (this.$refs.lectureForm.validate()) { | 1198 | if (this.$refs.lectureForm.validate()) { |
| 1199 | http() | 1199 | http() |
| 1200 | .post("/addLecture", this.addlectures) | 1200 | .post("/addLecture", this.addlectures) |
| 1201 | .then((response) => { | 1201 | .then((response) => { |
| 1202 | this.snackbar = true; | 1202 | this.snackbar = true; |
| 1203 | this.text = "New Add Lecture successfully"; | 1203 | this.text = "New Add Lecture successfully"; |
| 1204 | var token = this.$store.state.token; | 1204 | var token = this.$store.state.token; |
| 1205 | http() | 1205 | http() |
| 1206 | .get( | 1206 | .get( |
| 1207 | "/getParticularTimeTable", | 1207 | "/getParticularTimeTable", |
| 1208 | { params: { timeTableId: this.getParticulerLecture } }, | 1208 | { params: { timeTableId: this.getParticulerLecture } }, |
| 1209 | { | 1209 | { |
| 1210 | headers: { Authorization: "Bearer " + token }, | 1210 | headers: { Authorization: "Bearer " + token }, |
| 1211 | } | 1211 | } |
| 1212 | ) | 1212 | ) |
| 1213 | .then((response) => { | 1213 | .then((response) => { |
| 1214 | this.timeTableList = response.data.data; | 1214 | this.timeTableList = response.data.data; |
| 1215 | this.snackbar = true; | 1215 | this.snackbar = true; |
| 1216 | this.text = response.data.message; | 1216 | this.text = response.data.message; |
| 1217 | this.color = "green"; | 1217 | this.color = "green"; |
| 1218 | this.showLoader = false; | 1218 | this.showLoader = false; |
| 1219 | }) | 1219 | }) |
| 1220 | .catch((err) => { | 1220 | .catch((err) => { |
| 1221 | this.showLoader = false; | 1221 | this.showLoader = false; |
| 1222 | // console.log("err====>", err); | 1222 | // console.log("err====>", err); |
| 1223 | this.snackbar = true; | 1223 | this.snackbar = true; |
| 1224 | this.color = "error"; | 1224 | this.color = "error"; |
| 1225 | this.text = error.response.data.message; | 1225 | this.text = error.response.data.message; |
| 1226 | }); | 1226 | }); |
| 1227 | this.closedialogLecture(); | 1227 | this.closedialogLecture(); |
| 1228 | this.clearLeactureData(); | 1228 | this.clearLeactureData(); |
| 1229 | }) | 1229 | }) |
| 1230 | .catch((error) => { | 1230 | .catch((error) => { |
| 1231 | this.snackbar = true; | 1231 | this.snackbar = true; |
| 1232 | this.text = error.response.data.message; | 1232 | this.text = error.response.data.message; |
| 1233 | this.text = error.response.data.statusText; | 1233 | this.text = error.response.data.statusText; |
| 1234 | }); | 1234 | }); |
| 1235 | } | 1235 | } |
| 1236 | }, | 1236 | }, |
| 1237 | updateParticularTable() { | 1237 | updateParticularTable() { |
| 1238 | let EditLecture = { | 1238 | let EditLecture = { |
| 1239 | lectureId: this.updateLecturesId.lectureId, | 1239 | lectureId: this.updateLecturesId.lectureId, |
| 1240 | scheduleId: this.updateLecturesId.scheduleId, | 1240 | scheduleId: this.updateLecturesId.scheduleId, |
| 1241 | updatedLecture: { | 1241 | updatedLecture: { |
| 1242 | timeIn: this.updateLectures.timeIn, | 1242 | timeIn: this.updateLectures.timeIn, |
| 1243 | timeOut: this.updateLectures.timeOut, | 1243 | timeOut: this.updateLectures.timeOut, |
| 1244 | subjectName: this.updateLectures.subjectName, | 1244 | subjectName: this.updateLectures.subjectName, |
| 1245 | teacherId: this.updateLectures.teacherId, | 1245 | teacherId: this.updateLectures.teacherId, |
| 1246 | }, | 1246 | }, |
| 1247 | }; | 1247 | }; |
| 1248 | http() | 1248 | http() |
| 1249 | .put("/updateLecture", EditLecture) | 1249 | .put("/updateLecture", EditLecture) |
| 1250 | .then((response) => { | 1250 | .then((response) => { |
| 1251 | console.log("updateLecture", EditLecture); | 1251 | console.log("updateLecture", EditLecture); |
| 1252 | this.snackbar = true; | 1252 | this.snackbar = true; |
| 1253 | this.text = response.data.message; | 1253 | this.text = response.data.message; |
| 1254 | this.color = "green"; | 1254 | this.color = "green"; |
| 1255 | this.closeUpdateLectures(); | 1255 | this.closeUpdateLectures(); |
| 1256 | }) | 1256 | }) |
| 1257 | .catch((error) => { | 1257 | .catch((error) => { |
| 1258 | // console.log(error); | 1258 | // console.log(error); |
| 1259 | 1259 | ||
| 1260 | this.snackbar = true; | 1260 | this.snackbar = true; |
| 1261 | this.color = "error"; | 1261 | this.color = "error"; |
| 1262 | this.text = error.response.data.message; | 1262 | this.text = error.response.data.message; |
| 1263 | if (error.response.data.statusText) { | 1263 | if (error.response.data.statusText) { |
| 1264 | this.text = error.response.data.statusText; | 1264 | this.text = error.response.data.statusText; |
| 1265 | } | 1265 | } |
| 1266 | }); | 1266 | }); |
| 1267 | }, | 1267 | }, |
| 1268 | deleteItem(item) { | 1268 | deleteItem(item) { |
| 1269 | let deleteTimeTable = { | 1269 | let deleteTimeTable = { |
| 1270 | timeTableId: item._id, | 1270 | timeTableId: item._id, |
| 1271 | }; | 1271 | }; |
| 1272 | http() | 1272 | http() |
| 1273 | .delete( | 1273 | .delete( |
| 1274 | "/deleteTimeTable", | 1274 | "/deleteTimeTable", |
| 1275 | confirm("Are you sure you want to delete this?") && { | 1275 | confirm("Are you sure you want to delete this?") && { |
| 1276 | params: deleteTimeTable, | 1276 | params: deleteTimeTable, |
| 1277 | } | 1277 | } |
| 1278 | ) | 1278 | ) |
| 1279 | .then((response) => { | 1279 | .then((response) => { |
| 1280 | // console.log("deleteUers",deleteTimeTable) | 1280 | // console.log("deleteUers",deleteTimeTable) |
| 1281 | this.snackbar = true; | 1281 | this.snackbar = true; |
| 1282 | this.text = response.data.message; | 1282 | this.text = response.data.message; |
| 1283 | this.color = "green"; | 1283 | this.color = "green"; |
| 1284 | this.findTimeTable(); | 1284 | this.findTimeTable(); |
| 1285 | }) | 1285 | }) |
| 1286 | .catch((error) => { | 1286 | .catch((error) => { |
| 1287 | // console.log(error); | 1287 | // console.log(error); |
| 1288 | }); | 1288 | }); |
| 1289 | }, | 1289 | }, |
| 1290 | close() { | 1290 | close() { |
| 1291 | this.dialog = false; | 1291 | this.dialog = false; |
| 1292 | }, | 1292 | }, |
| 1293 | close1() { | 1293 | close1() { |
| 1294 | this.dialog1 = false; | 1294 | this.dialog1 = false; |
| 1295 | }, | 1295 | }, |
| 1296 | closedialogLecture() { | 1296 | closedialogLecture() { |
| 1297 | this.dialogAddLecture = false; | 1297 | this.dialogAddLecture = false; |
| 1298 | }, | 1298 | }, |
| 1299 | closeUpdateLectures() { | 1299 | closeUpdateLectures() { |
| 1300 | this.dialogUpdateLectures = false; | 1300 | this.dialogUpdateLectures = false; |
| 1301 | }, | 1301 | }, |
| 1302 | closeAddTimeTableModel() { | 1302 | closeAddTimeTableModel() { |
| 1303 | this.addTimeTableDialog = false; | 1303 | this.addTimeTableDialog = false; |
| 1304 | this.timeTableList = []; | 1304 | this.timeTableList = []; |
| 1305 | this.timeTable = []; | 1305 | this.timeTable = []; |
| 1306 | }, | 1306 | }, |
| 1307 | submit() { | 1307 | submit() { |
| 1308 | if (this.$refs.form.validate()) { | 1308 | if (this.$refs.form.validate()) { |
| 1309 | let imageData = new FormData(); | 1309 | let imageData = new FormData(); |
| 1310 | imageData.append("upload", this.imageFile); | 1310 | imageData.append("upload", this.imageFile); |
| 1311 | let addTimeTable = { | 1311 | let addTimeTable = { |
| 1312 | sectionId: this.timeTable.selectSection, | 1312 | sectionId: this.timeTable.selectSection, |
| 1313 | classId: this.timeTable.select, | 1313 | classId: this.timeTable.select, |
| 1314 | schedule: [ | 1314 | schedule: [ |
| 1315 | { | 1315 | { |
| 1316 | day: this.timeTable.selectDay, | 1316 | day: this.timeTable.selectDay, |
| 1317 | lectures: [ | 1317 | lectures: [ |
| 1318 | { | 1318 | { |
| 1319 | timeIn: this.timeTable.timeIn, | 1319 | timeIn: this.timeTable.timeIn, |
| 1320 | timeOut: this.timeTable.timeOut, | 1320 | timeOut: this.timeTable.timeOut, |
| 1321 | subjectName: this.timeTable.subjectName, | 1321 | subjectName: this.timeTable.subjectName, |
| 1322 | teacherId: this.timeTable.selectTeacher, | 1322 | teacherId: this.timeTable.selectTeacher, |
| 1323 | }, | 1323 | }, |
| 1324 | ], | 1324 | ], |
| 1325 | }, | 1325 | }, |
| 1326 | ], | 1326 | ], |
| 1327 | }; | 1327 | }; |
| 1328 | this.loading = true; | 1328 | this.loading = true; |
| 1329 | http() | 1329 | http() |
| 1330 | .post("/createTimeTable", addTimeTable) | 1330 | .post("/createTimeTable", addTimeTable) |
| 1331 | .then((response) => { | 1331 | .then((response) => { |
| 1332 | // console.log("addTimeTable=====>", addTimeTable); | 1332 | // console.log("addTimeTable=====>", addTimeTable); |
| 1333 | if ((this.snackbar = true)) { | 1333 | if ((this.snackbar = true)) { |
| 1334 | this.text = "New Time Table added successfully"; | 1334 | this.text = "New Time Table added successfully"; |
| 1335 | } | 1335 | } |
| 1336 | this.color = "green"; | 1336 | this.color = "green"; |
| 1337 | // this.clear(); | 1337 | // this.clear(); |
| 1338 | http() | 1338 | http() |
| 1339 | .get("/getParticularClassTimeTable", { | 1339 | .get("/getParticularClassTimeTable", { |
| 1340 | params: { | 1340 | params: { |
| 1341 | classId: this.timeTable.select, | 1341 | classId: this.timeTable.select, |
| 1342 | sectionId: this.timeTable.selectSection, | 1342 | sectionId: this.timeTable.selectSection, |
| 1343 | }, | 1343 | }, |
| 1344 | }) | 1344 | }) |
| 1345 | .then((response) => { | 1345 | .then((response) => { |
| 1346 | this.desserts = response.data.data; | 1346 | this.desserts = response.data.data; |
| 1347 | this.showData = true; | 1347 | this.showData = true; |
| 1348 | this.loadingFindData = false; | 1348 | this.loadingFindData = false; |
| 1349 | }) | 1349 | }) |
| 1350 | .catch((error) => { | 1350 | .catch((error) => { |
| 1351 | this.loadingFindData = false; | 1351 | this.loadingFindData = false; |
| 1352 | this.snackbar = true; | 1352 | this.snackbar = true; |
| 1353 | this.text = error.response.data.message; | 1353 | this.text = error.response.data.message; |
| 1354 | this.text = error.response.data.statusText; | 1354 | this.text = error.response.data.statusText; |
| 1355 | }); | 1355 | }); |
| 1356 | this.addTimeTableDialog = false; | 1356 | this.addTimeTableDialog = false; |
| 1357 | this.loading = false; | 1357 | this.loading = false; |
| 1358 | }) | 1358 | }) |
| 1359 | .catch((error) => { | 1359 | .catch((error) => { |
| 1360 | // console.log(error); | 1360 | // console.log(error); |
| 1361 | if ((this.snackbar = true)) { | 1361 | if ((this.snackbar = true)) { |
| 1362 | this.text = error.response.data.message; | 1362 | this.text = error.response.data.message; |
| 1363 | } | 1363 | } |
| 1364 | this.loading = false; | 1364 | this.loading = false; |
| 1365 | }); | 1365 | }); |
| 1366 | } | 1366 | } |
| 1367 | }, | 1367 | }, |
| 1368 | clear() { | 1368 | clear() { |
| 1369 | this.$refs.form.reset(); | 1369 | this.$refs.form.reset(); |
| 1370 | }, | 1370 | }, |
| 1371 | clearLeactureData() { | 1371 | clearLeactureData() { |
| 1372 | this.$refs.lectureForm.reset(); | 1372 | this.$refs.lectureForm.reset(); |
| 1373 | }, | 1373 | }, |
| 1374 | save() { | 1374 | save() { |
| 1375 | let imageData = new FormData(); | 1375 | let imageData = new FormData(); |
| 1376 | imageData.append("upload", this.imageFile); | 1376 | imageData.append("upload", this.imageFile); |
| 1377 | // console.log(imageData); | 1377 | // console.log(imageData); |
| 1378 | let editTimeTable = { | 1378 | let editTimeTable = { |
| 1379 | timeTableId: this.editedItem._id, | 1379 | timeTableId: this.editedItem._id, |
| 1380 | classId: this.editedItem.classNum, | 1380 | classId: this.editedItem.classNum, |
| 1381 | sectionId: this.editedItem.selectSection, | 1381 | sectionId: this.editedItem.selectSection, |
| 1382 | // imageData | 1382 | // imageData |
| 1383 | }; | 1383 | }; |
| 1384 | http() | 1384 | http() |
| 1385 | .put("/updateTimeTable", editTimeTable) | 1385 | .put("/updateTimeTable", editTimeTable) |
| 1386 | .then((response) => { | 1386 | .then((response) => { |
| 1387 | // console.log("editTimeTable", editTimeTable); | 1387 | // console.log("editTimeTable", editTimeTable); |
| 1388 | if ((this.snackbar = true)) { | 1388 | if ((this.snackbar = true)) { |
| 1389 | this.text = "Successfully Edit Existing Time Table"; | 1389 | this.text = "Successfully Edit Existing Time Table"; |
| 1390 | this.color = "success"; | 1390 | this.color = "success"; |
| 1391 | } | 1391 | } |
| 1392 | http() | 1392 | http() |
| 1393 | .get("/getParticularClassTimeTable", { | 1393 | .get("/getParticularClassTimeTable", { |
| 1394 | params: { | 1394 | params: { |
| 1395 | classId: this.editedItem.classNum, | 1395 | classId: this.editedItem.classNum, |
| 1396 | sectionId: this.editedItem.selectSection, | 1396 | sectionId: this.editedItem.selectSection, |
| 1397 | }, | 1397 | }, |
| 1398 | }) | 1398 | }) |
| 1399 | .then((response) => { | 1399 | .then((response) => { |
| 1400 | this.desserts = response.data.data; | 1400 | this.desserts = response.data.data; |
| 1401 | this.showData = true; | 1401 | this.showData = true; |
| 1402 | this.loadingFindData = false; | 1402 | this.loadingFindData = false; |
| 1403 | }) | 1403 | }) |
| 1404 | .catch((error) => { | 1404 | .catch((error) => { |
| 1405 | this.loadingFindData = false; | 1405 | this.loadingFindData = false; |
| 1406 | this.snackbar = true; | 1406 | this.snackbar = true; |
| 1407 | this.text = error.response.data.message; | 1407 | this.text = error.response.data.message; |
| 1408 | this.text = error.response.data.statusText; | 1408 | this.text = error.response.data.statusText; |
| 1409 | }); | 1409 | }); |
| 1410 | }) | 1410 | }) |
| 1411 | .catch((error) => { | 1411 | .catch((error) => { |
| 1412 | // console.log(error); | 1412 | // console.log(error); |
| 1413 | if ((this.snackbar = true)) { | 1413 | if ((this.snackbar = true)) { |
| 1414 | this.text = error.response.data.message; | 1414 | this.text = error.response.data.message; |
| 1415 | } | 1415 | } |
| 1416 | }); | 1416 | }); |
| 1417 | this.close(); | 1417 | this.close(); |
| 1418 | }, | 1418 | }, |
| 1419 | deleteTimeTable(timeToDelete, deleteLectures) { | 1419 | deleteTimeTable(timeToDelete, deleteLectures) { |
| 1420 | let deleteLecture = { | 1420 | let deleteLecture = { |
| 1421 | lectureId: timeToDelete._id, | 1421 | lectureId: timeToDelete._id, |
| 1422 | }; | 1422 | }; |
| 1423 | http() | 1423 | http() |
| 1424 | .delete( | 1424 | .delete( |
| 1425 | "/deleteLecture", | 1425 | "/deleteLecture", |
| 1426 | confirm("Are you sure you want to delete this?") && { | 1426 | confirm("Are you sure you want to delete this?") && { |
| 1427 | params: deleteLecture, | 1427 | params: deleteLecture, |
| 1428 | } | 1428 | } |
| 1429 | ) | 1429 | ) |
| 1430 | .then((response) => { | 1430 | .then((response) => { |
| 1431 | if ((this.snackbar = true)) { | 1431 | if ((this.snackbar = true)) { |
| 1432 | this.text = "Successfully delete Existing Time Table"; | 1432 | this.text = "Successfully delete Existing Time Table"; |
| 1433 | } | 1433 | } |
| 1434 | const index = this.timeTableList.schedule.indexOf(deleteLectures); | 1434 | const index = this.timeTableList.schedule.indexOf(deleteLectures); |
| 1435 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { | 1435 | for (let i = 0; i < this.timeTableList.schedule.length; i++) { |
| 1436 | this.timeTableList.schedule[i].lectures.splice(index, 1); | 1436 | this.timeTableList.schedule[i].lectures.splice(index, 1); |
| 1437 | } | 1437 | } |
| 1438 | }) | 1438 | }) |
| 1439 | .catch((error) => { | 1439 | .catch((error) => { |
| 1440 | console.log(error); | 1440 | console.log(error); |
| 1441 | }); | 1441 | }); |
| 1442 | }, | 1442 | }, |
| 1443 | addSchedule(id) { | 1443 | addSchedule(id) { |
| 1444 | this.scheduleDayId = id; | 1444 | this.scheduleDayId = id; |
| 1445 | this.dialogSchedule = true; | 1445 | this.dialogSchedule = true; |
| 1446 | }, | 1446 | }, |
| 1447 | submitSchedule() { | 1447 | submitSchedule() { |
| 1448 | if (this.$refs.formAddDay.validate()) { | 1448 | if (this.$refs.formAddDay.validate()) { |
| 1449 | let scheduleDayData = { | 1449 | let scheduleDayData = { |
| 1450 | timeTableId: this.scheduleDayId, | 1450 | timeTableId: this.scheduleDayId, |
| 1451 | day: this.schedule.selectDay, | 1451 | day: this.schedule.selectDay, |
| 1452 | }; | 1452 | }; |
| 1453 | http() | 1453 | http() |
| 1454 | .post("/addSchedule", scheduleDayData) | 1454 | .post("/addSchedule", scheduleDayData) |
| 1455 | .then((response) => { | 1455 | .then((response) => { |
| 1456 | this.snackbar = true; | 1456 | this.snackbar = true; |
| 1457 | this.text = "New Schedule Day added successfully"; | 1457 | this.text = "New Schedule Day added successfully"; |
| 1458 | this.dialogSchedule = false; | 1458 | this.dialogSchedule = false; |
| 1459 | this.loading = false; | 1459 | this.loading = false; |
| 1460 | this.getTimeTableDayData(); | 1460 | this.getTimeTableDayData(); |
| 1461 | }) | 1461 | }) |
| 1462 | .catch((error) => { | 1462 | .catch((error) => { |
| 1463 | // console.log(error); | 1463 | // console.log(error); |
| 1464 | this.snackbar = true; | 1464 | this.snackbar = true; |
| 1465 | this.text = error.response.data.message; | 1465 | this.text = error.response.data.message; |
| 1466 | this.loading = false; | 1466 | this.loading = false; |
| 1467 | }); | 1467 | }); |
| 1468 | } | 1468 | } |
| 1469 | }, | 1469 | }, |
| 1470 | displaySearch() { | 1470 | displaySearch() { |
| 1471 | (this.show = false), (this.showSearch = true); | 1471 | (this.show = false), (this.showSearch = true); |
| 1472 | }, | 1472 | }, |
| 1473 | closeSearch() { | 1473 | closeSearch() { |
| 1474 | this.showSearch = false; | 1474 | this.showSearch = false; |
| 1475 | this.show = true; | 1475 | this.show = true; |
| 1476 | this.search = ""; | 1476 | this.search = ""; |
| 1477 | }, | 1477 | }, |
| 1478 | }, | 1478 | }, |
| 1479 | mounted() { | 1479 | mounted() { |
| 1480 | // this.getTimeTableList(); | 1480 | // this.getTimeTableList(); |
| 1481 | var token = this.$store.state.token; | 1481 | var token = this.$store.state.token; |
| 1482 | http() | 1482 | http() |
| 1483 | .get("/getClassesList", { | 1483 | .get("/getClassesList", { |
| 1484 | headers: { Authorization: "Bearer " + token }, | 1484 | headers: { Authorization: "Bearer " + token }, |
| 1485 | }) | 1485 | }) |
| 1486 | .then((response) => { | 1486 | .then((response) => { |
| 1487 | this.addclass = response.data.data; | 1487 | this.addclass = response.data.data; |
| 1488 | // console.log("getClassesList=====>",this.addclass) | 1488 | // console.log("getClassesList=====>",this.addclass) |
| 1489 | }) | 1489 | }) |
| 1490 | .catch((error) => { | 1490 | .catch((error) => { |
| 1491 | this.showLoader = false; | 1491 | this.showLoader = false; |
| 1492 | if (error.response.status === 401) { | 1492 | if (error.response.status === 401) { |
| 1493 | this.$router.replace({ path: "/" }); | 1493 | this.$router.replace({ path: "/" }); |
| 1494 | this.$store.dispatch("setToken", null); | 1494 | this.$store.dispatch("setToken", null); |
| 1495 | this.$store.dispatch("Id", null); | 1495 | this.$store.dispatch("Id", null); |
| 1496 | this.$store.dispatch("Role", null); | 1496 | this.$store.dispatch("Role", null); |
| 1497 | } | 1497 | } |
| 1498 | }); | 1498 | }); |
| 1499 | 1499 | ||
| 1500 | http() | 1500 | http() |
| 1501 | .get("/getTeachersList", { | 1501 | .get("/getTeachersList", { |
| 1502 | headers: { Authorization: "Bearer " + token }, | 1502 | headers: { Authorization: "Bearer " + token }, |
| 1503 | }) | 1503 | }) |
| 1504 | .then((response) => { | 1504 | .then((response) => { |
| 1505 | this.addTeachers = response.data.data; | 1505 | this.addTeachers = response.data.data; |
| 1506 | // console.log("getClassesList=====>",this.addTeachers) | 1506 | // console.log("getClassesList=====>",this.addTeachers) |
| 1507 | }) | 1507 | }) |
| 1508 | .catch((error) => { | 1508 | .catch((error) => { |
| 1509 | this.showLoader = false; | 1509 | this.showLoader = false; |
| 1510 | if (error.response.status === 401) { | 1510 | if (error.response.status === 401) { |
| 1511 | this.$router.replace({ path: "/" }); | 1511 | this.$router.replace({ path: "/" }); |
| 1512 | this.$store.dispatch("setToken", null); | 1512 | this.$store.dispatch("setToken", null); |
| 1513 | this.$store.dispatch("Id", null); | 1513 | this.$store.dispatch("Id", null); |
| 1514 | this.$store.dispatch("Role", null); | 1514 | this.$store.dispatch("Role", null); |
| 1515 | } | 1515 | } |
| 1516 | }); | 1516 | }); |
| 1517 | }, | 1517 | }, |
| 1518 | }; | 1518 | }; |
| 1519 | </script> | 1519 | </script> |
src/pages/User/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT USERS DETAILS ****** --> | 3 | <!-- ****** EDIT USERS DETAILS ****** --> |
| 4 | <v-dialog v-model="editUserDialog" max-width="1100px" scrollable> | 4 | <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit User</label> | 8 | <label class="title text-xs-center">Edit User</label> |
| 9 | <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-card-text> | 12 | <v-card-text> |
| 13 | <v-layout> | 13 | <v-layout> |
| 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> | 14 | <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> |
| 15 | <v-avatar size="120px"> | 15 | <v-avatar size="120px"> |
| 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> | 16 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> |
| 17 | <img | 17 | <img |
| 18 | :src="editedItem.profilePicUrl" | 18 | :src="editedItem.profilePicUrl" |
| 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" | 19 | v-else-if="editedItem.profilePicUrl && !imageUrl" |
| 20 | /> | 20 | /> |
| 21 | <img | 21 | <img |
| 22 | v-if="imageUrl" | 22 | v-if="imageUrl" |
| 23 | :src="imageUrl" | 23 | :src="imageUrl" |
| 24 | height="150" | 24 | height="150" |
| 25 | style="border-radius:50%; width:150px" | 25 | style="border-radius:50%; width:150px" |
| 26 | /> | 26 | /> |
| 27 | </v-avatar> | 27 | </v-avatar> |
| 28 | <input | 28 | <input |
| 29 | type="file" | 29 | type="file" |
| 30 | style="display:none" | 30 | style="display:none" |
| 31 | ref="image" | 31 | ref="image" |
| 32 | accept="image/*" | 32 | accept="image/*" |
| 33 | @change="onFilePicked" | 33 | @change="onFilePicked" |
| 34 | /> | 34 | /> |
| 35 | </v-flex> | 35 | </v-flex> |
| 36 | </v-layout> | 36 | </v-layout> |
| 37 | <v-layout wrap> | 37 | <v-layout wrap> |
| 38 | <v-flex xs12 sm6> | 38 | <v-flex xs12 sm6> |
| 39 | <v-layout> | 39 | <v-layout> |
| 40 | <v-flex xs4 class="pt-4 subheading"> | 40 | <v-flex xs4 class="pt-4 subheading"> |
| 41 | <label class="right">Name:</label> | 41 | <label class="right">Name:</label> |
| 42 | </v-flex> | 42 | </v-flex> |
| 43 | <v-flex xs8 class="ml-3"> | 43 | <v-flex xs8 class="ml-3"> |
| 44 | <v-text-field | 44 | <v-text-field |
| 45 | v-model="editedItem.name" | 45 | v-model="editedItem.name" |
| 46 | placeholder="fill your Name" | 46 | placeholder="fill your Name" |
| 47 | name="name" | 47 | name="name" |
| 48 | type="text" | 48 | type="text" |
| 49 | required | 49 | required |
| 50 | ></v-text-field> | 50 | ></v-text-field> |
| 51 | </v-flex> | 51 | </v-flex> |
| 52 | </v-layout> | 52 | </v-layout> |
| 53 | </v-flex> | 53 | </v-flex> |
| 54 | <v-flex xs12 sm6> | 54 | <v-flex xs12 sm6> |
| 55 | <v-layout> | 55 | <v-layout> |
| 56 | <v-flex xs4 class="pt-4 subheading"> | 56 | <v-flex xs4 class="pt-4 subheading"> |
| 57 | <label class="right">Email ID:</label> | 57 | <label class="right">Email ID:</label> |
| 58 | </v-flex> | 58 | </v-flex> |
| 59 | <v-flex xs8 class="ml-3"> | 59 | <v-flex xs8 class="ml-3"> |
| 60 | <v-text-field | 60 | <v-text-field |
| 61 | placeholder="fill your email" | 61 | placeholder="fill your email" |
| 62 | v-model="editedItem.email" | 62 | v-model="editedItem.email" |
| 63 | type="text" | 63 | type="text" |
| 64 | name="email" | 64 | name="email" |
| 65 | required | 65 | required |
| 66 | ></v-text-field> | 66 | ></v-text-field> |
| 67 | </v-flex> | 67 | </v-flex> |
| 68 | </v-layout> | 68 | </v-layout> |
| 69 | </v-flex> | 69 | </v-flex> |
| 70 | </v-layout> | 70 | </v-layout> |
| 71 | <v-layout wrap> | 71 | <v-layout wrap> |
| 72 | <v-flex xs12 sm6> | 72 | <v-flex xs12 sm6> |
| 73 | <v-layout> | 73 | <v-layout> |
| 74 | <v-flex xs4 class="pt-4 subheading"> | 74 | <v-flex xs4 class="pt-4 subheading"> |
| 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 75 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 76 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 77 | </v-flex> | 77 | </v-flex> |
| 78 | <v-flex xs8 class="ml-3"> | 78 | <v-flex xs8 class="ml-3"> |
| 79 | <v-menu | 79 | <v-menu |
| 80 | ref="menu" | 80 | ref="menu" |
| 81 | :close-on-content-click="false" | 81 | :close-on-content-click="false" |
| 82 | v-model="menu2" | 82 | v-model="menu2" |
| 83 | :nudge-right="40" | 83 | :nudge-right="40" |
| 84 | lazy | 84 | lazy |
| 85 | transition="scale-transition" | 85 | transition="scale-transition" |
| 86 | offset-y | 86 | offset-y |
| 87 | full-width | 87 | full-width |
| 88 | min-width="290px" | 88 | min-width="290px" |
| 89 | > | 89 | > |
| 90 | <v-text-field | 90 | <v-text-field |
| 91 | slot="activator" | 91 | slot="activator" |
| 92 | v-model="editedItem.dob" | 92 | v-model="editedItem.dob" |
| 93 | placeholder="Select date" | 93 | placeholder="Select date" |
| 94 | ></v-text-field> | 94 | ></v-text-field> |
| 95 | <v-date-picker | 95 | <v-date-picker |
| 96 | ref="picker" | 96 | ref="picker" |
| 97 | v-model="editedItem.dob" | 97 | v-model="editedItem.dob" |
| 98 | :max="new Date().toISOString().substr(0, 10)" | 98 | :max="new Date().toISOString().substr(0, 10)" |
| 99 | min="1950-01-01" | 99 | min="1950-01-01" |
| 100 | @input="menu2 = false" | 100 | @input="menu2 = false" |
| 101 | ></v-date-picker> | 101 | ></v-date-picker> |
| 102 | </v-menu> | 102 | </v-menu> |
| 103 | </v-flex> | 103 | </v-flex> |
| 104 | </v-layout> | 104 | </v-layout> |
| 105 | </v-flex> | 105 | </v-flex> |
| 106 | <v-flex xs12 sm6> | 106 | <v-flex xs12 sm6> |
| 107 | <v-layout> | 107 | <v-layout> |
| 108 | <v-flex xs4 class="pt-4 subheading"> | 108 | <v-flex xs4 class="pt-4 subheading"> |
| 109 | <label class="right">Gender:</label> | 109 | <label class="right">Gender:</label> |
| 110 | </v-flex> | 110 | </v-flex> |
| 111 | <v-flex xs8 class="ml-3"> | 111 | <v-flex xs8 class="ml-3"> |
| 112 | <v-select | 112 | <v-select |
| 113 | :items="gender" | 113 | :items="gender" |
| 114 | v-model="editedItem.gender" | 114 | v-model="editedItem.gender" |
| 115 | label="Select gender" | 115 | label="Select gender" |
| 116 | name="gender" | 116 | name="gender" |
| 117 | required | 117 | required |
| 118 | ></v-select> | 118 | ></v-select> |
| 119 | </v-flex> | 119 | </v-flex> |
| 120 | </v-layout> | 120 | </v-layout> |
| 121 | </v-flex> | 121 | </v-flex> |
| 122 | </v-layout> | 122 | </v-layout> |
| 123 | <v-layout wrap> | 123 | <v-layout wrap> |
| 124 | <v-flex xs12 sm6> | 124 | <v-flex xs12 sm6> |
| 125 | <v-layout> | 125 | <v-layout> |
| 126 | <v-flex xs4 class="pt-4 subheading"> | 126 | <v-flex xs4 class="pt-4 subheading"> |
| 127 | <label class="right">Religion:</label> | 127 | <label class="right">Religion:</label> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | <v-flex xs8 class="ml-3"> | 129 | <v-flex xs8 class="ml-3"> |
| 130 | <v-text-field | 130 | <v-text-field |
| 131 | v-model="editedItem.religion" | 131 | v-model="editedItem.religion" |
| 132 | placeholder="fill your Religion" | 132 | placeholder="fill your Religion" |
| 133 | name="religion" | 133 | name="religion" |
| 134 | type="text" | 134 | type="text" |
| 135 | required | 135 | required |
| 136 | ></v-text-field> | 136 | ></v-text-field> |
| 137 | </v-flex> | 137 | </v-flex> |
| 138 | </v-layout> | 138 | </v-layout> |
| 139 | </v-flex> | 139 | </v-flex> |
| 140 | <v-flex xs12 sm6> | 140 | <v-flex xs12 sm6> |
| 141 | <v-layout> | 141 | <v-layout> |
| 142 | <v-flex xs4 class="pt-4 subheading"> | 142 | <v-flex xs4 class="pt-4 subheading"> |
| 143 | <label class="right">JoiningDate:</label> | 143 | <label class="right">JoiningDate:</label> |
| 144 | </v-flex> | 144 | </v-flex> |
| 145 | <v-flex xs8 class="ml-3"> | 145 | <v-flex xs8 class="ml-3"> |
| 146 | <v-menu | 146 | <v-menu |
| 147 | ref="menu" | 147 | ref="menu" |
| 148 | :close-on-content-click="false" | 148 | :close-on-content-click="false" |
| 149 | v-model="menu3" | 149 | v-model="menu3" |
| 150 | :nudge-right="40" | 150 | :nudge-right="40" |
| 151 | lazy | 151 | lazy |
| 152 | transition="scale-transition" | 152 | transition="scale-transition" |
| 153 | offset-y | 153 | offset-y |
| 154 | full-width | 154 | full-width |
| 155 | min-width="290px" | 155 | min-width="290px" |
| 156 | > | 156 | > |
| 157 | <v-text-field | 157 | <v-text-field |
| 158 | slot="activator" | 158 | slot="activator" |
| 159 | v-model="editedItem.joiningDate" | 159 | v-model="editedItem.joiningDate" |
| 160 | placeholder="Select date" | 160 | placeholder="Select date" |
| 161 | ></v-text-field> | 161 | ></v-text-field> |
| 162 | <v-date-picker | 162 | <v-date-picker |
| 163 | ref="picker" | 163 | ref="picker" |
| 164 | v-model="editedItem.joiningDate" | 164 | v-model="editedItem.joiningDate" |
| 165 | :max="new Date().toISOString().substr(0, 10)" | 165 | :max="new Date().toISOString().substr(0, 10)" |
| 166 | min="1950-01-01" | 166 | min="1950-01-01" |
| 167 | @input="menu3 = false" | 167 | @input="menu3 = false" |
| 168 | ></v-date-picker> | 168 | ></v-date-picker> |
| 169 | </v-menu> | 169 | </v-menu> |
| 170 | </v-flex> | 170 | </v-flex> |
| 171 | </v-layout> | 171 | </v-layout> |
| 172 | </v-flex> | 172 | </v-flex> |
| 173 | </v-layout> | 173 | </v-layout> |
| 174 | <v-layout wrap> | 174 | <v-layout wrap> |
| 175 | <v-flex xs12 sm6> | 175 | <v-flex xs12 sm6> |
| 176 | <v-layout> | 176 | <v-layout> |
| 177 | <v-flex xs4 class="pt-4 subheading"> | 177 | <v-flex xs4 class="pt-4 subheading"> |
| 178 | <label class="right">Phone:</label> | 178 | <label class="right">Phone:</label> |
| 179 | </v-flex> | 179 | </v-flex> |
| 180 | <v-flex xs8 class="ml-3"> | 180 | <v-flex xs8 class="ml-3"> |
| 181 | <v-text-field | 181 | <v-text-field |
| 182 | v-model="editedItem.phone" | 182 | v-model="editedItem.phone" |
| 183 | placeholder="fill your MobileNo" | 183 | placeholder="fill your MobileNo" |
| 184 | name="mobileNo" | 184 | name="mobileNo" |
| 185 | type="number" | 185 | type="number" |
| 186 | required | 186 | required |
| 187 | ></v-text-field> | 187 | ></v-text-field> |
| 188 | </v-flex> | 188 | </v-flex> |
| 189 | </v-layout> | 189 | </v-layout> |
| 190 | </v-flex> | 190 | </v-flex> |
| 191 | <v-flex xs12 sm6> | 191 | <v-flex xs12 sm6> |
| 192 | <v-layout> | 192 | <v-layout> |
| 193 | <v-flex xs4 class="pt-4 subheading"> | 193 | <v-flex xs4 class="pt-4 subheading"> |
| 194 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 194 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 195 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 195 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 196 | </v-flex> | 196 | </v-flex> |
| 197 | <v-flex xs8 class="ml-3"> | 197 | <v-flex xs8 class="ml-3"> |
| 198 | <v-autocomplete | 198 | <v-autocomplete |
| 199 | v-model="editedItem.role" | 199 | v-model="editedItem.role" |
| 200 | :label="editedItem.role" | 200 | :label="editedItem.role" |
| 201 | :items="userRole" | 201 | :items="userRole" |
| 202 | item-text="name" | 202 | item-text="name" |
| 203 | item-value="role" | 203 | item-value="role" |
| 204 | required | 204 | required |
| 205 | ></v-autocomplete> | 205 | ></v-autocomplete> |
| 206 | </v-flex> | 206 | </v-flex> |
| 207 | </v-layout> | 207 | </v-layout> |
| 208 | </v-flex> | 208 | </v-flex> |
| 209 | </v-layout> | 209 | </v-layout> |
| 210 | <v-layout wrap> | 210 | <v-layout wrap> |
| 211 | <v-flex xs12 sm6> | 211 | <v-flex xs12 sm6> |
| 212 | <v-layout> | 212 | <v-layout> |
| 213 | <v-flex xs4 class="pt-4 subheading"> | 213 | <v-flex xs4 class="pt-4 subheading"> |
| 214 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 214 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 215 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> | 215 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> |
| 216 | </v-flex> | 216 | </v-flex> |
| 217 | <v-flex xs8 class="ml-3"> | 217 | <v-flex xs8 class="ml-3"> |
| 218 | <v-text-field | 218 | <v-text-field |
| 219 | label="Select Image" | 219 | label="Select Image" |
| 220 | @click="pickFile" | 220 | @click="pickFile" |
| 221 | v-model="imageName" | 221 | v-model="imageName" |
| 222 | append-icon="attach_file" | 222 | append-icon="attach_file" |
| 223 | ></v-text-field> | 223 | ></v-text-field> |
| 224 | </v-flex> | 224 | </v-flex> |
| 225 | </v-layout> | 225 | </v-layout> |
| 226 | </v-flex> | 226 | </v-flex> |
| 227 | <v-flex xs12 sm6> | 227 | <v-flex xs12 sm6> |
| 228 | <v-layout> | 228 | <v-layout> |
| 229 | <v-flex xs4 class="pt-4 subheading"> | 229 | <v-flex xs4 class="pt-4 subheading"> |
| 230 | <label class="right">Address:</label> | 230 | <label class="right">Address:</label> |
| 231 | </v-flex> | 231 | </v-flex> |
| 232 | <v-flex xs8 class="ml-3"> | 232 | <v-flex xs8 class="ml-3"> |
| 233 | <v-text-field | 233 | <v-text-field |
| 234 | name="input-4-3" | 234 | name="input-4-3" |
| 235 | v-model="editedItem.address" | 235 | v-model="editedItem.address" |
| 236 | placeholder="fill Your Address" | 236 | placeholder="fill Your Address" |
| 237 | required | 237 | required |
| 238 | ></v-text-field> | 238 | ></v-text-field> |
| 239 | </v-flex> | 239 | </v-flex> |
| 240 | </v-layout> | 240 | </v-layout> |
| 241 | </v-flex> | 241 | </v-flex> |
| 242 | </v-layout> | 242 | </v-layout> |
| 243 | <v-layout> | 243 | <v-layout> |
| 244 | <v-flex xs12 sm12> | 244 | <v-flex xs12 sm12> |
| 245 | <v-card-actions class="hidden-sm-only hidden-xs-only"> | 245 | <v-card-actions class="hidden-sm-only hidden-xs-only"> |
| 246 | <v-spacer></v-spacer> | 246 | <v-spacer></v-spacer> |
| 247 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 247 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 248 | </v-card-actions> | 248 | </v-card-actions> |
| 249 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> | 249 | <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> |
| 250 | <v-spacer></v-spacer> | 250 | <v-spacer></v-spacer> |
| 251 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> | 251 | <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> |
| 252 | <v-spacer></v-spacer> | 252 | <v-spacer></v-spacer> |
| 253 | </v-card-actions> | 253 | </v-card-actions> |
| 254 | </v-flex> | 254 | </v-flex> |
| 255 | </v-layout> | 255 | </v-layout> |
| 256 | </v-card-text> | 256 | </v-card-text> |
| 257 | </v-card> | 257 | </v-card> |
| 258 | </v-dialog> | 258 | </v-dialog> |
| 259 | <!-- ****** PROFILE User DETAILS ****** --> | 259 | <!-- ****** PROFILE User DETAILS ****** --> |
| 260 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable> | 260 | <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent> |
| 261 | <v-card flat class="card-style pa-3" dark> | 261 | <v-card flat class="card-style pa-3" dark> |
| 262 | <v-layout> | 262 | <v-layout> |
| 263 | <v-flex xs12> | 263 | <v-flex xs12> |
| 264 | <label class="title text-xs-center">View User</label> | 264 | <label class="title text-xs-center">View User</label> |
| 265 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> | 265 | <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> |
| 266 | </v-flex> | 266 | </v-flex> |
| 267 | </v-layout> | 267 | </v-layout> |
| 268 | <v-card-text> | 268 | <v-card-text> |
| 269 | <v-container grid-list-md> | 269 | <v-container grid-list-md> |
| 270 | <v-layout wrap> | 270 | <v-layout wrap> |
| 271 | <v-flex> | 271 | <v-flex> |
| 272 | <v-flex align-center justify-center layout text-xs-center> | 272 | <v-flex align-center justify-center layout text-xs-center> |
| 273 | <v-avatar size="100px"> | 273 | <v-avatar size="100px"> |
| 274 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> | 274 | <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> |
| 275 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> | 275 | <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> |
| 276 | </v-avatar> | 276 | </v-avatar> |
| 277 | </v-flex> | 277 | </v-flex> |
| 278 | <v-layout> | 278 | <v-layout> |
| 279 | <v-flex xs4 sm6> | 279 | <v-flex xs4 sm6> |
| 280 | <h5 class="right my-1"> | 280 | <h5 class="right my-1"> |
| 281 | <b>Name:</b> | 281 | <b>Name:</b> |
| 282 | </h5> | 282 | </h5> |
| 283 | </v-flex> | 283 | </v-flex> |
| 284 | <v-flex sm6 xs8> | 284 | <v-flex sm6 xs8> |
| 285 | <h5 class="my-1">{{ editedItem.name }}</h5> | 285 | <h5 class="my-1">{{ editedItem.name }}</h5> |
| 286 | </v-flex> | 286 | </v-flex> |
| 287 | </v-layout> | 287 | </v-layout> |
| 288 | <v-layout> | 288 | <v-layout> |
| 289 | <v-flex xs4 sm6> | 289 | <v-flex xs4 sm6> |
| 290 | <h5 class="right my-1"> | 290 | <h5 class="right my-1"> |
| 291 | <b>Email:</b> | 291 | <b>Email:</b> |
| 292 | </h5> | 292 | </h5> |
| 293 | </v-flex> | 293 | </v-flex> |
| 294 | <v-flex sm6 xs8> | 294 | <v-flex sm6 xs8> |
| 295 | <h5 class="my-1">{{ editedItem.email }}</h5> | 295 | <h5 class="my-1">{{ editedItem.email }}</h5> |
| 296 | </v-flex> | 296 | </v-flex> |
| 297 | </v-layout> | 297 | </v-layout> |
| 298 | <v-layout> | 298 | <v-layout> |
| 299 | <v-flex xs4 sm6> | 299 | <v-flex xs4 sm6> |
| 300 | <h5 class="right my-1"> | 300 | <h5 class="right my-1"> |
| 301 | <b>Gender:</b> | 301 | <b>Gender:</b> |
| 302 | </h5> | 302 | </h5> |
| 303 | </v-flex> | 303 | </v-flex> |
| 304 | <v-flex sm6 xs8> | 304 | <v-flex sm6 xs8> |
| 305 | <h5 class="my-1">{{ editedItem.gender }}</h5> | 305 | <h5 class="my-1">{{ editedItem.gender }}</h5> |
| 306 | </v-flex> | 306 | </v-flex> |
| 307 | </v-layout> | 307 | </v-layout> |
| 308 | <v-layout> | 308 | <v-layout> |
| 309 | <v-flex xs4 sm6> | 309 | <v-flex xs4 sm6> |
| 310 | <h5 class="right my-1"> | 310 | <h5 class="right my-1"> |
| 311 | <b>Religion:</b> | 311 | <b>Religion:</b> |
| 312 | </h5> | 312 | </h5> |
| 313 | </v-flex> | 313 | </v-flex> |
| 314 | <v-flex sm6 xs8> | 314 | <v-flex sm6 xs8> |
| 315 | <h5 class="my-1">{{ editedItem.religion }}</h5> | 315 | <h5 class="my-1">{{ editedItem.religion }}</h5> |
| 316 | </v-flex> | 316 | </v-flex> |
| 317 | </v-layout> | 317 | </v-layout> |
| 318 | <v-layout> | 318 | <v-layout> |
| 319 | <v-flex xs4 sm6> | 319 | <v-flex xs4 sm6> |
| 320 | <h5 class="right my-1"> | 320 | <h5 class="right my-1"> |
| 321 | <b>Role:</b> | 321 | <b>Role:</b> |
| 322 | </h5> | 322 | </h5> |
| 323 | </v-flex> | 323 | </v-flex> |
| 324 | <v-flex sm6 xs8> | 324 | <v-flex sm6 xs8> |
| 325 | <h5 class="my-1">{{ editedItem.role }}</h5> | 325 | <h5 class="my-1">{{ editedItem.role }}</h5> |
| 326 | </v-flex> | 326 | </v-flex> |
| 327 | </v-layout> | 327 | </v-layout> |
| 328 | <v-layout> | 328 | <v-layout> |
| 329 | <v-flex xs4 sm6> | 329 | <v-flex xs4 sm6> |
| 330 | <h5 class="right my-1"> | 330 | <h5 class="right my-1"> |
| 331 | <b>Phone:</b> | 331 | <b>Phone:</b> |
| 332 | </h5> | 332 | </h5> |
| 333 | </v-flex> | 333 | </v-flex> |
| 334 | <v-flex sm6 xs8> | 334 | <v-flex sm6 xs8> |
| 335 | <h5 class="my-1">{{ editedItem.phone }}</h5> | 335 | <h5 class="my-1">{{ editedItem.phone }}</h5> |
| 336 | </v-flex> | 336 | </v-flex> |
| 337 | </v-layout> | 337 | </v-layout> |
| 338 | <v-layout> | 338 | <v-layout> |
| 339 | <v-flex xs4 sm6> | 339 | <v-flex xs4 sm6> |
| 340 | <h5 class="right my-1"> | 340 | <h5 class="right my-1"> |
| 341 | <b>JoiningDate:</b> | 341 | <b>JoiningDate:</b> |
| 342 | </h5> | 342 | </h5> |
| 343 | </v-flex> | 343 | </v-flex> |
| 344 | <v-flex sm6 xs8> | 344 | <v-flex sm6 xs8> |
| 345 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> | 345 | <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> |
| 346 | </v-flex> | 346 | </v-flex> |
| 347 | </v-layout> | 347 | </v-layout> |
| 348 | <v-layout> | 348 | <v-layout> |
| 349 | <v-flex xs4 sm6> | 349 | <v-flex xs4 sm6> |
| 350 | <h5 class="right my-1"> | 350 | <h5 class="right my-1"> |
| 351 | <label class="right hidden-sm-only hidden-xs-only"> | 351 | <label class="right hidden-sm-only hidden-xs-only"> |
| 352 | <b>Date of Birth:</b> | 352 | <b>Date of Birth:</b> |
| 353 | </label> | 353 | </label> |
| 354 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> | 354 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> |
| 355 | <b>D.O.B:</b> | 355 | <b>D.O.B:</b> |
| 356 | </label> | 356 | </label> |
| 357 | </h5> | 357 | </h5> |
| 358 | </v-flex> | 358 | </v-flex> |
| 359 | <v-flex sm6 xs8> | 359 | <v-flex sm6 xs8> |
| 360 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> | 360 | <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> |
| 361 | </v-flex> | 361 | </v-flex> |
| 362 | </v-layout> | 362 | </v-layout> |
| 363 | <v-layout> | 363 | <v-layout> |
| 364 | <v-flex xs4 sm6> | 364 | <v-flex xs4 sm6> |
| 365 | <h5 class="right my-1"> | 365 | <h5 class="right my-1"> |
| 366 | <b>Address:</b> | 366 | <b>Address:</b> |
| 367 | </h5> | 367 | </h5> |
| 368 | </v-flex> | 368 | </v-flex> |
| 369 | <v-flex sm6 xs8> | 369 | <v-flex sm6 xs8> |
| 370 | <h5 class="my-1">{{ editedItem.address }}</h5> | 370 | <h5 class="my-1">{{ editedItem.address }}</h5> |
| 371 | </v-flex> | 371 | </v-flex> |
| 372 | </v-layout> | 372 | </v-layout> |
| 373 | </v-flex> | 373 | </v-flex> |
| 374 | </v-layout> | 374 | </v-layout> |
| 375 | </v-container> | 375 | </v-container> |
| 376 | </v-card-text> | 376 | </v-card-text> |
| 377 | </v-card> | 377 | </v-card> |
| 378 | </v-dialog> | 378 | </v-dialog> |
| 379 | 379 | ||
| 380 | <!-- ****** EXISTING-USER TABLE DATA****** --> | 380 | <!-- ****** EXISTING-USER TABLE DATA****** --> |
| 381 | <v-toolbar color="transparent" flat> | 381 | <v-toolbar color="transparent" flat> |
| 382 | <v-btn | 382 | <v-btn |
| 383 | fab | 383 | fab |
| 384 | dark | 384 | dark |
| 385 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 385 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 386 | small | 386 | small |
| 387 | @click="addUserDialog = true" | 387 | @click="addUserDialog = true" |
| 388 | > | 388 | > |
| 389 | <v-icon dark>add</v-icon> | 389 | <v-icon dark>add</v-icon> |
| 390 | </v-btn> | 390 | </v-btn> |
| 391 | <v-btn | 391 | <v-btn |
| 392 | round | 392 | round |
| 393 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 393 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 394 | dark | 394 | dark |
| 395 | @click="addUserDialog = true" | 395 | @click="addUserDialog = true" |
| 396 | > | 396 | > |
| 397 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User | 397 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add User |
| 398 | </v-btn> | 398 | </v-btn> |
| 399 | <v-spacer></v-spacer> | 399 | <v-spacer></v-spacer> |
| 400 | <v-card-title class="body-1" v-show="show"> | 400 | <v-card-title class="body-1" v-show="show"> |
| 401 | <v-btn icon large flat @click="displaySearch"> | 401 | <v-btn icon large flat @click="displaySearch"> |
| 402 | <v-avatar size="27"> | 402 | <v-avatar size="27"> |
| 403 | <img src="/static/icon/search.png" alt="icon" /> | 403 | <img src="/static/icon/search.png" alt="icon" /> |
| 404 | </v-avatar> | 404 | </v-avatar> |
| 405 | </v-btn> | 405 | </v-btn> |
| 406 | </v-card-title> | 406 | </v-card-title> |
| 407 | <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> | 407 | <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> |
| 408 | <v-layout> | 408 | <v-layout> |
| 409 | <v-text-field | 409 | <v-text-field |
| 410 | autofocus | 410 | autofocus |
| 411 | v-model="search" | 411 | v-model="search" |
| 412 | label="Search" | 412 | label="Search" |
| 413 | prepend-inner-icon="search" | 413 | prepend-inner-icon="search" |
| 414 | color="primary" | 414 | color="primary" |
| 415 | ></v-text-field> | 415 | ></v-text-field> |
| 416 | <v-icon @click="closeSearch" color="error">close</v-icon> | 416 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 417 | </v-layout> | 417 | </v-layout> |
| 418 | </v-flex> | 418 | </v-flex> |
| 419 | </v-toolbar> | 419 | </v-toolbar> |
| 420 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> | 420 | <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> |
| 421 | <template slot="items" slot-scope="props"> | 421 | <template slot="items" slot-scope="props"> |
| 422 | <td class="td td-row">{{ props.index + 1 }}</td> | 422 | <td class="td td-row">{{ props.index + 1 }}</td> |
| 423 | <td class="td td-row text-xs-center"> | 423 | <td class="td td-row text-xs-center"> |
| 424 | <v-avatar size="40"> | 424 | <v-avatar size="40"> |
| 425 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> | 425 | <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> |
| 426 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> | 426 | <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> |
| 427 | </v-avatar> | 427 | </v-avatar> |
| 428 | </td> | 428 | </td> |
| 429 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> | 429 | <td class="text-xs-center td td-row">{{ props.item.name}}</td> |
| 430 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> | 430 | <td class="text-xs-center td td-row">{{ props.item.email }}</td> |
| 431 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> | 431 | <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> |
| 432 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> | 432 | <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> |
| 433 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> | 433 | <td class="text-xs-center td td-row">{{ props.item.phone }}</td> |
| 434 | <td class="text-xs-center td td-row"> | 434 | <td class="text-xs-center td td-row"> |
| 435 | <v-switch | 435 | <v-switch |
| 436 | class="pl-3" | 436 | class="pl-3" |
| 437 | v-model="props.item.status" | 437 | v-model="props.item.status" |
| 438 | @change="suspendStatus(props.item.status,props.item._id)" | 438 | @change="suspendStatus(props.item.status,props.item._id)" |
| 439 | ></v-switch> | 439 | ></v-switch> |
| 440 | </td> | 440 | </td> |
| 441 | <td class="text-xs-center td td-row"> | 441 | <td class="text-xs-center td td-row"> |
| 442 | <span> | 442 | <span> |
| 443 | <v-tooltip top> | 443 | <v-tooltip top> |
| 444 | <img | 444 | <img |
| 445 | slot="activator" | 445 | slot="activator" |
| 446 | style="cursor:pointer; width:25px; height:25px; " | 446 | style="cursor:pointer; width:25px; height:25px; " |
| 447 | class="mr-3" | 447 | class="mr-3" |
| 448 | @click="profile(props.item)" | 448 | @click="profile(props.item)" |
| 449 | src="/static/icon/view.png" | 449 | src="/static/icon/view.png" |
| 450 | /> | 450 | /> |
| 451 | <span>View</span> | 451 | <span>View</span> |
| 452 | </v-tooltip> | 452 | </v-tooltip> |
| 453 | <v-tooltip top> | 453 | <v-tooltip top> |
| 454 | <img | 454 | <img |
| 455 | slot="activator" | 455 | slot="activator" |
| 456 | style="cursor:pointer; width:20px; height:18px; " | 456 | style="cursor:pointer; width:20px; height:18px; " |
| 457 | class="mr-3" | 457 | class="mr-3" |
| 458 | @click="editItem(props.item)" | 458 | @click="editItem(props.item)" |
| 459 | src="/static/icon/edit.png" | 459 | src="/static/icon/edit.png" |
| 460 | /> | 460 | /> |
| 461 | <span>Edit</span> | 461 | <span>Edit</span> |
| 462 | </v-tooltip> | 462 | </v-tooltip> |
| 463 | <!-- <v-tooltip top> | 463 | <!-- <v-tooltip top> |
| 464 | <img | 464 | <img |
| 465 | slot="activator" | 465 | slot="activator" |
| 466 | style="cursor:pointer; width:20px; height:20px; " | 466 | style="cursor:pointer; width:20px; height:20px; " |
| 467 | class="mr-3" | 467 | class="mr-3" |
| 468 | @click="deleteItem(props.item)" | 468 | @click="deleteItem(props.item)" |
| 469 | src="/static/icon/delete.png" | 469 | src="/static/icon/delete.png" |
| 470 | /> | 470 | /> |
| 471 | <span>Delete</span> | 471 | <span>Delete</span> |
| 472 | </v-tooltip>--> | 472 | </v-tooltip>--> |
| 473 | </span> | 473 | </span> |
| 474 | </td> | 474 | </td> |
| 475 | </template> | 475 | </template> |
| 476 | <v-alert | 476 | <v-alert |
| 477 | slot="no-results" | 477 | slot="no-results" |
| 478 | :value="true" | 478 | :value="true" |
| 479 | color="error" | 479 | color="error" |
| 480 | icon="warning" | 480 | icon="warning" |
| 481 | >Your search for "{{ search }}" found no results.</v-alert> | 481 | >Your search for "{{ search }}" found no results.</v-alert> |
| 482 | </v-data-table> | 482 | </v-data-table> |
| 483 | <!-- DIALOG BOX - Add User Data --> | 483 | <!-- DIALOG BOX - Add User Data --> |
| 484 | <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog"> | 484 | <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent> |
| 485 | <v-card flat class="card-style pa-2" dark> | 485 | <v-card flat class="card-style pa-2" dark> |
| 486 | <v-layout> | 486 | <v-layout> |
| 487 | <v-flex xs12> | 487 | <v-flex xs12> |
| 488 | <label class="title text-xs-center">Add User</label> | 488 | <label class="title text-xs-center">Add User</label> |
| 489 | <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> | 489 | <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> |
| 490 | </v-flex> | 490 | </v-flex> |
| 491 | </v-layout> | 491 | </v-layout> |
| 492 | <v-form ref="form" v-model="valid" lazy-validation> | 492 | <v-form ref="form" v-model="valid" lazy-validation> |
| 493 | <v-container fluid> | 493 | <v-container fluid> |
| 494 | <v-layout> | 494 | <v-layout> |
| 495 | <v-flex | 495 | <v-flex |
| 496 | xs12 | 496 | xs12 |
| 497 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" | 497 | class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" |
| 498 | > | 498 | > |
| 499 | <v-avatar size="80px"> | 499 | <v-avatar size="80px"> |
| 500 | <img src="/static/icon/user.png" v-if="!imageUrl" /> | 500 | <img src="/static/icon/user.png" v-if="!imageUrl" /> |
| 501 | </v-avatar> | 501 | </v-avatar> |
| 502 | <img | 502 | <img |
| 503 | :src="imageUrl" | 503 | :src="imageUrl" |
| 504 | height="150" | 504 | height="150" |
| 505 | v-if="imageUrl" | 505 | v-if="imageUrl" |
| 506 | style="border-radius:50%; width:150px" | 506 | style="border-radius:50%; width:150px" |
| 507 | /> | 507 | /> |
| 508 | </v-flex> | 508 | </v-flex> |
| 509 | </v-layout> | 509 | </v-layout> |
| 510 | <v-layout> | 510 | <v-layout> |
| 511 | <v-flex xs12 sm6> | 511 | <v-flex xs12 sm6> |
| 512 | <v-layout> | 512 | <v-layout> |
| 513 | <v-flex xs4 class="pt-4 subheading"> | 513 | <v-flex xs4 class="pt-4 subheading"> |
| 514 | <label class="right">Name:</label> | 514 | <label class="right">Name:</label> |
| 515 | </v-flex> | 515 | </v-flex> |
| 516 | <v-flex xs8 class="ml-3"> | 516 | <v-flex xs8 class="ml-3"> |
| 517 | <v-text-field | 517 | <v-text-field |
| 518 | v-model="addUser.name" | 518 | v-model="addUser.name" |
| 519 | placeholder="fill your Name" | 519 | placeholder="fill your Name" |
| 520 | name="name" | 520 | name="name" |
| 521 | type="text" | 521 | type="text" |
| 522 | :rules="nameRules" | 522 | :rules="nameRules" |
| 523 | required | 523 | required |
| 524 | ></v-text-field> | 524 | ></v-text-field> |
| 525 | </v-flex> | 525 | </v-flex> |
| 526 | </v-layout> | 526 | </v-layout> |
| 527 | </v-flex> | 527 | </v-flex> |
| 528 | <v-flex xs12 sm6> | 528 | <v-flex xs12 sm6> |
| 529 | <v-layout> | 529 | <v-layout> |
| 530 | <v-flex xs4 class="pt-4 subheading"> | 530 | <v-flex xs4 class="pt-4 subheading"> |
| 531 | <label class="right">Email ID:</label> | 531 | <label class="right">Email ID:</label> |
| 532 | </v-flex> | 532 | </v-flex> |
| 533 | <v-flex xs8 class="ml-3"> | 533 | <v-flex xs8 class="ml-3"> |
| 534 | <v-text-field | 534 | <v-text-field |
| 535 | placeholder="fill your email" | 535 | placeholder="fill your email" |
| 536 | :rules="emailRules" | 536 | :rules="emailRules" |
| 537 | v-model="addUser.email" | 537 | v-model="addUser.email" |
| 538 | type="text" | 538 | type="text" |
| 539 | name="email" | 539 | name="email" |
| 540 | required | 540 | required |
| 541 | ></v-text-field> | 541 | ></v-text-field> |
| 542 | </v-flex> | 542 | </v-flex> |
| 543 | </v-layout> | 543 | </v-layout> |
| 544 | </v-flex> | 544 | </v-flex> |
| 545 | </v-layout> | 545 | </v-layout> |
| 546 | <v-layout> | 546 | <v-layout> |
| 547 | <v-flex xs12 sm6> | 547 | <v-flex xs12 sm6> |
| 548 | <v-layout> | 548 | <v-layout> |
| 549 | <v-flex xs4 class="pt-4 subheading"> | 549 | <v-flex xs4 class="pt-4 subheading"> |
| 550 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> | 550 | <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> |
| 551 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> | 551 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> |
| 552 | </v-flex> | 552 | </v-flex> |
| 553 | <v-flex xs8 class="ml-3"> | 553 | <v-flex xs8 class="ml-3"> |
| 554 | <v-menu | 554 | <v-menu |
| 555 | ref="menu" | 555 | ref="menu" |
| 556 | :close-on-content-click="false" | 556 | :close-on-content-click="false" |
| 557 | v-model="menu" | 557 | v-model="menu" |
| 558 | :nudge-right="40" | 558 | :nudge-right="40" |
| 559 | lazy | 559 | lazy |
| 560 | transition="scale-transition" | 560 | transition="scale-transition" |
| 561 | offset-y | 561 | offset-y |
| 562 | full-width | 562 | full-width |
| 563 | min-width="290px" | 563 | min-width="290px" |
| 564 | > | 564 | > |
| 565 | <v-text-field | 565 | <v-text-field |
| 566 | slot="activator" | 566 | slot="activator" |
| 567 | :rules="dateRules" | 567 | :rules="dateRules" |
| 568 | v-model="addUser.dob" | 568 | v-model="addUser.dob" |
| 569 | placeholder="Select DOB" | 569 | placeholder="Select DOB" |
| 570 | ></v-text-field> | 570 | ></v-text-field> |
| 571 | <v-date-picker | 571 | <v-date-picker |
| 572 | ref="picker" | 572 | ref="picker" |
| 573 | v-model="addUser.dob" | 573 | v-model="addUser.dob" |
| 574 | :max="new Date().toISOString().substr(0, 10)" | 574 | :max="new Date().toISOString().substr(0, 10)" |
| 575 | min="1950-01-01" | 575 | min="1950-01-01" |
| 576 | @input="menu = false" | 576 | @input="menu = false" |
| 577 | ></v-date-picker> | 577 | ></v-date-picker> |
| 578 | </v-menu> | 578 | </v-menu> |
| 579 | </v-flex> | 579 | </v-flex> |
| 580 | </v-layout> | 580 | </v-layout> |
| 581 | </v-flex> | 581 | </v-flex> |
| 582 | <v-flex xs12 sm6> | 582 | <v-flex xs12 sm6> |
| 583 | <v-layout> | 583 | <v-layout> |
| 584 | <v-flex xs4 class="pt-4 subheading"> | 584 | <v-flex xs4 class="pt-4 subheading"> |
| 585 | <label class="right">Gender:</label> | 585 | <label class="right">Gender:</label> |
| 586 | </v-flex> | 586 | </v-flex> |
| 587 | <v-flex xs8 class="ml-3"> | 587 | <v-flex xs8 class="ml-3"> |
| 588 | <v-select | 588 | <v-select |
| 589 | v-model="addUser.gender" | 589 | v-model="addUser.gender" |
| 590 | :items="gender" | 590 | :items="gender" |
| 591 | label="Selct Gender " | 591 | label="Selct Gender " |
| 592 | :rules="genderRules" | 592 | :rules="genderRules" |
| 593 | required | 593 | required |
| 594 | ></v-select> | 594 | ></v-select> |
| 595 | </v-flex> | 595 | </v-flex> |
| 596 | </v-layout> | 596 | </v-layout> |
| 597 | </v-flex> | 597 | </v-flex> |
| 598 | </v-layout> | 598 | </v-layout> |
| 599 | <v-layout> | 599 | <v-layout> |
| 600 | <v-flex xs12 sm6> | 600 | <v-flex xs12 sm6> |
| 601 | <v-layout> | 601 | <v-layout> |
| 602 | <v-flex xs4 class="pt-4 subheading"> | 602 | <v-flex xs4 class="pt-4 subheading"> |
| 603 | <label class="right">Religion:</label> | 603 | <label class="right">Religion:</label> |
| 604 | </v-flex> | 604 | </v-flex> |
| 605 | <v-flex xs8 class="ml-3"> | 605 | <v-flex xs8 class="ml-3"> |
| 606 | <v-text-field | 606 | <v-text-field |
| 607 | v-model="addUser.religion" | 607 | v-model="addUser.religion" |
| 608 | placeholder="fill your Religion" | 608 | placeholder="fill your Religion" |
| 609 | name="Religion" | 609 | name="Religion" |
| 610 | type="text" | 610 | type="text" |
| 611 | :rules="religionRules" | 611 | :rules="religionRules" |
| 612 | required | 612 | required |
| 613 | ></v-text-field> | 613 | ></v-text-field> |
| 614 | </v-flex> | 614 | </v-flex> |
| 615 | </v-layout> | 615 | </v-layout> |
| 616 | </v-flex> | 616 | </v-flex> |
| 617 | <v-flex xs12 sm6> | 617 | <v-flex xs12 sm6> |
| 618 | <v-layout> | 618 | <v-layout> |
| 619 | <v-flex xs4 class="pt-4 subheading"> | 619 | <v-flex xs4 class="pt-4 subheading"> |
| 620 | <label class="right">JoiningDate:</label> | 620 | <label class="right">JoiningDate:</label> |
| 621 | </v-flex> | 621 | </v-flex> |
| 622 | <v-flex xs8 class="ml-3"> | 622 | <v-flex xs8 class="ml-3"> |
| 623 | <v-menu | 623 | <v-menu |
| 624 | ref="menu1" | 624 | ref="menu1" |
| 625 | :close-on-content-click="false" | 625 | :close-on-content-click="false" |
| 626 | v-model="menu1" | 626 | v-model="menu1" |
| 627 | :nudge-right="40" | 627 | :nudge-right="40" |
| 628 | lazy | 628 | lazy |
| 629 | transition="scale-transition" | 629 | transition="scale-transition" |
| 630 | offset-y | 630 | offset-y |
| 631 | full-width | 631 | full-width |
| 632 | min-width="290px" | 632 | min-width="290px" |
| 633 | > | 633 | > |
| 634 | <v-text-field | 634 | <v-text-field |
| 635 | slot="activator" | 635 | slot="activator" |
| 636 | :rules="joinDateRules" | 636 | :rules="joinDateRules" |
| 637 | v-model="addUser.joinDate" | 637 | v-model="addUser.joinDate" |
| 638 | placeholder="Select date" | 638 | placeholder="Select date" |
| 639 | ></v-text-field> | 639 | ></v-text-field> |
| 640 | <v-date-picker | 640 | <v-date-picker |
| 641 | ref="picker" | 641 | ref="picker" |
| 642 | v-model="addUser.joinDate" | 642 | v-model="addUser.joinDate" |
| 643 | :max="new Date().toISOString().substr(0, 10)" | 643 | :max="new Date().toISOString().substr(0, 10)" |
| 644 | min="1950-01-01" | 644 | min="1950-01-01" |
| 645 | @input="menu1 = false" | 645 | @input="menu1 = false" |
| 646 | ></v-date-picker> | 646 | ></v-date-picker> |
| 647 | </v-menu> | 647 | </v-menu> |
| 648 | </v-flex> | 648 | </v-flex> |
| 649 | </v-layout> | 649 | </v-layout> |
| 650 | </v-flex> | 650 | </v-flex> |
| 651 | </v-layout> | 651 | </v-layout> |
| 652 | <v-layout> | 652 | <v-layout> |
| 653 | <v-flex xs12 sm6> | 653 | <v-flex xs12 sm6> |
| 654 | <v-layout> | 654 | <v-layout> |
| 655 | <v-flex xs4 class="pt-4 subheading"> | 655 | <v-flex xs4 class="pt-4 subheading"> |
| 656 | <label class="right">Phone :</label> | 656 | <label class="right">Phone :</label> |
| 657 | </v-flex> | 657 | </v-flex> |
| 658 | <v-flex xs8 class="ml-3"> | 658 | <v-flex xs8 class="ml-3"> |
| 659 | <v-text-field | 659 | <v-text-field |
| 660 | v-model="addUser.mobileNo" | 660 | v-model="addUser.mobileNo" |
| 661 | placeholder="fill your Phone Number" | 661 | placeholder="fill your Phone Number" |
| 662 | name="mobileNo" | 662 | name="mobileNo" |
| 663 | type="number" | 663 | type="number" |
| 664 | :rules="mobileNoRules" | 664 | :rules="mobileNoRules" |
| 665 | required | 665 | required |
| 666 | ></v-text-field> | 666 | ></v-text-field> |
| 667 | </v-flex> | 667 | </v-flex> |
| 668 | </v-layout> | 668 | </v-layout> |
| 669 | </v-flex> | 669 | </v-flex> |
| 670 | <v-flex xs12 sm6> | 670 | <v-flex xs12 sm6> |
| 671 | <v-layout> | 671 | <v-layout> |
| 672 | <v-flex xs4 class="pt-4 subheading"> | 672 | <v-flex xs4 class="pt-4 subheading"> |
| 673 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> | 673 | <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> |
| 674 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> | 674 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> |
| 675 | </v-flex> | 675 | </v-flex> |
| 676 | <v-flex xs8 class="ml-3"> | 676 | <v-flex xs8 class="ml-3"> |
| 677 | <v-autocomplete | 677 | <v-autocomplete |
| 678 | v-model="addUser.role" | 678 | v-model="addUser.role" |
| 679 | :rules="role" | 679 | :rules="role" |
| 680 | :items="userRole" | 680 | :items="userRole" |
| 681 | item-text="name" | 681 | item-text="name" |
| 682 | item-value="name" | 682 | item-value="name" |
| 683 | placeholder="Select Role Name" | 683 | placeholder="Select Role Name" |
| 684 | required | 684 | required |
| 685 | ></v-autocomplete> | 685 | ></v-autocomplete> |
| 686 | </v-flex> | 686 | </v-flex> |
| 687 | </v-layout> | 687 | </v-layout> |
| 688 | </v-flex> | 688 | </v-flex> |
| 689 | </v-layout> | 689 | </v-layout> |
| 690 | <v-layout wrap> | 690 | <v-layout wrap> |
| 691 | <!-- <v-flex xs12 sm6> | 691 | <!-- <v-flex xs12 sm6> |
| 692 | <v-layout> | 692 | <v-layout> |
| 693 | <v-flex xs4 class="pt-4 subheading"> | 693 | <v-flex xs4 class="pt-4 subheading"> |
| 694 | <label class="right">Username:</label> | 694 | <label class="right">Username:</label> |
| 695 | </v-flex> | 695 | </v-flex> |
| 696 | <v-flex xs8 class="ml-3"> | 696 | <v-flex xs8 class="ml-3"> |
| 697 | <v-text-field | 697 | <v-text-field |
| 698 | v-model="addUser.userName" | 698 | v-model="addUser.userName" |
| 699 | placeholder="fill your User Name" | 699 | placeholder="fill your User Name" |
| 700 | type="text" | 700 | type="text" |
| 701 | :rules="userNameRules" | 701 | :rules="userNameRules" |
| 702 | required | 702 | required |
| 703 | ></v-text-field> | 703 | ></v-text-field> |
| 704 | </v-flex> | 704 | </v-flex> |
| 705 | </v-layout> | 705 | </v-layout> |
| 706 | </v-flex>--> | 706 | </v-flex>--> |
| 707 | <v-flex xs12 sm6> | 707 | <v-flex xs12 sm6> |
| 708 | <v-layout> | 708 | <v-layout> |
| 709 | <v-flex xs4 class="pt-4 subheading"> | 709 | <v-flex xs4 class="pt-4 subheading"> |
| 710 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> | 710 | <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> |
| 711 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> | 711 | <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> |
| 712 | </v-flex> | 712 | </v-flex> |
| 713 | <v-flex xs8 class="ml-3"> | 713 | <v-flex xs8 class="ml-3"> |
| 714 | <v-text-field | 714 | <v-text-field |
| 715 | label="Select Image" | 715 | label="Select Image" |
| 716 | @click="pickFile" | 716 | @click="pickFile" |
| 717 | v-model="imageName" | 717 | v-model="imageName" |
| 718 | append-icon="attach_file" | 718 | append-icon="attach_file" |
| 719 | ></v-text-field> | 719 | ></v-text-field> |
| 720 | <input | 720 | <input |
| 721 | type="file" | 721 | type="file" |
| 722 | style="display:none" | 722 | style="display:none" |
| 723 | ref="image" | 723 | ref="image" |
| 724 | accept="image/*" | 724 | accept="image/*" |
| 725 | @change="onFilePicked" | 725 | @change="onFilePicked" |
| 726 | /> | 726 | /> |
| 727 | </v-flex> | 727 | </v-flex> |
| 728 | </v-layout> | 728 | </v-layout> |
| 729 | </v-flex> | 729 | </v-flex> |
| 730 | <v-flex xs12 sm6> | 730 | <v-flex xs12 sm6> |
| 731 | <v-layout> | 731 | <v-layout> |
| 732 | <v-flex xs4 class="pt-4 subheading"> | 732 | <v-flex xs4 class="pt-4 subheading"> |
| 733 | <label class="right">Address:</label> | 733 | <label class="right">Address:</label> |
| 734 | </v-flex> | 734 | </v-flex> |
| 735 | <v-flex xs8 class="ml-3"> | 735 | <v-flex xs8 class="ml-3"> |
| 736 | <v-text-field | 736 | <v-text-field |
| 737 | name="input-4-3" | 737 | name="input-4-3" |
| 738 | v-model="addUser.presentAddress" | 738 | v-model="addUser.presentAddress" |
| 739 | :rules="presentAddress" | 739 | :rules="presentAddress" |
| 740 | placeholder="fill Your present Address" | 740 | placeholder="fill Your present Address" |
| 741 | required | 741 | required |
| 742 | ></v-text-field> | 742 | ></v-text-field> |
| 743 | </v-flex> | 743 | </v-flex> |
| 744 | </v-layout> | 744 | </v-layout> |
| 745 | </v-flex> | 745 | </v-flex> |
| 746 | </v-layout> | 746 | </v-layout> |
| 747 | <v-layout> | 747 | <v-layout> |
| 748 | <v-flex xs12 sm12> | 748 | <v-flex xs12 sm12> |
| 749 | <v-layout class="right"> | 749 | <v-layout class="right"> |
| 750 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> | 750 | <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> |
| 751 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 751 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 752 | </v-layout> | 752 | </v-layout> |
| 753 | </v-flex> | 753 | </v-flex> |
| 754 | </v-layout> | 754 | </v-layout> |
| 755 | </v-container> | 755 | </v-container> |
| 756 | </v-form> | 756 | </v-form> |
| 757 | </v-card> | 757 | </v-card> |
| 758 | </v-dialog> | 758 | </v-dialog> |
| 759 | <div class="loader" v-if="showLoader"> | 759 | <div class="loader" v-if="showLoader"> |
| 760 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 760 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 761 | </div> | 761 | </div> |
| 762 | <v-snackbar | 762 | <v-snackbar |
| 763 | :timeout="timeout" | 763 | :timeout="timeout" |
| 764 | :top="y === 'top'" | 764 | :top="y === 'top'" |
| 765 | :right="x === 'right'" | 765 | :right="x === 'right'" |
| 766 | :vertical="mode === 'vertical'" | 766 | :vertical="mode === 'vertical'" |
| 767 | v-model="snackbar" | 767 | v-model="snackbar" |
| 768 | :color="color" | 768 | :color="color" |
| 769 | >{{ text }}</v-snackbar> | 769 | >{{ text }}</v-snackbar> |
| 770 | </v-container> | 770 | </v-container> |
| 771 | </template> | 771 | </template> |
| 772 | 772 | ||
| 773 | <script> | 773 | <script> |
| 774 | import http from "@/Services/http.js"; | 774 | import http from "@/Services/http.js"; |
| 775 | import Util from "@/util"; | 775 | import Util from "@/util"; |
| 776 | import moment from "moment"; | 776 | import moment from "moment"; |
| 777 | import _ from "lodash"; | 777 | import _ from "lodash"; |
| 778 | 778 | ||
| 779 | export default { | 779 | export default { |
| 780 | data: () => ({ | 780 | data: () => ({ |
| 781 | component: "report-generate", | 781 | component: "report-generate", |
| 782 | snackbar: false, | 782 | snackbar: false, |
| 783 | y: "top", | 783 | y: "top", |
| 784 | x: "right", | 784 | x: "right", |
| 785 | mode: "", | 785 | mode: "", |
| 786 | timeout: 3000, | 786 | timeout: 3000, |
| 787 | color: "", | 787 | color: "", |
| 788 | text: "", | 788 | text: "", |
| 789 | show: true, | 789 | show: true, |
| 790 | showSearch: false, | 790 | showSearch: false, |
| 791 | showLoader: false, | 791 | showLoader: false, |
| 792 | loading: false, | 792 | loading: false, |
| 793 | addUserDialog: false, | 793 | addUserDialog: false, |
| 794 | date: null, | 794 | date: null, |
| 795 | search: "", | 795 | search: "", |
| 796 | menu: false, | 796 | menu: false, |
| 797 | menu1: false, | 797 | menu1: false, |
| 798 | menu2: false, | 798 | menu2: false, |
| 799 | menu3: false, | 799 | menu3: false, |
| 800 | viewUserDialog: false, | 800 | viewUserDialog: false, |
| 801 | editUserDialog: false, | 801 | editUserDialog: false, |
| 802 | valid: true, | 802 | valid: true, |
| 803 | isActive: true, | 803 | isActive: true, |
| 804 | newActive: false, | 804 | newActive: false, |
| 805 | pagination: { | 805 | pagination: { |
| 806 | rowsPerPage: 10, | 806 | rowsPerPage: 10, |
| 807 | }, | 807 | }, |
| 808 | imageData: {}, | 808 | imageData: {}, |
| 809 | imageName: "", | 809 | imageName: "", |
| 810 | imageUrl: "", | 810 | imageUrl: "", |
| 811 | imageFile: "", | 811 | imageFile: "", |
| 812 | nameRules: [(v) => !!v || "Name is required"], | 812 | nameRules: [(v) => !!v || "Name is required"], |
| 813 | dateRules: [(v) => !!v || " DOB is required"], | 813 | dateRules: [(v) => !!v || " DOB is required"], |
| 814 | genderRules: [(v) => !!v || " Gender Name is required"], | 814 | genderRules: [(v) => !!v || " Gender Name is required"], |
| 815 | pincode: [(v) => !!v || " Pincode is required"], | 815 | pincode: [(v) => !!v || " Pincode is required"], |
| 816 | role: [(v) => !!v || "Role Name is required"], | 816 | role: [(v) => !!v || "Role Name is required"], |
| 817 | permanentAddress: [(v) => !!v || " Permanent Address is required"], | 817 | permanentAddress: [(v) => !!v || " Permanent Address is required"], |
| 818 | presentAddress: [(v) => !!v || " Present Address is required"], | 818 | presentAddress: [(v) => !!v || " Present Address is required"], |
| 819 | mobileNoRules: [(v) => !!v || "Phone Number is required"], | 819 | mobileNoRules: [(v) => !!v || "Phone Number is required"], |
| 820 | religionRules: [(v) => !!v || "Religion Name is required"], | 820 | religionRules: [(v) => !!v || "Religion Name is required"], |
| 821 | joinDateRules: [(v) => !!v || " Join Date is required"], | 821 | joinDateRules: [(v) => !!v || " Join Date is required"], |
| 822 | userNameRules: [(v) => !!v || " User Name is required"], | 822 | userNameRules: [(v) => !!v || " User Name is required"], |
| 823 | passwordRules: [(v) => !!v || " Password is required"], | 823 | passwordRules: [(v) => !!v || " Password is required"], |
| 824 | errorMessages: "", | 824 | errorMessages: "", |
| 825 | userRole: [], | 825 | userRole: [], |
| 826 | emailRules: [ | 826 | emailRules: [ |
| 827 | (v) => !!v || "E-mail is required", | 827 | (v) => !!v || "E-mail is required", |
| 828 | (v) => | 828 | (v) => |
| 829 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || | 829 | /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || |
| 830 | "E-mail must be valid", | 830 | "E-mail must be valid", |
| 831 | ], | 831 | ], |
| 832 | gender: ["Male", "Female"], | 832 | gender: ["Male", "Female"], |
| 833 | headers: [ | 833 | headers: [ |
| 834 | { | 834 | { |
| 835 | text: "No", | 835 | text: "No", |
| 836 | align: "", | 836 | align: "", |
| 837 | sortable: false, | 837 | sortable: false, |
| 838 | value: "No", | 838 | value: "No", |
| 839 | }, | 839 | }, |
| 840 | { | 840 | { |
| 841 | text: "Profile Pic", | 841 | text: "Profile Pic", |
| 842 | value: "profilePicUrl", | 842 | value: "profilePicUrl", |
| 843 | sortable: false, | 843 | sortable: false, |
| 844 | align: "center", | 844 | align: "center", |
| 845 | }, | 845 | }, |
| 846 | { text: "Name", value: "name", sortable: false, align: "center" }, | 846 | { text: "Name", value: "name", sortable: false, align: "center" }, |
| 847 | { text: "Email", value: "email", sortable: false, align: "center" }, | 847 | { text: "Email", value: "email", sortable: false, align: "center" }, |
| 848 | { text: "DOB", value: "dob", sortable: false, align: "center" }, | 848 | { text: "DOB", value: "dob", sortable: false, align: "center" }, |
| 849 | { | 849 | { |
| 850 | text: "Joining Date", | 850 | text: "Joining Date", |
| 851 | value: "joiningDate", | 851 | value: "joiningDate", |
| 852 | sortable: false, | 852 | sortable: false, |
| 853 | align: "center", | 853 | align: "center", |
| 854 | }, | 854 | }, |
| 855 | { | 855 | { |
| 856 | text: "Phone", | 856 | text: "Phone", |
| 857 | value: "phone", | 857 | value: "phone", |
| 858 | sortable: false, | 858 | sortable: false, |
| 859 | align: "center", | 859 | align: "center", |
| 860 | }, | 860 | }, |
| 861 | { | 861 | { |
| 862 | text: "Status", | 862 | text: "Status", |
| 863 | value: "status", | 863 | value: "status", |
| 864 | sortable: false, | 864 | sortable: false, |
| 865 | align: "center", | 865 | align: "center", |
| 866 | }, | 866 | }, |
| 867 | { text: "Action", value: "", sortable: false, align: "center" }, | 867 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 868 | ], | 868 | ], |
| 869 | Users: [], | 869 | Users: [], |
| 870 | editedIndex: -1, | 870 | editedIndex: -1, |
| 871 | upload: "", | 871 | upload: "", |
| 872 | editedItem: { | 872 | editedItem: { |
| 873 | role: "", | 873 | role: "", |
| 874 | name: "", | 874 | name: "", |
| 875 | email: "", | 875 | email: "", |
| 876 | dob: null, | 876 | dob: null, |
| 877 | gender: "", | 877 | gender: "", |
| 878 | role: "", | 878 | role: "", |
| 879 | address: "", | 879 | address: "", |
| 880 | phone: "", | 880 | phone: "", |
| 881 | religion: "", | 881 | religion: "", |
| 882 | joiningDate: null, | 882 | joiningDate: null, |
| 883 | }, | 883 | }, |
| 884 | addUser: { | 884 | addUser: { |
| 885 | role: "", | 885 | role: "", |
| 886 | name: "", | 886 | name: "", |
| 887 | email: "", | 887 | email: "", |
| 888 | dob: null, | 888 | dob: null, |
| 889 | gender: "", | 889 | gender: "", |
| 890 | pincode: "", | 890 | pincode: "", |
| 891 | role: "", | 891 | role: "", |
| 892 | permanentAddress: "", | 892 | permanentAddress: "", |
| 893 | presentAddress: "", | 893 | presentAddress: "", |
| 894 | mobileNo: "", | 894 | mobileNo: "", |
| 895 | religion: "", | 895 | religion: "", |
| 896 | joiningDate: null, | 896 | joiningDate: null, |
| 897 | }, | 897 | }, |
| 898 | }), | 898 | }), |
| 899 | watch: { | 899 | watch: { |
| 900 | menu(val) { | 900 | menu(val) { |
| 901 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 901 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 902 | }, | 902 | }, |
| 903 | menu1(val) { | 903 | menu1(val) { |
| 904 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); | 904 | val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); |
| 905 | }, | 905 | }, |
| 906 | addUserDialog: function (val) { | 906 | addUserDialog: function (val) { |
| 907 | if (!val) { | 907 | if (!val) { |
| 908 | this.addUser = []; | 908 | this.addUser = []; |
| 909 | this.imageName = ""; | 909 | this.imageName = ""; |
| 910 | this.imageFile = ""; | 910 | this.imageFile = ""; |
| 911 | this.imageUrl = ""; | 911 | this.imageUrl = ""; |
| 912 | } | 912 | } |
| 913 | }, | 913 | }, |
| 914 | }, | 914 | }, |
| 915 | methods: { | 915 | methods: { |
| 916 | save(date) { | 916 | save(date) { |
| 917 | this.$refs.menu.save(date); | 917 | this.$refs.menu.save(date); |
| 918 | }, | 918 | }, |
| 919 | save(date) { | 919 | save(date) { |
| 920 | this.$refs.menu1.save(date); | 920 | this.$refs.menu1.save(date); |
| 921 | }, | 921 | }, |
| 922 | pickFile() { | 922 | pickFile() { |
| 923 | this.$refs.image.click(); | 923 | this.$refs.image.click(); |
| 924 | }, | 924 | }, |
| 925 | onFilePicked(e) { | 925 | onFilePicked(e) { |
| 926 | // console.log(e) | 926 | // console.log(e) |
| 927 | const files = e.target.files; | 927 | const files = e.target.files; |
| 928 | this.upload = e.target.files[0]; | 928 | this.upload = e.target.files[0]; |
| 929 | console.log("imageData-upload========>", this.upload); | 929 | console.log("imageData-upload========>", this.upload); |
| 930 | if (files[0] !== undefined) { | 930 | if (files[0] !== undefined) { |
| 931 | this.imageName = files[0].name; | 931 | this.imageName = files[0].name; |
| 932 | if (this.imageName.lastIndexOf(".") <= 0) { | 932 | if (this.imageName.lastIndexOf(".") <= 0) { |
| 933 | return; | 933 | return; |
| 934 | } | 934 | } |
| 935 | const fr = new FileReader(); | 935 | const fr = new FileReader(); |
| 936 | fr.readAsDataURL(files[0]); | 936 | fr.readAsDataURL(files[0]); |
| 937 | fr.addEventListener("load", () => { | 937 | fr.addEventListener("load", () => { |
| 938 | this.imageUrl = fr.result; | 938 | this.imageUrl = fr.result; |
| 939 | this.imageFile = files[0]; // this is an image file that can be sent to server... | 939 | this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 940 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 940 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 941 | // console.log("upload=======>", this.imageData.imageUrl); | 941 | // console.log("upload=======>", this.imageData.imageUrl); |
| 942 | console.log("imageFile", this.imageUrl); | 942 | console.log("imageFile", this.imageUrl); |
| 943 | }); | 943 | }); |
| 944 | } else { | 944 | } else { |
| 945 | this.imageName = ""; | 945 | this.imageName = ""; |
| 946 | this.imageFile = ""; | 946 | this.imageFile = ""; |
| 947 | this.imageUrl = ""; | 947 | this.imageUrl = ""; |
| 948 | } | 948 | } |
| 949 | }, | 949 | }, |
| 950 | dates: function (date) { | 950 | dates: function (date) { |
| 951 | return moment(date).format("MMMM DD, YYYY"); | 951 | return moment(date).format("MMMM DD, YYYY"); |
| 952 | }, | 952 | }, |
| 953 | getUsersList() { | 953 | getUsersList() { |
| 954 | this.showLoader = true; | 954 | this.showLoader = true; |
| 955 | var token = this.$store.state.token; | 955 | var token = this.$store.state.token; |
| 956 | http() | 956 | http() |
| 957 | .get("/getUsersList", { | 957 | .get("/getUsersList", { |
| 958 | headers: { Authorization: "Bearer " + token }, | 958 | headers: { Authorization: "Bearer " + token }, |
| 959 | }) | 959 | }) |
| 960 | .then((response) => { | 960 | .then((response) => { |
| 961 | // this.snackbar = true; | 961 | // this.snackbar = true; |
| 962 | this.color = "success"; | 962 | this.color = "success"; |
| 963 | this.Users = response.data.data; | 963 | this.Users = response.data.data; |
| 964 | this.showLoader = false; | 964 | this.showLoader = false; |
| 965 | }) | 965 | }) |
| 966 | .catch((error) => { | 966 | .catch((error) => { |
| 967 | this.showLoader = false; | 967 | this.showLoader = false; |
| 968 | if (error.response.status === 401) { | 968 | if (error.response.status === 401) { |
| 969 | this.$router.replace({ path: "/" }); | 969 | this.$router.replace({ path: "/" }); |
| 970 | this.$store.dispatch("setToken", null); | 970 | this.$store.dispatch("setToken", null); |
| 971 | this.$store.dispatch("Id", null); | 971 | this.$store.dispatch("Id", null); |
| 972 | } | 972 | } |
| 973 | }); | 973 | }); |
| 974 | }, | 974 | }, |
| 975 | editItem(item) { | 975 | editItem(item) { |
| 976 | this.editedIndex = this.Users.indexOf(item); | 976 | this.editedIndex = this.Users.indexOf(item); |
| 977 | this.editedItem = Object.assign({}, item); | 977 | this.editedItem = Object.assign({}, item); |
| 978 | this.editedItem.dob = | 978 | this.editedItem.dob = |
| 979 | this.editedItem.dob != undefined | 979 | this.editedItem.dob != undefined |
| 980 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) | 980 | ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) |
| 981 | : (this.editedItem.dob = ""); | 981 | : (this.editedItem.dob = ""); |
| 982 | for (let i = 0; i < this.userRole.length; i++) { | 982 | for (let i = 0; i < this.userRole.length; i++) { |
| 983 | if (this.userRole[i].role === this.editedItem.role) { | 983 | if (this.userRole[i].role === this.editedItem.role) { |
| 984 | this.editedItem.role = this.userRole[i].name; | 984 | this.editedItem.role = this.userRole[i].name; |
| 985 | } | 985 | } |
| 986 | } | 986 | } |
| 987 | this.editUserDialog = true; | 987 | this.editUserDialog = true; |
| 988 | }, | 988 | }, |
| 989 | profile(item) { | 989 | profile(item) { |
| 990 | this.editedIndex = this.Users.indexOf(item); | 990 | this.editedIndex = this.Users.indexOf(item); |
| 991 | this.editedItem = Object.assign({}, item); | 991 | this.editedItem = Object.assign({}, item); |
| 992 | this.viewUserDialog = true; | 992 | this.viewUserDialog = true; |
| 993 | for (let i = 0; i < this.userRole.length; i++) { | 993 | for (let i = 0; i < this.userRole.length; i++) { |
| 994 | if (this.userRole[i].role === this.editedItem.role) { | 994 | if (this.userRole[i].role === this.editedItem.role) { |
| 995 | this.editedItem.role = this.userRole[i].name; | 995 | this.editedItem.role = this.userRole[i].name; |
| 996 | } | 996 | } |
| 997 | } | 997 | } |
| 998 | }, | 998 | }, |
| 999 | deleteItem(item) { | 999 | deleteItem(item) { |
| 1000 | let deleteUser = { | 1000 | let deleteUser = { |
| 1001 | userId: item._id, | 1001 | userId: item._id, |
| 1002 | }; | 1002 | }; |
| 1003 | http() | 1003 | http() |
| 1004 | .delete( | 1004 | .delete( |
| 1005 | "/deleteUser", | 1005 | "/deleteUser", |
| 1006 | confirm("Are you sure you want to delete this?") && { | 1006 | confirm("Are you sure you want to delete this?") && { |
| 1007 | params: deleteUser, | 1007 | params: deleteUser, |
| 1008 | } | 1008 | } |
| 1009 | ) | 1009 | ) |
| 1010 | .then((response) => { | 1010 | .then((response) => { |
| 1011 | this.snackbar = true; | 1011 | this.snackbar = true; |
| 1012 | this.text = response.data.message; | 1012 | this.text = response.data.message; |
| 1013 | this.color = "green"; | 1013 | this.color = "green"; |
| 1014 | this.getUsersList(); | 1014 | this.getUsersList(); |
| 1015 | }) | 1015 | }) |
| 1016 | .catch((error) => { | 1016 | .catch((error) => { |
| 1017 | this.snackbar = true; | 1017 | this.snackbar = true; |
| 1018 | this.color = "error"; | 1018 | this.color = "error"; |
| 1019 | this.text = error.response.data.message; | 1019 | this.text = error.response.data.message; |
| 1020 | }); | 1020 | }); |
| 1021 | }, | 1021 | }, |
| 1022 | close() { | 1022 | close() { |
| 1023 | this.editUserDialog = false; | 1023 | this.editUserDialog = false; |
| 1024 | }, | 1024 | }, |
| 1025 | closeProfileDialog() { | 1025 | closeProfileDialog() { |
| 1026 | this.viewUserDialog = false; | 1026 | this.viewUserDialog = false; |
| 1027 | }, | 1027 | }, |
| 1028 | submit() { | 1028 | submit() { |
| 1029 | if (this.$refs.form.validate()) { | 1029 | if (this.$refs.form.validate()) { |
| 1030 | let addUserData = { | 1030 | let addUserData = { |
| 1031 | name: this.addUser.name, | 1031 | name: this.addUser.name, |
| 1032 | email: this.addUser.email, | 1032 | email: this.addUser.email, |
| 1033 | dob: this.addUser.dob, | 1033 | dob: this.addUser.dob, |
| 1034 | gender: this.addUser.gender, | 1034 | gender: this.addUser.gender, |
| 1035 | religion: this.addUser.religion, | 1035 | religion: this.addUser.religion, |
| 1036 | role: this.addUser.role, | 1036 | role: this.addUser.role, |
| 1037 | address: this.addUser.presentAddress, | 1037 | address: this.addUser.presentAddress, |
| 1038 | phone: this.addUser.mobileNo, | 1038 | phone: this.addUser.mobileNo, |
| 1039 | religion: this.addUser.religion, | 1039 | religion: this.addUser.religion, |
| 1040 | joiningDate: this.addUser.joinDate, | 1040 | joiningDate: this.addUser.joinDate, |
| 1041 | }; | 1041 | }; |
| 1042 | if (this.imageUrl) { | 1042 | if (this.imageUrl) { |
| 1043 | var str = this.imageUrl; | 1043 | var str = this.imageUrl; |
| 1044 | const [baseUrl, imageUrl] = str.split(/,/); | 1044 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1045 | addUserData.profilePicUrl = imageUrl; | 1045 | addUserData.profilePicUrl = imageUrl; |
| 1046 | } | 1046 | } |
| 1047 | this.loading = true; | 1047 | this.loading = true; |
| 1048 | http() | 1048 | http() |
| 1049 | .post("/createUser", addUserData) | 1049 | .post("/createUser", addUserData) |
| 1050 | .then((response) => { | 1050 | .then((response) => { |
| 1051 | this.imageUrl = ""; | 1051 | this.imageUrl = ""; |
| 1052 | this.getUsersList(); | 1052 | this.getUsersList(); |
| 1053 | this.snackbar = true; | 1053 | this.snackbar = true; |
| 1054 | this.addUserDialog = false; | 1054 | this.addUserDialog = false; |
| 1055 | this.text = response.data.message; | 1055 | this.text = response.data.message; |
| 1056 | this.color = "green"; | 1056 | this.color = "green"; |
| 1057 | this.clear(); | 1057 | this.clear(); |
| 1058 | this.loading = false; | 1058 | this.loading = false; |
| 1059 | }) | 1059 | }) |
| 1060 | .catch((error) => { | 1060 | .catch((error) => { |
| 1061 | this.loading = false; | 1061 | this.loading = false; |
| 1062 | this.snackbar = true; | 1062 | this.snackbar = true; |
| 1063 | this.color = "error"; | 1063 | this.color = "error"; |
| 1064 | this.text = error.response.data.message; | 1064 | this.text = error.response.data.message; |
| 1065 | }); | 1065 | }); |
| 1066 | } | 1066 | } |
| 1067 | }, | 1067 | }, |
| 1068 | clear() { | 1068 | clear() { |
| 1069 | this.$refs.form.reset(); | 1069 | this.$refs.form.reset(); |
| 1070 | this.imageUrl = ""; | 1070 | this.imageUrl = ""; |
| 1071 | }, | 1071 | }, |
| 1072 | save() { | 1072 | save() { |
| 1073 | this.loading = true; | 1073 | this.loading = true; |
| 1074 | for (let i = 0; i < this.userRole.length; i++) { | 1074 | for (let i = 0; i < this.userRole.length; i++) { |
| 1075 | if (this.userRole[i].name === this.editedItem.role) { | 1075 | if (this.userRole[i].name === this.editedItem.role) { |
| 1076 | this.editedItem.role = this.userRole[i].role; | 1076 | this.editedItem.role = this.userRole[i].role; |
| 1077 | } | 1077 | } |
| 1078 | } | 1078 | } |
| 1079 | this.editedItem.userId = this.editedItem._id; | 1079 | this.editedItem.userId = this.editedItem._id; |
| 1080 | if (this.imageUrl) { | 1080 | if (this.imageUrl) { |
| 1081 | var str = this.imageUrl; | 1081 | var str = this.imageUrl; |
| 1082 | const [baseUrl, imageUrl] = str.split(/,/); | 1082 | const [baseUrl, imageUrl] = str.split(/,/); |
| 1083 | this.editedItem.upload = imageUrl; | 1083 | this.editedItem.upload = imageUrl; |
| 1084 | } | 1084 | } |
| 1085 | http() | 1085 | http() |
| 1086 | .put("/updateUser", this.editedItem) | 1086 | .put("/updateUser", this.editedItem) |
| 1087 | .then((response) => { | 1087 | .then((response) => { |
| 1088 | this.snackbar = true; | 1088 | this.snackbar = true; |
| 1089 | this.text = response.data.message; | 1089 | this.text = response.data.message; |
| 1090 | this.color = "green"; | 1090 | this.color = "green"; |
| 1091 | this.loading = false; | 1091 | this.loading = false; |
| 1092 | this.getUsersList(); | 1092 | this.getUsersList(); |
| 1093 | this.close(); | 1093 | this.close(); |
| 1094 | }) | 1094 | }) |
| 1095 | .catch((error) => { | 1095 | .catch((error) => { |
| 1096 | this.loading = false; | 1096 | this.loading = false; |
| 1097 | this.snackbar = true; | 1097 | this.snackbar = true; |
| 1098 | this.text = error.response.data.message; | 1098 | this.text = error.response.data.message; |
| 1099 | this.color = "error"; | 1099 | this.color = "error"; |
| 1100 | }); | 1100 | }); |
| 1101 | }, | 1101 | }, |
| 1102 | getRole() { | 1102 | getRole() { |
| 1103 | this.showLoader = true; | 1103 | this.showLoader = true; |
| 1104 | var token = this.$store.state.token; | 1104 | var token = this.$store.state.token; |
| 1105 | http() | 1105 | http() |
| 1106 | .get("/getRolesList", { | 1106 | .get("/getRolesList", { |
| 1107 | headers: { Authorization: "Bearer " + token }, | 1107 | headers: { Authorization: "Bearer " + token }, |
| 1108 | }) | 1108 | }) |
| 1109 | .then((response) => { | 1109 | .then((response) => { |
| 1110 | this.userRole = response.data.data; | 1110 | this.userRole = response.data.data; |
| 1111 | this.showLoader = false; | 1111 | this.showLoader = false; |
| 1112 | this.userRole = response.data.data; | 1112 | this.userRole = response.data.data; |
| 1113 | var removedRoles = _.remove(this.userRole, function (c) { | 1113 | var removedRoles = _.remove(this.userRole, function (c) { |
| 1114 | //remove if color is green or yellow | 1114 | //remove if color is green or yellow |
| 1115 | return ( | 1115 | return ( |
| 1116 | c.name === "ADMIN" || | 1116 | c.name === "ADMIN" || |
| 1117 | c.name === "SUPERADMIN" || | 1117 | c.name === "SUPERADMIN" || |
| 1118 | c.name === "TEACHER" || | 1118 | c.name === "TEACHER" || |
| 1119 | c.name === "STUDENT" || | 1119 | c.name === "STUDENT" || |
| 1120 | c.name === "PARENT" | 1120 | c.name === "PARENT" |
| 1121 | ); | 1121 | ); |
| 1122 | }); | 1122 | }); |
| 1123 | }) | 1123 | }) |
| 1124 | .catch((error) => { | 1124 | .catch((error) => { |
| 1125 | this.showLoader = false; | 1125 | this.showLoader = false; |
| 1126 | }); | 1126 | }); |
| 1127 | }, | 1127 | }, |
| 1128 | suspendStatus(suspendStatus, id) { | 1128 | suspendStatus(suspendStatus, id) { |
| 1129 | let suspendStatusData = { | 1129 | let suspendStatusData = { |
| 1130 | userId: id, | 1130 | userId: id, |
| 1131 | status: suspendStatus, | 1131 | status: suspendStatus, |
| 1132 | }; | 1132 | }; |
| 1133 | this.showLoader = true; | 1133 | this.showLoader = true; |
| 1134 | http() | 1134 | http() |
| 1135 | .put("/suspendUserAccount", suspendStatusData) | 1135 | .put("/suspendUserAccount", suspendStatusData) |
| 1136 | .then((response) => { | 1136 | .then((response) => { |
| 1137 | this.getUsersList(); | 1137 | this.getUsersList(); |
| 1138 | this.text = response.data.message; | 1138 | this.text = response.data.message; |
| 1139 | this.snackbar = true; | 1139 | this.snackbar = true; |
| 1140 | this.showLoader = false; | 1140 | this.showLoader = false; |
| 1141 | }) | 1141 | }) |
| 1142 | .catch((error) => { | 1142 | .catch((error) => { |
| 1143 | // console.log(error.response.data.data); | 1143 | // console.log(error.response.data.data); |
| 1144 | this.snackbar = true; | 1144 | this.snackbar = true; |
| 1145 | this.color = "success"; | 1145 | this.color = "success"; |
| 1146 | this.text = error.response.data.message; | 1146 | this.text = error.response.data.message; |
| 1147 | this.showLoader = false; | 1147 | this.showLoader = false; |
| 1148 | }); | 1148 | }); |
| 1149 | }, | 1149 | }, |
| 1150 | displaySearch() { | 1150 | displaySearch() { |
| 1151 | (this.show = false), (this.showSearch = true); | 1151 | (this.show = false), (this.showSearch = true); |
| 1152 | }, | 1152 | }, |
| 1153 | closeSearch() { | 1153 | closeSearch() { |
| 1154 | this.showSearch = false; | 1154 | this.showSearch = false; |
| 1155 | this.show = true; | 1155 | this.show = true; |
| 1156 | this.search = ""; | 1156 | this.search = ""; |
| 1157 | }, | 1157 | }, |
| 1158 | }, | 1158 | }, |
| 1159 | mounted() { | 1159 | mounted() { |
| 1160 | this.getUsersList(); | 1160 | this.getUsersList(); |
| 1161 | this.getRole(); | 1161 | this.getRole(); |
| 1162 | }, | 1162 | }, |
| 1163 | }; | 1163 | }; |
| 1164 | </script> | 1164 | </script> |
src/pages/meetingEvent/meetingEvent.vue
| 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" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit 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" persistent> |
| 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-if="showSearch"> | 233 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 234 | <v-layout> | 234 | <v-layout> |
| 235 | <v-text-field | 235 | <v-text-field |
| 236 | autofocus | 236 | autofocus |
| 237 | v-model="search" | 237 | v-model="search" |
| 238 | label="Search" | 238 | label="Search" |
| 239 | prepend-inner-icon="search" | 239 | prepend-inner-icon="search" |
| 240 | color="primary" | 240 | color="primary" |
| 241 | ></v-text-field> | 241 | ></v-text-field> |
| 242 | <v-icon @click="closeSearch" color="error">close</v-icon> | 242 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 243 | </v-layout> | 243 | </v-layout> |
| 244 | </v-flex> | 244 | </v-flex> |
| 245 | </v-toolbar> | 245 | </v-toolbar> |
| 246 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> | 246 | <v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search"> |
| 247 | <template slot="items" slot-scope="props"> | 247 | <template slot="items" slot-scope="props"> |
| 248 | <tr class="tr"> | 248 | <tr class="tr"> |
| 249 | <td class="td td-row">{{ props.index + 1}}</td> | 249 | <td class="td td-row">{{ props.index + 1}}</td> |
| 250 | <td | 250 | <td |
| 251 | class="td td-row text-xs-center" | 251 | class="td td-row text-xs-center" |
| 252 | >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td> | 252 | >{{ props.item.classId ? props.item.classId.classNum : "-" }}</td> |
| 253 | <td class="td td-row text-xs-center">{{ props.item.title }}</td> | 253 | <td class="td td-row text-xs-center">{{ props.item.title }}</td> |
| 254 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td> | 254 | <td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td> |
| 255 | <td class="td td-row text-xs-center">{{ props.item.startTime }}</td> | 255 | <td class="td td-row text-xs-center">{{ props.item.startTime }}</td> |
| 256 | <td class="td td-row text-xs-center"> | 256 | <td class="td td-row text-xs-center"> |
| 257 | <span> | 257 | <span> |
| 258 | <v-tooltip top> | 258 | <v-tooltip top> |
| 259 | <img | 259 | <img |
| 260 | slot="activator" | 260 | slot="activator" |
| 261 | style="cursor:pointer; width:25px; height:25px; " | 261 | style="cursor:pointer; width:25px; height:25px; " |
| 262 | class="mr-3" | 262 | class="mr-3" |
| 263 | @click="profile(props.item)" | 263 | @click="profile(props.item)" |
| 264 | src="/static/icon/view.png" | 264 | src="/static/icon/view.png" |
| 265 | /> | 265 | /> |
| 266 | <span>View</span> | 266 | <span>View</span> |
| 267 | </v-tooltip> | 267 | </v-tooltip> |
| 268 | <v-tooltip top> | 268 | <v-tooltip top> |
| 269 | <img | 269 | <img |
| 270 | slot="activator" | 270 | slot="activator" |
| 271 | style="cursor:pointer; width:20px; height:18px; " | 271 | style="cursor:pointer; width:20px; height:18px; " |
| 272 | class="mr-3" | 272 | class="mr-3" |
| 273 | @click="editItem(props.item)" | 273 | @click="editItem(props.item)" |
| 274 | src="/static/icon/edit.png" | 274 | src="/static/icon/edit.png" |
| 275 | /> | 275 | /> |
| 276 | <span>Edit</span> | 276 | <span>Edit</span> |
| 277 | </v-tooltip> | 277 | </v-tooltip> |
| 278 | <v-tooltip top> | 278 | <v-tooltip top> |
| 279 | <img | 279 | <img |
| 280 | slot="activator" | 280 | slot="activator" |
| 281 | style="cursor:pointer; width:20px; height:20px; " | 281 | style="cursor:pointer; width:20px; height:20px; " |
| 282 | class="mr-3" | 282 | class="mr-3" |
| 283 | @click="deleteItem(props.item)" | 283 | @click="deleteItem(props.item)" |
| 284 | src="/static/icon/delete.png" | 284 | src="/static/icon/delete.png" |
| 285 | /> | 285 | /> |
| 286 | <span>Delete</span> | 286 | <span>Delete</span> |
| 287 | </v-tooltip> | 287 | </v-tooltip> |
| 288 | </span> | 288 | </span> |
| 289 | </td> | 289 | </td> |
| 290 | </tr> | 290 | </tr> |
| 291 | </template> | 291 | </template> |
| 292 | <v-alert | 292 | <v-alert |
| 293 | slot="no-results" | 293 | slot="no-results" |
| 294 | :value="true" | 294 | :value="true" |
| 295 | color="error" | 295 | color="error" |
| 296 | icon="warning" | 296 | icon="warning" |
| 297 | >Your search for "{{ search }}" found no results.</v-alert> | 297 | >Your search for "{{ search }}" found no results.</v-alert> |
| 298 | </v-data-table> | 298 | </v-data-table> |
| 299 | <!-- ****** ADD MULTIPLE EVENT ****** --> | 299 | <!-- ****** ADD MULTIPLE EVENT ****** --> |
| 300 | <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog"> | 300 | <v-dialog v-model="meetEventDialog" max-width="500px" persistent v-if="meetEventDialog" persistent> |
| 301 | <v-card flat class="card-style pa-2" dark> | 301 | <v-card flat class="card-style pa-2" dark> |
| 302 | <v-layout> | 302 | <v-layout> |
| 303 | <v-flex xs12> | 303 | <v-flex xs12> |
| 304 | <label class="title text-xs-center">Add Meeting Event</label> | 304 | <label class="title text-xs-center">Add Meeting Event</label> |
| 305 | <v-icon | 305 | <v-icon |
| 306 | size="24" | 306 | size="24" |
| 307 | class="right" | 307 | class="right" |
| 308 | @click="meetEventDialog = false; $refs.form.reset()" | 308 | @click="meetEventDialog = false; $refs.form.reset()" |
| 309 | >cancel</v-icon> | 309 | >cancel</v-icon> |
| 310 | </v-flex> | 310 | </v-flex> |
| 311 | </v-layout> | 311 | </v-layout> |
| 312 | <v-form ref="form" v-model="valid" lazy-validation> | 312 | <v-form ref="form" v-model="valid" lazy-validation> |
| 313 | <v-container fluid> | 313 | <v-container fluid> |
| 314 | <v-flex xs12> | 314 | <v-flex xs12> |
| 315 | <v-layout> | 315 | <v-layout> |
| 316 | <v-flex xs4 class="pt-4 subheading"> | 316 | <v-flex xs4 class="pt-4 subheading"> |
| 317 | <label class="right">Title:</label> | 317 | <label class="right">Title:</label> |
| 318 | </v-flex> | 318 | </v-flex> |
| 319 | <v-flex xs8 sm8 class="ml-3"> | 319 | <v-flex xs8 sm8 class="ml-3"> |
| 320 | <v-text-field | 320 | <v-text-field |
| 321 | v-model="meetEvent.title" | 321 | v-model="meetEvent.title" |
| 322 | placeholder="fill your Title" | 322 | placeholder="fill your Title" |
| 323 | type="text" | 323 | type="text" |
| 324 | :rules="titleRules" | 324 | :rules="titleRules" |
| 325 | required | 325 | required |
| 326 | ></v-text-field> | 326 | ></v-text-field> |
| 327 | </v-flex> | 327 | </v-flex> |
| 328 | </v-layout> | 328 | </v-layout> |
| 329 | </v-flex> | 329 | </v-flex> |
| 330 | <v-flex xs12> | 330 | <v-flex xs12> |
| 331 | <v-layout> | 331 | <v-layout> |
| 332 | <v-flex xs4 class="pt-4 subheading"> | 332 | <v-flex xs4 class="pt-4 subheading"> |
| 333 | <label class="right">Date:</label> | 333 | <label class="right">Date:</label> |
| 334 | </v-flex> | 334 | </v-flex> |
| 335 | <v-flex xs8 sm8 class="ml-3"> | 335 | <v-flex xs8 sm8 class="ml-3"> |
| 336 | <v-menu | 336 | <v-menu |
| 337 | ref="menu1" | 337 | ref="menu1" |
| 338 | :close-on-content-click="false" | 338 | :close-on-content-click="false" |
| 339 | v-model="menu1" | 339 | v-model="menu1" |
| 340 | :nudge-right="40" | 340 | :nudge-right="40" |
| 341 | :return-value.sync="meetEvent.dateOfEvent" | 341 | :return-value.sync="meetEvent.dateOfEvent" |
| 342 | app | 342 | app |
| 343 | lazy | 343 | lazy |
| 344 | transition="scale-transition" | 344 | transition="scale-transition" |
| 345 | offset-y | 345 | offset-y |
| 346 | full-width | 346 | full-width |
| 347 | min-width="290px" | 347 | min-width="290px" |
| 348 | > | 348 | > |
| 349 | <v-text-field | 349 | <v-text-field |
| 350 | slot="activator" | 350 | slot="activator" |
| 351 | :rules="dateRules" | 351 | :rules="dateRules" |
| 352 | v-model="meetEvent.dateOfEvent" | 352 | v-model="meetEvent.dateOfEvent" |
| 353 | append-icon="event" | 353 | append-icon="event" |
| 354 | placeholder="Select date" | 354 | placeholder="Select date" |
| 355 | ></v-text-field> | 355 | ></v-text-field> |
| 356 | <v-date-picker | 356 | <v-date-picker |
| 357 | color="info" | 357 | color="info" |
| 358 | v-model="meetEvent.dateOfEvent" | 358 | v-model="meetEvent.dateOfEvent" |
| 359 | @input="$refs.menu1.save(meetEvent.dateOfEvent)" | 359 | @input="$refs.menu1.save(meetEvent.dateOfEvent)" |
| 360 | ></v-date-picker> | 360 | ></v-date-picker> |
| 361 | </v-menu> | 361 | </v-menu> |
| 362 | </v-flex> | 362 | </v-flex> |
| 363 | </v-layout> | 363 | </v-layout> |
| 364 | </v-flex> | 364 | </v-flex> |
| 365 | <v-flex xs12> | 365 | <v-flex xs12> |
| 366 | <v-layout> | 366 | <v-layout> |
| 367 | <v-flex xs4 class="pt-4 subheading"> | 367 | <v-flex xs4 class="pt-4 subheading"> |
| 368 | <label class="right">Start Time:</label> | 368 | <label class="right">Start Time:</label> |
| 369 | </v-flex> | 369 | </v-flex> |
| 370 | <v-flex xs8 sm8 class="ml-3"> | 370 | <v-flex xs8 sm8 class="ml-3"> |
| 371 | <v-menu | 371 | <v-menu |
| 372 | ref="menuA" | 372 | ref="menuA" |
| 373 | :close-on-content-click="false" | 373 | :close-on-content-click="false" |
| 374 | v-model="menu2" | 374 | v-model="menu2" |
| 375 | :nudge-right="40" | 375 | :nudge-right="40" |
| 376 | :return-value.sync="meetEvent.startTime" | 376 | :return-value.sync="meetEvent.startTime" |
| 377 | lazy | 377 | lazy |
| 378 | transition="scale-transition" | 378 | transition="scale-transition" |
| 379 | offset-y | 379 | offset-y |
| 380 | full-width | 380 | full-width |
| 381 | max-width="290px" | 381 | max-width="290px" |
| 382 | min-width="290px" | 382 | min-width="290px" |
| 383 | > | 383 | > |
| 384 | <v-text-field | 384 | <v-text-field |
| 385 | slot="activator" | 385 | slot="activator" |
| 386 | v-model="meetEvent.startTime" | 386 | v-model="meetEvent.startTime" |
| 387 | placeholder="Select Start time" | 387 | placeholder="Select Start time" |
| 388 | append-icon="access_time" | 388 | append-icon="access_time" |
| 389 | :rules="startTimeRules" | 389 | :rules="startTimeRules" |
| 390 | readonly | 390 | readonly |
| 391 | ></v-text-field> | 391 | ></v-text-field> |
| 392 | <v-time-picker | 392 | <v-time-picker |
| 393 | v-model="meetEvent.startTime" | 393 | v-model="meetEvent.startTime" |
| 394 | format="24hr" | 394 | format="24hr" |
| 395 | @change="$refs.menuA.save(meetEvent.startTime)" | 395 | @change="$refs.menuA.save(meetEvent.startTime)" |
| 396 | ></v-time-picker> | 396 | ></v-time-picker> |
| 397 | </v-menu> | 397 | </v-menu> |
| 398 | </v-flex> | 398 | </v-flex> |
| 399 | </v-layout> | 399 | </v-layout> |
| 400 | </v-flex> | 400 | </v-flex> |
| 401 | <v-flex xs12> | 401 | <v-flex xs12> |
| 402 | <v-layout> | 402 | <v-layout> |
| 403 | <v-flex xs4 class="pt-4 subheading"> | 403 | <v-flex xs4 class="pt-4 subheading"> |
| 404 | <label class="right">Type Of Event:</label> | 404 | <label class="right">Type Of Event:</label> |
| 405 | </v-flex> | 405 | </v-flex> |
| 406 | <v-flex xs8 sm8 class="ml-3"> | 406 | <v-flex xs8 sm8 class="ml-3"> |
| 407 | <v-select | 407 | <v-select |
| 408 | :items="typeOfEvent" | 408 | :items="typeOfEvent" |
| 409 | label="Select Type Of Event" | 409 | label="Select Type Of Event" |
| 410 | v-model="meetEvent.typeOfEvent" | 410 | v-model="meetEvent.typeOfEvent" |
| 411 | :rules="typeOfEventRules" | 411 | :rules="typeOfEventRules" |
| 412 | ></v-select> | 412 | ></v-select> |
| 413 | </v-flex> | 413 | </v-flex> |
| 414 | </v-layout> | 414 | </v-layout> |
| 415 | </v-flex> | 415 | </v-flex> |
| 416 | <v-flex xs12 v-show="meetEvent.typeOfEvent"> | 416 | <v-flex xs12 v-show="meetEvent.typeOfEvent"> |
| 417 | <v-layout> | 417 | <v-layout> |
| 418 | <v-flex xs4 class="pt-4 subheading"> | 418 | <v-flex xs4 class="pt-4 subheading"> |
| 419 | <label class="right">Class:</label> | 419 | <label class="right">Class:</label> |
| 420 | </v-flex> | 420 | </v-flex> |
| 421 | <v-flex xs8 sm8 class="ml-3"> | 421 | <v-flex xs8 sm8 class="ml-3"> |
| 422 | <v-select | 422 | <v-select |
| 423 | :items="addclass" | 423 | :items="addclass" |
| 424 | label="Select Class" | 424 | label="Select Class" |
| 425 | v-model="meetEvent.classId" | 425 | v-model="meetEvent.classId" |
| 426 | item-text="classNum" | 426 | item-text="classNum" |
| 427 | item-value="_id" | 427 | item-value="_id" |
| 428 | @change="getCourses(meetEvent.classId)" | 428 | @change="getCourses(meetEvent.classId)" |
| 429 | ></v-select> | 429 | ></v-select> |
| 430 | </v-flex> | 430 | </v-flex> |
| 431 | </v-layout> | 431 | </v-layout> |
| 432 | </v-flex> | 432 | </v-flex> |
| 433 | <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'"> | 433 | <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'"> |
| 434 | <v-layout> | 434 | <v-layout> |
| 435 | <v-flex xs4 class="pt-4 subheading"> | 435 | <v-flex xs4 class="pt-4 subheading"> |
| 436 | <label class="right">Courses:</label> | 436 | <label class="right">Courses:</label> |
| 437 | </v-flex> | 437 | </v-flex> |
| 438 | <v-flex xs8 sm8 class="ml-3"> | 438 | <v-flex xs8 sm8 class="ml-3"> |
| 439 | <v-select | 439 | <v-select |
| 440 | :items="courseData" | 440 | :items="courseData" |
| 441 | label="Select Course" | 441 | label="Select Course" |
| 442 | v-model="meetEvent.courseId" | 442 | v-model="meetEvent.courseId" |
| 443 | item-text="courseName" | 443 | item-text="courseName" |
| 444 | item-value="_id" | 444 | item-value="_id" |
| 445 | required | 445 | required |
| 446 | ></v-select> | 446 | ></v-select> |
| 447 | </v-flex> | 447 | </v-flex> |
| 448 | </v-layout> | 448 | </v-layout> |
| 449 | </v-flex> | 449 | </v-flex> |
| 450 | <v-flex xs12> | 450 | <v-flex xs12> |
| 451 | <v-layout> | 451 | <v-layout> |
| 452 | <v-flex xs4 class="pt-4 subheading"> | 452 | <v-flex xs4 class="pt-4 subheading"> |
| 453 | <label class="right">Duration</label> | 453 | <label class="right">Duration</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 | placeholder="fill your Description" | 457 | placeholder="fill your Description" |
| 458 | :rules="descriptionRules" | 458 | :rules="descriptionRules" |
| 459 | v-model="meetEvent.duration" | 459 | v-model="meetEvent.duration" |
| 460 | type="text" | 460 | type="text" |
| 461 | required | 461 | required |
| 462 | ></v-text-field> | 462 | ></v-text-field> |
| 463 | </v-flex> | 463 | </v-flex> |
| 464 | </v-layout> | 464 | </v-layout> |
| 465 | </v-flex> | 465 | </v-flex> |
| 466 | <v-layout> | 466 | <v-layout> |
| 467 | <v-flex xs12> | 467 | <v-flex xs12> |
| 468 | <v-layout class="right"> | 468 | <v-layout class="right"> |
| 469 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 469 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 470 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 470 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 471 | </v-layout> | 471 | </v-layout> |
| 472 | </v-flex> | 472 | </v-flex> |
| 473 | </v-layout> | 473 | </v-layout> |
| 474 | </v-container> | 474 | </v-container> |
| 475 | </v-form> | 475 | </v-form> |
| 476 | </v-card> | 476 | </v-card> |
| 477 | </v-dialog> | 477 | </v-dialog> |
| 478 | <v-snackbar | 478 | <v-snackbar |
| 479 | :timeout="timeout" | 479 | :timeout="timeout" |
| 480 | :top="y === 'top'" | 480 | :top="y === 'top'" |
| 481 | :right="x === 'right'" | 481 | :right="x === 'right'" |
| 482 | :vertical="mode === 'vertical'" | 482 | :vertical="mode === 'vertical'" |
| 483 | v-model="snackbar" | 483 | v-model="snackbar" |
| 484 | :color="color" | 484 | :color="color" |
| 485 | >{{ text }}</v-snackbar> | 485 | >{{ text }}</v-snackbar> |
| 486 | <div class="loader" v-if="showLoader"> | 486 | <div class="loader" v-if="showLoader"> |
| 487 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 487 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 488 | </div> | 488 | </div> |
| 489 | </v-container> | 489 | </v-container> |
| 490 | </template> | 490 | </template> |
| 491 | 491 | ||
| 492 | <script> | 492 | <script> |
| 493 | import http from "@/Services/http.js"; | 493 | import http from "@/Services/http.js"; |
| 494 | import moment from "moment"; | 494 | import moment from "moment"; |
| 495 | 495 | ||
| 496 | export default { | 496 | export default { |
| 497 | data: () => ({ | 497 | data: () => ({ |
| 498 | snackbar: false, | 498 | snackbar: false, |
| 499 | y: "top", | 499 | y: "top", |
| 500 | x: "right", | 500 | x: "right", |
| 501 | mode: "", | 501 | mode: "", |
| 502 | timeout: 5000, | 502 | timeout: 5000, |
| 503 | text: "", | 503 | text: "", |
| 504 | color: "", | 504 | color: "", |
| 505 | loading: false, | 505 | loading: false, |
| 506 | date: null, | 506 | date: null, |
| 507 | search: "", | 507 | search: "", |
| 508 | color: "", | 508 | color: "", |
| 509 | show: true, | 509 | show: true, |
| 510 | meetEventDialog: false, | 510 | meetEventDialog: false, |
| 511 | showSearch: false, | 511 | showSearch: false, |
| 512 | showLoader: false, | 512 | showLoader: false, |
| 513 | editEventdialog: false, | 513 | editEventdialog: false, |
| 514 | viewEventdialog: false, | 514 | viewEventdialog: false, |
| 515 | valid: true, | 515 | valid: true, |
| 516 | addclass: [], | 516 | addclass: [], |
| 517 | courseData: [], | 517 | courseData: [], |
| 518 | pagination: { | 518 | pagination: { |
| 519 | rowsPerPage: 10, | 519 | rowsPerPage: 10, |
| 520 | }, | 520 | }, |
| 521 | date: null, | 521 | date: null, |
| 522 | menu1: false, | 522 | menu1: false, |
| 523 | menu: false, | 523 | menu: false, |
| 524 | menuEditTime: false, | 524 | menuEditTime: false, |
| 525 | menuEditDate: false, | 525 | menuEditDate: false, |
| 526 | titleRules: [(v) => !!v || " Tilte is required"], | 526 | titleRules: [(v) => !!v || " Tilte is required"], |
| 527 | descriptionRules: [(v) => !!v || " Discription is required"], | 527 | descriptionRules: [(v) => !!v || " Discription is required"], |
| 528 | dateRules: [(v) => !!v || "Date of event is required"], | 528 | dateRules: [(v) => !!v || "Date of event is required"], |
| 529 | startTimeRules: [(v) => !!v || "Start Time is required"], | 529 | startTimeRules: [(v) => !!v || "Start Time is required"], |
| 530 | typeOfEventRules: [(v) => !!v || "Type of event is required"], | 530 | typeOfEventRules: [(v) => !!v || "Type of event is required"], |
| 531 | headers: [ | 531 | headers: [ |
| 532 | { | 532 | { |
| 533 | text: "No", | 533 | text: "No", |
| 534 | align: "", | 534 | align: "", |
| 535 | sortable: false, | 535 | sortable: false, |
| 536 | value: "No", | 536 | value: "No", |
| 537 | }, | 537 | }, |
| 538 | { | 538 | { |
| 539 | text: "Class", | 539 | text: "Class", |
| 540 | value: "classNum", | 540 | value: "classNum", |
| 541 | sortable: false, | 541 | sortable: false, |
| 542 | align: "center", | 542 | align: "center", |
| 543 | }, | 543 | }, |
| 544 | { text: "Title", value: "title", sortable: false, align: "center" }, | 544 | { text: "Title", value: "title", sortable: false, align: "center" }, |
| 545 | { | 545 | { |
| 546 | text: "Date Of Event", | 546 | text: "Date Of Event", |
| 547 | value: "dateOfEvent", | 547 | value: "dateOfEvent", |
| 548 | sortable: false, | 548 | sortable: false, |
| 549 | align: "center", | 549 | align: "center", |
| 550 | }, | 550 | }, |
| 551 | { | 551 | { |
| 552 | text: "Start Time", | 552 | text: "Start Time", |
| 553 | value: "startTime", | 553 | value: "startTime", |
| 554 | sortable: false, | 554 | sortable: false, |
| 555 | align: "center", | 555 | align: "center", |
| 556 | }, | 556 | }, |
| 557 | { text: "Action", value: "", sortable: false, align: "center" }, | 557 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 558 | ], | 558 | ], |
| 559 | events: [], | 559 | events: [], |
| 560 | typeOfEvent: ["Class", "Course"], | 560 | typeOfEvent: ["Class", "Course"], |
| 561 | editedIndex: -1, | 561 | editedIndex: -1, |
| 562 | meetEvent: { | 562 | meetEvent: { |
| 563 | startTime: null, | 563 | startTime: null, |
| 564 | }, | 564 | }, |
| 565 | editedItem: {}, | 565 | editedItem: {}, |
| 566 | menu1: false, | 566 | menu1: false, |
| 567 | menu2: false, | 567 | menu2: false, |
| 568 | loginId: "", | 568 | loginId: "", |
| 569 | }), | 569 | }), |
| 570 | watch: { | 570 | watch: { |
| 571 | meetEventDialog: function (val) { | 571 | meetEventDialog: function (val) { |
| 572 | if (!val) { | 572 | if (!val) { |
| 573 | this.meetEvent = []; | 573 | this.meetEvent = []; |
| 574 | } | 574 | } |
| 575 | }, | 575 | }, |
| 576 | }, | 576 | }, |
| 577 | methods: { | 577 | methods: { |
| 578 | dates: function (date) { | 578 | dates: function (date) { |
| 579 | return moment(date).format("MMMM DD, YYYY"); | 579 | return moment(date).format("MMMM DD, YYYY"); |
| 580 | }, | 580 | }, |
| 581 | getEvents() { | 581 | getEvents() { |
| 582 | this.showLoader = true; | 582 | this.showLoader = true; |
| 583 | var token = this.$store.state.token; | 583 | var token = this.$store.state.token; |
| 584 | http() | 584 | http() |
| 585 | .get("/getMeetingEventesList", { | 585 | .get("/getMeetingEventesList", { |
| 586 | params: { teacherId: this.loginId }, | 586 | params: { teacherId: this.loginId }, |
| 587 | headers: { Authorization: "Bearer " + token }, | 587 | headers: { Authorization: "Bearer " + token }, |
| 588 | }) | 588 | }) |
| 589 | .then((response) => { | 589 | .then((response) => { |
| 590 | this.events = response.data.data; | 590 | this.events = response.data.data; |
| 591 | this.showLoader = false; | 591 | this.showLoader = false; |
| 592 | }) | 592 | }) |
| 593 | .catch((error) => { | 593 | .catch((error) => { |
| 594 | // console.log("err====>", err); | 594 | // console.log("err====>", err); |
| 595 | this.showLoader = false; | 595 | this.showLoader = false; |
| 596 | if (error.response.status === 401) { | 596 | if (error.response.status === 401) { |
| 597 | this.$router.replace({ path: "/" }); | 597 | this.$router.replace({ path: "/" }); |
| 598 | this.$store.dispatch("setToken", null); | 598 | this.$store.dispatch("setToken", null); |
| 599 | this.$store.dispatch("Id", null); | 599 | this.$store.dispatch("Id", null); |
| 600 | } | 600 | } |
| 601 | }); | 601 | }); |
| 602 | }, | 602 | }, |
| 603 | editItem(item) { | 603 | editItem(item) { |
| 604 | this.editedIndex = this.events.indexOf(item); | 604 | this.editedIndex = this.events.indexOf(item); |
| 605 | this.editedItem = Object.assign({}, item); | 605 | this.editedItem = Object.assign({}, item); |
| 606 | this.editedItem.meetingEventId = item._id; | 606 | this.editedItem.meetingEventId = item._id; |
| 607 | this.editedItem.startTime = moment(this.editedItem.startTime, [ | 607 | this.editedItem.startTime = moment(this.editedItem.startTime, [ |
| 608 | "h:mm A", | 608 | "h:mm A", |
| 609 | ]).format("HH:mm"); | 609 | ]).format("HH:mm"); |
| 610 | this.editEventdialog = true; | 610 | this.editEventdialog = true; |
| 611 | }, | 611 | }, |
| 612 | profile(item) { | 612 | profile(item) { |
| 613 | this.editedIndex = this.events.indexOf(item); | 613 | this.editedIndex = this.events.indexOf(item); |
| 614 | this.editedItem = Object.assign({}, item); | 614 | this.editedItem = Object.assign({}, item); |
| 615 | this.viewEventdialog = true; | 615 | this.viewEventdialog = true; |
| 616 | }, | 616 | }, |
| 617 | 617 | ||
| 618 | deleteItem(item) { | 618 | deleteItem(item) { |
| 619 | let deleteEvent = { | 619 | let deleteEvent = { |
| 620 | meetingEventId: item._id, | 620 | meetingEventId: item._id, |
| 621 | }; | 621 | }; |
| 622 | http() | 622 | http() |
| 623 | .delete( | 623 | .delete( |
| 624 | "/deleteMeetingEvent", | 624 | "/deleteMeetingEvent", |
| 625 | confirm("Are you sure you want to delete this?") && { | 625 | confirm("Are you sure you want to delete this?") && { |
| 626 | params: deleteEvent, | 626 | params: deleteEvent, |
| 627 | } | 627 | } |
| 628 | ) | 628 | ) |
| 629 | .then((response) => { | 629 | .then((response) => { |
| 630 | this.snackbar = true; | 630 | this.snackbar = true; |
| 631 | this.text = response.data.message; | 631 | this.text = response.data.message; |
| 632 | this.getEvents(); | 632 | this.getEvents(); |
| 633 | this.snackbar = true; | 633 | this.snackbar = true; |
| 634 | this.color = "green"; | 634 | this.color = "green"; |
| 635 | this.text = response.data.message; | 635 | this.text = response.data.message; |
| 636 | }) | 636 | }) |
| 637 | .catch((error) => { | 637 | .catch((error) => { |
| 638 | this.snackbar = true; | 638 | this.snackbar = true; |
| 639 | this.text = error.response.data.message; | 639 | this.text = error.response.data.message; |
| 640 | this.color = "error"; | 640 | this.color = "error"; |
| 641 | this.loading = false; | 641 | this.loading = false; |
| 642 | }); | 642 | }); |
| 643 | }, | 643 | }, |
| 644 | getAllClass() { | 644 | getAllClass() { |
| 645 | http() | 645 | http() |
| 646 | .get("/getClassesList") | 646 | .get("/getClassesList") |
| 647 | .then((response) => { | 647 | .then((response) => { |
| 648 | this.addclass = response.data.data; | 648 | this.addclass = response.data.data; |
| 649 | }) | 649 | }) |
| 650 | .catch((error) => { | 650 | .catch((error) => { |
| 651 | // console.log("err====>", err); | 651 | // console.log("err====>", err); |
| 652 | // this.$router.replace({ path: "/" }); | 652 | // this.$router.replace({ path: "/" }); |
| 653 | }); | 653 | }); |
| 654 | }, | 654 | }, |
| 655 | getCourses(classId) { | 655 | getCourses(classId) { |
| 656 | this.showLoader = true; | 656 | this.showLoader = true; |
| 657 | http() | 657 | http() |
| 658 | .get("/getCourseesList", { | 658 | .get("/getCourseesList", { |
| 659 | params: { | 659 | params: { |
| 660 | classId: classId, | 660 | classId: classId, |
| 661 | }, | 661 | }, |
| 662 | }) | 662 | }) |
| 663 | .then((response) => { | 663 | .then((response) => { |
| 664 | this.courseData = response.data.data; | 664 | this.courseData = response.data.data; |
| 665 | this.showLoader = false; | 665 | this.showLoader = false; |
| 666 | }) | 666 | }) |
| 667 | .catch((err) => { | 667 | .catch((err) => { |
| 668 | console.log("err====>", err); | 668 | console.log("err====>", err); |
| 669 | this.showLoader = false; | 669 | this.showLoader = false; |
| 670 | }); | 670 | }); |
| 671 | }, | 671 | }, |
| 672 | close() { | 672 | close() { |
| 673 | this.editEventdialog = false; | 673 | this.editEventdialog = false; |
| 674 | }, | 674 | }, |
| 675 | submit() { | 675 | submit() { |
| 676 | if (this.$refs.form.validate()) { | 676 | if (this.$refs.form.validate()) { |
| 677 | this.loading = true; | 677 | this.loading = true; |
| 678 | this.meetEvent.startTime = moment( | 678 | this.meetEvent.startTime = moment( |
| 679 | this.meetEvent.startTime, | 679 | this.meetEvent.startTime, |
| 680 | "hh:mm" | 680 | "hh:mm" |
| 681 | ).format("LT"); | 681 | ).format("LT"); |
| 682 | http() | 682 | http() |
| 683 | .post("/createMeetingEvent", this.meetEvent) | 683 | .post("/createMeetingEvent", this.meetEvent) |
| 684 | .then((response) => { | 684 | .then((response) => { |
| 685 | this.snackbar = true; | 685 | this.snackbar = true; |
| 686 | this.text = response.data.message; | 686 | this.text = response.data.message; |
| 687 | this.color = "green"; | 687 | this.color = "green"; |
| 688 | this.getEvents(); | 688 | this.getEvents(); |
| 689 | this.clear(); | 689 | this.clear(); |
| 690 | this.loading = false; | 690 | this.loading = false; |
| 691 | this.meetEventDialog = false; | 691 | this.meetEventDialog = false; |
| 692 | }) | 692 | }) |
| 693 | .catch((error) => { | 693 | .catch((error) => { |
| 694 | this.snackbar = true; | 694 | this.snackbar = true; |
| 695 | this.text = error.response.data.message; | 695 | this.text = error.response.data.message; |
| 696 | this.color = "error"; | 696 | this.color = "error"; |
| 697 | this.loading = false; | 697 | this.loading = false; |
| 698 | }); | 698 | }); |
| 699 | } | 699 | } |
| 700 | }, | 700 | }, |
| 701 | clear() { | 701 | clear() { |
| 702 | this.$refs.form.reset(); | 702 | this.$refs.form.reset(); |
| 703 | }, | 703 | }, |
| 704 | save() { | 704 | save() { |
| 705 | console.log("=======this.editedItem=====", this.editedItem); | 705 | console.log("=======this.editedItem=====", this.editedItem); |
| 706 | if (this.editedItem.courseId) { | 706 | if (this.editedItem.courseId) { |
| 707 | this.editedItem.courseId = this.editedItem.courseId._id; | 707 | this.editedItem.courseId = this.editedItem.courseId._id; |
| 708 | } | 708 | } |
| 709 | delete this.editedItem.classId; | 709 | delete this.editedItem.classId; |
| 710 | 710 | ||
| 711 | this.editedItem.startTime = moment( | 711 | this.editedItem.startTime = moment( |
| 712 | this.editedItem.startTime, | 712 | this.editedItem.startTime, |
| 713 | "hh:mm" | 713 | "hh:mm" |
| 714 | ).format("LT"); | 714 | ).format("LT"); |
| 715 | http() | 715 | http() |
| 716 | .put("/updateMeetingEvent", this.editedItem) | 716 | .put("/updateMeetingEvent", this.editedItem) |
| 717 | .then((response) => { | 717 | .then((response) => { |
| 718 | this.snackbar = true; | 718 | this.snackbar = true; |
| 719 | this.text = response.data.message; | 719 | this.text = response.data.message; |
| 720 | this.color = "green"; | 720 | this.color = "green"; |
| 721 | this.getEvents(); | 721 | this.getEvents(); |
| 722 | this.close(); | 722 | this.close(); |
| 723 | }) | 723 | }) |
| 724 | .catch((error) => { | 724 | .catch((error) => { |
| 725 | this.snackbar = true; | 725 | this.snackbar = true; |
| 726 | this.text = error.response.data.message; | 726 | this.text = error.response.data.message; |
| 727 | this.color = "error"; | 727 | this.color = "error"; |
| 728 | }); | 728 | }); |
| 729 | }, | 729 | }, |
| 730 | displaySearch() { | 730 | displaySearch() { |
| 731 | (this.show = false), (this.showSearch = true); | 731 | (this.show = false), (this.showSearch = true); |
| 732 | }, | 732 | }, |
| 733 | closeSearch() { | 733 | closeSearch() { |
| 734 | this.showSearch = false; | 734 | this.showSearch = false; |
| 735 | this.show = true; | 735 | this.show = true; |
| 736 | this.search = ""; | 736 | this.search = ""; |
| 737 | }, | 737 | }, |
| 738 | }, | 738 | }, |
| 739 | mounted() { | 739 | mounted() { |
| 740 | this.loginId = this.$store.state.id; | 740 | this.loginId = this.$store.state.id; |
| 741 | this.getEvents(); | 741 | this.getEvents(); |
| 742 | this.getAllClass(); | 742 | this.getAllClass(); |
| 743 | }, | 743 | }, |
| 744 | }; | 744 | }; |
| 745 | </script> | 745 | </script> |
src/pages/socialMedia/socialMedia.vue
| 1 | <template> | 1 | <template> |
| 2 | <v-container fluid class="body-color"> | 2 | <v-container fluid class="body-color"> |
| 3 | <!-- ****** EDIT Social Media ****** --> | 3 | <!-- ****** EDIT Social Media ****** --> |
| 4 | <v-dialog v-model="editSocialMediaDialog" max-width="400px"> | 4 | <v-dialog v-model="editSocialMediaDialog" max-width="400px" persistent> |
| 5 | <v-card flat class="card-style pa-2" dark> | 5 | <v-card flat class="card-style pa-2" dark> |
| 6 | <v-layout> | 6 | <v-layout> |
| 7 | <v-flex xs12> | 7 | <v-flex xs12> |
| 8 | <label class="title text-xs-center">Edit Social Media</label> | 8 | <label class="title text-xs-center">Edit Social Media</label> |
| 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> | 9 | <v-icon size="24" class="right" @click="editSocialMediaDialog = false">cancel</v-icon> |
| 10 | </v-flex> | 10 | </v-flex> |
| 11 | </v-layout> | 11 | </v-layout> |
| 12 | <v-form ref="form"> | 12 | <v-form ref="form"> |
| 13 | <v-container fluid> | 13 | <v-container fluid> |
| 14 | <v-flex xs12 sm12> | 14 | <v-flex xs12 sm12> |
| 15 | <v-layout> | 15 | <v-layout> |
| 16 | <v-flex xs4 class="pt-4 subheading"> | 16 | <v-flex xs4 class="pt-4 subheading"> |
| 17 | <label class="right">Type:</label> | 17 | <label class="right">Type:</label> |
| 18 | </v-flex> | 18 | </v-flex> |
| 19 | <v-flex xs8 sm8 class="ml-3"> | 19 | <v-flex xs8 sm8 class="ml-3"> |
| 20 | <v-select | 20 | <v-select |
| 21 | v-model="editedItem.type" | 21 | v-model="editedItem.type" |
| 22 | placeholder="fill your Title" | 22 | placeholder="fill your Title" |
| 23 | :items="socialLink" | 23 | :items="socialLink" |
| 24 | item-text="name" | 24 | item-text="name" |
| 25 | item-value="value" | 25 | item-value="value" |
| 26 | ></v-select> | 26 | ></v-select> |
| 27 | </v-flex> | 27 | </v-flex> |
| 28 | </v-layout> | 28 | </v-layout> |
| 29 | </v-flex> | 29 | </v-flex> |
| 30 | <v-flex xs12 sm12> | 30 | <v-flex xs12 sm12> |
| 31 | <v-layout> | 31 | <v-layout> |
| 32 | <v-flex xs4 class="pt-4 subheading"> | 32 | <v-flex xs4 class="pt-4 subheading"> |
| 33 | <label class="right">Url lINK:</label> | 33 | <label class="right">Url lINK:</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-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> | 36 | <v-text-field placeholder="fill your Description" v-model="editedItem.linkUrl"></v-text-field> |
| 37 | </v-flex> | 37 | </v-flex> |
| 38 | </v-layout> | 38 | </v-layout> |
| 39 | </v-flex> | 39 | </v-flex> |
| 40 | <v-layout> | 40 | <v-layout> |
| 41 | <v-flex xs12 sm12> | 41 | <v-flex xs12 sm12> |
| 42 | <v-card-actions> | 42 | <v-card-actions> |
| 43 | <v-spacer></v-spacer> | 43 | <v-spacer></v-spacer> |
| 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> | 44 | <v-btn round dark @click="save" class="add-button">Save</v-btn> |
| 45 | <v-spacer></v-spacer> | 45 | <v-spacer></v-spacer> |
| 46 | </v-card-actions> | 46 | </v-card-actions> |
| 47 | </v-flex> | 47 | </v-flex> |
| 48 | </v-layout> | 48 | </v-layout> |
| 49 | </v-container> | 49 | </v-container> |
| 50 | </v-form> | 50 | </v-form> |
| 51 | </v-card> | 51 | </v-card> |
| 52 | </v-dialog> | 52 | </v-dialog> |
| 53 | 53 | ||
| 54 | <!-- ****** PROFILE VIEW Social ****** --> | 54 | <!-- ****** PROFILE VIEW Social ****** --> |
| 55 | 55 | ||
| 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px"> | 56 | <v-dialog v-model="profileSocialMediaDialog" max-width="500px" persistent> |
| 57 | <v-card flat class="card-style pa-3" dark> | 57 | <v-card flat class="card-style pa-3" dark> |
| 58 | <v-layout> | 58 | <v-layout> |
| 59 | <v-flex xs12> | 59 | <v-flex xs12> |
| 60 | <label class="title text-xs-center">View Social Media</label> | 60 | <label class="title text-xs-center">View Social Media</label> |
| 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> | 61 | <v-icon size="24" class="right" @click="profileSocialMediaDialog = false">cancel</v-icon> |
| 62 | </v-flex> | 62 | </v-flex> |
| 63 | </v-layout> | 63 | </v-layout> |
| 64 | <v-card-text> | 64 | <v-card-text> |
| 65 | <v-container grid-list-md> | 65 | <v-container grid-list-md> |
| 66 | <v-layout> | 66 | <v-layout> |
| 67 | <v-flex xs4 sm6> | 67 | <v-flex xs4 sm6> |
| 68 | <h5 class="right my-1"> | 68 | <h5 class="right my-1"> |
| 69 | <b>Title:</b> | 69 | <b>Title:</b> |
| 70 | </h5> | 70 | </h5> |
| 71 | </v-flex> | 71 | </v-flex> |
| 72 | <v-flex sm6 xs8> | 72 | <v-flex sm6 xs8> |
| 73 | <h5 class="my-1">{{ editedItem.type }}</h5> | 73 | <h5 class="my-1">{{ editedItem.type }}</h5> |
| 74 | </v-flex> | 74 | </v-flex> |
| 75 | </v-layout> | 75 | </v-layout> |
| 76 | <v-layout> | 76 | <v-layout> |
| 77 | <v-flex xs5 sm6> | 77 | <v-flex xs5 sm6> |
| 78 | <h5 class="right my-1"> | 78 | <h5 class="right my-1"> |
| 79 | <b>Description:</b> | 79 | <b>Description:</b> |
| 80 | </h5> | 80 | </h5> |
| 81 | </v-flex> | 81 | </v-flex> |
| 82 | <v-flex sm6 xs8> | 82 | <v-flex sm6 xs8> |
| 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> | 83 | <h5 class="my-1 linkCover">{{ editedItem.linkUrl }}</h5> |
| 84 | </v-flex> | 84 | </v-flex> |
| 85 | </v-layout> | 85 | </v-layout> |
| 86 | </v-container> | 86 | </v-container> |
| 87 | </v-card-text> | 87 | </v-card-text> |
| 88 | </v-card> | 88 | </v-card> |
| 89 | </v-dialog> | 89 | </v-dialog> |
| 90 | <!-- ****** Social TABLE ****** --> | 90 | <!-- ****** Social TABLE ****** --> |
| 91 | <v-toolbar color="transparent" flat> | 91 | <v-toolbar color="transparent" flat> |
| 92 | <v-btn | 92 | <v-btn |
| 93 | fab | 93 | fab |
| 94 | dark | 94 | dark |
| 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" | 95 | class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" |
| 96 | small | 96 | small |
| 97 | @click="addSocialMediaDialog = true" | 97 | @click="addSocialMediaDialog = true" |
| 98 | > | 98 | > |
| 99 | <v-icon dark>add</v-icon> | 99 | <v-icon dark>add</v-icon> |
| 100 | </v-btn> | 100 | </v-btn> |
| 101 | <v-btn | 101 | <v-btn |
| 102 | round | 102 | round |
| 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" | 103 | class="open-dialog-button hidden-sm-only hidden-xs-only" |
| 104 | dark | 104 | dark |
| 105 | @click="addSocialMediaDialog = true" | 105 | @click="addSocialMediaDialog = true" |
| 106 | > | 106 | > |
| 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media | 107 | <v-icon class="white--text pr-1" size="20">add</v-icon>Add Social Media |
| 108 | </v-btn> | 108 | </v-btn> |
| 109 | <v-spacer></v-spacer> | 109 | <v-spacer></v-spacer> |
| 110 | <v-card-title class="body-1" v-show="show"> | 110 | <v-card-title class="body-1" v-show="show"> |
| 111 | <v-btn icon large flat @click="displaySearch"> | 111 | <v-btn icon large flat @click="displaySearch"> |
| 112 | <v-avatar size="27"> | 112 | <v-avatar size="27"> |
| 113 | <img src="/static/icon/search.png" alt="icon" /> | 113 | <img src="/static/icon/search.png" alt="icon" /> |
| 114 | </v-avatar> | 114 | </v-avatar> |
| 115 | </v-btn> | 115 | </v-btn> |
| 116 | </v-card-title> | 116 | </v-card-title> |
| 117 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> | 117 | <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> |
| 118 | <v-layout> | 118 | <v-layout> |
| 119 | <v-text-field | 119 | <v-text-field |
| 120 | autofocus | 120 | autofocus |
| 121 | v-model="search" | 121 | v-model="search" |
| 122 | label="Search" | 122 | label="Search" |
| 123 | prepend-inner-icon="search" | 123 | prepend-inner-icon="search" |
| 124 | color="primary" | 124 | color="primary" |
| 125 | ></v-text-field> | 125 | ></v-text-field> |
| 126 | <v-icon @click="closeSearch" color="error">close</v-icon> | 126 | <v-icon @click="closeSearch" color="error">close</v-icon> |
| 127 | </v-layout> | 127 | </v-layout> |
| 128 | </v-flex> | 128 | </v-flex> |
| 129 | </v-toolbar> | 129 | </v-toolbar> |
| 130 | <v-data-table | 130 | <v-data-table |
| 131 | :headers="headers" | 131 | :headers="headers" |
| 132 | :items="desserts" | 132 | :items="desserts" |
| 133 | :pagination.sync="pagination" | 133 | :pagination.sync="pagination" |
| 134 | :search="search" | 134 | :search="search" |
| 135 | > | 135 | > |
| 136 | <template slot="items" slot-scope="props"> | 136 | <template slot="items" slot-scope="props"> |
| 137 | <tr class="tr"> | 137 | <tr class="tr"> |
| 138 | <td class="td td-row">{{ props.index + 1}}</td> | 138 | <td class="td td-row">{{ props.index + 1}}</td> |
| 139 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> | 139 | <td class="td td-row text-xs-center">{{ props.item.type}}</td> |
| 140 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> | 140 | <td class="td td-row text-xs-center linkCover">{{ props.item.linkUrl}}</td> |
| 141 | <td class="td td-row text-xs-center"> | 141 | <td class="td td-row text-xs-center"> |
| 142 | <span> | 142 | <span> |
| 143 | <v-tooltip top> | 143 | <v-tooltip top> |
| 144 | <img | 144 | <img |
| 145 | slot="activator" | 145 | slot="activator" |
| 146 | style="cursor:pointer; width:25px; height:25px; " | 146 | style="cursor:pointer; width:25px; height:25px; " |
| 147 | class="mr-3" | 147 | class="mr-3" |
| 148 | @click="profile(props.item)" | 148 | @click="profile(props.item)" |
| 149 | src="/static/icon/view.png" | 149 | src="/static/icon/view.png" |
| 150 | /> | 150 | /> |
| 151 | <span>View</span> | 151 | <span>View</span> |
| 152 | </v-tooltip> | 152 | </v-tooltip> |
| 153 | <v-tooltip top> | 153 | <v-tooltip top> |
| 154 | <img | 154 | <img |
| 155 | slot="activator" | 155 | slot="activator" |
| 156 | style="cursor:pointer; width:20 px; height:18px; " | 156 | style="cursor:pointer; width:20 px; height:18px; " |
| 157 | class="mr-3" | 157 | class="mr-3" |
| 158 | @click="editItem(props.item)" | 158 | @click="editItem(props.item)" |
| 159 | src="/static/icon/edit.png" | 159 | src="/static/icon/edit.png" |
| 160 | /> | 160 | /> |
| 161 | <span>Edit</span> | 161 | <span>Edit</span> |
| 162 | </v-tooltip> | 162 | </v-tooltip> |
| 163 | <v-tooltip top> | 163 | <v-tooltip top> |
| 164 | <img | 164 | <img |
| 165 | slot="activator" | 165 | slot="activator" |
| 166 | style="cursor:pointer; width:20px; height:20px; " | 166 | style="cursor:pointer; width:20px; height:20px; " |
| 167 | class="mr-3" | 167 | class="mr-3" |
| 168 | @click="deleteItem(props.item)" | 168 | @click="deleteItem(props.item)" |
| 169 | src="/static/icon/delete.png" | 169 | src="/static/icon/delete.png" |
| 170 | /> | 170 | /> |
| 171 | <span>Delete</span> | 171 | <span>Delete</span> |
| 172 | </v-tooltip> | 172 | </v-tooltip> |
| 173 | </span> | 173 | </span> |
| 174 | </td> | 174 | </td> |
| 175 | </tr> | 175 | </tr> |
| 176 | </template> | 176 | </template> |
| 177 | <v-alert | 177 | <v-alert |
| 178 | slot="no-results" | 178 | slot="no-results" |
| 179 | :value="true" | 179 | :value="true" |
| 180 | color="error" | 180 | color="error" |
| 181 | icon="warning" | 181 | icon="warning" |
| 182 | >Your search for "{{ search }}" found no results.</v-alert> | 182 | >Your search for "{{ search }}" found no results.</v-alert> |
| 183 | </v-data-table> | 183 | </v-data-table> |
| 184 | <!-- ****** ADD MULTIPLE REMINDER ****** --> | 184 | <!-- ****** ADD MULTIPLE REMINDER ****** --> |
| 185 | <v-dialog v-model="addSocialMediaDialog" max-width="400px" v-if="addSocialMediaDialog"> | 185 | <v-dialog v-model="addSocialMediaDialog" max-width="400px" v-if="addSocialMediaDialog" persistent> |
| 186 | <v-card flat class="card-style pa-2" dark> | 186 | <v-card flat class="card-style pa-2" dark> |
| 187 | <v-layout> | 187 | <v-layout> |
| 188 | <v-flex xs12> | 188 | <v-flex xs12> |
| 189 | <label class="title text-xs-center">Add Social Media</label> | 189 | <label class="title text-xs-center">Add Social Media</label> |
| 190 | <v-icon size="24" class="right" @click="closeAddSocialMediaModel">cancel</v-icon> | 190 | <v-icon size="24" class="right" @click="closeAddSocialMediaModel">cancel</v-icon> |
| 191 | </v-flex> | 191 | </v-flex> |
| 192 | </v-layout> | 192 | </v-layout> |
| 193 | <v-form ref="form" v-model="valid" lazy-validation> | 193 | <v-form ref="form" v-model="valid" lazy-validation> |
| 194 | <v-container fluid> | 194 | <v-container fluid> |
| 195 | <v-flex xs12> | 195 | <v-flex xs12> |
| 196 | <v-layout> | 196 | <v-layout> |
| 197 | <v-flex xs4 class="pt-4 subheading"> | 197 | <v-flex xs4 class="pt-4 subheading"> |
| 198 | <label class="right">Type:</label> | 198 | <label class="right">Type:</label> |
| 199 | </v-flex> | 199 | </v-flex> |
| 200 | <v-flex xs8 sm8 class="ml-3"> | 200 | <v-flex xs8 sm8 class="ml-3"> |
| 201 | <v-select | 201 | <v-select |
| 202 | v-model="socialMedia.type" | 202 | v-model="socialMedia.type" |
| 203 | :items="socialLink" | 203 | :items="socialLink" |
| 204 | item-text="name" | 204 | item-text="name" |
| 205 | item-value="value" | 205 | item-value="value" |
| 206 | label="Selct Type" | 206 | label="Selct Type" |
| 207 | type="text" | 207 | type="text" |
| 208 | :rules="socialRules" | 208 | :rules="socialRules" |
| 209 | required | 209 | required |
| 210 | ></v-select> | 210 | ></v-select> |
| 211 | </v-flex> | 211 | </v-flex> |
| 212 | </v-layout> | 212 | </v-layout> |
| 213 | </v-flex> | 213 | </v-flex> |
| 214 | <v-flex xs12> | 214 | <v-flex xs12> |
| 215 | <v-layout> | 215 | <v-layout> |
| 216 | <v-flex xs4 class="pt-4 subheading"> | 216 | <v-flex xs4 class="pt-4 subheading"> |
| 217 | <label class="right">Link Url:</label> | 217 | <label class="right">Link Url:</label> |
| 218 | </v-flex> | 218 | </v-flex> |
| 219 | <v-flex xs8 sm8 class="ml-3"> | 219 | <v-flex xs8 sm8 class="ml-3"> |
| 220 | <v-text-field | 220 | <v-text-field |
| 221 | placeholder="fill your link url" | 221 | placeholder="fill your link url" |
| 222 | :rules="linkUrlnRules" | 222 | :rules="linkUrlnRules" |
| 223 | v-model="socialMedia.linkUrl" | 223 | v-model="socialMedia.linkUrl" |
| 224 | type="text" | 224 | type="text" |
| 225 | required | 225 | required |
| 226 | ></v-text-field> | 226 | ></v-text-field> |
| 227 | </v-flex> | 227 | </v-flex> |
| 228 | </v-layout> | 228 | </v-layout> |
| 229 | </v-flex> | 229 | </v-flex> |
| 230 | <v-layout> | 230 | <v-layout> |
| 231 | <v-flex xs12 sm12> | 231 | <v-flex xs12 sm12> |
| 232 | <v-card-actions> | 232 | <v-card-actions> |
| 233 | <v-spacer></v-spacer> | 233 | <v-spacer></v-spacer> |
| 234 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> | 234 | <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> |
| 235 | <v-spacer></v-spacer> | 235 | <v-spacer></v-spacer> |
| 236 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> | 236 | <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> |
| 237 | </v-card-actions> | 237 | </v-card-actions> |
| 238 | </v-flex> | 238 | </v-flex> |
| 239 | </v-layout> | 239 | </v-layout> |
| 240 | </v-container> | 240 | </v-container> |
| 241 | </v-form> | 241 | </v-form> |
| 242 | </v-card> | 242 | </v-card> |
| 243 | </v-dialog> | 243 | </v-dialog> |
| 244 | <v-snackbar | 244 | <v-snackbar |
| 245 | :timeout="timeout" | 245 | :timeout="timeout" |
| 246 | :top="y === 'top'" | 246 | :top="y === 'top'" |
| 247 | :right="x === 'right'" | 247 | :right="x === 'right'" |
| 248 | :vertical="mode === 'vertical'" | 248 | :vertical="mode === 'vertical'" |
| 249 | v-model="snackbar" | 249 | v-model="snackbar" |
| 250 | :color="color" | 250 | :color="color" |
| 251 | >{{ text }}</v-snackbar> | 251 | >{{ text }}</v-snackbar> |
| 252 | <div class="loader" v-if="showLoader"> | 252 | <div class="loader" v-if="showLoader"> |
| 253 | <v-progress-circular indeterminate color="white"></v-progress-circular> | 253 | <v-progress-circular indeterminate color="white"></v-progress-circular> |
| 254 | </div> | 254 | </div> |
| 255 | </v-container> | 255 | </v-container> |
| 256 | </template> | 256 | </template> |
| 257 | 257 | ||
| 258 | <script> | 258 | <script> |
| 259 | import http from "@/Services/http.js"; | 259 | import http from "@/Services/http.js"; |
| 260 | 260 | ||
| 261 | export default { | 261 | export default { |
| 262 | data: () => ({ | 262 | data: () => ({ |
| 263 | snackbar: false, | 263 | snackbar: false, |
| 264 | y: "top", | 264 | y: "top", |
| 265 | x: "right", | 265 | x: "right", |
| 266 | mode: "", | 266 | mode: "", |
| 267 | timeout: 3000, | 267 | timeout: 3000, |
| 268 | text: "", | 268 | text: "", |
| 269 | loading: false, | 269 | loading: false, |
| 270 | color: "", | 270 | color: "", |
| 271 | date: null, | 271 | date: null, |
| 272 | search: "", | 272 | search: "", |
| 273 | show: true, | 273 | show: true, |
| 274 | showSearch: false, | 274 | showSearch: false, |
| 275 | addSocialMediaDialog: false, | 275 | addSocialMediaDialog: false, |
| 276 | showLoader: false, | 276 | showLoader: false, |
| 277 | editSocialMediaDialog: false, | 277 | editSocialMediaDialog: false, |
| 278 | profileSocialMediaDialog: false, | 278 | profileSocialMediaDialog: false, |
| 279 | valid: true, | 279 | valid: true, |
| 280 | pagination: { | 280 | pagination: { |
| 281 | rowsPerPage: 10, | 281 | rowsPerPage: 10, |
| 282 | }, | 282 | }, |
| 283 | imageData: {}, | 283 | imageData: {}, |
| 284 | imageName: "", | 284 | imageName: "", |
| 285 | imageUrl: "", | 285 | imageUrl: "", |
| 286 | imageFile: "", | 286 | imageFile: "", |
| 287 | socialRules: [(v) => !!v || " Social media type is required"], | 287 | socialRules: [(v) => !!v || " Social media type is required"], |
| 288 | linkUrlnRules: [(v) => !!v || " Link Url is required"], | 288 | linkUrlnRules: [(v) => !!v || " Link Url is required"], |
| 289 | headers: [ | 289 | headers: [ |
| 290 | { | 290 | { |
| 291 | text: "No", | 291 | text: "No", |
| 292 | align: "", | 292 | align: "", |
| 293 | sortable: false, | 293 | sortable: false, |
| 294 | value: "No", | 294 | value: "No", |
| 295 | }, | 295 | }, |
| 296 | { text: "Type", value: "type", sortable: false, align: "center" }, | 296 | { text: "Type", value: "type", sortable: false, align: "center" }, |
| 297 | { | 297 | { |
| 298 | text: "Link Url", | 298 | text: "Link Url", |
| 299 | value: "linkUrl", | 299 | value: "linkUrl", |
| 300 | sortable: false, | 300 | sortable: false, |
| 301 | align: "center", | 301 | align: "center", |
| 302 | }, | 302 | }, |
| 303 | { text: "Action", value: "", sortable: false, align: "center" }, | 303 | { text: "Action", value: "", sortable: false, align: "center" }, |
| 304 | ], | 304 | ], |
| 305 | desserts: [], | 305 | desserts: [], |
| 306 | editedIndex: -1, | 306 | editedIndex: -1, |
| 307 | socialMedia: {}, | 307 | socialMedia: {}, |
| 308 | editedItem: {}, | 308 | editedItem: {}, |
| 309 | socialLink: [ | 309 | socialLink: [ |
| 310 | { | 310 | { |
| 311 | name: "Face Book", | 311 | name: "Face Book", |
| 312 | value: "FACEBOOK", | 312 | value: "FACEBOOK", |
| 313 | }, | 313 | }, |
| 314 | { | 314 | { |
| 315 | name: "You Tube", | 315 | name: "You Tube", |
| 316 | value: "YOUTUBE", | 316 | value: "YOUTUBE", |
| 317 | }, | 317 | }, |
| 318 | ], | 318 | ], |
| 319 | userName: "", | 319 | userName: "", |
| 320 | }), | 320 | }), |
| 321 | watch: { | 321 | watch: { |
| 322 | addSocialMediaDialog: function (val) { | 322 | addSocialMediaDialog: function (val) { |
| 323 | if (!val) { | 323 | if (!val) { |
| 324 | this.socialMedia = []; | 324 | this.socialMedia = []; |
| 325 | } | 325 | } |
| 326 | }, | 326 | }, |
| 327 | }, | 327 | }, |
| 328 | methods: { | 328 | methods: { |
| 329 | // pickFile() { | 329 | // pickFile() { |
| 330 | // this.$refs.image.click(); | 330 | // this.$refs.image.click(); |
| 331 | // }, | 331 | // }, |
| 332 | 332 | ||
| 333 | // onFilePicked(e) { | 333 | // onFilePicked(e) { |
| 334 | // // console.log(e) | 334 | // // console.log(e) |
| 335 | // const files = e.target.files; | 335 | // const files = e.target.files; |
| 336 | // this.imageData.upload = e.target.files[0]; | 336 | // this.imageData.upload = e.target.files[0]; |
| 337 | // if (files[0] !== undefined) { | 337 | // if (files[0] !== undefined) { |
| 338 | // this.imageName = files[0].name; | 338 | // this.imageName = files[0].name; |
| 339 | // if (this.imageName.lastIndexOf(".") <= 0) { | 339 | // if (this.imageName.lastIndexOf(".") <= 0) { |
| 340 | // return; | 340 | // return; |
| 341 | // } | 341 | // } |
| 342 | // const fr = new FileReader(); | 342 | // const fr = new FileReader(); |
| 343 | // fr.readAsDataURL(files[0]); | 343 | // fr.readAsDataURL(files[0]); |
| 344 | // fr.addEventListener("load", () => { | 344 | // fr.addEventListener("load", () => { |
| 345 | // this.imageUrl = fr.result; | 345 | // this.imageUrl = fr.result; |
| 346 | // this.imageFile = files[0]; // this is an image file that can be sent to server... | 346 | // this.imageFile = files[0]; // this is an image file that can be sent to server... |
| 347 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); | 347 | // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); |
| 348 | // console.log("upload=======>", this.imageData.imageUrl); | 348 | // console.log("upload=======>", this.imageData.imageUrl); |
| 349 | // console.log("imageFile", this.imageFile); | 349 | // console.log("imageFile", this.imageFile); |
| 350 | // }); | 350 | // }); |
| 351 | // } else { | 351 | // } else { |
| 352 | // this.imageName = ""; | 352 | // this.imageName = ""; |
| 353 | // this.imageFile = ""; | 353 | // this.imageFile = ""; |
| 354 | // this.imageUrl = ""; | 354 | // this.imageUrl = ""; |
| 355 | // } | 355 | // } |
| 356 | // }, | 356 | // }, |
| 357 | getSocialMedia() { | 357 | getSocialMedia() { |
| 358 | this.showLoader = true; | 358 | this.showLoader = true; |
| 359 | var token = this.$store.state.token; | 359 | var token = this.$store.state.token; |
| 360 | http() | 360 | http() |
| 361 | .get("/getSocialList", { | 361 | .get("/getSocialList", { |
| 362 | headers: { Authorization: "Bearer " + token }, | 362 | headers: { Authorization: "Bearer " + token }, |
| 363 | }) | 363 | }) |
| 364 | .then((response) => { | 364 | .then((response) => { |
| 365 | this.desserts = response.data.data; | 365 | this.desserts = response.data.data; |
| 366 | this.showLoader = false; | 366 | this.showLoader = false; |
| 367 | }) | 367 | }) |
| 368 | .catch((error) => { | 368 | .catch((error) => { |
| 369 | this.showLoader = false; | 369 | this.showLoader = false; |
| 370 | if (error.response.status === 401) { | 370 | if (error.response.status === 401) { |
| 371 | this.$router.replace({ path: "/" }); | 371 | this.$router.replace({ path: "/" }); |
| 372 | this.$store.dispatch("setToken", null); | 372 | this.$store.dispatch("setToken", null); |
| 373 | this.$store.dispatch("Id", null); | 373 | this.$store.dispatch("Id", null); |
| 374 | } | 374 | } |
| 375 | }); | 375 | }); |
| 376 | }, | 376 | }, |
| 377 | editItem(item) { | 377 | editItem(item) { |
| 378 | this.editedIndex = this.desserts.indexOf(item); | 378 | this.editedIndex = this.desserts.indexOf(item); |
| 379 | this.editedItem = Object.assign({}, item); | 379 | this.editedItem = Object.assign({}, item); |
| 380 | this.editSocialMediaDialog = true; | 380 | this.editSocialMediaDialog = true; |
| 381 | }, | 381 | }, |
| 382 | profile(item) { | 382 | profile(item) { |
| 383 | this.editedIndex = this.desserts.indexOf(item); | 383 | this.editedIndex = this.desserts.indexOf(item); |
| 384 | this.editedItem = Object.assign({}, item); | 384 | this.editedItem = Object.assign({}, item); |
| 385 | this.profileSocialMediaDialog = true; | 385 | this.profileSocialMediaDialog = true; |
| 386 | }, | 386 | }, |
| 387 | 387 | ||
| 388 | deleteItem(item) { | 388 | deleteItem(item) { |
| 389 | let deleteSocialMedia = { | 389 | let deleteSocialMedia = { |
| 390 | socialId: item._id, | 390 | socialId: item._id, |
| 391 | }; | 391 | }; |
| 392 | http() | 392 | http() |
| 393 | .delete( | 393 | .delete( |
| 394 | "/deleteSocial", | 394 | "/deleteSocial", |
| 395 | confirm("Are you sure you want to delete this?") && { | 395 | confirm("Are you sure you want to delete this?") && { |
| 396 | params: deleteSocialMedia, | 396 | params: deleteSocialMedia, |
| 397 | } | 397 | } |
| 398 | ) | 398 | ) |
| 399 | .then((response) => { | 399 | .then((response) => { |
| 400 | this.snackbar = true; | 400 | this.snackbar = true; |
| 401 | this.text = response.data.message; | 401 | this.text = response.data.message; |
| 402 | this.color = "green"; | 402 | this.color = "green"; |
| 403 | this.getSocialMedia(); | 403 | this.getSocialMedia(); |
| 404 | }) | 404 | }) |
| 405 | .catch((error) => { | 405 | .catch((error) => { |
| 406 | this.snackbar = true; | 406 | this.snackbar = true; |
| 407 | this.text = error.response.data.message; | 407 | this.text = error.response.data.message; |
| 408 | this.color = "error"; | 408 | this.color = "error"; |
| 409 | }); | 409 | }); |
| 410 | }, | 410 | }, |
| 411 | close() { | 411 | close() { |
| 412 | this.editSocialMediaDialog = false; | 412 | this.editSocialMediaDialog = false; |
| 413 | }, | 413 | }, |
| 414 | closeAddSocialMediaModel() { | 414 | closeAddSocialMediaModel() { |
| 415 | this.addSocialMediaDialog = false; | 415 | this.addSocialMediaDialog = false; |
| 416 | this.socialMedia = []; | 416 | this.socialMedia = []; |
| 417 | }, | 417 | }, |
| 418 | submit() { | 418 | submit() { |
| 419 | if (this.$refs.form.validate()) { | 419 | if (this.$refs.form.validate()) { |
| 420 | this.loading = true; | 420 | this.loading = true; |
| 421 | http() | 421 | http() |
| 422 | .post("/addSocialLinks", this.socialMedia) | 422 | .post("/addSocialLinks", this.socialMedia) |
| 423 | .then((response) => { | 423 | .then((response) => { |
| 424 | this.snackbar = true; | 424 | this.snackbar = true; |
| 425 | this.text = response.data.message; | 425 | this.text = response.data.message; |
| 426 | this.color = "green"; | 426 | this.color = "green"; |
| 427 | this.getSocialMedia(); | 427 | this.getSocialMedia(); |
| 428 | this.clear(); | 428 | this.clear(); |
| 429 | this.addSocialMediaDialog = false; | 429 | this.addSocialMediaDialog = false; |
| 430 | this.loading = false; | 430 | this.loading = false; |
| 431 | }) | 431 | }) |
| 432 | .catch((error) => { | 432 | .catch((error) => { |
| 433 | this.snackbar = true; | 433 | this.snackbar = true; |
| 434 | this.color = "error"; | 434 | this.color = "error"; |
| 435 | this.text = error.response.data.message; | 435 | this.text = error.response.data.message; |
| 436 | this.loading = false; | 436 | this.loading = false; |
| 437 | }); | 437 | }); |
| 438 | } | 438 | } |
| 439 | }, | 439 | }, |
| 440 | clear() { | 440 | clear() { |
| 441 | this.$refs.form.reset(); | 441 | this.$refs.form.reset(); |
| 442 | }, | 442 | }, |
| 443 | save() { | 443 | save() { |
| 444 | (this.editedItem.socialId = this.editedItem._id), | 444 | (this.editedItem.socialId = this.editedItem._id), |
| 445 | http() | 445 | http() |
| 446 | .put("/updateSocial", this.editedItem) | 446 | .put("/updateSocial", this.editedItem) |
| 447 | .then((response) => { | 447 | .then((response) => { |
| 448 | this.snackbar = true; | 448 | this.snackbar = true; |
| 449 | this.text = response.data.message; | 449 | this.text = response.data.message; |
| 450 | this.color = "green"; | 450 | this.color = "green"; |
| 451 | this.getSocialMedia(); | 451 | this.getSocialMedia(); |
| 452 | this.close(); | 452 | this.close(); |
| 453 | }) | 453 | }) |
| 454 | .catch((error) => { | 454 | .catch((error) => { |
| 455 | this.snackbar = true; | 455 | this.snackbar = true; |
| 456 | this.text = error.response.data.message; | 456 | this.text = error.response.data.message; |
| 457 | this.color = "error"; | 457 | this.color = "error"; |
| 458 | }); | 458 | }); |
| 459 | }, | 459 | }, |
| 460 | displaySearch() { | 460 | displaySearch() { |
| 461 | (this.show = false), (this.showSearch = true); | 461 | (this.show = false), (this.showSearch = true); |
| 462 | }, | 462 | }, |
| 463 | closeSearch() { | 463 | closeSearch() { |
| 464 | this.showSearch = false; | 464 | this.showSearch = false; |
| 465 | this.show = true; | 465 | this.show = true; |
| 466 | this.search = ""; | 466 | this.search = ""; |
| 467 | }, | 467 | }, |
| 468 | }, | 468 | }, |
| 469 | mounted() { | 469 | mounted() { |
| 470 | this.getSocialMedia(); | 470 | this.getSocialMedia(); |
| 471 | }, | 471 | }, |
| 472 | }; | 472 | }; |
| 473 | </script> | 473 | </script> |
src/router/paths.js
| 1 | export default [{ | 1 | export default [{ |
| 2 | path: '*', | 2 | path: '*', |
| 3 | meta: { | 3 | meta: { |
| 4 | public: true, | 4 | public: true, |
| 5 | }, | 5 | }, |
| 6 | redirect: { | 6 | redirect: { |
| 7 | path: '/404' | 7 | path: '/404' |
| 8 | } | 8 | } |
| 9 | }, | 9 | }, |
| 10 | { | 10 | { |
| 11 | path: '/404', | 11 | path: '/404', |
| 12 | meta: { | 12 | meta: { |
| 13 | public: true, | 13 | public: true, |
| 14 | }, | 14 | }, |
| 15 | name: 'NotFound', | 15 | name: 'NotFound', |
| 16 | component: () => | 16 | component: () => |
| 17 | import( | 17 | import( |
| 18 | /* webpackChunkName: "routes" */ | 18 | /* webpackChunkName: "routes" */ |
| 19 | /* webpackMode: "lazy-once" */ | 19 | /* webpackMode: "lazy-once" */ |
| 20 | `@/pages/NotFound/NotFound.vue` | 20 | `@/pages/NotFound/NotFound.vue` |
| 21 | ) | 21 | ) |
| 22 | }, | 22 | }, |
| 23 | { | 23 | { |
| 24 | path: '*', | 24 | path: '*', |
| 25 | meta: {}, | 25 | meta: {}, |
| 26 | name: 'dashboardAdmin', | 26 | name: 'dashboardAdmin', |
| 27 | props: (route) => ({ | 27 | props: (route) => ({ |
| 28 | type: route.query.type | 28 | type: route.query.type |
| 29 | }), | 29 | }), |
| 30 | component: () => | 30 | component: () => |
| 31 | import( | 31 | import( |
| 32 | /* webpackChunkName: "routes" */ | 32 | /* webpackChunkName: "routes" */ |
| 33 | /* webpackMode: "lazy-once" */ | 33 | /* webpackMode: "lazy-once" */ |
| 34 | `@/pages/Dashboard/dashboard.vue` | 34 | `@/pages/Dashboard/dashboard.vue` |
| 35 | ) | 35 | ) |
| 36 | }, | 36 | }, |
| 37 | { | 37 | { |
| 38 | path: '/500', | 38 | path: '/500', |
| 39 | meta: { | 39 | meta: { |
| 40 | public: true, | 40 | public: true, |
| 41 | }, | 41 | }, |
| 42 | name: 'ServerError', | 42 | name: 'ServerError', |
| 43 | component: () => | 43 | component: () => |
| 44 | import( | 44 | import( |
| 45 | /* webpackChunkName: "routes" */ | 45 | /* webpackChunkName: "routes" */ |
| 46 | /* webpackMode: "lazy-once" */ | 46 | /* webpackMode: "lazy-once" */ |
| 47 | `@/pages/NotFound/Error.vue` | 47 | `@/pages/NotFound/Error.vue` |
| 48 | ) | 48 | ) |
| 49 | }, | 49 | }, |
| 50 | { | 50 | { |
| 51 | path: '/Refresh', | 51 | path: '/Refresh', |
| 52 | meta: { | 52 | meta: { |
| 53 | public: true, | 53 | public: true, |
| 54 | }, | 54 | }, |
| 55 | name: 'Refresh', | 55 | name: 'Refresh', |
| 56 | component: () => | 56 | component: () => |
| 57 | import( | 57 | import( |
| 58 | /* webpackChunkName: "routes" */ | 58 | /* webpackChunkName: "routes" */ |
| 59 | /* webpackMode: "lazy-once" */ | 59 | /* webpackMode: "lazy-once" */ |
| 60 | `@/pages/Common/Refresh.vue` | 60 | `@/pages/Common/Refresh.vue` |
| 61 | ) | 61 | ) |
| 62 | }, | 62 | }, |
| 63 | { | 63 | { |
| 64 | path: '/changepassword', | 64 | path: '/changepassword', |
| 65 | meta: {}, | 65 | meta: {}, |
| 66 | name: 'changepassword', | 66 | name: 'changepassword', |
| 67 | props: (route) => ({ | 67 | props: (route) => ({ |
| 68 | type: route.query.type | 68 | type: route.query.type |
| 69 | }), | 69 | }), |
| 70 | component: () => | 70 | component: () => |
| 71 | import( | 71 | import( |
| 72 | /* webpackChunkName: "routes" */ | 72 | /* webpackChunkName: "routes" */ |
| 73 | /* webpackMode: "lazy-once" */ | 73 | /* webpackMode: "lazy-once" */ |
| 74 | `@/pages/Authentication/changepassword.vue` | 74 | `@/pages/Authentication/changepassword.vue` |
| 75 | ) | 75 | ) |
| 76 | }, | 76 | }, |
| 77 | { | 77 | { |
| 78 | path: '/teachers', | 78 | path: '/teachers', |
| 79 | meta: { | 79 | meta: { |
| 80 | breadcrumb: false | 80 | breadcrumb: false |
| 81 | }, | 81 | }, |
| 82 | name: 'Teachers', | 82 | name: 'Teachers', |
| 83 | component: () => | 83 | component: () => |
| 84 | import( | 84 | import( |
| 85 | /* webpackChunkName: "routes" */ | 85 | /* webpackChunkName: "routes" */ |
| 86 | /* webpackMode: "lazy-once" */ | 86 | /* webpackMode: "lazy-once" */ |
| 87 | `@/pages/Teachers/teachers.vue` | 87 | `@/pages/Teachers/teachers.vue` |
| 88 | ) | 88 | ) |
| 89 | }, | 89 | }, |
| 90 | { | 90 | { |
| 91 | path: '/AssignTeachers', | ||
| 92 | meta: { | ||
| 93 | breadcrumb: false | ||
| 94 | }, | ||
| 95 | name: 'AssignTeachers', | ||
| 96 | component: () => | ||
| 97 | import( | ||
| 98 | /* webpackChunkName: "routes" */ | ||
| 99 | /* webpackMode: "lazy-once" */ | ||
| 100 | `@/pages/AssignTeachers.vue` | ||
| 101 | ) | ||
| 102 | }, | ||
| 103 | { | ||
| 91 | path: '/', | 104 | path: '/', |
| 92 | meta: { | 105 | meta: { |
| 93 | public: true, | 106 | public: true, |
| 94 | }, | 107 | }, |
| 95 | name: 'Login', | 108 | name: 'Login', |
| 96 | component: () => | 109 | component: () => |
| 97 | import( | 110 | import( |
| 98 | /* webpackChunkName: "routes" */ | 111 | /* webpackChunkName: "routes" */ |
| 99 | /* webpackMode: "lazy-once" */ | 112 | /* webpackMode: "lazy-once" */ |
| 100 | `@/pages/Authentication/Login.vue` | 113 | `@/pages/Authentication/Login.vue` |
| 101 | ) | 114 | ) |
| 102 | }, | 115 | }, |
| 103 | { | 116 | { |
| 104 | path: '/forgetpassword', | 117 | path: '/forgetpassword', |
| 105 | meta: { | 118 | meta: { |
| 106 | public: true, | 119 | public: true, |
| 107 | }, | 120 | }, |
| 108 | name: 'forgetpassword', | 121 | name: 'forgetpassword', |
| 109 | component: () => | 122 | component: () => |
| 110 | import( | 123 | import( |
| 111 | /* webpackChunkName: "routes" */ | 124 | /* webpackChunkName: "routes" */ |
| 112 | /* webpackMode: "lazy-once" */ | 125 | /* webpackMode: "lazy-once" */ |
| 113 | `@/pages/Authentication/forgetpassword.vue` | 126 | `@/pages/Authentication/forgetpassword.vue` |
| 114 | ) | 127 | ) |
| 115 | }, | 128 | }, |
| 116 | { | 129 | { |
| 117 | path: '/students', | 130 | path: '/students', |
| 118 | meta: {}, | 131 | meta: {}, |
| 119 | name: 'Students', | 132 | name: 'Students', |
| 120 | props: (route) => ({ | 133 | props: (route) => ({ |
| 121 | type: route.query.type | 134 | type: route.query.type |
| 122 | }), | 135 | }), |
| 123 | component: () => | 136 | component: () => |
| 124 | import( | 137 | import( |
| 125 | /* webpackChunkName: "routes" */ | 138 | /* webpackChunkName: "routes" */ |
| 126 | /* webpackMode: "lazy-once" */ | 139 | /* webpackMode: "lazy-once" */ |
| 127 | `@/pages/Students/students.vue` | 140 | `@/pages/Students/students.vue` |
| 128 | ) | 141 | ) |
| 129 | }, | 142 | }, |
| 130 | { | 143 | { |
| 131 | path: '/class', | 144 | path: '/class', |
| 132 | meta: {}, | 145 | meta: {}, |
| 133 | name: 'Class', | 146 | name: 'Class', |
| 134 | props: (route) => ({ | 147 | props: (route) => ({ |
| 135 | type: route.query.type | 148 | type: route.query.type |
| 136 | }), | 149 | }), |
| 137 | component: () => | 150 | component: () => |
| 138 | import( | 151 | import( |
| 139 | /* webpackChunkName: "routes" */ | 152 | /* webpackChunkName: "routes" */ |
| 140 | /* webpackMode: "lazy-once" */ | 153 | /* webpackMode: "lazy-once" */ |
| 141 | `@/pages/Class/addclass.vue` | 154 | `@/pages/Class/addclass.vue` |
| 142 | ) | 155 | ) |
| 143 | }, | 156 | }, |
| 144 | { | 157 | { |
| 145 | path: '/section', | 158 | path: '/section', |
| 146 | meta: {}, | 159 | meta: {}, |
| 147 | name: 'Section', | 160 | name: 'Section', |
| 148 | props: (route) => ({ | 161 | props: (route) => ({ |
| 149 | type: route.query.type | 162 | type: route.query.type |
| 150 | }), | 163 | }), |
| 151 | component: () => | 164 | component: () => |
| 152 | import( | 165 | import( |
| 153 | /* webpackChunkName: "routes" */ | 166 | /* webpackChunkName: "routes" */ |
| 154 | /* webpackMode: "lazy-once" */ | 167 | /* webpackMode: "lazy-once" */ |
| 155 | `@/pages/Section/section.vue` | 168 | `@/pages/Section/section.vue` |
| 156 | ) | 169 | ) |
| 157 | }, | 170 | }, |
| 158 | { | 171 | { |
| 159 | path: '/noticeBoard', | 172 | path: '/noticeBoard', |
| 160 | meta: {}, | 173 | meta: {}, |
| 161 | name: 'Notice Board', | 174 | name: 'Notice Board', |
| 162 | props: (route) => ({ | 175 | props: (route) => ({ |
| 163 | type: route.query.type | 176 | type: route.query.type |
| 164 | }), | 177 | }), |
| 165 | component: () => | 178 | component: () => |
| 166 | import( | 179 | import( |
| 167 | /* webpackChunkName: "routes" */ | 180 | /* webpackChunkName: "routes" */ |
| 168 | /* webpackMode: "lazy-once" */ | 181 | /* webpackMode: "lazy-once" */ |
| 169 | `@/pages/NoticeBoard/noticeBoard.vue` | 182 | `@/pages/NoticeBoard/noticeBoard.vue` |
| 170 | ) | 183 | ) |
| 171 | }, | 184 | }, |
| 172 | { | 185 | { |
| 173 | path: '/news', | 186 | path: '/news', |
| 174 | meta: {}, | 187 | meta: {}, |
| 175 | name: 'News', | 188 | name: 'News', |
| 176 | props: (route) => ({ | 189 | props: (route) => ({ |
| 177 | type: route.query.type | 190 | type: route.query.type |
| 178 | }), | 191 | }), |
| 179 | component: () => | 192 | component: () => |
| 180 | import( | 193 | import( |
| 181 | /* webpackChunkName: "routes" */ | 194 | /* webpackChunkName: "routes" */ |
| 182 | /* webpackMode: "lazy-once" */ | 195 | /* webpackMode: "lazy-once" */ |
| 183 | `@/pages/News/news.vue` | 196 | `@/pages/News/news.vue` |
| 184 | ) | 197 | ) |
| 185 | }, | 198 | }, |
| 186 | // { | 199 | // { |
| 187 | // path: '/reminder', | 200 | // path: '/reminder', |
| 188 | // meta: { }, | 201 | // meta: { }, |
| 189 | // name: 'reminder', | 202 | // name: 'reminder', |
| 190 | // props: (route) => ({ type: route.query.type }), | 203 | // props: (route) => ({ type: route.query.type }), |
| 191 | // component: () => import( | 204 | // component: () => import( |
| 192 | // /* webpackChunkName: "routes" */ | 205 | // /* webpackChunkName: "routes" */ |
| 193 | // /* webpackMode: "lazy-once" */ | 206 | // /* webpackMode: "lazy-once" */ |
| 194 | // `@/pages/Reminder/reminder.vue` | 207 | // `@/pages/Reminder/reminder.vue` |
| 195 | // ) | 208 | // ) |
| 196 | // }, | 209 | // }, |
| 197 | { | 210 | { |
| 198 | path: '/timeTable', | 211 | path: '/timeTable', |
| 199 | meta: {}, | 212 | meta: {}, |
| 200 | name: 'Time Table', | 213 | name: 'Time Table', |
| 201 | props: (route) => ({ | 214 | props: (route) => ({ |
| 202 | type: route.query.type | 215 | type: route.query.type |
| 203 | }), | 216 | }), |
| 204 | component: () => | 217 | component: () => |
| 205 | import( | 218 | import( |
| 206 | /* webpackChunkName: "routes" */ | 219 | /* webpackChunkName: "routes" */ |
| 207 | /* webpackMode: "lazy-once" */ | 220 | /* webpackMode: "lazy-once" */ |
| 208 | `@/pages/TimeTable/timeTable.vue` | 221 | `@/pages/TimeTable/timeTable.vue` |
| 209 | ) | 222 | ) |
| 210 | }, | 223 | }, |
| 211 | { | 224 | { |
| 212 | path: '/notification', | 225 | path: '/notification', |
| 213 | meta: {}, | 226 | meta: {}, |
| 214 | name: 'Notification', | 227 | name: 'Notification', |
| 215 | props: (route) => ({ | 228 | props: (route) => ({ |
| 216 | type: route.query.type | 229 | type: route.query.type |
| 217 | }), | 230 | }), |
| 218 | component: () => | 231 | component: () => |
| 219 | import( | 232 | import( |
| 220 | /* webpackChunkName: "routes" */ | 233 | /* webpackChunkName: "routes" */ |
| 221 | /* webpackMode: "lazy-once" */ | 234 | /* webpackMode: "lazy-once" */ |
| 222 | `@/pages/Notification/notification.vue` | 235 | `@/pages/Notification/notification.vue` |
| 223 | ) | 236 | ) |
| 224 | }, | 237 | }, |
| 225 | { | 238 | { |
| 226 | path: '/parents', | 239 | path: '/parents', |
| 227 | meta: {}, | 240 | meta: {}, |
| 228 | name: 'Parents', | 241 | name: 'Parents', |
| 229 | props: (route) => ({ | 242 | props: (route) => ({ |
| 230 | type: route.query.type | 243 | type: route.query.type |
| 231 | }), | 244 | }), |
| 232 | component: () => | 245 | component: () => |
| 233 | import( | 246 | import( |
| 234 | /* webpackChunkName: "routes" */ | 247 | /* webpackChunkName: "routes" */ |
| 235 | /* webpackMode: "lazy-once" */ | 248 | /* webpackMode: "lazy-once" */ |
| 236 | `@/pages/Parent/parents.vue` | 249 | `@/pages/Parent/parents.vue` |
| 237 | ) | 250 | ) |
| 238 | }, | 251 | }, |
| 239 | // { | 252 | // { |
| 240 | // path: '/subject', | 253 | // path: '/subject', |
| 241 | // meta: {}, | 254 | // meta: {}, |
| 242 | // name: 'Subject', | 255 | // name: 'Subject', |
| 243 | // props: (route) => ({ type: route.query.type }), | 256 | // props: (route) => ({ type: route.query.type }), |
| 244 | // component: () => | 257 | // component: () => |
| 245 | // import ( | 258 | // import ( |
| 246 | // /* webpackChunkName: "routes" */ | 259 | // /* webpackChunkName: "routes" */ |
| 247 | // /* webpackMode: "lazy-once" */ | 260 | // /* webpackMode: "lazy-once" */ |
| 248 | // `@/pages/Subjects/subjects.vue` | 261 | // `@/pages/Subjects/subjects.vue` |
| 249 | // ) | 262 | // ) |
| 250 | // }, | 263 | // }, |
| 251 | { | 264 | { |
| 252 | path: '/dashboard', | 265 | path: '/dashboard', |
| 253 | meta: {}, | 266 | meta: {}, |
| 254 | name: 'Dashboard', | 267 | name: 'Dashboard', |
| 255 | props: (route) => ({ | 268 | props: (route) => ({ |
| 256 | type: route.query.type | 269 | type: route.query.type |
| 257 | }), | 270 | }), |
| 258 | component: () => | 271 | component: () => |
| 259 | import( | 272 | import( |
| 260 | /* webpackChunkName: "routes" */ | 273 | /* webpackChunkName: "routes" */ |
| 261 | /* webpackMode: "lazy-once" */ | 274 | /* webpackMode: "lazy-once" */ |
| 262 | `@/pages/Dashboard/dashboard.vue` | 275 | `@/pages/Dashboard/dashboard.vue` |
| 263 | ) | 276 | ) |
| 264 | }, | 277 | }, |
| 265 | { | 278 | { |
| 266 | path: '/CourseDetails', | 279 | path: '/CourseDetails', |
| 267 | meta: {}, | 280 | meta: {}, |
| 268 | name: 'Course Details', | 281 | name: 'Course Details', |
| 269 | props: (route) => ({ | 282 | props: (route) => ({ |
| 270 | type: route.query.type | 283 | type: route.query.type |
| 271 | }), | 284 | }), |
| 272 | component: () => | 285 | component: () => |
| 273 | import( | 286 | import( |
| 274 | /* webpackChunkName: "routes" */ | 287 | /* webpackChunkName: "routes" */ |
| 275 | /* webpackMode: "lazy-once" */ | 288 | /* webpackMode: "lazy-once" */ |
| 276 | `@/pages/Dashboard/CourseDetails.vue` | 289 | `@/pages/Dashboard/CourseDetails.vue` |
| 277 | ) | 290 | ) |
| 278 | }, | 291 | }, |
| 279 | { | 292 | { |
| 280 | path: '/ChapterInfo', | 293 | path: '/ChapterInfo', |
| 281 | meta: {}, | 294 | meta: {}, |
| 282 | name: 'Chapter Info', | 295 | name: 'Chapter Info', |
| 283 | props: (route) => ({ | 296 | props: (route) => ({ |
| 284 | type: route.query.type | 297 | type: route.query.type |
| 285 | }), | 298 | }), |
| 286 | component: () => | 299 | component: () => |
| 287 | import( | 300 | import( |
| 288 | /* webpackChunkName: "routes" */ | 301 | /* webpackChunkName: "routes" */ |
| 289 | /* webpackMode: "lazy-once" */ | 302 | /* webpackMode: "lazy-once" */ |
| 290 | `@/pages/Dashboard/ChapterInfo.vue` | 303 | `@/pages/Dashboard/ChapterInfo.vue` |
| 291 | ) | 304 | ) |
| 292 | }, | 305 | }, |
| 293 | { | 306 | { |
| 294 | path: '/LiveOnlineClass', | 307 | path: '/LiveOnlineClass', |
| 295 | meta: {}, | 308 | meta: {}, |
| 296 | name: 'Live Online Class', | 309 | name: 'Live Online Class', |
| 297 | props: (route) => ({ | 310 | props: (route) => ({ |
| 298 | type: route.query.type | 311 | type: route.query.type |
| 299 | }), | 312 | }), |
| 300 | component: () => | 313 | component: () => |
| 301 | import( | 314 | import( |
| 302 | /* webpackChunkName: "routes" */ | 315 | /* webpackChunkName: "routes" */ |
| 303 | /* webpackMode: "lazy-once" */ | 316 | /* webpackMode: "lazy-once" */ |
| 304 | `@/pages/Dashboard/LiveOnlineClass.vue` | 317 | `@/pages/Dashboard/LiveOnlineClass.vue` |
| 305 | ) | 318 | ) |
| 306 | }, | 319 | }, |
| 307 | { | 320 | { |
| 308 | path: '/CourseDiscussionForum', | 321 | path: '/CourseDiscussionForum', |
| 309 | meta: {}, | 322 | meta: {}, |
| 310 | name: 'Course Discussion Forum', | 323 | name: 'Course Discussion Forum', |
| 311 | props: (route) => ({ | 324 | props: (route) => ({ |
| 312 | type: route.query.type | 325 | type: route.query.type |
| 313 | }), | 326 | }), |
| 314 | component: () => | 327 | component: () => |
| 315 | import( | 328 | import( |
| 316 | /* webpackChunkName: "routes" */ | 329 | /* webpackChunkName: "routes" */ |
| 317 | /* webpackMode: "lazy-once" */ | 330 | /* webpackMode: "lazy-once" */ |
| 318 | `@/pages/Dashboard/CourseDiscussionForum.vue` | 331 | `@/pages/Dashboard/CourseDiscussionForum.vue` |
| 319 | ) | 332 | ) |
| 320 | }, | 333 | }, |
| 321 | { | 334 | { |
| 322 | path: '/courseDiscussion', | 335 | path: '/courseDiscussion', |
| 323 | meta: {}, | 336 | meta: {}, |
| 324 | name: 'Course Discussion', | 337 | name: 'Course Discussion', |
| 325 | props: (route) => ({ | 338 | props: (route) => ({ |
| 326 | type: route.query.type | 339 | type: route.query.type |
| 327 | }), | 340 | }), |
| 328 | component: () => | 341 | component: () => |
| 329 | import( | 342 | import( |
| 330 | /* webpackChunkName: "routes" */ | 343 | /* webpackChunkName: "routes" */ |
| 331 | /* webpackMode: "lazy-once" */ | 344 | /* webpackMode: "lazy-once" */ |
| 332 | `@/pages/Course/courseDiscussion.vue` | 345 | `@/pages/Course/courseDiscussion.vue` |
| 333 | ) | 346 | ) |
| 334 | }, | 347 | }, |
| 335 | { | 348 | { |
| 336 | path: '/courseDiscussionesForm/:discussionId', | 349 | path: '/courseDiscussionesForm/:discussionId', |
| 337 | meta: {}, | 350 | meta: {}, |
| 338 | name: 'Course Discussiones Fourm', | 351 | name: 'Course Discussiones Fourm', |
| 339 | props: (route) => ({ | 352 | props: (route) => ({ |
| 340 | type: route.query.type | 353 | type: route.query.type |
| 341 | }), | 354 | }), |
| 342 | component: () => | 355 | component: () => |
| 343 | import( | 356 | import( |
| 344 | /* webpackChunkName: "routes" */ | 357 | /* webpackChunkName: "routes" */ |
| 345 | /* webpackMode: "lazy-once" */ | 358 | /* webpackMode: "lazy-once" */ |
| 346 | `@/pages/Course/discussion.vue` | 359 | `@/pages/Course/discussion.vue` |
| 347 | ) | 360 | ) |
| 348 | }, | 361 | }, |
| 349 | { | 362 | { |
| 350 | path: '/Announcement', | 363 | path: '/Announcement', |
| 351 | meta: {}, | 364 | meta: {}, |
| 352 | name: 'Announcement', | 365 | name: 'Announcement', |
| 353 | props: (route) => ({ | 366 | props: (route) => ({ |
| 354 | type: route.query.type | 367 | type: route.query.type |
| 355 | }), | 368 | }), |
| 356 | component: () => | 369 | component: () => |
| 357 | import( | 370 | import( |
| 358 | /* webpackChunkName: "routes" */ | 371 | /* webpackChunkName: "routes" */ |
| 359 | /* webpackMode: "lazy-once" */ | 372 | /* webpackMode: "lazy-once" */ |
| 360 | `@/pages/Dashboard/Announcement.vue` | 373 | `@/pages/Dashboard/Announcement.vue` |
| 361 | ) | 374 | ) |
| 362 | }, | 375 | }, |
| 363 | { | 376 | { |
| 364 | path: '/annoucementForum/:annoucementId', | 377 | path: '/annoucementForum/:annoucementId', |
| 365 | meta: {}, | 378 | meta: {}, |
| 366 | name: 'Annoucement Forum', | 379 | name: 'Annoucement Forum', |
| 367 | props: (route) => ({ | 380 | props: (route) => ({ |
| 368 | type: route.query.type | 381 | type: route.query.type |
| 369 | }), | 382 | }), |
| 370 | component: () => | 383 | component: () => |
| 371 | import( | 384 | import( |
| 372 | /* webpackChunkName: "routes" */ | 385 | /* webpackChunkName: "routes" */ |
| 373 | /* webpackMode: "lazy-once" */ | 386 | /* webpackMode: "lazy-once" */ |
| 374 | `@/pages/Annoucement/annoucementForum.vue` | 387 | `@/pages/Annoucement/annoucementForum.vue` |
| 375 | ) | 388 | ) |
| 376 | }, | 389 | }, |
| 377 | { | 390 | { |
| 378 | path: '/socialMedia', | 391 | path: '/socialMedia', |
| 379 | meta: {}, | 392 | meta: {}, |
| 380 | name: 'Social Media', | 393 | name: 'Social Media', |
| 381 | props: (route) => ({ | 394 | props: (route) => ({ |
| 382 | type: route.query.type | 395 | type: route.query.type |
| 383 | }), | 396 | }), |
| 384 | component: () => | 397 | component: () => |
| 385 | import( | 398 | import( |
| 386 | /* webpackChunkName: "routes" */ | 399 | /* webpackChunkName: "routes" */ |
| 387 | /* webpackMode: "lazy-once" */ | 400 | /* webpackMode: "lazy-once" */ |
| 388 | `@/pages/socialMedia/socialMedia.vue` | 401 | `@/pages/socialMedia/socialMedia.vue` |
| 389 | ) | 402 | ) |
| 390 | }, | 403 | }, |
| 391 | { | 404 | { |
| 392 | path: '/gallery', | 405 | path: '/gallery', |
| 393 | meta: {}, | 406 | meta: {}, |
| 394 | name: 'Gallery', | 407 | name: 'Gallery', |
| 395 | props: (route) => ({ | 408 | props: (route) => ({ |
| 396 | type: route.query.type | 409 | type: route.query.type |
| 397 | }), | 410 | }), |
| 398 | component: () => | 411 | component: () => |
| 399 | import( | 412 | import( |
| 400 | /* webpackChunkName: "routes" */ | 413 | /* webpackChunkName: "routes" */ |
| 401 | /* webpackMode: "lazy-once" */ | 414 | /* webpackMode: "lazy-once" */ |
| 402 | `@/pages/Gallery/gallery.vue` | 415 | `@/pages/Gallery/gallery.vue` |
| 403 | ) | 416 | ) |
| 404 | }, | 417 | }, |
| 405 | { | 418 | { |
| 406 | path: '/event', | 419 | path: '/event', |
| 407 | meta: {}, | 420 | meta: {}, |
| 408 | name: 'Event', | 421 | name: 'Event', |
| 409 | props: (route) => ({ | 422 | props: (route) => ({ |
| 410 | type: route.query.type | 423 | type: route.query.type |
| 411 | }), | 424 | }), |
| 412 | component: () => | 425 | component: () => |
| 413 | import( | 426 | import( |
| 414 | /* webpackChunkName: "routes" */ | 427 | /* webpackChunkName: "routes" */ |
| 415 | /* webpackMode: "lazy-once" */ | 428 | /* webpackMode: "lazy-once" */ |
| 416 | `@/pages/Event/event.vue` | 429 | `@/pages/Event/event.vue` |
| 417 | ) | 430 | ) |
| 418 | }, | 431 | }, |
| 419 | { | 432 | { |
| 420 | path: '/holiday', | 433 | path: '/holiday', |
| 421 | meta: {}, | 434 | meta: {}, |
| 422 | name: 'Holiday', | 435 | name: 'Holiday', |
| 423 | props: (route) => ({ | 436 | props: (route) => ({ |
| 424 | type: route.query.type | 437 | type: route.query.type |
| 425 | }), | 438 | }), |
| 426 | component: () => | 439 | component: () => |
| 427 | import( | 440 | import( |
| 428 | /* webpackChunkName: "routes" */ | 441 | /* webpackChunkName: "routes" */ |
| 429 | /* webpackMode: "lazy-once" */ | 442 | /* webpackMode: "lazy-once" */ |
| 430 | `@/pages/Holiday/holiday.vue` | 443 | `@/pages/Holiday/holiday.vue` |
| 431 | ) | 444 | ) |
| 432 | }, | 445 | }, |
| 433 | { | 446 | { |
| 434 | path: '/user', | 447 | path: '/user', |
| 435 | meta: {}, | 448 | meta: {}, |
| 436 | name: 'User', | 449 | name: 'User', |
| 437 | props: (route) => ({ | 450 | props: (route) => ({ |
| 438 | type: route.query.type | 451 | type: route.query.type |
| 439 | }), | 452 | }), |
| 440 | component: () => | 453 | component: () => |
| 441 | import( | 454 | import( |
| 442 | /* webpackChunkName: "routes" */ | 455 | /* webpackChunkName: "routes" */ |
| 443 | /* webpackMode: "lazy-once" */ | 456 | /* webpackMode: "lazy-once" */ |
| 444 | `@/pages/User/user.vue` | 457 | `@/pages/User/user.vue` |
| 445 | ) | 458 | ) |
| 446 | }, | 459 | }, |
| 447 | { | 460 | { |
| 448 | path: '/AttendenceStudent', | 461 | path: '/AttendenceStudent', |
| 449 | meta: {}, | 462 | meta: {}, |
| 450 | name: 'Student Attendence', | 463 | name: 'Student Attendence', |
| 451 | props: (route) => ({ | 464 | props: (route) => ({ |
| 452 | type: route.query.type | 465 | type: route.query.type |
| 453 | }), | 466 | }), |
| 454 | component: () => | 467 | component: () => |
| 455 | import( | 468 | import( |
| 456 | /* webpackChunkName: "routes" */ | 469 | /* webpackChunkName: "routes" */ |
| 457 | /* webpackMode: "lazy-once" */ | 470 | /* webpackMode: "lazy-once" */ |
| 458 | `@/pages/Attendence/studentAttendence.vue` | 471 | `@/pages/Attendence/studentAttendence.vue` |
| 459 | ) | 472 | ) |
| 460 | }, | 473 | }, |
| 461 | { | 474 | { |
| 462 | path: '/AttendenceTeacher', | 475 | path: '/AttendenceTeacher', |
| 463 | meta: {}, | 476 | meta: {}, |
| 464 | name: 'Teacher Attendence', | 477 | name: 'Teacher Attendence', |
| 465 | props: (route) => ({ | 478 | props: (route) => ({ |
| 466 | type: route.query.type | 479 | type: route.query.type |
| 467 | }), | 480 | }), |
| 468 | component: () => | 481 | component: () => |
| 469 | import( | 482 | import( |
| 470 | /* webpackChunkName: "routes" */ | 483 | /* webpackChunkName: "routes" */ |
| 471 | /* webpackMode: "lazy-once" */ | 484 | /* webpackMode: "lazy-once" */ |
| 472 | `@/pages/Attendence/teacherAttendence.vue` | 485 | `@/pages/Attendence/teacherAttendence.vue` |
| 473 | ) | 486 | ) |
| 474 | }, | 487 | }, |
| 475 | { | 488 | { |
| 476 | path: '/salaryTemplate', | 489 | path: '/salaryTemplate', |
| 477 | meta: {}, | 490 | meta: {}, |
| 478 | name: 'Salary Template', | 491 | name: 'Salary Template', |
| 479 | props: (route) => ({ | 492 | props: (route) => ({ |
| 480 | type: route.query.type | 493 | type: route.query.type |
| 481 | }), | 494 | }), |
| 482 | component: () => | 495 | component: () => |
| 483 | import( | 496 | import( |
| 484 | `@/pages/Payroll/salaryTemplate.vue` | 497 | `@/pages/Payroll/salaryTemplate.vue` |
| 485 | ) | 498 | ) |
| 486 | }, | 499 | }, |
| 487 | { | 500 | { |
| 488 | path: '/hourlyTemplate', | 501 | path: '/hourlyTemplate', |
| 489 | meta: {}, | 502 | meta: {}, |
| 490 | name: 'Hourly Template', | 503 | name: 'Hourly Template', |
| 491 | props: (route) => ({ | 504 | props: (route) => ({ |
| 492 | type: route.query.type | 505 | type: route.query.type |
| 493 | }), | 506 | }), |
| 494 | component: () => | 507 | component: () => |
| 495 | import( | 508 | import( |
| 496 | `@/pages/Payroll/hourlyTemplate.vue` | 509 | `@/pages/Payroll/hourlyTemplate.vue` |
| 497 | ) | 510 | ) |
| 498 | }, | 511 | }, |
| 499 | { | 512 | { |
| 500 | path: '/manageSalary', | 513 | path: '/manageSalary', |
| 501 | meta: {}, | 514 | meta: {}, |
| 502 | name: 'Manage Salary', | 515 | name: 'Manage Salary', |
| 503 | props: (route) => ({ | 516 | props: (route) => ({ |
| 504 | type: route.query.type | 517 | type: route.query.type |
| 505 | }), | 518 | }), |
| 506 | component: () => | 519 | component: () => |
| 507 | import( | 520 | import( |
| 508 | `@/pages/Payroll/manageSalary.vue` | 521 | `@/pages/Payroll/manageSalary.vue` |
| 509 | ) | 522 | ) |
| 510 | }, | 523 | }, |
| 511 | // { | 524 | // { |
| 512 | // path: '/makePayment', | 525 | // path: '/makePayment', |
| 513 | // meta: {}, | 526 | // meta: {}, |
| 514 | // name: 'Make Payment', | 527 | // name: 'Make Payment', |
| 515 | // props: (route) => ({ type: route.query.type }), | 528 | // props: (route) => ({ type: route.query.type }), |
| 516 | // component: () => | 529 | // component: () => |
| 517 | // import ( | 530 | // import ( |
| 518 | // `@/pages/Payroll/makePayment.vue` | 531 | // `@/pages/Payroll/makePayment.vue` |
| 519 | // ) | 532 | // ) |
| 520 | // }, | 533 | // }, |
| 521 | { | 534 | { |
| 522 | path: '/AttendenceUser', | 535 | path: '/AttendenceUser', |
| 523 | meta: {}, | 536 | meta: {}, |
| 524 | name: 'User Attendence', | 537 | name: 'User Attendence', |
| 525 | props: (route) => ({ | 538 | props: (route) => ({ |
| 526 | type: route.query.type | 539 | type: route.query.type |
| 527 | }), | 540 | }), |
| 528 | component: () => | 541 | component: () => |
| 529 | import( | 542 | import( |
| 530 | /* webpackChunkName: "routes" */ | 543 | /* webpackChunkName: "routes" */ |
| 531 | /* webpackMode: "lazy-once" */ | 544 | /* webpackMode: "lazy-once" */ |
| 532 | `@/pages/Attendence/userAttendence.vue` | 545 | `@/pages/Attendence/userAttendence.vue` |
| 533 | ) | 546 | ) |
| 534 | }, | 547 | }, |
| 535 | { | 548 | { |
| 536 | path: '/feeTypes', | 549 | path: '/feeTypes', |
| 537 | meta: {}, | 550 | meta: {}, |
| 538 | name: 'Fee Types', | 551 | name: 'Fee Types', |
| 539 | props: (route) => ({ | 552 | props: (route) => ({ |
| 540 | type: route.query.type | 553 | type: route.query.type |
| 541 | }), | 554 | }), |
| 542 | component: () => | 555 | component: () => |
| 543 | import( | 556 | import( |
| 544 | /* webpackChunkName: "routes" */ | 557 | /* webpackChunkName: "routes" */ |
| 545 | /* webpackMode: "lazy-once" */ | 558 | /* webpackMode: "lazy-once" */ |
| 546 | `@/pages/Account/feeTypes.vue` | 559 | `@/pages/Account/feeTypes.vue` |
| 547 | ) | 560 | ) |
| 548 | }, | 561 | }, |
| 549 | { | 562 | { |
| 550 | path: '/invoice', | 563 | path: '/invoice', |
| 551 | meta: {}, | 564 | meta: {}, |
| 552 | name: 'Invoice', | 565 | name: 'Invoice', |
| 553 | props: (route) => ({ | 566 | props: (route) => ({ |
| 554 | type: route.query.type | 567 | type: route.query.type |
| 555 | }), | 568 | }), |
| 556 | component: () => | 569 | component: () => |
| 557 | import( | 570 | import( |
| 558 | /* webpackChunkName: "routes" */ | 571 | /* webpackChunkName: "routes" */ |
| 559 | /* webpackMode: "lazy-once" */ | 572 | /* webpackMode: "lazy-once" */ |
| 560 | `@/pages/Account/invoice.vue` | 573 | `@/pages/Account/invoice.vue` |
| 561 | ) | 574 | ) |
| 562 | }, | 575 | }, |
| 563 | { | 576 | { |
| 564 | path: '/paymentHistory', | 577 | path: '/paymentHistory', |
| 565 | meta: {}, | 578 | meta: {}, |
| 566 | name: 'Payment History', | 579 | name: 'Payment History', |
| 567 | props: (route) => ({ | 580 | props: (route) => ({ |
| 568 | type: route.query.type | 581 | type: route.query.type |
| 569 | }), | 582 | }), |
| 570 | component: () => | 583 | component: () => |
| 571 | import( | 584 | import( |
| 572 | /* webpackChunkName: "routes" */ | 585 | /* webpackChunkName: "routes" */ |
| 573 | /* webpackMode: "lazy-once" */ | 586 | /* webpackMode: "lazy-once" */ |
| 574 | `@/pages/Account/paymentHistory.vue` | 587 | `@/pages/Account/paymentHistory.vue` |
| 575 | ) | 588 | ) |
| 576 | }, | 589 | }, |
| 577 | { | 590 | { |
| 578 | path: '/expense', | 591 | path: '/expense', |
| 579 | meta: {}, | 592 | meta: {}, |
| 580 | name: 'Expense', | 593 | name: 'Expense', |
| 581 | props: (route) => ({ | 594 | props: (route) => ({ |
| 582 | type: route.query.type | 595 | type: route.query.type |
| 583 | }), | 596 | }), |
| 584 | component: () => | 597 | component: () => |
| 585 | import( | 598 | import( |
| 586 | /* webpackChunkName: "routes" */ | 599 | /* webpackChunkName: "routes" */ |
| 587 | /* webpackMode: "lazy-once" */ | 600 | /* webpackMode: "lazy-once" */ |
| 588 | `@/pages/Account/expense.vue` | 601 | `@/pages/Account/expense.vue` |
| 589 | ) | 602 | ) |
| 590 | }, | 603 | }, |
| 591 | { | 604 | { |
| 592 | path: '/income', | 605 | path: '/income', |
| 593 | meta: {}, | 606 | meta: {}, |
| 594 | name: 'Income', | 607 | name: 'Income', |
| 595 | props: (route) => ({ | 608 | props: (route) => ({ |
| 596 | type: route.query.type | 609 | type: route.query.type |
| 597 | }), | 610 | }), |
| 598 | component: () => | 611 | component: () => |
| 599 | import( | 612 | import( |
| 600 | /* webpackChunkName: "routes" */ | 613 | /* webpackChunkName: "routes" */ |
| 601 | /* webpackMode: "lazy-once" */ | 614 | /* webpackMode: "lazy-once" */ |
| 602 | `@/pages/Account/income.vue` | 615 | `@/pages/Account/income.vue` |
| 603 | ) | 616 | ) |
| 604 | }, | 617 | }, |
| 605 | { | 618 | { |
| 606 | path: '/libraryMember', | 619 | path: '/libraryMember', |
| 607 | meta: {}, | 620 | meta: {}, |
| 608 | name: 'Library Member', | 621 | name: 'Library Member', |
| 609 | props: (route) => ({ | 622 | props: (route) => ({ |
| 610 | type: route.query.type | 623 | type: route.query.type |
| 611 | }), | 624 | }), |
| 612 | component: () => | 625 | component: () => |
| 613 | import( | 626 | import( |
| 614 | /* webpackChunkName: "routes" */ | 627 | /* webpackChunkName: "routes" */ |
| 615 | /* webpackMode: "lazy-once" */ | 628 | /* webpackMode: "lazy-once" */ |
| 616 | `@/pages/Library/member.vue` | 629 | `@/pages/Library/member.vue` |
| 617 | ) | 630 | ) |
| 618 | }, | 631 | }, |
| 619 | { | 632 | { |
| 620 | path: '/books', | 633 | path: '/books', |
| 621 | meta: {}, | 634 | meta: {}, |
| 622 | name: 'Books', | 635 | name: 'Books', |
| 623 | props: (route) => ({ | 636 | props: (route) => ({ |
| 624 | type: route.query.type | 637 | type: route.query.type |
| 625 | }), | 638 | }), |
| 626 | component: () => | 639 | component: () => |
| 627 | import( | 640 | import( |
| 628 | /* webpackChunkName: "routes" */ | 641 | /* webpackChunkName: "routes" */ |
| 629 | /* webpackMode: "lazy-once" */ | 642 | /* webpackMode: "lazy-once" */ |
| 630 | `@/pages/Library/books.vue` | 643 | `@/pages/Library/books.vue` |
| 631 | ) | 644 | ) |
| 632 | }, | 645 | }, |
| 633 | { | 646 | { |
| 634 | path: '/issue', | 647 | path: '/issue', |
| 635 | meta: {}, | 648 | meta: {}, |
| 636 | name: 'Issue', | 649 | name: 'Issue', |
| 637 | props: (route) => ({ | 650 | props: (route) => ({ |
| 638 | type: route.query.type | 651 | type: route.query.type |
| 639 | }), | 652 | }), |
| 640 | component: () => | 653 | component: () => |
| 641 | import( | 654 | import( |
| 642 | /* webpackChunkName: "routes" */ | 655 | /* webpackChunkName: "routes" */ |
| 643 | /* webpackMode: "lazy-once" */ | 656 | /* webpackMode: "lazy-once" */ |
| 644 | `@/pages/Library/issue.vue` | 657 | `@/pages/Library/issue.vue` |
| 645 | ) | 658 | ) |
| 646 | }, | 659 | }, |
| 647 | { | 660 | { |
| 648 | path: '/e-books', | 661 | path: '/e-books', |
| 649 | meta: {}, | 662 | meta: {}, |
| 650 | name: 'E-Books', | 663 | name: 'E-Books', |
| 651 | props: (route) => ({ | 664 | props: (route) => ({ |
| 652 | type: route.query.type | 665 | type: route.query.type |
| 653 | }), | 666 | }), |
| 654 | component: () => | 667 | component: () => |
| 655 | import( | 668 | import( |
| 656 | /* webpackChunkName: "routes" */ | 669 | /* webpackChunkName: "routes" */ |
| 657 | /* webpackMode: "lazy-once" */ | 670 | /* webpackMode: "lazy-once" */ |
| 658 | `@/pages/Library/eBook.vue` | 671 | `@/pages/Library/eBook.vue` |
| 659 | ) | 672 | ) |
| 660 | }, | 673 | }, |
| 661 | { | 674 | { |
| 662 | path: '/editInvoice/:invoiceid', | 675 | path: '/editInvoice/:invoiceid', |
| 663 | meta: {}, | 676 | meta: {}, |
| 664 | name: 'Edit Invoice', | 677 | name: 'Edit Invoice', |
| 665 | // props: (route) => ({ type: route.query.type }), | 678 | // props: (route) => ({ type: route.query.type }), |
| 666 | component: () => | 679 | component: () => |
| 667 | import( | 680 | import( |
| 668 | /* webpackChunkName: "routes" */ | 681 | /* webpackChunkName: "routes" */ |
| 669 | /* webpackMode: "lazy-once" */ | 682 | /* webpackMode: "lazy-once" */ |
| 670 | `@/pages/Account/editInvoice.vue` | 683 | `@/pages/Account/editInvoice.vue` |
| 671 | ) | 684 | ) |
| 672 | }, | 685 | }, |
| 673 | { | 686 | { |
| 674 | path: '/StudentsAttendence/:id', | 687 | path: '/StudentsAttendence/:id', |
| 675 | meta: {}, | 688 | meta: {}, |
| 676 | name: 'View Students Attendence', | 689 | name: 'View Students Attendence', |
| 677 | props: (route) => ({ | 690 | props: (route) => ({ |
| 678 | type: route.query.type | 691 | type: route.query.type |
| 679 | }), | 692 | }), |
| 680 | component: () => | 693 | component: () => |
| 681 | import( | 694 | import( |
| 682 | /* webpackChunkName: "routes" */ | 695 | /* webpackChunkName: "routes" */ |
| 683 | /* webpackMode: "lazy-once" */ | 696 | /* webpackMode: "lazy-once" */ |
| 684 | `@/pages/Attendence/viewStudentsAttendence.vue` | 697 | `@/pages/Attendence/viewStudentsAttendence.vue` |
| 685 | ) | 698 | ) |
| 686 | }, | 699 | }, |
| 687 | { | 700 | { |
| 688 | path: '/TeacherAttendence/:teacherId', | 701 | path: '/TeacherAttendence/:teacherId', |
| 689 | meta: {}, | 702 | meta: {}, |
| 690 | name: 'View Teacher Attendence', | 703 | name: 'View Teacher Attendence', |
| 691 | props: (route) => ({ | 704 | props: (route) => ({ |
| 692 | type: route.query.type | 705 | type: route.query.type |
| 693 | }), | 706 | }), |
| 694 | component: () => | 707 | component: () => |
| 695 | import( | 708 | import( |
| 696 | /* webpackChunkName: "routes" */ | 709 | /* webpackChunkName: "routes" */ |
| 697 | /* webpackMode: "lazy-once" */ | 710 | /* webpackMode: "lazy-once" */ |
| 698 | `@/pages/Attendence/viewTeacherAttendence.vue` | 711 | `@/pages/Attendence/viewTeacherAttendence.vue` |
| 699 | ) | 712 | ) |
| 700 | }, | 713 | }, |
| 701 | { | 714 | { |
| 702 | path: '/viewInvoice/:viewInvoiceId', | 715 | path: '/viewInvoice/:viewInvoiceId', |
| 703 | meta: {}, | 716 | meta: {}, |
| 704 | name: 'View Invoice', | 717 | name: 'View Invoice', |
| 705 | props: (route) => ({ | 718 | props: (route) => ({ |
| 706 | type: route.query.type | 719 | type: route.query.type |
| 707 | }), | 720 | }), |
| 708 | component: () => | 721 | component: () => |
| 709 | import( | 722 | import( |
| 710 | /* webpackChunkName: "routes" */ | 723 | /* webpackChunkName: "routes" */ |
| 711 | /* webpackMode: "lazy-once" */ | 724 | /* webpackMode: "lazy-once" */ |
| 712 | `@/pages/Account/viewInvoice.vue` | 725 | `@/pages/Account/viewInvoice.vue` |
| 713 | ) | 726 | ) |
| 714 | }, | 727 | }, |
| 715 | { | 728 | { |
| 716 | path: '/viewPaymentInvoice/:viewPaymentInvoiceId', | 729 | path: '/viewPaymentInvoice/:viewPaymentInvoiceId', |
| 717 | meta: {}, | 730 | meta: {}, |
| 718 | name: 'View Payment Invoice', | 731 | name: 'View Payment Invoice', |
| 719 | props: (route) => ({ | 732 | props: (route) => ({ |
| 720 | type: route.query.type | 733 | type: route.query.type |
| 721 | }), | 734 | }), |
| 722 | component: () => | 735 | component: () => |
| 723 | import( | 736 | import( |
| 724 | /* webpackChunkName: "routes" */ | 737 | /* webpackChunkName: "routes" */ |
| 725 | /* webpackMode: "lazy-once" */ | 738 | /* webpackMode: "lazy-once" */ |
| 726 | `@/pages/Account/viewPaymentInvoice.vue` | 739 | `@/pages/Account/viewPaymentInvoice.vue` |
| 727 | ) | 740 | ) |
| 728 | }, | 741 | }, |
| 729 | { | 742 | { |
| 730 | path: '/globalPayment', | 743 | path: '/globalPayment', |
| 731 | meta: {}, | 744 | meta: {}, |
| 732 | name: 'Global Payment', | 745 | name: 'Global Payment', |
| 733 | props: (route) => ({ | 746 | props: (route) => ({ |
| 734 | type: route.query.type | 747 | type: route.query.type |
| 735 | }), | 748 | }), |
| 736 | component: () => | 749 | component: () => |
| 737 | import( | 750 | import( |
| 738 | /* webpackChunkName: "routes" */ | 751 | /* webpackChunkName: "routes" */ |
| 739 | /* webpackMode: "lazy-once" */ | 752 | /* webpackMode: "lazy-once" */ |
| 740 | `@/pages/Account/globalPayment.vue` | 753 | `@/pages/Account/globalPayment.vue` |
| 741 | ) | 754 | ) |
| 742 | }, | 755 | }, |
| 743 | { | 756 | { |
| 744 | path: '/exam', | 757 | path: '/exam', |
| 745 | meta: {}, | 758 | meta: {}, |
| 746 | name: 'Exam', | 759 | name: 'Exam', |
| 747 | props: (route) => ({ | 760 | props: (route) => ({ |
| 748 | type: route.query.type | 761 | type: route.query.type |
| 749 | }), | 762 | }), |
| 750 | component: () => | 763 | component: () => |
| 751 | import( | 764 | import( |
| 752 | /* webpackChunkName: "routes" */ | 765 | /* webpackChunkName: "routes" */ |
| 753 | /* webpackMode: "lazy-once" */ | 766 | /* webpackMode: "lazy-once" */ |
| 754 | `@/pages/Exam/exam.vue` | 767 | `@/pages/Exam/exam.vue` |
| 755 | ) | 768 | ) |
| 756 | }, | 769 | }, |
| 757 | { | 770 | { |
| 758 | path: '/grade', | 771 | path: '/grade', |
| 759 | meta: {}, | 772 | meta: {}, |
| 760 | name: 'Grade', | 773 | name: 'Grade', |
| 761 | props: (route) => ({ | 774 | props: (route) => ({ |
| 762 | type: route.query.type | 775 | type: route.query.type |
| 763 | }), | 776 | }), |
| 764 | component: () => | 777 | component: () => |
| 765 | import( | 778 | import( |
| 766 | /* webpackChunkName: "routes" */ | 779 | /* webpackChunkName: "routes" */ |
| 767 | /* webpackMode: "lazy-once" */ | 780 | /* webpackMode: "lazy-once" */ |
| 768 | `@/pages/Exam/grade.vue` | 781 | `@/pages/Exam/grade.vue` |
| 769 | ) | 782 | ) |
| 770 | }, | 783 | }, |
| 771 | { | 784 | { |
| 772 | path: '/examSchedule', | 785 | path: '/examSchedule', |
| 773 | meta: {}, | 786 | meta: {}, |
| 774 | name: 'Exam Schedule', | 787 | name: 'Exam Schedule', |
| 775 | props: (route) => ({ | 788 | props: (route) => ({ |
| 776 | type: route.query.type | 789 | type: route.query.type |
| 777 | }), | 790 | }), |
| 778 | component: () => | 791 | component: () => |
| 779 | import( | 792 | import( |
| 780 | /* webpackChunkName: "routes" */ | 793 | /* webpackChunkName: "routes" */ |
| 781 | /* webpackMode: "lazy-once" */ | 794 | /* webpackMode: "lazy-once" */ |
| 782 | `@/pages/Exam/examSchedule.vue` | 795 | `@/pages/Exam/examSchedule.vue` |
| 783 | ) | 796 | ) |
| 784 | }, | 797 | }, |
| 785 | { | 798 | { |
| 786 | path: '/examAttendence', | 799 | path: '/examAttendence', |
| 787 | meta: {}, | 800 | meta: {}, |
| 788 | name: 'Exam Attendence', | 801 | name: 'Exam Attendence', |
| 789 | props: (route) => ({ | 802 | props: (route) => ({ |
| 790 | type: route.query.type | 803 | type: route.query.type |
| 791 | }), | 804 | }), |
| 792 | component: () => | 805 | component: () => |
| 793 | import( | 806 | import( |
| 794 | /* webpackChunkName: "routes" */ | 807 | /* webpackChunkName: "routes" */ |
| 795 | /* webpackMode: "lazy-once" */ | 808 | /* webpackMode: "lazy-once" */ |
| 796 | `@/pages/Exam/examAttendence.vue` | 809 | `@/pages/Exam/examAttendence.vue` |
| 797 | ) | 810 | ) |
| 798 | }, | 811 | }, |
| 799 | { | 812 | { |
| 800 | path: '/mark', | 813 | path: '/mark', |
| 801 | meta: {}, | 814 | meta: {}, |
| 802 | name: 'Mark', | 815 | name: 'Mark', |
| 803 | props: (route) => ({ | 816 | props: (route) => ({ |
| 804 | type: route.query.type | 817 | type: route.query.type |
| 805 | }), | 818 | }), |
| 806 | component: () => | 819 | component: () => |
| 807 | import( | 820 | import( |
| 808 | /* webpackChunkName: "routes" */ | 821 | /* webpackChunkName: "routes" */ |
| 809 | /* webpackMode: "lazy-once" */ | 822 | /* webpackMode: "lazy-once" */ |
| 810 | `@/pages/Mark/mark.vue` | 823 | `@/pages/Mark/mark.vue` |
| 811 | ) | 824 | ) |
| 812 | }, | 825 | }, |
| 813 | { | 826 | { |
| 814 | path: '/viewMark/:markId', | 827 | path: '/viewMark/:markId', |
| 815 | meta: {}, | 828 | meta: {}, |
| 816 | name: 'view Mark', | 829 | name: 'view Mark', |
| 817 | props: (route) => ({ | 830 | props: (route) => ({ |
| 818 | type: route.query.type | 831 | type: route.query.type |
| 819 | }), | 832 | }), |
| 820 | component: () => | 833 | component: () => |
| 821 | import( | 834 | import( |
| 822 | /* webpackChunkName: "routes" */ | 835 | /* webpackChunkName: "routes" */ |
| 823 | /* webpackMode: "lazy-once" */ | 836 | /* webpackMode: "lazy-once" */ |
| 824 | `@/pages/Mark/viewMark.vue` | 837 | `@/pages/Mark/viewMark.vue` |
| 825 | ) | 838 | ) |
| 826 | }, | 839 | }, |
| 827 | { | 840 | { |
| 828 | path: '/markDistribution', | 841 | path: '/markDistribution', |
| 829 | meta: {}, | 842 | meta: {}, |
| 830 | name: 'Mark Distribution', | 843 | name: 'Mark Distribution', |
| 831 | props: (route) => ({ | 844 | props: (route) => ({ |
| 832 | type: route.query.type | 845 | type: route.query.type |
| 833 | }), | 846 | }), |
| 834 | component: () => | 847 | component: () => |
| 835 | import( | 848 | import( |
| 836 | /* webpackChunkName: "routes" */ | 849 | /* webpackChunkName: "routes" */ |
| 837 | /* webpackMode: "lazy-once" */ | 850 | /* webpackMode: "lazy-once" */ |
| 838 | `@/pages/Mark/markDistribution.vue` | 851 | `@/pages/Mark/markDistribution.vue` |
| 839 | ) | 852 | ) |
| 840 | }, | 853 | }, |
| 841 | { | 854 | { |
| 842 | path: '/meet', | 855 | path: '/meet', |
| 843 | meta: {}, | 856 | meta: {}, |
| 844 | name: 'Meet', | 857 | name: 'Meet', |
| 845 | props: (route) => ({ | 858 | props: (route) => ({ |
| 846 | type: route.query.type | 859 | type: route.query.type |
| 847 | }), | 860 | }), |
| 848 | component: () => | 861 | component: () => |
| 849 | import( | 862 | import( |
| 850 | /* webpackChunkName: "routes" */ | 863 | /* webpackChunkName: "routes" */ |
| 851 | /* webpackMode: "lazy-once" */ | 864 | /* webpackMode: "lazy-once" */ |
| 852 | `@/pages/Meet/meet.vue` | 865 | `@/pages/Meet/meet.vue` |
| 853 | ) | 866 | ) |
| 854 | }, | 867 | }, |
| 855 | { | 868 | { |
| 856 | path: '/academicYear', | 869 | path: '/academicYear', |
| 857 | meta: {}, | 870 | meta: {}, |
| 858 | name: 'Academic Year', | 871 | name: 'Academic Year', |
| 859 | props: (route) => ({ | 872 | props: (route) => ({ |
| 860 | type: route.query.type | 873 | type: route.query.type |
| 861 | }), | 874 | }), |
| 862 | component: () => | 875 | component: () => |
| 863 | import( | 876 | import( |
| 864 | /* webpackChunkName: "routes" */ | 877 | /* webpackChunkName: "routes" */ |
| 865 | /* webpackMode: "lazy-once" */ | 878 | /* webpackMode: "lazy-once" */ |
| 866 | `@/pages/Administrator/academicYear.vue` | 879 | `@/pages/Administrator/academicYear.vue` |
| 867 | ) | 880 | ) |
| 868 | }, | 881 | }, |
| 869 | { | 882 | { |
| 870 | path: '/systemAdmin', | 883 | path: '/systemAdmin', |
| 871 | meta: {}, | 884 | meta: {}, |
| 872 | name: 'System Admin', | 885 | name: 'System Admin', |
| 873 | props: (route) => ({ | 886 | props: (route) => ({ |
| 874 | type: route.query.type | 887 | type: route.query.type |
| 875 | }), | 888 | }), |
| 876 | component: () => | 889 | component: () => |
| 877 | import( | 890 | import( |
| 878 | /* webpackChunkName: "routes" */ | 891 | /* webpackChunkName: "routes" */ |
| 879 | /* webpackMode: "lazy-once" */ | 892 | /* webpackMode: "lazy-once" */ |
| 880 | `@/pages/Administrator/systemAdmin.vue` | 893 | `@/pages/Administrator/systemAdmin.vue` |
| 881 | ) | 894 | ) |
| 882 | }, | 895 | }, |
| 883 | { | 896 | { |
| 884 | path: '/resetPassword', | 897 | path: '/resetPassword', |
| 885 | meta: {}, | 898 | meta: {}, |
| 886 | name: 'Change Password', | 899 | name: 'Change Password', |
| 887 | props: (route) => ({ | 900 | props: (route) => ({ |
| 888 | type: route.query.type | 901 | type: route.query.type |
| 889 | }), | 902 | }), |
| 890 | component: () => | 903 | component: () => |
| 891 | import( | 904 | import( |
| 892 | /* webpackChunkName: "routes" */ | 905 | /* webpackChunkName: "routes" */ |
| 893 | /* webpackMode: "lazy-once" */ | 906 | /* webpackMode: "lazy-once" */ |
| 894 | `@/pages/Administrator/resetPassword.vue` | 907 | `@/pages/Administrator/resetPassword.vue` |
| 895 | ) | 908 | ) |
| 896 | }, | 909 | }, |
| 897 | { | 910 | { |
| 898 | path: '/role', | 911 | path: '/role', |
| 899 | meta: {}, | 912 | meta: {}, |
| 900 | name: 'Role', | 913 | name: 'Role', |
| 901 | props: (route) => ({ | 914 | props: (route) => ({ |
| 902 | type: route.query.type | 915 | type: route.query.type |
| 903 | }), | 916 | }), |
| 904 | component: () => | 917 | component: () => |
| 905 | import( | 918 | import( |
| 906 | /* webpackChunkName: "routes" */ | 919 | /* webpackChunkName: "routes" */ |
| 907 | /* webpackMode: "lazy-once" */ | 920 | /* webpackMode: "lazy-once" */ |
| 908 | `@/pages/Administrator/role.vue` | 921 | `@/pages/Administrator/role.vue` |
| 909 | ) | 922 | ) |
| 910 | }, | 923 | }, |
| 911 | { | 924 | { |
| 912 | path: '/bulkImport', | 925 | path: '/bulkImport', |
| 913 | meta: {}, | 926 | meta: {}, |
| 914 | name: 'Bulk Import', | 927 | name: 'Bulk Import', |
| 915 | props: (route) => ({ | 928 | props: (route) => ({ |
| 916 | type: route.query.type | 929 | type: route.query.type |
| 917 | }), | 930 | }), |
| 918 | component: () => | 931 | component: () => |
| 919 | import( | 932 | import( |
| 920 | /* webpackChunkName: "routes" */ | 933 | /* webpackChunkName: "routes" */ |
| 921 | /* webpackMode: "lazy-once" */ | 934 | /* webpackMode: "lazy-once" */ |
| 922 | `@/pages/Administrator/bulkImport.vue` | 935 | `@/pages/Administrator/bulkImport.vue` |
| 923 | ) | 936 | ) |
| 924 | }, | 937 | }, |
| 925 | { | 938 | { |
| 926 | path: '/studentReport', | 939 | path: '/studentReport', |
| 927 | meta: {}, | 940 | meta: {}, |
| 928 | name: 'Student Report', | 941 | name: 'Student Report', |
| 929 | props: (route) => ({ | 942 | props: (route) => ({ |
| 930 | type: route.query.type | 943 | type: route.query.type |
| 931 | }), | 944 | }), |
| 932 | component: () => | 945 | component: () => |
| 933 | import( | 946 | import( |
| 934 | /* webpackChunkName: "routes" */ | 947 | /* webpackChunkName: "routes" */ |
| 935 | /* webpackMode: "lazy-once" */ | 948 | /* webpackMode: "lazy-once" */ |
| 936 | `@/pages/Report/studentReport.vue` | 949 | `@/pages/Report/studentReport.vue` |
| 937 | ) | 950 | ) |
| 938 | }, | 951 | }, |
| 939 | { | 952 | { |
| 940 | path: '/progressCardReport', | 953 | path: '/progressCardReport', |
| 941 | meta: {}, | 954 | meta: {}, |
| 942 | name: 'Progress Card Report', | 955 | name: 'Progress Card Report', |
| 943 | props: (route) => ({ | 956 | props: (route) => ({ |
| 944 | type: route.query.type | 957 | type: route.query.type |
| 945 | }), | 958 | }), |
| 946 | component: () => | 959 | component: () => |
| 947 | import( | 960 | import( |
| 948 | /* webpackChunkName: "routes" */ | 961 | /* webpackChunkName: "routes" */ |
| 949 | /* webpackMode: "lazy-once" */ | 962 | /* webpackMode: "lazy-once" */ |
| 950 | `@/pages/Report/progressCardReport.vue` | 963 | `@/pages/Report/progressCardReport.vue` |
| 951 | ) | 964 | ) |
| 952 | }, | 965 | }, |
| 953 | { | 966 | { |
| 954 | path: '/idCard', | 967 | path: '/idCard', |
| 955 | meta: {}, | 968 | meta: {}, |
| 956 | name: 'Id Card Report', | 969 | name: 'Id Card Report', |
| 957 | props: (route) => ({ | 970 | props: (route) => ({ |
| 958 | type: route.query.type | 971 | type: route.query.type |
| 959 | }), | 972 | }), |
| 960 | component: () => | 973 | component: () => |
| 961 | import( | 974 | import( |
| 962 | `@/pages/Report/idCard.vue` | 975 | `@/pages/Report/idCard.vue` |
| 963 | ) | 976 | ) |
| 964 | }, | 977 | }, |
| 965 | { | 978 | { |
| 966 | path: '/admitCard', | 979 | path: '/admitCard', |
| 967 | meta: {}, | 980 | meta: {}, |
| 968 | name: 'Admit Card Report', | 981 | name: 'Admit Card Report', |
| 969 | props: (route) => ({ | 982 | props: (route) => ({ |
| 970 | type: route.query.type | 983 | type: route.query.type |
| 971 | }), | 984 | }), |
| 972 | component: () => | 985 | component: () => |
| 973 | import( | 986 | import( |
| 974 | `@/pages/Report/admitCard.vue` | 987 | `@/pages/Report/admitCard.vue` |
| 975 | ) | 988 | ) |
| 976 | }, | 989 | }, |
| 977 | { | 990 | { |
| 978 | path: '/generalSetting', | 991 | path: '/generalSetting', |
| 979 | meta: {}, | 992 | meta: {}, |
| 980 | name: 'General Setting', | 993 | name: 'General Setting', |
| 981 | props: (route) => ({ | 994 | props: (route) => ({ |
| 982 | type: route.query.type | 995 | type: route.query.type |
| 983 | }), | 996 | }), |
| 984 | component: () => | 997 | component: () => |
| 985 | import( | 998 | import( |
| 986 | /* webpackChunkName: "routes" */ | 999 | /* webpackChunkName: "routes" */ |
| 987 | /* webpackMode: "lazy-once" */ | 1000 | /* webpackMode: "lazy-once" */ |
| 988 | `@/pages/generalSetting/generalSetting.vue` | 1001 | `@/pages/generalSetting/generalSetting.vue` |
| 989 | ) | 1002 | ) |
| 990 | }, | 1003 | }, |
| 991 | { | 1004 | { |
| 992 | path: '/assignment', | 1005 | path: '/assignment', |
| 993 | meta: {}, | 1006 | meta: {}, |
| 994 | name: 'Assignment', | 1007 | name: 'Assignment', |
| 995 | props: (route) => ({ | 1008 | props: (route) => ({ |
| 996 | type: route.query.type | 1009 | type: route.query.type |
| 997 | }), | 1010 | }), |
| 998 | component: () => | 1011 | component: () => |
| 999 | import( | 1012 | import( |
| 1000 | `@/pages/Academic/assignment.vue` | 1013 | `@/pages/Academic/assignment.vue` |
| 1001 | ) | 1014 | ) |
| 1002 | }, | 1015 | }, |
| 1003 | { | 1016 | { |
| 1004 | path: '/routine', | 1017 | path: '/routine', |
| 1005 | meta: {}, | 1018 | meta: {}, |
| 1006 | name: 'Routine', | 1019 | name: 'Routine', |
| 1007 | props: (route) => ({ | 1020 | props: (route) => ({ |
| 1008 | type: route.query.type | 1021 | type: route.query.type |
| 1009 | }), | 1022 | }), |
| 1010 | component: () => | 1023 | component: () => |
| 1011 | import( | 1024 | import( |
| 1012 | `@/pages/Academic/routine.vue` | 1025 | `@/pages/Academic/routine.vue` |
| 1013 | ) | 1026 | ) |
| 1014 | }, | 1027 | }, |
| 1015 | { | 1028 | { |
| 1016 | path: '/subject', | 1029 | path: '/subject', |
| 1017 | meta: {}, | 1030 | meta: {}, |
| 1018 | name: 'Subject', | 1031 | name: 'Subject', |
| 1019 | props: (route) => ({ | 1032 | props: (route) => ({ |
| 1020 | type: route.query.type | 1033 | type: route.query.type |
| 1021 | }), | 1034 | }), |
| 1022 | component: () => | 1035 | component: () => |
| 1023 | import( | 1036 | import( |
| 1024 | `@/pages/Academic/subject.vue` | 1037 | `@/pages/Academic/subject.vue` |
| 1025 | ) | 1038 | ) |
| 1026 | }, | 1039 | }, |
| 1027 | { | 1040 | { |
| 1028 | path: '/syllabus', | 1041 | path: '/syllabus', |
| 1029 | meta: {}, | 1042 | meta: {}, |
| 1030 | name: 'Syllabus', | 1043 | name: 'Syllabus', |
| 1031 | props: (route) => ({ | 1044 | props: (route) => ({ |
| 1032 | type: route.query.type | 1045 | type: route.query.type |
| 1033 | }), | 1046 | }), |
| 1034 | component: () => | 1047 | component: () => |
| 1035 | import( | 1048 | import( |
| 1036 | `@/pages/Academic/syllabus.vue` | 1049 | `@/pages/Academic/syllabus.vue` |
| 1037 | ) | 1050 | ) |
| 1038 | }, | 1051 | }, |
| 1039 | { | 1052 | { |
| 1040 | path: '/course', | 1053 | path: '/course', |
| 1041 | meta: {}, | 1054 | meta: {}, |
| 1042 | name: 'Course', | 1055 | name: 'Course', |
| 1043 | props: (route) => ({ | 1056 | props: (route) => ({ |
| 1044 | type: route.query.type | 1057 | type: route.query.type |
| 1045 | }), | 1058 | }), |
| 1046 | component: () => | 1059 | component: () => |
| 1047 | import( | 1060 | import( |
| 1048 | /* webpackChunkName: "routes" */ | 1061 | /* webpackChunkName: "routes" */ |
| 1049 | /* webpackMode: "lazy-once" */ | 1062 | /* webpackMode: "lazy-once" */ |
| 1050 | `@/pages/Course/course.vue` | 1063 | `@/pages/Course/course.vue` |
| 1051 | ) | 1064 | ) |
| 1052 | }, | 1065 | }, |
| 1053 | { | 1066 | { |
| 1054 | path: '/courseDetail', | 1067 | path: '/courseDetail', |
| 1055 | meta: {}, | 1068 | meta: {}, |
| 1056 | name: 'Course Detail', | 1069 | name: 'Course Detail', |
| 1057 | props: (route) => ({ | 1070 | props: (route) => ({ |
| 1058 | type: route.query.type | 1071 | type: route.query.type |
| 1059 | }), | 1072 | }), |
| 1060 | component: () => | 1073 | component: () => |
| 1061 | import( | 1074 | import( |
| 1062 | /* webpackChunkName: "routes" */ | 1075 | /* webpackChunkName: "routes" */ |
| 1063 | /* webpackMode: "lazy-once" */ | 1076 | /* webpackMode: "lazy-once" */ |
| 1064 | `@/pages/Course/courseDetail.vue` | 1077 | `@/pages/Course/courseDetail.vue` |
| 1065 | ) | 1078 | ) |
| 1066 | }, | 1079 | }, |
| 1067 | { | 1080 | { |
| 1068 | path: '/enrollStudents', | 1081 | path: '/enrollStudents', |
| 1069 | meta: {}, | 1082 | meta: {}, |
| 1070 | name: 'Enroll Students', | 1083 | name: 'Enroll Students', |
| 1071 | props: (route) => ({ | 1084 | props: (route) => ({ |
| 1072 | type: route.query.type | 1085 | type: route.query.type |
| 1073 | }), | 1086 | }), |
| 1074 | component: () => | 1087 | component: () => |
| 1075 | import( | 1088 | import( |
| 1076 | /* webpackChunkName: "routes" */ | 1089 | /* webpackChunkName: "routes" */ |
| 1077 | /* webpackMode: "lazy-once" */ | 1090 | /* webpackMode: "lazy-once" */ |
| 1078 | `@/pages/Course/enrollStudents.vue` | 1091 | `@/pages/Course/enrollStudents.vue` |
| 1079 | ) | 1092 | ) |
| 1080 | }, | 1093 | }, |
| 1081 | { | 1094 | { |
| 1082 | path: '/changeStudents', | 1095 | path: '/changeStudents', |
| 1083 | meta: {}, | 1096 | meta: {}, |
| 1084 | name: 'Change Students', | 1097 | name: 'Change Students', |
| 1085 | props: (route) => ({ | 1098 | props: (route) => ({ |
| 1086 | type: route.query.type | 1099 | type: route.query.type |
| 1087 | }), | 1100 | }), |
| 1088 | component: () => | 1101 | component: () => |
| 1089 | import( | 1102 | import( |
| 1090 | /* webpackChunkName: "routes" */ | 1103 | /* webpackChunkName: "routes" */ |
| 1091 | /* webpackMode: "lazy-once" */ | 1104 | /* webpackMode: "lazy-once" */ |
| 1092 | `@/pages/changeStudents/changeStudents.vue` | 1105 | `@/pages/changeStudents/changeStudents.vue` |
| 1093 | ) | 1106 | ) |
| 1094 | }, | 1107 | }, |
| 1095 | { | 1108 | { |
| 1096 | path: '/annoucement', | 1109 | path: '/annoucement', |
| 1097 | meta: {}, | 1110 | meta: {}, |
| 1098 | name: 'Annoucement', | 1111 | name: 'Annoucement', |
| 1099 | props: (route) => ({ | 1112 | props: (route) => ({ |
| 1100 | type: route.query.type | 1113 | type: route.query.type |
| 1101 | }), | 1114 | }), |
| 1102 | component: () => | 1115 | component: () => |
| 1103 | import( | 1116 | import( |
| 1104 | /* webpackChunkName: "routes" */ | 1117 | /* webpackChunkName: "routes" */ |
| 1105 | /* webpackMode: "lazy-once" */ | 1118 | /* webpackMode: "lazy-once" */ |
| 1106 | `@/pages/Annoucement/annoucement.vue` | 1119 | `@/pages/Annoucement/annoucement.vue` |
| 1107 | ) | 1120 | ) |
| 1108 | }, | 1121 | }, |
| 1109 | { | 1122 | { |
| 1110 | path: '/meetingEvent', | 1123 | path: '/meetingEvent', |
| 1111 | meta: {}, | 1124 | meta: {}, |
| 1112 | name: 'Meeting Event', | 1125 | name: 'Meeting Event', |
| 1113 | props: (route) => ({ | 1126 | props: (route) => ({ |
| 1114 | type: route.query.type | 1127 | type: route.query.type |
| 1115 | }), | 1128 | }), |
| 1116 | component: () => | 1129 | component: () => |
| 1117 | import( | 1130 | import( |
| 1118 | /* webpackChunkName: "routes" */ | 1131 | /* webpackChunkName: "routes" */ |
| 1119 | /* webpackMode: "lazy-once" */ | 1132 | /* webpackMode: "lazy-once" */ |
| 1120 | `@/pages/meetingEvent/meetingEvent.vue` | 1133 | `@/pages/meetingEvent/meetingEvent.vue` |
| 1121 | ) | 1134 | ) |
| 1122 | }, | 1135 | }, |
| 1123 | //////SCHOOL | 1136 | //////SCHOOL |
| 1124 | 1137 | ||
| 1125 | { | 1138 | { |
| 1126 | path: '/school', | 1139 | path: '/school', |
| 1127 | meta: {}, | 1140 | meta: {}, |
| 1128 | name: 'School', | 1141 | name: 'School', |
| 1129 | props: (route) => ({ | 1142 | props: (route) => ({ |
| 1130 | type: route.query.type | 1143 | type: route.query.type |
| 1131 | }), | 1144 | }), |
| 1132 | component: () => | 1145 | component: () => |
| 1133 | import( | 1146 | import( |
| 1134 | /* webpackChunkName: "routes" */ | 1147 | /* webpackChunkName: "routes" */ |
| 1135 | /* webpackMode: "lazy-once" */ | 1148 | /* webpackMode: "lazy-once" */ |
| 1136 | `@/pages/School/school.vue` | 1149 | `@/pages/School/school.vue` |
| 1137 | ) | 1150 | ) |
| 1138 | }, | 1151 | }, |
| 1139 | { | 1152 | { |
| 1140 | path: '/appVersion', | 1153 | path: '/appVersion', |
| 1141 | meta: {}, | 1154 | meta: {}, |
| 1142 | name: 'App Version', | 1155 | name: 'App Version', |
| 1143 | props: (route) => ({ | 1156 | props: (route) => ({ |
| 1144 | type: route.query.type | 1157 | type: route.query.type |
| 1145 | }), | 1158 | }), |
| 1146 | component: () => | 1159 | component: () => |
| 1147 | import( | 1160 | import( |
| 1148 | /* webpackChunkName: "routes" */ | 1161 | /* webpackChunkName: "routes" */ |
| 1149 | /* webpackMode: "lazy-once" */ | 1162 | /* webpackMode: "lazy-once" */ |
| 1150 | `@/pages/School/appVersion.vue` | 1163 | `@/pages/School/appVersion.vue` |
| 1151 | ) | 1164 | ) |
| 1152 | }, | 1165 | }, |
| 1153 | { | 1166 | { |
| 1154 | path: '/schooldashboard', | 1167 | path: '/schooldashboard', |
| 1155 | meta: {}, | 1168 | meta: {}, |
| 1156 | name: 'View School Dashboard', | 1169 | name: 'View School Dashboard', |
| 1157 | props: (route) => ({ | 1170 | props: (route) => ({ |
| 1158 | type: route.query.type | 1171 | type: route.query.type |
| 1159 | }), | 1172 | }), |
| 1160 | component: () => | 1173 | component: () => |
| 1161 | import( | 1174 | import( |
| 1162 | /* webpackChunkName: "routes" */ | 1175 | /* webpackChunkName: "routes" */ |
| 1163 | /* webpackMode: "lazy-once" */ | 1176 | /* webpackMode: "lazy-once" */ |
| 1164 | `@/pages/School/viewSchoolDashboard.vue` | 1177 | `@/pages/School/viewSchoolDashboard.vue` |
| 1165 | ) | 1178 | ) |
| 1166 | } | 1179 | } |
| 1167 | ]; | 1180 | ]; |