viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit e91641fe5950ff5563954e1469c64a2ad564dd7c

Authored by Amber Dev
1 parent cf2d498a82
Exists in master and in 2 other branches amber-development, ui-design

solved bugs

Showing 12 changed files with 432 additions and 500 deletions   Show diff stats
src/Services/GetApis.js
Diff comments   View file @e91641f
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 // APIS USED IN dashboard.vue 58 // APIS USED IN dashboard.vue
59 /* studentMeetingEvents required in dashboard to display list of latest events */ 59 /* studentMeetingEvents required in dashboard to display list of latest events */
60 async studentMeetingEvents(params) { 60 async studentMeetingEvents(params) {
61 try { 61 try {
62 let response = await this.getMethod("/studentMeetingEvents", { 62 let response = await this.getMethod("/studentMeetingEvents", {
63 studentId: params.studentId 63 studentId: params.studentId
64 }) 64 })
65 console.log("response of studentMeetingEvents - ", response); 65 console.log("response of studentMeetingEvents - ", response);
66 return response 66 return response
67 } catch (error) { 67 } catch (error) {
68 console.log("error in studentMeetingEvents - ", error.message) 68 console.log("error in studentMeetingEvents - ", error.message)
69 } 69 }
70 70
71 }, 71 },
72 72
73 async getParticularMeetingEvent(params) { 73 async getParticularMeetingEvent(params) {
74 try { 74 try {
75 let response = await this.getMethod("/getParticularMeetingEvent", { 75 let response = await this.getMethod("/getParticularMeetingEvent", {
76 meetingEventId: params.meetingEventId 76 meetingEventId: params.meetingEventId
77 }) 77 })
78 this.particularEvent = response.data.data 78 this.particularEvent = response.data.data
79 } catch (error) { 79 } catch (error) {
80 console.log("Error in getParticularMeetingEvent - ", error.message) 80 console.log("Error in getParticularMeetingEvent - ", error.message)
81 } 81 }
82 }, 82 },
83 83
84 /************************************************************************************************************************ */ 84 /************************************************************************************************************************ */
85 85
86 /* APIS USED IN LiveOnlineClass.vue */
87 async getLiveClassesesList(params) {
88 try {
89 let response = await this.getMethod("/getLiveClassesesList", {
90 classId: params.classId,
91 courseId: params.courseId,
92 chapterId: params.chapterId,
93 })
94 return response
95 } catch (error) {
96 console.log(" error in getLiveClassesesList - ", error.message)
97 }
98 },
99
100
101
102 /*************************************************************************************************************************** */
103
86 104
87 /* APIS USED IN announcement.vue */ 105 /* APIS USED IN announcement.vue */
88 async getAnnoucementesList(params) { 106 async getAnnoucementesList(params) {
89 try { 107 try {
90 let response = await this.getMethod("/getAnnoucementesList", { 108 let response = await this.getMethod("/getAnnoucementesList", {
91 courseId: params.courseId 109 courseId: params.courseId
92 }) 110 })
93 return response; 111 return response;
94 } catch (error) { 112 } catch (error) {
95 console.log("Error in getAnnoucementesList - ", error.message) 113 console.log("Error in getAnnoucementesList - ", error.message)
96 } 114 }
97 } 115 }
98 116
99 }, 117 },
100 } 118 }
src/Services/PutApis.js
Diff comments   View file @e91641f
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 6
7 } 7 }
8 }, 8 },
9 methods: { 9 methods: {
10 /************************************************************************************************************************ */
11
12 /* APIS USED IN LiveOnlineClass.vue */
13 async createLiveClasses(params) {
14 try {
15 let response = await this.getMethod("/createLiveClasses", {
16 classId: params.classId,
17 courseId: params.courseId,
18 chapterId: params.chapterId,
19 })
20 return response
21 } catch (error) {
22 console.log(" error in getLiveClassesesList - ", error.message)
23 }
24 },
25
26
27
28 /*************************************************************************************************************************** */
10 29
11 30
12 31
13 }, 32 },
14 } 33 }
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: 'Section', 16 title: 'Section',
17 // group: 'apps', 17 // group: 'apps',
18 name: 'Section', 18 name: 'Section',
19 icon: '/static/icon/section.png', 19 icon: '/static/icon/section.png',
20 }, 20 },
21 // { 21 // {
22 // title: 'Subjects', 22 // title: 'Subjects',
23 // name: 'Subject', 23 // name: 'Subject',
24 // icon: '/static/icon/subject.png', 24 // icon: '/static/icon/subject.png',
25 // }, 25 // },
26 { 26 {
27 title: 'Parents', 27 title: 'Parents',
28 // group: 'apps', 28 // group: 'apps',
29 name: 'Parents', 29 name: 'Parents',
30 icon: '/static/icon/parents.png', 30 icon: '/static/icon/parents.png',
31 }, 31 },
32 { 32 {
33 title: 'Teachers', 33 title: 'Teachers',
34 // group: '', 34 // group: '',
35 name: 'Teachers', 35 name: 'Teachers',
36 icon: '/static/icon/teacher.png', 36 icon: '/static/icon/teacher.png',
37 }, 37 },
38 { 38 {
39 title: 'Students', 39 title: 'Students',
40 // group: 'apps', 40 // group: 'apps',
41 name: 'Students', 41 name: 'Students',
42 icon: '/static/icon/student.png', 42 icon: '/static/icon/student.png',
43 }, 43 },
44 { 44 {
45 title: 'User', 45 title: 'User',
46 name: 'User', 46 name: 'User',
47 icon: '/static/icon/users.png', 47 icon: '/static/icon/users.png',
48 }, 48 },
49 { 49 {
50 title: 'Attendance', 50 title: 'Attendance',
51 group: 'Attendance', 51 group: 'Attendance',
52 component: 'Attendance', 52 component: 'Attendance',
53 icon: '/static/icon/attendence.png', 53 icon: '/static/icon/attendence.png',
54 items: [ 54 items: [
55 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, 55 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
56 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, 56 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
57 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, 57 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
58 ] 58 ]
59 }, 59 },
60 { 60 {
61 title: 'Exam', 61 title: 'Exam',
62 group: 'Exam', 62 group: 'Exam',
63 component: 'Exam', 63 component: 'Exam',
64 icon: '/static/icon/exam.png', 64 icon: '/static/icon/exam.png',
65 items: [ 65 items: [
66 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', }, 66 { name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
67 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, 67 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
68 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', }, 68 { name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
69 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 69 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
70 ] 70 ]
71 }, 71 },
72 { 72 {
73 title: 'Marks', 73 title: 'Marks',
74 group: 'Mark', 74 group: 'Mark',
75 component: 'Mark', 75 component: 'Mark',
76 icon: '/static/icon/marks.png', 76 icon: '/static/icon/marks.png',
77 items: [ 77 items: [
78 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }, 78 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
79 { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', }, 79 { name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', },
80 // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', }, 80 // { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
81 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', }, 81 // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
82 ] 82 ]
83 }, 83 },
84 { 84 {
85 title: 'Academic', 85 title: 'Academic',
86 group: 'Academic', 86 group: 'Academic',
87 component: 'Academic', 87 component: 'Academic',
88 icon: '/static/icon/school.png', 88 icon: '/static/icon/school.png',
89 items: [ 89 items: [
90 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, 90 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
91 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, 91 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
92 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, 92 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
93 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, 93 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
94 ] 94 ]
95 }, 95 },
96 { 96 {
97 title: 'Administrator', 97 title: 'Administrator',
98 group: 'Administrator', 98 group: 'Administrator',
99 component: 'Administrator', 99 component: 'Administrator',
100 icon: '/static/icon/adminstrator.png', 100 icon: '/static/icon/adminstrator.png',
101 items: [ 101 items: [
102 { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', }, 102 { name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', },
103 // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', }, 103 // { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
104 { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', }, 104 { name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', },
105 { name: 'Role', title: 'Role', component: 'Role', action: '', }, 105 { name: 'Role', title: 'Role', component: 'Role', action: '', },
106 { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', }, 106 { name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', },
107 107
108 ] 108 ]
109 }, 109 },
110 { 110 {
111 title: 'Payroll', 111 title: 'Payroll',
112 group: 'Payroll', 112 group: 'Payroll',
113 component: 'Payroll', 113 component: 'Payroll',
114 icon: '/static/icon/dollar.png', 114 icon: '/static/icon/dollar.png',
115 items: [ 115 items: [
116 { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', }, 116 { name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', },
117 { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', }, 117 { name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', },
118 { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', }, 118 { name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', },
119 // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', }, 119 // { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', },
120 ] 120 ]
121 }, 121 },
122 { 122 {
123 title: 'Notice Board', 123 title: 'Notice Board',
124 name: 'Notice Board', 124 name: 'Notice Board',
125 icon: '/static/icon/notice board.png', 125 icon: '/static/icon/notice board.png',
126 }, 126 },
127 { 127 {
128 title: 'News', 128 title: 'News',
129 name: 'News', 129 name: 'News',
130 icon: '/static/icon/news.png', 130 icon: '/static/icon/news.png',
131 }, 131 },
132 // { 132 // {
133 // title: 'Reminder', 133 // title: 'Reminder',
134 // name: 'reminder', 134 // name: 'reminder',
135 // icon: 'alarm_add', 135 // icon: 'alarm_add',
136 // }, 136 // },
137 { 137 {
138 title: 'Time Table', 138 title: 'Time Table',
139 name: 'Time Table', 139 name: 'Time Table',
140 icon: '/static/icon/time table.png', 140 icon: '/static/icon/time table.png',
141 }, 141 },
142 { 142 {
143 title: 'Library', 143 title: 'Library',
144 group: 'Library', 144 group: 'Library',
145 component: 'Library', 145 component: 'Library',
146 icon: '/static/icon/library.png', 146 icon: '/static/icon/library.png',
147 items: [ 147 items: [
148 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, 148 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
149 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 149 { name: 'Books', title: 'Books', component: 'Books', action: '', },
150 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 150 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
151 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 151 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
152 152
153 ] 153 ]
154 }, 154 },
155 { 155 {
156 title: 'Report', 156 title: 'Report',
157 group: 'Report', 157 group: 'Report',
158 component: 'Report', 158 component: 'Report',
159 icon: '/static/icon/reports.png', 159 icon: '/static/icon/reports.png',
160 items: [ 160 items: [
161 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, 161 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
162 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, 162 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
163 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, 163 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
164 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } 164 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
165 ] 165 ]
166 }, 166 },
167 { 167 {
168 title: 'Notification', 168 title: 'Notification',
169 name: 'Notification', 169 name: 'Notification',
170 icon: '/static/icon/notification.png', 170 icon: '/static/icon/notification.png',
171 }, 171 },
172 { 172 {
173 title: 'Social Media', 173 title: 'Social Media',
174 name: 'Social Media', 174 name: 'Social Media',
175 icon: '/static/icon/events.png', 175 icon: '/static/icon/events.png',
176 }, 176 },
177 { 177 {
178 title: 'Gallery', 178 title: 'Gallery',
179 name: 'Gallery', 179 name: 'Gallery',
180 icon: '/static/icon/gallery.png', 180 icon: '/static/icon/gallery.png',
181 }, 181 },
182 { 182 {
183 title: 'Event', 183 title: 'Event',
184 name: 'Event', 184 name: 'Event',
185 icon: '/static/icon/events.png', 185 icon: '/static/icon/events.png',
186 }, 186 },
187 { 187 {
188 title: 'Account', 188 title: 'Account',
189 group: 'Account', 189 group: 'Account',
190 component: 'Account', 190 component: 'Account',
191 icon: '/static/icon/accounts.png', 191 icon: '/static/icon/accounts.png',
192 items: [ 192 items: [
193 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, 193 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
194 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 194 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
195 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, 195 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
196 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 196 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
197 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 197 { name: 'Income', title: 'Income', component: 'Income', action: '', },
198 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } 198 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
199 ] 199 ]
200 }, 200 },
201 { 201 {
202 title: 'Holiday', 202 title: 'Holiday',
203 name: 'Holiday', 203 name: 'Holiday',
204 icon: '/static/icon/holiday.png', 204 icon: '/static/icon/holiday.png',
205 }, 205 },
206 { 206 {
207 title: 'General Setting', 207 title: 'General Setting',
208 name: 'General Setting', 208 name: 'General Setting',
209 icon: '/static/icon/settings.png', 209 icon: '/static/icon/settings.png',
210 } 210 }
211 ]; 211 ];
212 212
213 const libraryMenu = [{ 213 const libraryMenu = [{
214 title: 'Dashboard', 214 title: 'Dashboard',
215 name: 'Dashboard', 215 name: 'Dashboard',
216 icon: '/static/icon/dashboard.png', 216 icon: '/static/icon/dashboard.png',
217 }, 217 },
218 { 218 {
219 title: 'Library', 219 title: 'Library',
220 group: 'Library', 220 group: 'Library',
221 component: 'Library', 221 component: 'Library',
222 icon: '/static/icon/library.png', 222 icon: '/static/icon/library.png',
223 items: [ 223 items: [
224 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', }, 224 { name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
225 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 225 { name: 'Books', title: 'Books', component: 'Books', action: '', },
226 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', }, 226 { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
227 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 227 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
228 228
229 ] 229 ]
230 }, 230 },
231 ]; 231 ];
232 232
233 const accountMenu = [{ 233 const accountMenu = [{
234 title: 'Dashboard', 234 title: 'Dashboard',
235 name: 'Dashboard', 235 name: 'Dashboard',
236 icon: '/static/icon/dashboard.png', 236 icon: '/static/icon/dashboard.png',
237 }, 237 },
238 238
239 { 239 {
240 title: 'Account', 240 title: 'Account',
241 group: 'Account', 241 group: 'Account',
242 component: 'Account', 242 component: 'Account',
243 icon: '/static/icon/accounts.png', 243 icon: '/static/icon/accounts.png',
244 items: [ 244 items: [
245 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', }, 245 { name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
246 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', }, 246 { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
247 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', }, 247 { name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
248 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', }, 248 { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
249 { name: 'Income', title: 'Income', component: 'Income', action: '', }, 249 { name: 'Income', title: 'Income', component: 'Income', action: '', },
250 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', } 250 { name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
251 ] 251 ]
252 }, 252 },
253 ]; 253 ];
254 254
255 const schoolMenu = [ 255 const schoolMenu = [
256 // { header: 'Apps' }, 256 // { header: 'Apps' },
257 { 257 {
258 title: 'Dashboard', 258 title: 'Dashboard',
259 // group: 'apps', 259 // group: 'apps',
260 name: 'View School Dashboard', 260 name: 'View School Dashboard',
261 icon: '/static/icon/dashboard.png', 261 icon: '/static/icon/dashboard.png',
262 }, 262 },
263 { 263 {
264 title: 'School', 264 title: 'School',
265 // group: 'apps', 265 // group: 'apps',
266 name: 'School', 266 name: 'School',
267 icon: '/static/schoolIcons/Dashboard.png', 267 icon: '/static/schoolIcons/Dashboard.png',
268 } 268 }
269 ]; 269 ];
270 270
271 const teacherMenu = [{ 271 const teacherMenu = [{
272 title: 'Dashboard', 272 title: 'Dashboard',
273 name: 'Dashboard', 273 name: 'Dashboard',
274 icon: '/static/icon/dashboard.png', 274 icon: '/static/icon/dashboard.png',
275 }, 275 },
276 { 276 {
277 title: 'Parents', 277 title: 'Parents',
278 // group: 'apps', 278 // group: 'apps',
279 name: 'Parents', 279 name: 'Parents',
280 icon: '/static/icon/parents.png', 280 icon: '/static/icon/parents.png',
281 }, 281 },
282 { 282 {
283 title: 'Teachers', 283 title: 'Teachers',
284 // group: '', 284 // group: '',
285 name: 'Teachers', 285 name: 'Teachers',
286 icon: '/static/icon/teacher.png', 286 icon: '/static/icon/teacher.png',
287 }, 287 },
288 { 288 {
289 title: 'Students', 289 title: 'Students',
290 // group: 'apps', 290 // group: 'apps',
291 name: 'Students', 291 name: 'Students',
292 icon: '/static/icon/student.png', 292 icon: '/static/icon/student.png',
293 }, 293 },
294 { 294 {
295 title: 'Academic', 295 title: 'Academic',
296 group: 'Academic', 296 group: 'Academic',
297 component: 'Academic', 297 component: 'Academic',
298 icon: '/static/icon/school.png', 298 icon: '/static/icon/school.png',
299 items: [ 299 items: [
300 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', }, 300 { name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
301 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', }, 301 { name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
302 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', }, 302 { name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
303 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', }, 303 { name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
304 ] 304 ]
305 }, 305 },
306 { 306 {
307 title: 'Course', 307 title: 'Course',
308 group: 'Course', 308 group: 'Course',
309 component: 'Course', 309 component: 'Course',
310 icon: '/static/icon/school.png', 310 icon: '/static/icon/school.png',
311 items: [ 311 items: [
312 { name: 'Course', title: 'Course', component: 'Course', action: '', }, 312 { name: 'Course', title: 'Course', component: 'Course', action: '', },
313 { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', }, 313 { name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', },
314 { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', }, 314 { name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', },
315 { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', }, 315 { name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', },
316 ] 316 ]
317 }, 317 },
318 { 318 {
319 title: 'Annoucement', 319 title: 'Annoucement',
320 // group: 'apps', 320 // group: 'apps',
321 name: 'Annoucement', 321 name: 'Annoucement',
322 icon: '/static/icon/student.png', 322 icon: '/static/icon/student.png',
323 }, 323 },
324 { 324 {
325 title: 'Meeting Event', 325 title: 'Meeting Event',
326 // group: 'apps', 326 // group: 'apps',
327 name: 'Meeting Event', 327 name: 'Meeting Event',
328 icon: '/static/icon/student.png', 328 icon: '/static/icon/student.png',
329 }, 329 },
330 { 330 {
331 title: 'Attendance', 331 title: 'Attendance',
332 group: 'Attendance', 332 group: 'Attendance',
333 component: 'Attendance', 333 component: 'Attendance',
334 icon: '/static/icon/attendence.png', 334 icon: '/static/icon/attendence.png',
335 items: [ 335 items: [
336 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', }, 336 { name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
337 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', }, 337 { name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
338 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', }, 338 // { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
339 ] 339 ]
340 }, 340 },
341 { 341 {
342 title: 'Exam', 342 title: 'Exam',
343 group: 'Exam', 343 group: 'Exam',
344 component: 'Exam', 344 component: 'Exam',
345 icon: '/static/icon/exam.png', 345 icon: '/static/icon/exam.png',
346 items: [ 346 items: [
347 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', }, 347 { name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
348 { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', } 348 { name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', }
349 ] 349 ]
350 }, 350 },
351 { 351 {
352 title: 'Marks', 352 title: 'Marks',
353 group: 'Mark', 353 group: 'Mark',
354 component: 'Mark', 354 component: 'Mark',
355 icon: '/static/icon/marks.png', 355 icon: '/static/icon/marks.png',
356 items: [ 356 items: [
357 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', } 357 { name: 'Mark', title: 'Mark', component: 'Mark', action: '', }
358 ] 358 ]
359 }, 359 },
360 { 360 {
361 title: 'Report', 361 title: 'Report',
362 group: 'Report', 362 group: 'Report',
363 component: 'Report', 363 component: 'Report',
364 icon: '/static/icon/reports.png', 364 icon: '/static/icon/reports.png',
365 items: [ 365 items: [
366 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', }, 366 { name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
367 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', }, 367 { name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
368 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', }, 368 { name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
369 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', } 369 { name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
370 ] 370 ]
371 }, 371 },
372 { 372 {
373 title: 'Library', 373 title: 'Library',
374 group: 'Library', 374 group: 'Library',
375 component: 'Library', 375 component: 'Library',
376 icon: '/static/icon/library.png', 376 icon: '/static/icon/library.png',
377 items: [ 377 items: [
378 { name: 'Books', title: 'Books', component: 'Books', action: '', }, 378 { name: 'Books', title: 'Books', component: 'Books', action: '', },
379 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', } 379 { name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
380 380
381 ] 381 ]
382 }, 382 },
383 { 383 {
384 title: 'Meet', 384 title: 'Meet',
385 name: 'Meet', 385 name: 'Meet',
386 icon: '/static/icon/parents.png', 386 icon: '/static/icon/parents.png',
387 } 387 }
388 ]; 388 ];
389 389
390 const parentMenu = [{ 390 const parentMenu = [{
391 title: 'Dashboard', 391 title: 'Dashboard',
392 name: 'Dashboard', 392 name: 'Dashboard',
393 icon: '/static/icon/dashboard.png', 393 icon: '/static/icon/dashboard.png',
394 },
395 {
396 title: "Change Student",
397 name: 'Change Students',
398 Vicon: "face",
399 click: e => {
400 console.log(e);
401 }
394 }]; 402 }];
395 // reorder menu 403 // reorder menu
396 // Menu.forEach((item) => { 404 // Menu.forEach((item) => {
397 // if (item.items) { 405 // if (item.items) {
398 // item.items.sort((x, y) => { 406 // item.items.sort((x, y) => {
399 // let textA = x.title.toUpperCase(); 407 // let textA = x.title.toUpperCase();
400 // let textB = y.title.toUpperCase(); 408 // let textB = y.title.toUpperCase();
401 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 409 // return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
402 // }); 410 // });
403 // } 411 // }
404 // }); 412 // });
405 413
406 export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu }; 414 export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu };
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @e91641f
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 :dark="$vuetify.dark" 5 :dark="$vuetify.dark"
6 app 6 app
7 fixed 7 fixed
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 > 12 >
13 <!-- <vue-perfect-scrollbar 13 <!-- <vue-perfect-scrollbar
14 class="drawer-menu--scroll side-bar-color mt-3" 14 class="drawer-menu--scroll side-bar-color mt-3"
15 :settings="scrollSettings" 15 :settings="scrollSettings"
16 >--> 16 >-->
17 <v-toolbar class="white" flat> 17 <v-toolbar class="white" flat>
18 <img 18 <img
19 v-bind:src="computeLogo" 19 v-bind:src="computeLogo"
20 height="40" 20 height="40"
21 width="130" 21 width="130"
22 class="imgLogo mb-3 mt-3" 22 class="imgLogo mb-3 mt-3"
23 alt="logo" 23 alt="logo"
24 style="margin: auto; 24 style="margin: auto;
25 display: block;" 25 display: block;"
26 /> 26 />
27 </v-toolbar> 27 </v-toolbar>
28 <v-list dense dark> 28 <v-list dense dark>
29 <template v-for="(item, i) in menus" v-if="role === 'ADMIN'"> 29 <template v-for="(item, i) in menus" v-if="role === 'ADMIN'">
30 <!-- {{menus}} --> 30 <!-- {{menus}} -->
31 <!--group with subitems--> 31 <!--group with subitems-->
32 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action> 32 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action>
33 <v-list-tile slot="activator" ripple="ripple"> 33 <v-list-tile slot="activator" ripple="ripple">
34 <v-list-tile-action v-if="item.icon"> 34 <v-list-tile-action v-if="item.icon">
35 <img :src="item.icon" width="22" alt="icons" /> 35 <img :src="item.icon" width="22" alt="icons" />
36 </v-list-tile-action> 36 </v-list-tile-action>
37 <v-list-tile-content> 37 <v-list-tile-content>
38 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 38 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
39 </v-list-tile-content> 39 </v-list-tile-content>
40 </v-list-tile> 40 </v-list-tile>
41 <template v-for="(subItem, i) in item.items"> 41 <template v-for="(subItem, i) in item.items">
42 <!--sub group--> 42 <!--sub group-->
43 <v-list-group 43 <v-list-group
44 v-if="subItem.items" 44 v-if="subItem.items"
45 :key="subItem.name" 45 :key="subItem.name"
46 :group="subItem.group" 46 :group="subItem.group"
47 sub-group="sub-group" 47 sub-group="sub-group"
48 > 48 >
49 <v-list-tile slot="activator" ripple="ripple"> 49 <v-list-tile slot="activator" ripple="ripple">
50 <v-list-tile-content> 50 <v-list-tile-content>
51 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 51 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
52 </v-list-tile-content> 52 </v-list-tile-content>
53 </v-list-tile> 53 </v-list-tile>
54 <v-list-tile 54 <v-list-tile
55 v-for="(grand, i) in subItem.children" 55 v-for="(grand, i) in subItem.children"
56 :key="i" 56 :key="i"
57 :to="genChildTarget(item, grand)" 57 :to="genChildTarget(item, grand)"
58 :href="grand.href" 58 :href="grand.href"
59 ripple="ripple" 59 ripple="ripple"
60 > 60 >
61 <v-list-tile-content> 61 <v-list-tile-content>
62 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 62 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
63 </v-list-tile-content> 63 </v-list-tile-content>
64 </v-list-tile> 64 </v-list-tile>
65 </v-list-group> 65 </v-list-group>
66 <!--child item--> 66 <!--child item-->
67 <v-list-tile 67 <v-list-tile
68 v-else 68 v-else
69 :key="i" 69 :key="i"
70 :to="genChildTarget(item, subItem)" 70 :to="genChildTarget(item, subItem)"
71 :href="subItem.href" 71 :href="subItem.href"
72 :disabled="subItem.disabled" 72 :disabled="subItem.disabled"
73 :target="subItem.target" 73 :target="subItem.target"
74 ripple="ripple" 74 ripple="ripple"
75 > 75 >
76 <v-list-tile-action v-if="subItem.action"> 76 <v-list-tile-action v-if="subItem.action">
77 <img 77 <img
78 width="30" 78 width="30"
79 :src="subItem.action" 79 :src="subItem.action"
80 :class="[subItem.actionClass || 'success--text']" 80 :class="[subItem.actionClass || 'success--text']"
81 /> 81 />
82 </v-list-tile-action> 82 </v-list-tile-action>
83 <v-list-tile-content> 83 <v-list-tile-content>
84 <v-list-tile-title class="body-2"> 84 <v-list-tile-title class="body-2">
85 <span>{{ subItem.title }}</span> 85 <span>{{ subItem.title }}</span>
86 </v-list-tile-title> 86 </v-list-tile-title>
87 </v-list-tile-content> 87 </v-list-tile-content>
88 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 88 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
89 </v-list-tile> 89 </v-list-tile>
90 </template> 90 </template>
91 </v-list-group> 91 </v-list-group>
92 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 92 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
93 <v-divider v-else-if="item.divider" :key="i"></v-divider> 93 <v-divider v-else-if="item.divider" :key="i"></v-divider>
94 <!--top-level link--> 94 <!--top-level link-->
95 <v-list-tile 95 <v-list-tile
96 v-else 96 v-else
97 ripple="ripple" 97 ripple="ripple"
98 :disabled="item.disabled" 98 :disabled="item.disabled"
99 :target="item.target" 99 :target="item.target"
100 rel="noopener" 100 rel="noopener"
101 :key="item.name" 101 :key="item.name"
102 :to="!item.href ? { name: item.name } : null" 102 :to="!item.href ? { name: item.name } : null"
103 :href="item.href" 103 :href="item.href"
104 > 104 >
105 <!-- <a :href="item.path"> --> 105 <!-- <a :href="item.path"> -->
106 <v-list-tile-action v-if="item.icon"> 106 <v-list-tile-action v-if="item.icon">
107 <img :src="item.icon" width="22" alt="icons" /> 107 <img :src="item.icon" width="22" alt="icons" />
108 </v-list-tile-action> 108 </v-list-tile-action>
109 <v-list-tile-content class="pt-2"> 109 <v-list-tile-content class="pt-2">
110 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 110 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
111 </v-list-tile-content> 111 </v-list-tile-content>
112 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 112 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
113 <v-list-tile-action v-if="item.subAction"> 113 <v-list-tile-action v-if="item.subAction">
114 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 114 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
115 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 115 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
116 </v-list-tile-action> 116 </v-list-tile-action>
117 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 117 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
118 <!-- </a> --> 118 <!-- </a> -->
119 </v-list-tile> 119 </v-list-tile>
120 </template> 120 </template>
121 <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'"> 121 <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'">
122 <!-- {{menus}} --> 122 <!-- {{menus}} -->
123 <!--group with subitems--> 123 <!--group with subitems-->
124 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> 124 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
125 <v-list-tile slot="activator" ripple="ripple"> 125 <v-list-tile slot="activator" ripple="ripple">
126 <v-list-tile-action v-if="item.icon"> 126 <v-list-tile-action v-if="item.icon">
127 <img :src="item.icon" width="22" alt="icons" /> 127 <img :src="item.icon" width="22" alt="icons" />
128 </v-list-tile-action> 128 </v-list-tile-action>
129 <v-list-tile-content> 129 <v-list-tile-content>
130 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 130 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <template v-for="(subItem, i) in item.items"> 133 <template v-for="(subItem, i) in item.items">
134 <!--sub group--> 134 <!--sub group-->
135 <v-list-group 135 <v-list-group
136 v-if="subItem.items" 136 v-if="subItem.items"
137 :key="subItem.name" 137 :key="subItem.name"
138 :group="subItem.group" 138 :group="subItem.group"
139 sub-group="sub-group" 139 sub-group="sub-group"
140 > 140 >
141 <v-list-tile slot="activator" ripple="ripple"> 141 <v-list-tile slot="activator" ripple="ripple">
142 <v-list-tile-content> 142 <v-list-tile-content>
143 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 143 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
144 </v-list-tile-content> 144 </v-list-tile-content>
145 </v-list-tile> 145 </v-list-tile>
146 <v-list-tile 146 <v-list-tile
147 v-for="(grand, i) in subItem.children" 147 v-for="(grand, i) in subItem.children"
148 :key="i" 148 :key="i"
149 :to="genChildTarget(item, grand)" 149 :to="genChildTarget(item, grand)"
150 :href="grand.href" 150 :href="grand.href"
151 ripple="ripple" 151 ripple="ripple"
152 > 152 >
153 <v-list-tile-content> 153 <v-list-tile-content>
154 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 154 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
155 </v-list-tile-content> 155 </v-list-tile-content>
156 </v-list-tile> 156 </v-list-tile>
157 </v-list-group> 157 </v-list-group>
158 <!--child item--> 158 <!--child item-->
159 <v-list-tile 159 <v-list-tile
160 v-else 160 v-else
161 :key="i" 161 :key="i"
162 :to="genChildTarget(item, subItem)" 162 :to="genChildTarget(item, subItem)"
163 :href="subItem.href" 163 :href="subItem.href"
164 :disabled="subItem.disabled" 164 :disabled="subItem.disabled"
165 :target="subItem.target" 165 :target="subItem.target"
166 ripple="ripple" 166 ripple="ripple"
167 > 167 >
168 <v-list-tile-action v-if="subItem.action"> 168 <v-list-tile-action v-if="subItem.action">
169 <img 169 <img
170 width="30" 170 width="30"
171 :src="subItem.action" 171 :src="subItem.action"
172 :class="[subItem.actionClass || 'success--text']" 172 :class="[subItem.actionClass || 'success--text']"
173 /> 173 />
174 </v-list-tile-action> 174 </v-list-tile-action>
175 <v-list-tile-content> 175 <v-list-tile-content>
176 <v-list-tile-title class="body-2"> 176 <v-list-tile-title class="body-2">
177 <span>{{ subItem.title }}</span> 177 <span>{{ subItem.title }}</span>
178 </v-list-tile-title> 178 </v-list-tile-title>
179 </v-list-tile-content> 179 </v-list-tile-content>
180 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 180 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
181 </v-list-tile> 181 </v-list-tile>
182 </template> 182 </template>
183 </v-list-group> 183 </v-list-group>
184 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 184 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
185 <v-divider v-else-if="item.divider" :key="i"></v-divider> 185 <v-divider v-else-if="item.divider" :key="i"></v-divider>
186 <!--top-level link--> 186 <!--top-level link-->
187 <v-list-tile 187 <v-list-tile
188 v-else 188 v-else
189 ripple="ripple" 189 ripple="ripple"
190 :disabled="item.disabled" 190 :disabled="item.disabled"
191 :target="item.target" 191 :target="item.target"
192 rel="noopener" 192 rel="noopener"
193 :key="item.name" 193 :key="item.name"
194 :to="!item.href ? { name: item.name } : null" 194 :to="!item.href ? { name: item.name } : null"
195 :href="item.href" 195 :href="item.href"
196 > 196 >
197 <!-- <a :href="item.path"> --> 197 <!-- <a :href="item.path"> -->
198 <v-list-tile-action v-if="item.icon"> 198 <v-list-tile-action v-if="item.icon">
199 <img :src="item.icon" width="22" alt="icons" /> 199 <img :src="item.icon" width="22" alt="icons" />
200 </v-list-tile-action> 200 </v-list-tile-action>
201 <v-list-tile-content class="pt-2"> 201 <v-list-tile-content class="pt-2">
202 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 202 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
203 </v-list-tile-content> 203 </v-list-tile-content>
204 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 204 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
205 <v-list-tile-action v-if="item.subAction"> 205 <v-list-tile-action v-if="item.subAction">
206 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 206 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
207 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 207 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
208 </v-list-tile-action> 208 </v-list-tile-action>
209 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 209 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
210 <!-- </a> --> 210 <!-- </a> -->
211 </v-list-tile> 211 </v-list-tile>
212 </template> 212 </template>
213 <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'"> 213 <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'">
214 <!-- {{menus}} --> 214 <!-- {{menus}} -->
215 <!--group with subitems--> 215 <!--group with subitems-->
216 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> 216 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
217 <v-list-tile slot="activator" ripple="ripple"> 217 <v-list-tile slot="activator" ripple="ripple">
218 <v-list-tile-action v-if="item.icon"> 218 <v-list-tile-action v-if="item.icon">
219 <img :src="item.icon" width="22" alt="icons" /> 219 <img :src="item.icon" width="22" alt="icons" />
220 </v-list-tile-action> 220 </v-list-tile-action>
221 <v-list-tile-content> 221 <v-list-tile-content>
222 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 222 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
223 </v-list-tile-content> 223 </v-list-tile-content>
224 </v-list-tile> 224 </v-list-tile>
225 <template v-for="(subItem, i) in item.items"> 225 <template v-for="(subItem, i) in item.items">
226 <!--sub group--> 226 <!--sub group-->
227 <v-list-group 227 <v-list-group
228 v-if="subItem.items" 228 v-if="subItem.items"
229 :key="subItem.name" 229 :key="subItem.name"
230 :group="subItem.group" 230 :group="subItem.group"
231 sub-group="sub-group" 231 sub-group="sub-group"
232 > 232 >
233 <v-list-tile slot="activator" ripple="ripple"> 233 <v-list-tile slot="activator" ripple="ripple">
234 <v-list-tile-content> 234 <v-list-tile-content>
235 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 235 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
236 </v-list-tile-content> 236 </v-list-tile-content>
237 </v-list-tile> 237 </v-list-tile>
238 <v-list-tile 238 <v-list-tile
239 v-for="(grand, i) in subItem.children" 239 v-for="(grand, i) in subItem.children"
240 :key="i" 240 :key="i"
241 :to="genChildTarget(item, grand)" 241 :to="genChildTarget(item, grand)"
242 :href="grand.href" 242 :href="grand.href"
243 ripple="ripple" 243 ripple="ripple"
244 > 244 >
245 <v-list-tile-content> 245 <v-list-tile-content>
246 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 246 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
247 </v-list-tile-content> 247 </v-list-tile-content>
248 </v-list-tile> 248 </v-list-tile>
249 </v-list-group> 249 </v-list-group>
250 <!--child item--> 250 <!--child item-->
251 <v-list-tile 251 <v-list-tile
252 v-else 252 v-else
253 :key="i" 253 :key="i"
254 :to="genChildTarget(item, subItem)" 254 :to="genChildTarget(item, subItem)"
255 :href="subItem.href" 255 :href="subItem.href"
256 :disabled="subItem.disabled" 256 :disabled="subItem.disabled"
257 :target="subItem.target" 257 :target="subItem.target"
258 ripple="ripple" 258 ripple="ripple"
259 > 259 >
260 <v-list-tile-action v-if="subItem.action"> 260 <v-list-tile-action v-if="subItem.action">
261 <img 261 <img
262 width="30" 262 width="30"
263 :src="subItem.action" 263 :src="subItem.action"
264 :class="[subItem.actionClass || 'success--text']" 264 :class="[subItem.actionClass || 'success--text']"
265 /> 265 />
266 </v-list-tile-action> 266 </v-list-tile-action>
267 <v-list-tile-content> 267 <v-list-tile-content>
268 <v-list-tile-title class="body-2"> 268 <v-list-tile-title class="body-2">
269 <span>{{ subItem.title }}</span> 269 <span>{{ subItem.title }}</span>
270 </v-list-tile-title> 270 </v-list-tile-title>
271 </v-list-tile-content> 271 </v-list-tile-content>
272 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 272 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
273 </v-list-tile> 273 </v-list-tile>
274 </template> 274 </template>
275 </v-list-group> 275 </v-list-group>
276 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 276 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
277 <v-divider v-else-if="item.divider" :key="i"></v-divider> 277 <v-divider v-else-if="item.divider" :key="i"></v-divider>
278 <!--top-level link--> 278 <!--top-level link-->
279 <v-list-tile 279 <v-list-tile
280 v-else 280 v-else
281 ripple="ripple" 281 ripple="ripple"
282 :disabled="item.disabled" 282 :disabled="item.disabled"
283 :target="item.target" 283 :target="item.target"
284 rel="noopener" 284 rel="noopener"
285 :key="item.name" 285 :key="item.name"
286 :to="!item.href ? { name: item.name } : null" 286 :to="!item.href ? { name: item.name } : null"
287 :href="item.href" 287 :href="item.href"
288 > 288 >
289 <!-- <a :href="item.path"> --> 289 <!-- <a :href="item.path"> -->
290 <v-list-tile-action v-if="item.icon"> 290 <v-list-tile-action v-if="item.icon">
291 <img :src="item.icon" width="22" alt="icons" /> 291 <img :src="item.icon" width="22" alt="icons" />
292 </v-list-tile-action> 292 </v-list-tile-action>
293 <v-list-tile-content class="pt-2"> 293 <v-list-tile-content class="pt-2">
294 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 294 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
295 </v-list-tile-content> 295 </v-list-tile-content>
296 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 296 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
297 <v-list-tile-action v-if="item.subAction"> 297 <v-list-tile-action v-if="item.subAction">
298 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 298 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
299 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 299 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
300 </v-list-tile-action> 300 </v-list-tile-action>
301 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 301 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
302 <!-- </a> --> 302 <!-- </a> -->
303 </v-list-tile> 303 </v-list-tile>
304 </template> 304 </template>
305 <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'"> 305 <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'">
306 <!-- {{menus}} --> 306 <!-- {{menus}} -->
307 <!--group with subitems--> 307 <!--group with subitems-->
308 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> 308 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
309 <v-list-tile slot="activator" ripple="ripple"> 309 <v-list-tile slot="activator" ripple="ripple">
310 <v-list-tile-action v-if="item.icon"> 310 <v-list-tile-action v-if="item.icon">
311 <img :src="item.icon" width="22" alt="icons" /> 311 <img :src="item.icon" width="22" alt="icons" />
312 </v-list-tile-action> 312 </v-list-tile-action>
313 <v-list-tile-content> 313 <v-list-tile-content>
314 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 314 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
315 </v-list-tile-content> 315 </v-list-tile-content>
316 </v-list-tile> 316 </v-list-tile>
317 <template v-for="(subItem, i) in item.items"> 317 <template v-for="(subItem, i) in item.items">
318 <!--sub group--> 318 <!--sub group-->
319 <v-list-group 319 <v-list-group
320 v-if="subItem.items" 320 v-if="subItem.items"
321 :key="subItem.name" 321 :key="subItem.name"
322 :group="subItem.group" 322 :group="subItem.group"
323 sub-group="sub-group" 323 sub-group="sub-group"
324 > 324 >
325 <v-list-tile slot="activator" ripple="ripple"> 325 <v-list-tile slot="activator" ripple="ripple">
326 <v-list-tile-content> 326 <v-list-tile-content>
327 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 327 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
328 </v-list-tile-content> 328 </v-list-tile-content>
329 </v-list-tile> 329 </v-list-tile>
330 <v-list-tile 330 <v-list-tile
331 v-for="(grand, i) in subItem.children" 331 v-for="(grand, i) in subItem.children"
332 :key="i" 332 :key="i"
333 :to="genChildTarget(item, grand)" 333 :to="genChildTarget(item, grand)"
334 :href="grand.href" 334 :href="grand.href"
335 ripple="ripple" 335 ripple="ripple"
336 > 336 >
337 <v-list-tile-content> 337 <v-list-tile-content>
338 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 338 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
339 </v-list-tile-content> 339 </v-list-tile-content>
340 </v-list-tile> 340 </v-list-tile>
341 </v-list-group> 341 </v-list-group>
342 <!--child item--> 342 <!--child item-->
343 <v-list-tile 343 <v-list-tile
344 v-else 344 v-else
345 :key="i" 345 :key="i"
346 :to="genChildTarget(item, subItem)" 346 :to="genChildTarget(item, subItem)"
347 :href="subItem.href" 347 :href="subItem.href"
348 :disabled="subItem.disabled" 348 :disabled="subItem.disabled"
349 :target="subItem.target" 349 :target="subItem.target"
350 ripple="ripple" 350 ripple="ripple"
351 > 351 >
352 <v-list-tile-action v-if="subItem.action"> 352 <v-list-tile-action v-if="subItem.action">
353 <img 353 <img
354 width="30" 354 width="30"
355 :src="subItem.action" 355 :src="subItem.action"
356 :class="[subItem.actionClass || 'success--text']" 356 :class="[subItem.actionClass || 'success--text']"
357 /> 357 />
358 </v-list-tile-action> 358 </v-list-tile-action>
359 <v-list-tile-content> 359 <v-list-tile-content>
360 <v-list-tile-title class="body-2"> 360 <v-list-tile-title class="body-2">
361 <span>{{ subItem.title }}</span> 361 <span>{{ subItem.title }}</span>
362 </v-list-tile-title> 362 </v-list-tile-title>
363 </v-list-tile-content> 363 </v-list-tile-content>
364 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 364 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
365 </v-list-tile> 365 </v-list-tile>
366 </template> 366 </template>
367 </v-list-group> 367 </v-list-group>
368 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 368 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
369 <v-divider v-else-if="item.divider" :key="i"></v-divider> 369 <v-divider v-else-if="item.divider" :key="i"></v-divider>
370 <!--top-level link--> 370 <!--top-level link-->
371 <v-list-tile 371 <v-list-tile
372 v-else 372 v-else
373 ripple="ripple" 373 ripple="ripple"
374 :disabled="item.disabled" 374 :disabled="item.disabled"
375 :target="item.target" 375 :target="item.target"
376 rel="noopener" 376 rel="noopener"
377 :key="item.name" 377 :key="item.name"
378 :to="!item.href ? { name: item.name } : null" 378 :to="!item.href ? { name: item.name } : null"
379 :href="item.href" 379 :href="item.href"
380 > 380 >
381 <!-- <a :href="item.path"> --> 381 <!-- <a :href="item.path"> -->
382 <v-list-tile-action v-if="item.icon"> 382 <v-list-tile-action v-if="item.icon">
383 <img :src="item.icon" width="22" alt="icons" /> 383 <img :src="item.icon" width="22" alt="icons" />
384 </v-list-tile-action> 384 </v-list-tile-action>
385 <v-list-tile-content class="pt-2"> 385 <v-list-tile-content class="pt-2">
386 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 386 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
387 </v-list-tile-content> 387 </v-list-tile-content>
388 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 388 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
389 <v-list-tile-action v-if="item.subAction"> 389 <v-list-tile-action v-if="item.subAction">
390 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 390 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
391 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 391 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
392 </v-list-tile-action> 392 </v-list-tile-action>
393 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 393 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
394 <!-- </a> --> 394 <!-- </a> -->
395 </v-list-tile> 395 </v-list-tile>
396 </template> 396 </template>
397
398 <!-- NAVIGATION DRAWER IF ROLE IS TEACHER -->
397 <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'"> 399 <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">
398 <!-- {{menus}} --> 400 <!-- {{menus}} -->
399 <!--group with subitems--> 401 <!--group with subitems-->
400 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> 402 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
401 <v-list-tile slot="activator" ripple="ripple"> 403 <v-list-tile slot="activator" ripple="ripple">
402 <v-list-tile-action v-if="item.icon"> 404 <v-list-tile-action v-if="item.icon">
403 <img :src="item.icon" width="22" alt="icons" /> 405 <img :src="item.icon" width="22" alt="icons" />
404 </v-list-tile-action> 406 </v-list-tile-action>
405 <v-list-tile-content> 407 <v-list-tile-content>
406 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 408 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
407 </v-list-tile-content> 409 </v-list-tile-content>
408 </v-list-tile> 410 </v-list-tile>
409 <template v-for="(subItem, i) in item.items"> 411 <template v-for="(subItem, i) in item.items">
410 <!--sub group--> 412 <!--sub group-->
411 <v-list-group 413 <v-list-group
412 v-if="subItem.items" 414 v-if="subItem.items"
413 :key="subItem.name" 415 :key="subItem.name"
414 :group="subItem.group" 416 :group="subItem.group"
415 sub-group="sub-group" 417 sub-group="sub-group"
416 > 418 >
417 <v-list-tile slot="activator" ripple="ripple"> 419 <v-list-tile slot="activator" ripple="ripple">
418 <v-list-tile-content> 420 <v-list-tile-content>
419 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 421 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
420 </v-list-tile-content> 422 </v-list-tile-content>
421 </v-list-tile> 423 </v-list-tile>
422 <v-list-tile 424 <v-list-tile
423 v-for="(grand, i) in subItem.children" 425 v-for="(grand, i) in subItem.children"
424 :key="i" 426 :key="i"
425 :to="genChildTarget(item, grand)" 427 :to="genChildTarget(item, grand)"
426 :href="grand.href" 428 :href="grand.href"
427 ripple="ripple" 429 ripple="ripple"
428 > 430 >
429 <v-list-tile-content> 431 <v-list-tile-content>
430 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 432 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
431 </v-list-tile-content> 433 </v-list-tile-content>
432 </v-list-tile> 434 </v-list-tile>
433 </v-list-group> 435 </v-list-group>
434 <!--child item--> 436 <!--child item-->
435 <v-list-tile 437 <v-list-tile
436 v-else 438 v-else
437 :key="i" 439 :key="i"
438 :to="genChildTarget(item, subItem)" 440 :to="genChildTarget(item, subItem)"
439 :href="subItem.href" 441 :href="subItem.href"
440 :disabled="subItem.disabled" 442 :disabled="subItem.disabled"
441 :target="subItem.target" 443 :target="subItem.target"
442 ripple="ripple" 444 ripple="ripple"
443 > 445 >
444 <v-list-tile-action v-if="subItem.action"> 446 <v-list-tile-action v-if="subItem.action">
445 <img 447 <img
446 width="30" 448 width="30"
447 :src="subItem.action" 449 :src="subItem.action"
448 :class="[subItem.actionClass || 'success--text']" 450 :class="[subItem.actionClass || 'success--text']"
449 /> 451 />
450 </v-list-tile-action> 452 </v-list-tile-action>
451 <v-list-tile-content> 453 <v-list-tile-content>
452 <v-list-tile-title class="body-2"> 454 <v-list-tile-title class="body-2">
453 <span>{{ subItem.title }}</span> 455 <span>{{ subItem.title }}</span>
454 </v-list-tile-title> 456 </v-list-tile-title>
455 </v-list-tile-content> 457 </v-list-tile-content>
456 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 458 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
457 </v-list-tile> 459 </v-list-tile>
458 </template> 460 </template>
459 </v-list-group> 461 </v-list-group>
460 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 462 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
461 <v-divider v-else-if="item.divider" :key="i"></v-divider> 463 <v-divider v-else-if="item.divider" :key="i"></v-divider>
462 <!--top-level link--> 464 <!--top-level link-->
463 <v-list-tile 465 <v-list-tile
464 v-else 466 v-else
465 ripple="ripple" 467 ripple="ripple"
466 :disabled="item.disabled" 468 :disabled="item.disabled"
467 :target="item.target" 469 :target="item.target"
468 rel="noopener" 470 rel="noopener"
469 :key="item.name" 471 :key="item.name"
470 :to="!item.href ? { name: item.name } : null" 472 :to="!item.href ? { name: item.name } : null"
471 :href="item.href" 473 :href="item.href"
472 > 474 >
473 <!-- <a :href="item.path"> --> 475 <!-- <a :href="item.path"> -->
474 <v-list-tile-action v-if="item.icon"> 476 <v-list-tile-action v-if="item.icon">
475 <img :src="item.icon" width="22" alt="icons" /> 477 <img :src="item.icon" width="22" alt="icons" />
476 </v-list-tile-action> 478 </v-list-tile-action>
477 <v-list-tile-content class="pt-2"> 479 <v-list-tile-content class="pt-2">
478 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 480 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
479 </v-list-tile-content> 481 </v-list-tile-content>
480 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 482 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
481 <v-list-tile-action v-if="item.subAction"> 483 <v-list-tile-action v-if="item.subAction">
482 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 484 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
483 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 485 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
484 </v-list-tile-action> 486 </v-list-tile-action>
485 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 487 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
486 <!-- </a> --> 488 <!-- </a> -->
487 </v-list-tile> 489 </v-list-tile>
488 </template> 490 </template>
491
492 <!-- NAVIGATION DRAWER IF ROLE IS PARENT -->
489 <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'"> 493 <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'">
490 <!-- {{menus}} --> 494 <!-- {{menus}} -->
491 <!--group with subitems--> 495 <!--group with subitems-->
492 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action"> 496 <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
493 <v-list-tile slot="activator" ripple="ripple"> 497 <v-list-tile slot="activator" ripple="ripple">
494 <v-list-tile-action v-if="item.icon"> 498 <v-list-tile-action v-if="item.icon">
495 <img :src="item.icon" width="22" alt="icons" /> 499 <img :src="item.icon" width="22" alt="icons" />
496 </v-list-tile-action> 500 </v-list-tile-action>
497 <v-list-tile-content> 501 <v-list-tile-content>
498 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 502 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
499 </v-list-tile-content> 503 </v-list-tile-content>
500 </v-list-tile> 504 </v-list-tile>
501 <template v-for="(subItem, i) in item.items"> 505 <template v-for="(subItem, i) in item.items">
502 <!--sub group--> 506 <!--sub group-->
503 <v-list-group 507 <v-list-group
504 v-if="subItem.items" 508 v-if="subItem.items"
505 :key="subItem.name" 509 :key="subItem.name"
506 :group="subItem.group" 510 :group="subItem.group"
507 sub-group="sub-group" 511 sub-group="sub-group"
508 > 512 >
509 <v-list-tile slot="activator" ripple="ripple"> 513 <v-list-tile slot="activator" ripple="ripple">
510 <v-list-tile-content> 514 <v-list-tile-content>
511 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 515 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
512 </v-list-tile-content> 516 </v-list-tile-content>
513 </v-list-tile> 517 </v-list-tile>
514 <v-list-tile 518 <v-list-tile
515 v-for="(grand, i) in subItem.children" 519 v-for="(grand, i) in subItem.children"
516 :key="i" 520 :key="i"
517 :to="genChildTarget(item, grand)" 521 :to="genChildTarget(item, grand)"
518 :href="grand.href" 522 :href="grand.href"
519 ripple="ripple" 523 ripple="ripple"
520 > 524 >
521 <v-list-tile-content> 525 <v-list-tile-content>
522 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 526 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
523 </v-list-tile-content> 527 </v-list-tile-content>
524 </v-list-tile> 528 </v-list-tile>
525 </v-list-group> 529 </v-list-group>
526 <!--child item--> 530 <!--child item-->
527 <v-list-tile 531 <v-list-tile
528 v-else 532 v-else
529 :key="i" 533 :key="i"
530 :to="genChildTarget(item, subItem)" 534 :to="genChildTarget(item, subItem)"
531 :href="subItem.href" 535 :href="subItem.href"
532 :disabled="subItem.disabled" 536 :disabled="subItem.disabled"
533 :target="subItem.target" 537 :target="subItem.target"
534 ripple="ripple" 538 ripple="ripple"
535 > 539 >
536 <v-list-tile-action v-if="subItem.action"> 540 <v-list-tile-action v-if="subItem.action">
537 <img 541 <img
538 width="30" 542 width="30"
539 :src="subItem.action" 543 :src="subItem.action"
540 :class="[subItem.actionClass || 'success--text']" 544 :class="[subItem.actionClass || 'success--text']"
541 /> 545 />
542 </v-list-tile-action> 546 </v-list-tile-action>
543 <v-list-tile-content> 547 <v-list-tile-content>
544 <v-list-tile-title class="body-2"> 548 <v-list-tile-title class="body-2">
545 <span>{{ subItem.title }}</span> 549 <span>{{ subItem.title }}</span>
546 </v-list-tile-title> 550 </v-list-tile-title>
547 </v-list-tile-content> 551 </v-list-tile-content>
548 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 552 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
549 </v-list-tile> 553 </v-list-tile>
550 </template> 554 </template>
551 </v-list-group> 555 </v-list-group>
552 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 556 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
553 <v-divider v-else-if="item.divider" :key="i"></v-divider> 557 <v-divider v-else-if="item.divider" :key="i"></v-divider>
554 <!--top-level link--> 558 <!--top-level link-->
555 <v-list-tile 559 <v-list-tile
556 v-else 560 v-else
557 ripple="ripple" 561 ripple="ripple"
558 :disabled="item.disabled" 562 :disabled="item.disabled"
559 :target="item.target" 563 :target="item.target"
560 rel="noopener" 564 rel="noopener"
561 :key="item.name" 565 :key="item.name"
562 :to="!item.href ? { name: item.name } : null" 566 :to="!item.href ? { name: item.name } : null"
563 :href="item.href" 567 :href="item.href"
564 > 568 >
565 <!-- <a :href="item.path"> --> 569 <!-- <a :href="item.path"> -->
566 <v-list-tile-action v-if="item.icon"> 570 <v-list-tile-action v-if="item.icon">
567 <img :src="item.icon" width="22" alt="icons" /> 571 <img :src="item.icon" width="22" alt="icons" />
568 </v-list-tile-action> 572 </v-list-tile-action>
573 <v-list-tile-action v-if="item.Vicon">
574 <div style="position: relative; top: 3px;">
575 <v-icon color="white" size="25">{{item.Vicon}}</v-icon>
576 </div>
577 </v-list-tile-action>
569 <v-list-tile-content class="pt-2"> 578 <v-list-tile-content class="pt-2">
570 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 579 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
571 </v-list-tile-content> 580 </v-list-tile-content>
572 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 581 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
573 <v-list-tile-action v-if="item.subAction"> 582 <v-list-tile-action v-if="item.subAction">
574 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> --> 583 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
575 <!-- <img :src="item.icon" width="40" alt="icons" /> --> 584 <!-- <img :src="item.icon" width="40" alt="icons" /> -->
576 </v-list-tile-action> 585 </v-list-tile-action>
577 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 586 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
578 <!-- </a> --> 587 <!-- </a> -->
579 </v-list-tile> 588 </v-list-tile>
580 </template> 589 </template>
581 </v-list> 590 </v-list>
582 <!-- </vue-perfect-scrollbar> --> 591 <!-- </vue-perfect-scrollbar> -->
583 </v-navigation-drawer> 592 </v-navigation-drawer>
584 </template> 593 </template>
585 <script> 594 <script>
586 import menu from "@/api/menu"; 595 import menu from "@/api/menu";
587 import VuePerfectScrollbar from "vue-perfect-scrollbar"; 596 import VuePerfectScrollbar from "vue-perfect-scrollbar";
588 export default { 597 export default {
589 name: "app-drawer", 598 name: "app-drawer",
590 components: { 599 components: {
591 VuePerfectScrollbar 600 VuePerfectScrollbar
592 }, 601 },
593 props: { 602 props: {
594 expanded: { 603 expanded: {
595 type: Boolean, 604 type: Boolean,
596 default: true 605 default: true
597 } 606 }
598 }, 607 },
599 data: () => ({ 608 data: () => ({
600 mini: false, 609 mini: false,
601 drawer: true, 610 drawer: true,
602 menus: [], 611 menus: [],
603 menuSchool: [], 612 menuSchool: [],
604 menuTeacher: [], 613 menuTeacher: [],
605 menuAccount: [], 614 menuAccount: [],
606 menuLibrarian: [], 615 menuLibrarian: [],
607 menuParent: [], 616 menuParent: [],
608 schoolRole: "", 617 schoolRole: "",
609 role: "", 618 role: "",
610 scrollSettings: { 619 scrollSettings: {
611 maxScrollbarLength: 160 620 maxScrollbarLength: 160
612 } 621 }
613 }), 622 }),
614 computed: { 623 computed: {
615 computeGroupActive() { 624 computeGroupActive() {
616 return true; 625 return true;
617 }, 626 },
618 computeLogo() { 627 computeLogo() {
619 return "/static/icon.png"; 628 return "/static/icon.png";
620 }, 629 },
621 630
622 sideToolbarColor() { 631 sideToolbarColor() {
623 return this.$vuetify.options.extra.sideNav; 632 return this.$vuetify.options.extra.sideNav;
624 } 633 }
625 }, 634 },
626 created() { 635 created() {
627 this.schoolRole = this.$store.state.schoolRole; 636 this.schoolRole = this.$store.state.schoolRole;
628 this.role = this.$store.state.role; 637 this.role = this.$store.state.role;
629 this.menus = menu.adminMenu; 638 this.menus = menu.adminMenu;
630 this.menuSchool = menu.schoolMenu; 639 this.menuSchool = menu.schoolMenu;
631 this.menuTeacher = menu.teacherMenu; 640 this.menuTeacher = menu.teacherMenu;
632 this.menuAccount = menu.accountMenu; 641 this.menuAccount = menu.accountMenu;
633 this.menuLibrarian = menu.libraryMenu; 642 this.menuLibrarian = menu.libraryMenu;
634 this.menuParent = menu.parentMenu; 643 this.menuParent = menu.parentMenu;
635 // console.log("this.$route.name", this.$route.name); 644 // console.log("this.$route.name", this.$route.name);
636 // if (this.$route.name === "School") { 645 // if (this.$route.name === "School") {
637 // localStorage.setItem("SchoolName", this.$route.name); 646 // localStorage.setItem("SchoolName", this.$route.name);
638 // } 647 // }
639 // if (this.$route.name === "Dashboard") { 648 // if (this.$route.name === "Dashboard") {
640 // localStorage.setItem("AdminName", this.$route.name); 649 // localStorage.setItem("AdminName", this.$route.name);
641 // } 650 // }
642 // console.log("SN", localStorage.getItem("SchoolName")); 651 // console.log("SN", localStorage.getItem("SchoolName"));
643 // if (localStorage.getItem("SchoolName") === "School") { 652 // if (localStorage.getItem("SchoolName") === "School") {
644 // if (this.$store.state.schoolRole === "SUPERADMIN") { 653 // if (this.$store.state.schoolRole === "SUPERADMIN") {
645 // console.log("rolA", this.$store.state.schoolRole); 654 // console.log("rolA", this.$store.state.schoolRole);
646 // if (this.$store.state.schoolRole === "SUPERADMIN") { 655 // if (this.$store.state.schoolRole === "SUPERADMIN") {
647 // } 656 // }
648 // console.log("this.menus", this.menus); 657 // console.log("this.menus", this.menus);
649 // } 658 // }
650 // // } 659 // // }
651 // // console.log("AN", localStorage.getItem("AdminName")); 660 // // console.log("AN", localStorage.getItem("AdminName"));
652 // // if (localStorage.getItem("AdminName") === "Dashboard") { 661 // // if (localStorage.getItem("AdminName") === "Dashboard") {
653 // if (this.$store.state.role === "ADMIN") { 662 // if (this.$store.state.role === "ADMIN") {
654 // console.log("role", this.$store.state.role); 663 // console.log("role", this.$store.state.role);
655 // else if (this.$store.state.role === "ADMIN") { 664 // else if (this.$store.state.role === "ADMIN") {
656 // } 665 // }
657 // // } 666 // // }
658 // } 667 // }
659 668
660 // else if (this.$store.state.role === "LIBRARIAN") { 669 // else if (this.$store.state.role === "LIBRARIAN") {
661 // this.menus = menu.libraryMenu; 670 // this.menus = menu.libraryMenu;
662 // } else if (this.$store.state.role === "ACCOUNTANT") { 671 // } else if (this.$store.state.role === "ACCOUNTANT") {
663 // this.menus = menu.accountMenu; 672 // this.menus = menu.accountMenu;
664 // } 673 // }
665 window.getApp.$on("APP_DRAWER_TOGGLED", () => { 674 window.getApp.$on("APP_DRAWER_TOGGLED", () => {
666 this.drawer = !this.drawer; 675 this.drawer = !this.drawer;
667 }); 676 });
668 }, 677 },
669 methods: { 678 methods: {
670 genChildTarget(item, subItem) { 679 genChildTarget(item, subItem) {
671 if (subItem.href) return; 680 if (subItem.href) return;
672 if (subItem.component) { 681 if (subItem.component) {
673 return { 682 return {
674 name: subItem.component 683 name: subItem.component
675 }; 684 };
676 } 685 }
677 return { name: `${item.group}/${subItem.name}` }; 686 return { name: `${item.group}/${subItem.name}` };
678 } 687 }
679 }, 688 },
680 mounted() { 689 mounted() {
681 if (this.$store.state.role === "ADMIN") { 690 if (this.$store.state.role === "ADMIN") {
682 this.token = this.$store.state.token; 691 this.token = this.$store.state.token;
683 } 692 }
684 if (this.$store.state.schoolRole === "SUPERADMIN") { 693 if (this.$store.state.schoolRole === "SUPERADMIN") {
685 this.token = this.$store.schoolToken; 694 this.token = this.$store.schoolToken;
686 } 695 }
687 if (this.$store.state.role === "TEACHER") { 696 if (this.$store.state.role === "TEACHER") {
688 this.token = this.$store.state.token; 697 this.token = this.$store.state.token;
689 } 698 }
690 if (this.$store.state.role === "ACCOUNTANT") { 699 if (this.$store.state.role === "ACCOUNTANT") {
691 this.token = this.$store.state.token; 700 this.token = this.$store.state.token;
692 } 701 }
693 if (this.$store.state.role === "LIBRARIAN") { 702 if (this.$store.state.role === "LIBRARIAN") {
694 this.token = this.$store.state.token; 703 this.token = this.$store.state.token;
695 } 704 }
696 if (this.$store.state.role === "PARENT") { 705 if (this.$store.state.role === "PARENT") {
697 this.token = this.$store.state.token; 706 this.token = this.$store.state.token;
698 } 707 }
699 } 708 }
700 }; 709 };
701 </script> 710 </script>
702 711
703 712
704 <style lang="stylus"> 713 <style lang="stylus">
705 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 714 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
706 #appDrawer { 715 #appDrawer {
707 overflow: hidden; 716 overflow: hidden;
708 717
709 .drawer-menu--scroll { 718 .drawer-menu--scroll {
710 height: calc(100vh - 48px); 719 height: calc(100vh - 48px);
711 overflow: auto; 720 overflow: auto;
712 } 721 }
713 } 722 }
714 723
715 .v-list__group__items--no-action .v-list__tile { 724 .v-list__group__items--no-action .v-list__tile {
716 padding-left: 72px !important; 725 padding-left: 72px !important;
717 } 726 }
718 727
719 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 728 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
720 height: 54px; 729 height: 54px;
721 font-size: 17px; 730 font-size: 17px;
722 } 731 }
723 732
724 .v-list__tile__action { 733 .v-list__tile__action {
725 min-width: 36px; 734 min-width: 36px;
726 } 735 }
727 736
728 // .theme--light .v-icon, .application .theme--light.v-icon { 737 // .theme--light .v-icon, .application .theme--light.v-icon {
729 // color: #f1f1f1; 738 // color: #f1f1f1;
730 // } 739 // }
731 .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y { 740 .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
732 background-color: #f5f5f5; 741 background-color: #f5f5f5;
733 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))); 742 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)));
734 width: 8px !important; 743 width: 8px !important;
735 } 744 }
736 745
737 .ps>.ps__scrollbar-y-rail { 746 .ps>.ps__scrollbar-y-rail {
738 width: 0px !important; 747 width: 0px !important;
739 } 748 }
740 749
741 .ps:hover > .ps__scrollbar-y-rail:hover { 750 .ps:hover > .ps__scrollbar-y-rail:hover {
742 background-color: #5f2171 !important; 751 background-color: #5f2171 !important;
743 opacity: 0.9; 752 opacity: 0.9;
744 } 753 }
745 754
746 .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { 755 .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
747 width: 8px !important; 756 width: 8px !important;
748 background-color: #f5f5f5; 757 background-color: #f5f5f5;
749 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))); 758 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)));
750 } 759 }
751 760
752 .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { 761 .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
753 // background-color: #5f2171 !important; 762 // background-color: #5f2171 !important;
754 width: 8px !important; 763 width: 8px !important;
755 background-color: #f5f5f5; 764 background-color: #f5f5f5;
756 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))); 765 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)));
757 } 766 }
758 767
759 .v-list__tile--active { 768 .v-list__tile--active {
760 color: #71d9ea !important; 769 color: #71d9ea !important;
761 } 770 }
762 771
763 .my-1 { 772 .my-1 {
764 text-align: left !important; 773 text-align: left !important;
765 } 774 }
766 775
767 .title { 776 .title {
768 line-height: 2 !important; 777 line-height: 2 !important;
769 } 778 }
770 779
771 // .v-list__tile--hover { 780 // .v-list__tile--hover {
772 // color: white !important; 781 // color: white !important;
773 // background: red !important; 782 // background: red !important;
774 // } 783 // }
775 .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 { 784 .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 {
776 background: #7f62f8 !important; 785 background: #7f62f8 !important;
777 color: #71d9ea !important; 786 color: #71d9ea !important;
778 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; 787 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;
779 // border-radius: 12px !important; 788 // border-radius: 12px !important;
780 } 789 }
781 790
782 @media screen and (max-width: 420px) { 791 @media screen and (max-width: 420px) {
783 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 792 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
784 font-size: 14px; 793 font-size: 14px;
785 } 794 }
786 795
787 .imgLogo { 796 .imgLogo {
788 height: 32px; 797 height: 32px;
789 width: 120px; 798 width: 120px;
790 } 799 }
791 } 800 }
792 </style> 801 </style>
793 802
794 803
795 <style scoped> 804 <style scoped>
796 .theme--light .v-icon, 805 .theme--light .v-icon,
797 .application .theme--light.v-icon { 806 .application .theme--light.v-icon {
798 color: #39b982; 807 color: #39b982;
799 } 808 }
800 .side-bar-color { 809 .side-bar-color {
801 background: #827bfa !important; 810 background: #827bfa !important;
802 /* border-top-right-radius: 74px !important; */ 811 /* border-top-right-radius: 74px !important; */
803 } 812 }
804 .v-navigation-drawer--fixed { 813 .v-navigation-drawer--fixed {
805 position: absolute !important; 814 position: absolute !important;
806 815
807 min-height: calc(2000px - 64px - 50px - 81px) !important; 816 min-height: calc(2000px - 64px - 50px - 81px) !important;
808 /* max-height: inherit !important; */ 817 /* max-height: inherit !important; */
809 } 818 }
810 .hover:hover { 819 .hover:hover {
811 color: red !important; 820 color: red !important;
812 background: red !important; 821 background: red !important;
813 } 822 }
814 </style> 823 </style>
815 824
816 825
817 826
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @e91641f
1 <template> 1 <template>
2 <v-toolbar flat class="white" fixed app> 2 <v-toolbar flat class="white" fixed app>
3 <v-toolbar-title> 3 <v-toolbar-title>
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
7 <v-flex xs12 class="white"> 7 <v-flex xs12 class="white">
8 <!-- <v-text-field 8 <!-- <v-text-field
9 flat 9 flat
10 append-icon="search" 10 append-icon="search"
11 label="Seacrh" 11 label="Seacrh"
12 class="pl-3" 12 class="pl-3"
13 color="white" 13 color="white"
14 @input.native="emitSearch" 14 @input.native="emitSearch"
15 type="text" 15 type="text"
16 dark 16 dark
17 ></v-text-field>--> 17 ></v-text-field>-->
18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title> 18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
19 </v-flex> 19 </v-flex>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn> 21 <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn>
22 <!-- <v-toolbar-items class="hidden-sm-and-down"> 22 <!-- <v-toolbar-items class="hidden-sm-and-down">
23 <v-icon class="header-icon">notifications_none</v-icon> 23 <v-icon class="header-icon">notifications_none</v-icon>
24 </v-toolbar-items>--> 24 </v-toolbar-items>-->
25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
26 <v-btn icon large flat slot="activator"> 26 <v-btn icon large flat slot="activator">
27 <v-avatar size="26"> 27 <v-avatar size="26">
28 <img src="/static/icon/setting1.png" alt="icon" /> 28 <img src="/static/icon/setting1.png" alt="icon" />
29 </v-avatar> 29 </v-avatar>
30 </v-btn> 30 </v-btn>
31 <v-list class="pa-0"> 31 <v-list class="pa-0">
32 <v-list-tile 32 <v-list-tile
33 v-for="(item,index) in items" 33 v-for="(item,index) in items"
34 :to="!item.href ? { name: item.name } : null" 34 :to="!item.href ? { name: item.name } : null"
35 :href="item.href" 35 :href="item.href"
36 @click="item.click" 36 @click="item.click"
37 ripple="ripple" 37 ripple="ripple"
38 :disabled="item.disabled" 38 :disabled="item.disabled"
39 :target="item.target" 39 :target="item.target"
40 rel="noopener" 40 rel="noopener"
41 :key="index" 41 :key="index"
42 > 42 >
43 <v-list-tile-action v-if="item.icon"> 43 <v-list-tile-action v-if="item.icon">
44 <v-icon class="iconSize">{{ item.icon }}</v-icon> 44 <v-icon class="iconSize">{{ item.icon }}</v-icon>
45 </v-list-tile-action> 45 </v-list-tile-action>
46 <v-list-tile-content> 46 <v-list-tile-content>
47 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 47 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
48 </v-list-tile-content> 48 </v-list-tile-content>
49 </v-list-tile> 49 </v-list-tile>
50 </v-list> 50 </v-list>
51 </v-menu> 51 </v-menu>
52 </v-toolbar> 52 </v-toolbar>
53 </template> 53 </template>
54 <script> 54 <script>
55 import http from "@/Services/http.js"; 55 import http from "@/Services/http.js";
56 56
57 export default { 57 export default {
58 name: "app-toolbar", 58 name: "app-toolbar",
59 data: () => ({ 59 data: () => ({
60 userName: "", 60 userName: "",
61 search: "", 61 search: "",
62 userData: {}, 62 userData: {},
63 items: [ 63 items: [
64 { 64 {
65 icon: "account_circle", 65 icon: "account_circle",
66 href: "/resetPassword", 66 href: "/resetPassword",
67 title: "Change Password", 67 title: "Change Password",
68 click: e => { 68 click: e => {
69 console.log(e); 69 console.log(e);
70 } 70 }
71 }, 71 },
72 // { 72 // {
73 // icon: 'settings', 73 // icon: 'settings',
74 // href: '#', 74 // href: '#',
75 // title: 'Settings', 75 // title: 'Settings',
76 // click: (e) => { 76 // click: (e) => {
77 // console.log(e); 77 // console.log(e);
78 // } 78 // }
79 // }, 79 // },
80 { 80 {
81 icon: "lock", 81 icon: "lock",
82 href: "#", 82 href: "#",
83 title: "Logout", 83 title: "Logout",
84 click: e => { 84 click: e => {
85 window.getApp.$emit("APP_LOGOUT"); 85 window.getApp.$emit("APP_LOGOUT");
86 } 86 }
87 } 87 }
88 ], 88 ],
89 adminRole: "", 89 adminRole: "",
90 SchoolRole: "" 90 SchoolRole: ""
91 }), 91 }),
92 computed: { 92 computed: {
93 toolbarColor() { 93 toolbarColor() {
94 return this.$vuetify.options.extra.mainNav; 94 return this.$vuetify.options.extra.mainNav;
95 } 95 }
96 }, 96 },
97 mounted() { 97 mounted() {
98 // this.getUserData(); 98 // this.getUserData();
99 this.adminRole = this.$store.state.role; 99 this.adminRole = this.$store.state.role;
100 if (this.adminRole == "PARENT") { 100 /* push something in the settings option */
101 var obj = {}; 101 // if (this.adminRole == "PARENT") {
102 obj = { 102 // var obj = {};
103 icon: "face", 103 // obj = {
104 href: "/changeStudents", 104 // icon: "face",
105 title: "Change Student", 105 // href: "/changeStudents",
106 click: e => { 106 // title: "Change Student",
107 console.log(e); 107 // click: e => {
108 } 108 // console.log(e);
109 }; 109 // }
110 this.items.splice(0, 0, obj); 110 // };
111 } 111 // this.items.splice(0, 0, obj);
112 // }
112 // console.log("this.adminRole", this.adminRole); 113 // console.log("this.adminRole", this.adminRole);
113 this.SchoolRole = this.$store.state.schoolRole; 114 this.SchoolRole = this.$store.state.schoolRole;
114 }, 115 },
115 methods: { 116 methods: {
116 // emitSearch(ev) { 117 // emitSearch(ev) {
117 // this.$root.$emit("app:search", ev.target.value); 118 // this.$root.$emit("app:search", ev.target.value);
118 // }, 119 // },
119 handleDrawerToggle() { 120 handleDrawerToggle() {
120 window.getApp.$emit("APP_DRAWER_TOGGLED"); 121 window.getApp.$emit("APP_DRAWER_TOGGLED");
121 }, 122 },
122 handleFullScreen() { 123 handleFullScreen() {
123 Util.toggleFullScreen(); 124 Util.toggleFullScreen();
124 }, 125 },
125 getUserData() { 126 getUserData() {
126 http() 127 http()
127 .get("/getParticularUserDetail", { 128 .get("/getParticularUserDetail", {
128 // headers: { 129 // headers: {
129 // Authorization: "Bearer " + this.$store.state.token 130 // Authorization: "Bearer " + this.$store.state.token
130 // } 131 // }
131 }) 132 })
132 .then(response => { 133 .then(response => {
133 this.userData = response.data.data; 134 this.userData = response.data.data;
134 }) 135 })
135 .catch(error => { 136 .catch(error => {
136 // if (error.response.status === 401) { 137 // if (error.response.status === 401) {
137 // this.$router.replace({ path: "/" }); 138 // this.$router.replace({ path: "/" });
138 // this.$store.dispatch("setToken", null); 139 // this.$store.dispatch("setToken", null);
139 // this.$store.dispatch("Id", null); 140 // this.$store.dispatch("Id", null);
140 // } 141 // }
141 }); 142 });
142 }, 143 },
143 goToSchool() { 144 goToSchool() {
144 console.log("click"); 145 console.log("click");
145 if (this.$store.state.role === "ADMIN") { 146 if (this.$store.state.role === "ADMIN") {
146 this.$store.dispatch("Role", null); 147 this.$store.dispatch("Role", null);
147 this.$store.dispatch("setToken", null); 148 this.$store.dispatch("setToken", null);
148 this.$router.push("/schooldashboard"); 149 this.$router.push("/schooldashboard");
149 setTimeout(() => { 150 setTimeout(() => {
150 location.reload(); 151 location.reload();
151 }, 1000); 152 }, 1000);
152 } 153 }
153 } 154 }
154 } 155 }
155 }; 156 };
156 </script> 157 </script>
157 <style> 158 <style>
158 .v-icon { 159 .v-icon {
159 font-size: 30px; 160 font-size: 30px;
160 } 161 }
161 .fixcolors { 162 .fixcolors {
162 background: #444b54 !important; 163 background: #444b54 !important;
163 } 164 }
164 165
165 @media screen and (min-width: 1270px) { 166 @media screen and (min-width: 1270px) {
166 .hide { 167 .hide {
167 display: none; 168 display: none;
168 } 169 }
169 /* } 170 /* }
170 @media screen and (max-width: 962px) { 171 @media screen and (max-width: 962px) {
171 .imglogo{ 172 .imglogo{
172 position: absolute; 173 position: absolute;
173 top: 13px; 174 top: 13px;
174 left: 13px !important; 175 left: 13px !important;
175 width: 70px; 176 width: 70px;
176 height: 24px; 177 height: 24px;
177 } */ 178 } */
178 } 179 }
179 @media screen and (max-width: 420px) { 180 @media screen and (max-width: 420px) {
180 .v-list__tile { 181 .v-list__tile {
181 font-size: 14px; 182 font-size: 14px;
182 padding: 0 10px; 183 padding: 0 10px;
183 } 184 }
184 .name { 185 .name {
185 font-size: 15px; 186 font-size: 15px;
186 } 187 }
187 } 188 }
188 </style> 189 </style>
189 190
src/pages/Common/CoursesSideBar.vue
Diff comments   View file @e91641f
File was created 1 <template>
2 <div>
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 <v-container class="pt-0">
23 <div class="side-bar-color font-weight-bold title">Courses</div>
24
25 <div v-for="(course,index) in courseData">
26 <v-btn
27 flat
28 class="subheading text-xs-start justify-left"
29 style="cursor: pointer;"
30 block
31 @click="routeToCourseDetails(course._id)"
32 >
33 <div style="width: 100%;text-align: left;">
34 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
35 {{course.courseName}}
36 </div>
37 </v-btn>
38 </div>
39 </v-container>
40 </div>
41 </template>
42 <script>
43 import AllApiCalls from "@/Services/AllApiCalls.js";
44 export default {
45 mixins: [AllApiCalls],
46 data() {
47 return {};
48 },
49 methods: {
50 async routeToCourseDetails(courseId) {
51 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
52 let response = await this.getParticularCourseDetail(courseId);
53
54 /* If the response is null then dont route */
55 if (response.data.data.length > 0) {
56 this.$router.push({
57 name: "Course Details",
58 query: { courseId: courseId }
59 });
60 } else {
61 this.seeSnackbar("No Data Available", "warning");
62 }
63 }
64 },
65 async created() {
66 /* getStudentCourses - to get courseData - defined in GetApis.js*/
67 await this.getStudentCourses({
68 classId: localStorage.getItem("parentClassId"),
69 studentId: localStorage.getItem("parentStudentId")
70 });
71 }
72 };
73 </script>
74 <style scoped>
75 .side-bar-color {
76 color: #827bfa !important;
77 /* border-top-right-radius: 74px !important; */
78 }
79 .card-border {
80 border: 1px #bdbdbd solid;
81 border-radius: 3px;
82 }
83 </style>
src/pages/Course/courseDetail.vue
Diff comments   View file @e91641f
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>
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 <!-- ****** Edit Chapter detail ****** --> 70 <!-- ****** Edit Chapter detail ****** -->
71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable> 71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>
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 size="24" class="right" @click="editChapterDetailDialog = false">cancel</v-icon> 76 <v-icon size="24" class="right" @click="editChapterDetailDialog = false">cancel</v-icon>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-card-text> 79 <v-card-text>
80 <v-layout wrap> 80 <v-layout wrap>
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 class="pt-4 subheading"> 83 <v-flex xs4 class="pt-4 subheading">
84 <label class="right">Chapter Name:</label> 84 <label class="right">Chapter Name:</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 v-model="editChapter.chapterName" 88 v-model="editChapter.chapterName"
89 placeholder="fill your Title" 89 placeholder="fill your Title"
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-flex xs12 sm12> 96 <v-flex xs12 sm12>
97 <v-layout> 97 <v-layout>
98 <v-flex xs4 class="pt-4 subheading"> 98 <v-flex xs4 class="pt-4 subheading">
99 <label class="right">Description:</label> 99 <label class="right">Description:</label>
100 </v-flex> 100 </v-flex>
101 <v-flex xs8 sm6 class="ml-3"> 101 <v-flex xs8 sm6 class="ml-3">
102 <v-text-field 102 <v-text-field
103 placeholder="fill your Description" 103 placeholder="fill your Description"
104 v-model="editChapter.description" 104 v-model="editChapter.description"
105 type="text" 105 type="text"
106 required 106 required
107 ></v-text-field> 107 ></v-text-field>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> 112 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
113 <v-layout 113 <v-layout
114 wrap 114 wrap
115 v-for="(editChapterPoint,index) in editChapter.chapterPoints" 115 v-for="(editChapterPoint,index) in editChapter.chapterPoints"
116 :key="index" 116 :key="index"
117 > 117 >
118 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 118 <v-flex xs12 sm12 md4 class="pt-4 subheading">
119 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 119 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
120 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 120 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
121 </v-flex> 121 </v-flex>
122 <v-layout> 122 <v-layout>
123 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 123 <v-flex xs10 sm10 sm5 md9 class="ml-3">
124 <v-text-field :value="editChapterPoint" type="text" required></v-text-field> 124 <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
125 </v-flex> 125 </v-flex>
126 <v-flex xs2 class="pt-4"> 126 <v-flex xs2 class="pt-4">
127 <v-icon @click="deleteUrl(index)">cancel</v-icon> 127 <v-icon @click="deleteUrl(index)">cancel</v-icon>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-layout> 130 </v-layout>
131 </v-flex>--> 131 </v-flex>-->
132 <v-flex xs12> 132 <v-flex xs12>
133 <div v-for="(updateImage,index) in updates" :key="index"> 133 <div v-for="(updateImage,index) in updates" :key="index">
134 <v-layout wrap> 134 <v-layout wrap>
135 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 135 <v-flex xs12 sm12 md4 class="pt-4 subheading">
136 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 136 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
137 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 137 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
138 </v-flex> 138 </v-flex>
139 <v-layout> 139 <v-layout>
140 <v-flex xs10 sm12 md9 class="ml-3"> 140 <v-flex xs10 sm12 md9 class="ml-3">
141 <v-text-field 141 <v-text-field
142 v-model="updateImage.value" 142 v-model="updateImage.value"
143 placeholder="Upload new Chapter Points" 143 placeholder="Upload new Chapter Points"
144 required 144 required
145 ></v-text-field> 145 ></v-text-field>
146 </v-flex> 146 </v-flex>
147 <v-flex xs2 class="pt-4"> 147 <v-flex xs2 class="pt-4">
148 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 148 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
149 <v-icon @click="update">add_circle</v-icon> 149 <v-icon @click="update">add_circle</v-icon>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-layout> 152 </v-layout>
153 </div> 153 </div>
154 </v-flex> 154 </v-flex>
155 <v-layout> 155 <v-layout>
156 <v-flex xs12 sm12 md11 lg11> 156 <v-flex xs12 sm12 md11 lg11>
157 <v-card-actions class="hidden-xs-only hidden-sm-only"> 157 <v-card-actions class="hidden-xs-only hidden-sm-only">
158 <v-spacer></v-spacer> 158 <v-spacer></v-spacer>
159 <v-btn 159 <v-btn
160 round 160 round
161 dark 161 dark
162 @click="saveChapter" 162 @click="saveChapter"
163 :loading="editLoading" 163 :loading="editLoading"
164 class="add-button mr-4" 164 class="add-button mr-4"
165 >Save</v-btn> 165 >Save</v-btn>
166 </v-card-actions> 166 </v-card-actions>
167 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 167 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
168 <v-spacer></v-spacer> 168 <v-spacer></v-spacer>
169 <v-btn 169 <v-btn
170 round 170 round
171 dark 171 dark
172 @click="saveChapter" 172 @click="saveChapter"
173 :loading="editLoading" 173 :loading="editLoading"
174 class="add-button" 174 class="add-button"
175 >Save</v-btn> 175 >Save</v-btn>
176 <v-spacer></v-spacer> 176 <v-spacer></v-spacer>
177 </v-card-actions> 177 </v-card-actions>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </v-card-text> 180 </v-card-text>
181 </v-card> 181 </v-card>
182 </v-dialog> 182 </v-dialog>
183 <!-- ****** Add Chapter detail ****** --> 183 <!-- ****** Add Chapter detail ****** -->
184 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable> 184 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
185 <v-card class="card-style pa-2" dark> 185 <v-card class="card-style pa-2" dark>
186 <v-layout> 186 <v-layout>
187 <v-flex xs12> 187 <v-flex xs12>
188 <label class="title text-xs-center">Add Chapter Detail</label> 188 <label class="title text-xs-center">Add Chapter Detail</label>
189 <v-icon size="24" class="right" @click="addChapterDialog = false">cancel</v-icon> 189 <v-icon size="24" class="right" @click="addChapterDialog = false">cancel</v-icon>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 <v-card-text> 192 <v-card-text>
193 <v-layout wrap> 193 <v-layout wrap>
194 <v-flex xs12 sm12> 194 <v-flex xs12 sm12>
195 <v-layout> 195 <v-layout>
196 <v-flex xs4 class="pt-4 subheading"> 196 <v-flex xs4 class="pt-4 subheading">
197 <label class="right">Chapter Name:</label> 197 <label class="right">Chapter Name:</label>
198 </v-flex> 198 </v-flex>
199 <v-flex xs8 sm6 class="ml-3"> 199 <v-flex xs8 sm6 class="ml-3">
200 <v-text-field 200 <v-text-field
201 v-model="addChapterItem.chapterName" 201 v-model="addChapterItem.chapterName"
202 placeholder="fill your Title" 202 placeholder="fill your Title"
203 type="text" 203 type="text"
204 required 204 required
205 ></v-text-field> 205 ></v-text-field>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-flex> 208 </v-flex>
209 <v-flex xs12 sm12> 209 <v-flex xs12 sm12>
210 <v-layout> 210 <v-layout>
211 <v-flex xs4 class="pt-4 subheading"> 211 <v-flex xs4 class="pt-4 subheading">
212 <label class="right">Description:</label> 212 <label class="right">Description:</label>
213 </v-flex> 213 </v-flex>
214 <v-flex xs8 sm6 class="ml-3"> 214 <v-flex xs8 sm6 class="ml-3">
215 <v-text-field 215 <v-text-field
216 placeholder="fill your Description" 216 placeholder="fill your Description"
217 v-model="addChapterItem.description" 217 v-model="addChapterItem.description"
218 type="text" 218 type="text"
219 required 219 required
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 <v-flex xs12> 225 <v-flex xs12>
226 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> 226 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
227 <v-layout> 227 <v-layout>
228 <v-flex xs4 class="pt-4 subheading"> 228 <v-flex xs4 class="pt-4 subheading">
229 <label class="right">Chapter Points:</label> 229 <label class="right">Chapter Points:</label>
230 </v-flex> 230 </v-flex>
231 <v-flex xs8 sm8 md6 class="ml-3"> 231 <v-flex xs8 sm8 md6 class="ml-3">
232 <v-text-field 232 <v-text-field
233 placeholder="fill your Chapter Points" 233 placeholder="fill your Chapter Points"
234 v-model="chapterPoints.value" 234 v-model="chapterPoints.value"
235 type="text" 235 type="text"
236 name="link" 236 name="link"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 <v-flex xs2 class="pt-4"> 240 <v-flex xs2 class="pt-4">
241 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> 241 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
242 <v-icon @click="addChapterPoint()">add_circle</v-icon> 242 <v-icon @click="addChapterPoint()">add_circle</v-icon>
243 </v-flex> 243 </v-flex>
244 </v-layout> 244 </v-layout>
245 </div> 245 </div>
246 </v-flex> 246 </v-flex>
247 <v-layout> 247 <v-layout>
248 <v-flex xs12 sm12 md11 lg11> 248 <v-flex xs12 sm12 md11 lg11>
249 <v-card-actions class="hidden-xs-only hidden-sm-only"> 249 <v-card-actions class="hidden-xs-only hidden-sm-only">
250 <v-spacer></v-spacer> 250 <v-spacer></v-spacer>
251 <v-btn 251 <v-btn
252 round 252 round
253 dark 253 dark
254 @click="submitChapter" 254 @click="submitChapter"
255 :loading="editLoading" 255 :loading="editLoading"
256 class="add-button mr-4" 256 class="add-button mr-4"
257 >Submit</v-btn> 257 >Submit</v-btn>
258 </v-card-actions> 258 </v-card-actions>
259 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 259 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
260 <v-spacer></v-spacer> 260 <v-spacer></v-spacer>
261 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 261 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
262 <v-spacer></v-spacer> 262 <v-spacer></v-spacer>
263 </v-card-actions> 263 </v-card-actions>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-card-text> 266 </v-card-text>
267 </v-card> 267 </v-card>
268 </v-dialog> 268 </v-dialog>
269 269
270 <!-- ****** PROFILE Gallery ****** --> 270 <!-- ****** PROFILE Gallery ****** -->
271 271
272 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> 272 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
273 <v-card flat class="card-style pa-3" dark> 273 <v-card flat class="card-style pa-3" dark>
274 <v-layout> 274 <v-layout>
275 <v-flex xs12> 275 <v-flex xs12>
276 <label class="title text-xs-center">View Course Detail</label> 276 <label class="title text-xs-center">View Course Detail</label>
277 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 277 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 <v-card-text> 280 <v-card-text>
281 <v-container grid-list-md> 281 <v-container grid-list-md>
282 <v-layout wrap> 282 <v-layout wrap>
283 <v-flex xs12> 283 <v-flex xs12>
284 <v-layout> 284 <v-layout>
285 <v-flex xs4 sm6> 285 <v-flex xs4 sm6>
286 <h5 class="right my-1"> 286 <h5 class="right my-1">
287 <b>Chapter Name:</b> 287 <b>Chapter Name:</b>
288 </h5> 288 </h5>
289 </v-flex> 289 </v-flex>
290 <v-flex sm6 xs8> 290 <v-flex sm6 xs8>
291 <h5 class="my-1">{{ editedItem.chapterName }}</h5> 291 <h5 class="my-1">{{ editedItem.chapterName }}</h5>
292 </v-flex> 292 </v-flex>
293 </v-layout> 293 </v-layout>
294 <v-layout> 294 <v-layout>
295 <v-flex xs4 sm6> 295 <v-flex xs4 sm6>
296 <h5 class="right my-1"> 296 <h5 class="right my-1">
297 <b>Description:</b> 297 <b>Description:</b>
298 </h5> 298 </h5>
299 </v-flex> 299 </v-flex>
300 <v-flex sm6 xs8> 300 <v-flex sm6 xs8>
301 <h5 class="my-1">{{ editedItem.description }}</h5> 301 <h5 class="my-1">{{ editedItem.description }}</h5>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs5 sm6> 305 <v-flex xs5 sm6>
306 <h5 class="right my-1"> 306 <h5 class="right my-1">
307 <b>You Tube Link Url:</b> 307 <b>You Tube Link Url:</b>
308 </h5> 308 </h5>
309 </v-flex> 309 </v-flex>
310 <v-flex sm6 xs8> 310 <v-flex sm6 xs8>
311 <h5 class="my-1"> 311 <h5 class="my-1">
312 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> 312 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
313 <li>{{ chapterPoint}}</li> 313 <li>{{ chapterPoint}}</li>
314 </ul> 314 </ul>
315 </h5> 315 </h5>
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-container> 320 </v-container>
321 </v-card-text> 321 </v-card-text>
322 </v-card> 322 </v-card>
323 </v-dialog> 323 </v-dialog>
324 324
325 <!-- ****** Course Detail TABLE ****** --> 325 <!-- ****** Course Detail TABLE ****** -->
326 326
327 <v-toolbar color="transparent" flat> 327 <v-toolbar color="transparent" flat>
328 <v-btn 328 <v-btn
329 fab 329 fab
330 dark 330 dark
331 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 331 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
332 small 332 small
333 @click="addCourseDetailDialog = true" 333 @click="addCourseDetailDialog = true"
334 > 334 >
335 <v-icon dark>add</v-icon> 335 <v-icon dark>add</v-icon>
336 </v-btn> 336 </v-btn>
337 <v-btn 337 <v-btn
338 round 338 round
339 class="open-dialog-button hidden-sm-only hidden-xs-only" 339 class="open-dialog-button hidden-sm-only hidden-xs-only"
340 dark 340 dark
341 @click="addCourseDetailDialog = true" 341 @click="addCourseDetailDialog = true"
342 > 342 >
343 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail 343 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail
344 </v-btn> 344 </v-btn>
345 <v-flex xs12 sm4 md2> 345 <v-flex xs12 sm4 md2>
346 <v-select 346 <v-select
347 small 347 small
348 :items="addclass" 348 :items="addclass"
349 label="Select Class" 349 label="Select Class"
350 v-model="getCourse.classId" 350 v-model="getCourse.classId"
351 item-text="classNum" 351 item-text="classNum"
352 item-value="_id" 352 item-value="_id"
353 name="Select Class" 353 name="Select Class"
354 @change="getCourses(getCourse.classId)" 354 @change="getCourses(getCourse.classId)"
355 class="mr-2" 355 class="mr-2"
356 required 356 required
357 ></v-select> 357 ></v-select>
358 </v-flex> 358 </v-flex>
359 <v-flex xs12 sm4 md2> 359 <v-flex xs12 sm4 md2>
360 <v-select 360 <v-select
361 :items="courseData" 361 :items="courseData"
362 label="Select Course" 362 label="Select Course"
363 v-model="getCourse.courseId" 363 v-model="getCourse.courseId"
364 item-text="courseName" 364 item-text="courseName"
365 item-value="_id" 365 item-value="_id"
366 required 366 required
367 class="ml-2" 367 class="ml-2"
368 @change="getCourseDetailsList(getCourse.courseId)" 368 @change="getCourseDetailsList(getCourse.courseId)"
369 ></v-select> 369 ></v-select>
370 </v-flex> 370 </v-flex>
371 <v-spacer></v-spacer> 371 <v-spacer></v-spacer>
372 <v-card-title class="body-1" v-show="show"> 372 <v-card-title class="body-1" v-show="show">
373 <v-btn icon large flat @click="displaySearch"> 373 <v-btn icon large flat @click="displaySearch">
374 <v-avatar size="27"> 374 <v-avatar size="27">
375 <img src="/static/icon/search.png" alt="icon" /> 375 <img src="/static/icon/search.png" alt="icon" />
376 </v-avatar> 376 </v-avatar>
377 </v-btn> 377 </v-btn>
378 </v-card-title> 378 </v-card-title>
379 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 379 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
380 <v-layout> 380 <v-layout>
381 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 381 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
382 <v-icon @click="closeSearch" color="error">close</v-icon> 382 <v-icon @click="closeSearch" color="error">close</v-icon>
383 </v-layout> 383 </v-layout>
384 </v-flex> 384 </v-flex>
385 </v-toolbar> 385 </v-toolbar>
386 <v-data-table 386 <v-data-table
387 :headers="headers" 387 :headers="headers"
388 :items="CourseDetailsList" 388 :items="CourseDetailsList"
389 :pagination.sync="pagination" 389 :pagination.sync="pagination"
390 :search="search" 390 :search="search"
391 item-key="_id" 391 item-key="_id"
392 > 392 >
393 <template slot="items" slot-scope="props"> 393 <template slot="items" slot-scope="props">
394 <tr class="tr" @click="courseTableRow(props.item._id)"> 394 <tr class="tr" @click="courseTableRow(props.item._id)">
395 <td class="td td-row">{{ props.index + 1}}</td> 395 <td class="td td-row">{{ props.index + 1}}</td>
396 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 396 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
397 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> 397 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
398 <td class="td td-row text-xs-center"> 398 <td class="td td-row text-xs-center">
399 <div style="vertical-align: top;"> 399 <div style="vertical-align: top;">
400 <v-tooltip top> 400 <v-tooltip top>
401 <v-icon 401 <v-icon
402 slot="activator" 402 slot="activator"
403 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 403 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
404 class="mr-3" 404 class="mr-3"
405 @click="addChapters(props.item)" 405 @click="addChapters(props.item)"
406 >add_circle_outline</v-icon> 406 >add_circle_outline</v-icon>
407 <span>Add</span> 407 <span>Add</span>
408 </v-tooltip> 408 </v-tooltip>
409 <v-tooltip top> 409 <v-tooltip top>
410 <img 410 <img
411 slot="activator" 411 slot="activator"
412 style="cursor:pointer; width:25px; height:25px; " 412 style="cursor:pointer; width:25px; height:25px; "
413 class="mr-3" 413 class="mr-3"
414 @click="props.expanded = !props.expanded" 414 @click="props.expanded = !props.expanded"
415 src="/static/icon/view.png" 415 src="/static/icon/view.png"
416 /> 416 />
417 <span>View</span> 417 <span>View</span>
418 </v-tooltip> 418 </v-tooltip>
419 <v-tooltip top> 419 <v-tooltip top>
420 <img 420 <img
421 slot="activator" 421 slot="activator"
422 style="cursor:pointer; width:20px; height:18px; " 422 style="cursor:pointer; width:20px; height:18px; "
423 class="mr-3" 423 class="mr-3"
424 @click="editItem(props.item)" 424 @click="editItem(props.item)"
425 src="/static/icon/edit.png" 425 src="/static/icon/edit.png"
426 /> 426 />
427 <span>Edit</span> 427 <span>Edit</span>
428 </v-tooltip> 428 </v-tooltip>
429 <v-tooltip top> 429 <v-tooltip top>
430 <img 430 <img
431 slot="activator" 431 slot="activator"
432 style="cursor:pointer; width:20px; height:20px; " 432 style="cursor:pointer; width:20px; height:20px; "
433 class="mr-3" 433 class="mr-3"
434 @click="deleteItem(props.item)" 434 @click="deleteItem(props.item)"
435 src="/static/icon/delete.png" 435 src="/static/icon/delete.png"
436 /> 436 />
437 <span>Delete</span> 437 <span>Delete</span>
438 </v-tooltip> 438 </v-tooltip>
439 </div> 439 </div>
440 </td> 440 </td>
441 </tr> 441 </tr>
442 </template> 442 </template>
443 <template slot="expand"> 443 <template slot="expand">
444 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> 444 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
445 <template slot="items" slot-scope="props"> 445 <template slot="items" slot-scope="props">
446 <tr class="tr" @click="props.expanded = !props.expanded"> 446 <tr class="tr" @click="props.expanded = !props.expanded">
447 <td class="td td-row">{{ props.index + 1}}</td> 447 <td class="td td-row">{{ props.index + 1}}</td>
448 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> 448 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
449 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 449 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
450 <td class="text-xs-center td td-row"> 450 <td class="text-xs-center td td-row">
451 <v-tooltip top> 451 <v-tooltip top>
452 <v-icon 452 <v-icon
453 slot="activator" 453 slot="activator"
454 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 454 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
455 class="mr-3" 455 class="mr-3"
456 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId }})" 456 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
457 >video_call</v-icon> 457 >video_call</v-icon>
458 <span>Live Session</span> 458 <span>Live Session</span>
459 </v-tooltip> 459 </v-tooltip>
460 <v-tooltip top> 460 <v-tooltip top>
461 <img 461 <img
462 slot="activator" 462 slot="activator"
463 style="cursor:pointer; width:25px; height:25px; " 463 style="cursor:pointer; width:25px; height:25px; "
464 class="mr-3" 464 class="mr-3"
465 @click="profile(props.item)" 465 @click="profile(props.item)"
466 src="/static/icon/view.png" 466 src="/static/icon/view.png"
467 /> 467 />
468 <span>View</span> 468 <span>View</span>
469 </v-tooltip> 469 </v-tooltip>
470 <v-tooltip top> 470 <v-tooltip top>
471 <img 471 <img
472 slot="activator" 472 slot="activator"
473 style="cursor:pointer; width:20px; height:18px; " 473 style="cursor:pointer; width:20px; height:18px; "
474 class="mr-3" 474 class="mr-3"
475 @click="editChapterItem(props.item)" 475 @click="editChapterItem(props.item)"
476 src="/static/icon/edit.png" 476 src="/static/icon/edit.png"
477 /> 477 />
478 <span>Edit</span> 478 <span>Edit</span>
479 </v-tooltip> 479 </v-tooltip>
480 <v-tooltip top> 480 <v-tooltip top>
481 <img 481 <img
482 slot="activator" 482 slot="activator"
483 style="cursor:pointer; width:20px; height:20px; " 483 style="cursor:pointer; width:20px; height:20px; "
484 class="mr-3" 484 class="mr-3"
485 @click="deleteChapters(props.item)" 485 @click="deleteChapters(props.item)"
486 src="/static/icon/delete.png" 486 src="/static/icon/delete.png"
487 /> 487 />
488 <span>Delete Chapter</span> 488 <span>Delete Chapter</span>
489 </v-tooltip> 489 </v-tooltip>
490 </td> 490 </td>
491 </tr> 491 </tr>
492 </template> 492 </template>
493 </v-data-table> 493 </v-data-table>
494 </template> 494 </template>
495 495
496 <v-alert 496 <v-alert
497 slot="no-results" 497 slot="no-results"
498 :value="true" 498 :value="true"
499 color="error" 499 color="error"
500 icon="warning" 500 icon="warning"
501 >Your search for "{{ search }}" found no results.</v-alert> 501 >Your search for "{{ search }}" found no results.</v-alert>
502 </v-data-table> 502 </v-data-table>
503 <!-- ****** ADD Course Detail ****** --> 503 <!-- ****** ADD Course Detail ****** -->
504 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> 504 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
505 <v-card flat class="card-style pa-2" dark> 505 <v-card flat class="card-style pa-2" dark>
506 <v-layout> 506 <v-layout>
507 <v-flex xs12> 507 <v-flex xs12>
508 <label class="title text-xs-center">Add Course Details</label> 508 <label class="title text-xs-center">Add Course Details</label>
509 <v-icon size="24" class="right" @click="addCourseDetailDialog = false; clear();">cancel</v-icon> 509 <v-icon size="24" class="right" @click="addCourseDetailDialog = false; clear();">cancel</v-icon>
510 </v-flex> 510 </v-flex>
511 </v-layout> 511 </v-layout>
512 <v-form ref="form" v-model="valid" lazy-validation> 512 <v-form ref="form" v-model="valid" lazy-validation>
513 <v-container fluid> 513 <v-container fluid>
514 <v-flex xs12> 514 <v-flex xs12>
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 hidden-xs-only hidden-sm-only">Select Class:</label> 517 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
518 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 518 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
519 </v-flex> 519 </v-flex>
520 <v-flex xs8 sm8 md7 class="ml-3"> 520 <v-flex xs8 sm8 md7 class="ml-3">
521 <v-select 521 <v-select
522 :items="addclass" 522 :items="addclass"
523 label="Select Class" 523 label="Select Class"
524 v-model="addCourseDetail.classId" 524 v-model="addCourseDetail.classId"
525 item-text="classNum" 525 item-text="classNum"
526 item-value="_id" 526 item-value="_id"
527 name="Select Class" 527 name="Select Class"
528 :rules="clsssRules" 528 :rules="clsssRules"
529 @change="getCourses(addCourseDetail.classId)" 529 @change="getCourses(addCourseDetail.classId)"
530 required 530 required
531 ></v-select> 531 ></v-select>
532 </v-flex> 532 </v-flex>
533 </v-layout> 533 </v-layout>
534 </v-flex> 534 </v-flex>
535 <v-flex xs12> 535 <v-flex xs12>
536 <v-layout> 536 <v-layout>
537 <v-flex xs4 class="pt-4 subheading"> 537 <v-flex xs4 class="pt-4 subheading">
538 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> 538 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
539 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 539 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
540 </v-flex> 540 </v-flex>
541 <v-flex xs8 sm8 md7 class="ml-3"> 541 <v-flex xs8 sm8 md7 class="ml-3">
542 <v-select 542 <v-select
543 :items="courseData" 543 :items="courseData"
544 label="Select Course" 544 label="Select Course"
545 v-model="addCourseDetail.courseId" 545 v-model="addCourseDetail.courseId"
546 item-text="courseName" 546 item-text="courseName"
547 item-value="_id" 547 item-value="_id"
548 :rules="courseRules" 548 :rules="courseRules"
549 required 549 required
550 ></v-select> 550 ></v-select>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 </v-flex> 553 </v-flex>
554 <v-flex xs12> 554 <v-flex xs12>
555 <v-layout> 555 <v-layout>
556 <v-flex xs4 class="pt-4 subheading"> 556 <v-flex xs4 class="pt-4 subheading">
557 <label class="right">Chapter Name:</label> 557 <label class="right">Chapter Name:</label>
558 </v-flex> 558 </v-flex>
559 <v-flex xs8 sm8 md7 class="ml-3"> 559 <v-flex xs8 sm8 md7 class="ml-3">
560 <v-text-field 560 <v-text-field
561 v-model="addCourseDetail.chapterName" 561 v-model="addCourseDetail.chapterName"
562 placeholder="fill your Title" 562 placeholder="fill your Title"
563 name="name" 563 name="name"
564 type="text" 564 type="text"
565 :rules="chapterNameRules" 565 :rules="chapterNameRules"
566 required 566 required
567 ></v-text-field> 567 ></v-text-field>
568 </v-flex> 568 </v-flex>
569 </v-layout> 569 </v-layout>
570 </v-flex> 570 </v-flex>
571 <v-flex xs12> 571 <v-flex xs12>
572 <v-layout> 572 <v-layout>
573 <v-flex xs4 class="pt-4 subheading"> 573 <v-flex xs4 class="pt-4 subheading">
574 <label class="right">Description:</label> 574 <label class="right">Description:</label>
575 </v-flex> 575 </v-flex>
576 <v-flex xs8 sm8 md7 class="ml-3"> 576 <v-flex xs8 sm8 md7 class="ml-3">
577 <v-text-field 577 <v-text-field
578 placeholder="fill your Description" 578 placeholder="fill your Description"
579 :rules="descriptionRules" 579 :rules="descriptionRules"
580 v-model="addCourseDetail.description" 580 v-model="addCourseDetail.description"
581 type="text" 581 type="text"
582 name="email" 582 name="email"
583 required 583 required
584 ></v-text-field> 584 ></v-text-field>
585 </v-flex> 585 </v-flex>
586 </v-layout> 586 </v-layout>
587 </v-flex> 587 </v-flex>
588 <v-layout> 588 <v-layout>
589 <v-flex xs12> 589 <v-flex xs12>
590 <div v-for="(chapterPoints,index) in finds" :key="index"> 590 <div v-for="(chapterPoints,index) in finds" :key="index">
591 <v-layout> 591 <v-layout>
592 <v-flex xs4 class="pt-4 subheading"> 592 <v-flex xs4 class="pt-4 subheading">
593 <label class="right">Chapter Points:</label> 593 <label class="right">Chapter Points:</label>
594 </v-flex> 594 </v-flex>
595 <v-flex xs8 sm8 md6 class="ml-3"> 595 <v-flex xs8 sm8 md6 class="ml-3">
596 <v-text-field 596 <v-text-field
597 placeholder="fill your Chapter Points" 597 placeholder="fill your Chapter Points"
598 v-model="chapterPoints.value" 598 v-model="chapterPoints.value"
599 type="text" 599 type="text"
600 required 600 required
601 ></v-text-field> 601 ></v-text-field>
602 </v-flex> 602 </v-flex>
603 <v-flex xs2 class="pt-4"> 603 <v-flex xs2 class="pt-4">
604 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 604 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
605 <v-icon @click="addFind">add_circle</v-icon> 605 <v-icon @click="addFind">add_circle</v-icon>
606 </v-flex> 606 </v-flex>
607 </v-layout> 607 </v-layout>
608 </div> 608 </div>
609 </v-flex> 609 </v-flex>
610 </v-layout> 610 </v-layout>
611 <v-layout> 611 <v-layout>
612 <v-flex xs12 sm12> 612 <v-flex xs12 sm12>
613 <v-layout class="right"> 613 <v-layout class="right">
614 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 614 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
615 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 615 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
616 </v-layout> 616 </v-layout>
617 </v-flex> 617 </v-flex>
618 </v-layout> 618 </v-layout>
619 </v-container> 619 </v-container>
620 </v-form> 620 </v-form>
621 </v-card> 621 </v-card>
622 </v-dialog> 622 </v-dialog>
623 <v-snackbar 623 <v-snackbar
624 :timeout="timeout" 624 :timeout="timeout"
625 :top="y === 'top'" 625 :top="y === 'top'"
626 :right="x === 'right'" 626 :right="x === 'right'"
627 :vertical="mode === 'vertical'" 627 :vertical="mode === 'vertical'"
628 v-model="snackbar" 628 v-model="snackbar"
629 :color="color" 629 :color="color"
630 >{{ text }}</v-snackbar> 630 >{{ text }}</v-snackbar>
631 <div class="loader" v-if="showLoader"> 631 <div class="loader" v-if="showLoader">
632 <v-progress-circular indeterminate color="white"></v-progress-circular> 632 <v-progress-circular indeterminate color="white"></v-progress-circular>
633 </div> 633 </div>
634 </v-container> 634 </v-container>
635 </template> 635 </template>
636 636
637 <script> 637 <script>
638 import http from "@/Services/http.js"; 638 import http from "@/Services/http.js";
639 639
640 export default { 640 export default {
641 data: () => ({ 641 data: () => ({
642 snackbar: false, 642 snackbar: false,
643 y: "top", 643 y: "top",
644 x: "right", 644 x: "right",
645 mode: "", 645 mode: "",
646 timeout: 3000, 646 timeout: 3000,
647 text: "", 647 text: "",
648 loading: false, 648 loading: false,
649 color: "", 649 color: "",
650 date: null, 650 date: null,
651 search: "", 651 search: "",
652 show: true, 652 show: true,
653 addCourseDetailDialog: false, 653 addCourseDetailDialog: false,
654 showSearch: false, 654 showSearch: false,
655 showLoader: false, 655 showLoader: false,
656 editCourseDetailDialog: false, 656 editCourseDetailDialog: false,
657 editChapterDetailDialog: false, 657 editChapterDetailDialog: false,
658 viewProfileGallery: false, 658 viewProfileGallery: false,
659 valid: true, 659 valid: true,
660 editLoading: false, 660 editLoading: false,
661 addclass: [], 661 addclass: [],
662 courseData: [], 662 courseData: [],
663 addSection: [], 663 addSection: [],
664 getCourse: {}, 664 getCourse: {},
665 finds: [{ value: "" }], 665 finds: [{ value: "" }],
666 findsChapterPoint: [{ value: "" }], 666 findsChapterPoint: [{ value: "" }],
667 updates: [], 667 updates: [],
668 youTubeLink: {}, 668 youTubeLink: {},
669 addCourseDetail: { 669 addCourseDetail: {
670 chapters: [ 670 chapters: [
671 { 671 {
672 chapterName: "", 672 chapterName: "",
673 description: "", 673 description: "",
674 chapterPoints: [] 674 chapterPoints: []
675 } 675 }
676 ] 676 ]
677 }, 677 },
678 chapters: [], 678 chapters: [],
679 pagination: { 679 pagination: {
680 rowsPerPage: 10 680 rowsPerPage: 10
681 }, 681 },
682 editFiles: [], 682 editFiles: [],
683 files: [], 683 files: [],
684 courseData: [], 684 courseData: [],
685 token: "", 685 token: "",
686 courseId: "", 686 courseId: "",
687 clsssRules: [v => !!v || " Class is required"], 687 clsssRules: [v => !!v || " Class is required"],
688 courseRules: [v => !!v || " Course is required"], 688 courseRules: [v => !!v || " Course is required"],
689 chapterNameRules: [v => !!v || " Tilte is required"], 689 chapterNameRules: [v => !!v || " Tilte is required"],
690 descriptionRules: [v => !!v || " Description is required"], 690 descriptionRules: [v => !!v || " Description is required"],
691 headers: [ 691 headers: [
692 { 692 {
693 align: "", 693 align: "",
694 text: "No", 694 text: "No",
695 sortable: false, 695 sortable: false,
696 value: "index" 696 value: "index"
697 }, 697 },
698 { 698 {
699 text: "Class Name", 699 text: "Class Name",
700 value: "classNum", 700 value: "classNum",
701 sortable: false, 701 sortable: false,
702 align: "center" 702 align: "center"
703 }, 703 },
704 { 704 {
705 text: "Course Name", 705 text: "Course Name",
706 value: "courseName", 706 value: "courseName",
707 sortable: false, 707 sortable: false,
708 align: "center" 708 align: "center"
709 }, 709 },
710 { text: "Action", value: "", sortable: false, align: "center" } 710 { text: "Action", value: "", sortable: false, align: "center" }
711 ], 711 ],
712 CourseDetailsList: [], 712 CourseDetailsList: [],
713 editedIndex: -1, 713 editedIndex: -1,
714 editedItem: {}, 714 editedItem: {},
715 editedCourse: {}, 715 editedCourse: {},
716 editChapter: { 716 editChapter: {
717 chapterPoints: [] 717 chapterPoints: []
718 }, 718 },
719 index: "", 719 index: "",
720 addChapterItem: {}, 720 addChapterItem: {},
721 addChapterItemObj: {}, 721 addChapterItemObj: {},
722 addChapterDialog: false 722 addChapterDialog: false
723 }), 723 }),
724 methods: { 724 methods: {
725 getCourses(classId) { 725 getCourses(classId) {
726 this.showLoader = true; 726 this.showLoader = true;
727 http() 727 http()
728 .get("/getCourseesList", { 728 .get("/getCourseesList", {
729 params: { 729 params: {
730 classId: classId 730 classId: classId
731 } 731 }
732 }) 732 })
733 .then(response => { 733 .then(response => {
734 this.editChapter.courseId = ""; 734 this.editChapter.courseId = "";
735 this.courseData = response.data.data; 735 this.courseData = response.data.data;
736 // console.log("this.courseData", this.courseData); 736 // console.log("this.courseData", this.courseData);
737 this.showLoader = false; 737 this.showLoader = false;
738 }) 738 })
739 .catch(err => { 739 .catch(err => {
740 console.log("err====>", err); 740 console.log("err====>", err);
741 this.showLoader = false; 741 this.showLoader = false;
742 }); 742 });
743 }, 743 },
744 getCourseDetailsList() { 744 getCourseDetailsList() {
745 this.showLoader = true; 745 this.showLoader = true;
746 http() 746 http()
747 .get("/getParticularCourseDetail", { 747 .get("/getParticularCourseDetail", {
748 params: { 748 params: {
749 courseId: this.getCourse.courseId 749 courseId: this.getCourse.courseId
750 } 750 }
751 }) 751 })
752 .then(response => { 752 .then(response => {
753 this.CourseDetailsList = response.data.data; 753 this.CourseDetailsList = response.data.data;
754 if (response.data.data[0]) { 754 if (response.data.data[0]) {
755 this.chapters = response.data.data[0].chapters; 755 this.chapters = response.data.data[0].chapters;
756 console.log(" this.chapters - ", this.chapters); 756 console.log(" this.chapters - ", this.chapters);
757 } 757 }
758 // console.log("response.data.data", this.CourseDetailsList); 758 // console.log("response.data.data", this.CourseDetailsList);
759 this.showLoader = false; 759 this.showLoader = false;
760 }) 760 })
761 .catch(error => { 761 .catch(error => {
762 // console.log("err====>", err); 762 // console.log("err====>", err);
763 this.showLoader = false; 763 this.showLoader = false;
764 if (error.response.status === 401) { 764 if (error.response.status === 401) {
765 this.$router.replace({ path: "/" }); 765 this.$router.replace({ path: "/" });
766 this.$store.dispatch("setToken", null); 766 this.$store.dispatch("setToken", null);
767 this.$store.dispatch("Id", null); 767 this.$store.dispatch("Id", null);
768 } 768 }
769 }); 769 });
770 }, 770 },
771 courseTableRow(id) { 771 courseTableRow(id) {
772 // console.log("click7", id); 772 // console.log("click7", id);
773 this.courseId = id; 773 this.courseId = id;
774 }, 774 },
775 addChapters(item) { 775 addChapters(item) {
776 this.editedIndex = this.CourseDetailsList.indexOf(item); 776 this.editedIndex = this.CourseDetailsList.indexOf(item);
777 this.addChapterItemObj = Object.assign({}, item); 777 this.addChapterItemObj = Object.assign({}, item);
778 this.addChapterItem.courseDetailId = this.addChapterItemObj._id; 778 this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
779 this.addChapterDialog = true; 779 this.addChapterDialog = true;
780 }, 780 },
781 submitChapter() { 781 submitChapter() {
782 this.addChapterItem.chapterPoints = []; 782 this.addChapterItem.chapterPoints = [];
783 for (let i = 0; i < this.findsChapterPoint.length; i++) { 783 for (let i = 0; i < this.findsChapterPoint.length; i++) {
784 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); 784 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
785 } 785 }
786 // console.log("this.addChapterItem", this.addChapterItem); 786 // console.log("this.addChapterItem", this.addChapterItem);
787 this.loading = true; 787 this.loading = true;
788 http() 788 http()
789 .put("/addChapters", this.addChapterItem) 789 .put("/addChapters", this.addChapterItem)
790 .then(response => { 790 .then(response => {
791 this.addChapterDialog = false; 791 this.addChapterDialog = false;
792 this.loading = false; 792 this.loading = false;
793 this.snackbar = true; 793 this.snackbar = true;
794 this.text = response.data.message; 794 this.text = response.data.message;
795 this.color = "green"; 795 this.color = "green";
796 this.addChapterItem = {}; 796 this.addChapterItem = {};
797 this.removeChapterPoint(); 797 this.removeChapterPoint();
798 this.getCourseDetailsList(); 798 this.getCourseDetailsList();
799 }) 799 })
800 .catch(error => { 800 .catch(error => {
801 this.snackbar = true; 801 this.snackbar = true;
802 this.text = error.response.data.message; 802 this.text = error.response.data.message;
803 this.color = "error"; 803 this.color = "error";
804 this.loading = false; 804 this.loading = false;
805 }); 805 });
806 }, 806 },
807 profile(item) { 807 profile(item) {
808 this.editedIndex = this.chapters.indexOf(item); 808 this.editedIndex = this.chapters.indexOf(item);
809 this.editedItem = Object.assign({}, item); 809 this.editedItem = Object.assign({}, item);
810 this.viewProfileGallery = true; 810 this.viewProfileGallery = true;
811 }, 811 },
812 editItem(item) { 812 editItem(item) {
813 this.editedIndex = this.CourseDetailsList.indexOf(item); 813 this.editedIndex = this.CourseDetailsList.indexOf(item);
814 this.editedCourse = Object.assign({}, item); 814 this.editedCourse = Object.assign({}, item);
815 this.editCourseDetailDialog = true; 815 this.editCourseDetailDialog = true;
816 }, 816 },
817 editChapterItem(item) { 817 editChapterItem(item) {
818 this.editedIndex = this.chapters.indexOf(item); 818 this.editedIndex = this.chapters.indexOf(item);
819 this.editChapter = Object.assign({}, item); 819 this.editChapter = Object.assign({}, item);
820 this.updates = []; 820 this.updates = [];
821 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { 821 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
822 this.updates.push({ value: this.editChapter.chapterPoints[i] }); 822 this.updates.push({ value: this.editChapter.chapterPoints[i] });
823 } 823 }
824 this.editChapterDetailDialog = true; 824 this.editChapterDetailDialog = true;
825 }, 825 },
826 deleteItem(item) { 826 deleteItem(item) {
827 let deleteGallery = { 827 let deleteGallery = {
828 courseDetailId: item._id 828 courseDetailId: item._id
829 }; 829 };
830 http() 830 http()
831 .delete( 831 .delete(
832 "/deleteCourseDetail", 832 "/deleteCourseDetail",
833 confirm("Are you sure you want to delete this?") && { 833 confirm("Are you sure you want to delete this?") && {
834 params: deleteGallery, 834 params: deleteGallery,
835 headers: { 835 headers: {
836 Authorization: "Bearer " + this.token 836 Authorization: "Bearer " + this.token
837 } 837 }
838 } 838 }
839 ) 839 )
840 .then(response => { 840 .then(response => {
841 this.snackbar = true; 841 this.snackbar = true;
842 this.text = "Successfully delete Course Details"; 842 this.text = "Successfully delete Course Details";
843 this.color = "green"; 843 this.color = "green";
844 this.getCourseDetailsList(); 844 this.getCourseDetailsList();
845 }) 845 })
846 .catch(error => { 846 .catch(error => {
847 // console.log(error); 847 // console.log(error);
848 this.snackbar = true; 848 this.snackbar = true;
849 this.text = error.response.data.message; 849 this.text = error.response.data.message;
850 this.color = "error"; 850 this.color = "error";
851 }); 851 });
852 }, 852 },
853 deleteChapters(item) { 853 deleteChapters(item) {
854 // console.log("item", item); 854 // console.log("item", item);
855 let deleteChapters = { 855 let deleteChapters = {
856 courseDetailId: this.courseId, 856 courseDetailId: this.courseId,
857 chapterId: item._id 857 chapterId: item._id
858 }; 858 };
859 http() 859 http()
860 .put( 860 .put(
861 "/deleteChapters", 861 "/deleteChapters",
862 confirm("Are you sure you want to delete this?") && deleteChapters 862 confirm("Are you sure you want to delete this?") && deleteChapters
863 ) 863 )
864 .then(response => { 864 .then(response => {
865 this.snackbar = true; 865 this.snackbar = true;
866 this.text = "Successfully delete Chapters"; 866 this.text = "Successfully delete Chapters";
867 this.color = "green"; 867 this.color = "green";
868 this.getCourseDetailsList(); 868 this.getCourseDetailsList();
869 }) 869 })
870 .catch(error => { 870 .catch(error => {
871 // console.log(error); 871 // console.log(error);
872 this.snackbar = true; 872 this.snackbar = true;
873 this.text = error.response.data.message; 873 this.text = error.response.data.message;
874 this.color = "error"; 874 this.color = "error";
875 }); 875 });
876 }, 876 },
877 close() { 877 close() {
878 this.editCourseDetailDialog = false; 878 this.editCourseDetailDialog = false;
879 }, 879 },
880 closeProfileGallery() { 880 closeProfileGallery() {
881 this.viewProfileGallery = false; 881 this.viewProfileGallery = false;
882 }, 882 },
883 submit() { 883 submit() {
884 let chapters = []; 884 let chapters = [];
885 var chapterPoints = []; 885 var chapterPoints = [];
886 for (let i = 0; i < this.finds.length; i++) { 886 for (let i = 0; i < this.finds.length; i++) {
887 chapterPoints.push(this.finds[i].value); 887 chapterPoints.push(this.finds[i].value);
888 // console.log("this.finds[i].value", this.finds[i].value); 888 // console.log("this.finds[i].value", this.finds[i].value);
889 chapters = [ 889 chapters = [
890 { 890 {
891 chapterName: this.addCourseDetail.chapterName, 891 chapterName: this.addCourseDetail.chapterName,
892 description: this.addCourseDetail.description, 892 description: this.addCourseDetail.description,
893 chapterPoints: chapterPoints 893 chapterPoints: chapterPoints
894 } 894 }
895 ]; 895 ];
896 } 896 }
897 if (this.$refs.form.validate()) { 897 if (this.$refs.form.validate()) {
898 // console.log("this.addCourseDetail", this.addCourseDetail); 898 // console.log("this.addCourseDetail", this.addCourseDetail);
899 var courseDetailsData = { 899 var courseDetailsData = {
900 classId: this.addCourseDetail.classId, 900 classId: this.addCourseDetail.classId,
901 courseId: this.addCourseDetail.courseId, 901 courseId: this.addCourseDetail.courseId,
902 chapters: chapters 902 chapters: chapters
903 }; 903 };
904 this.loading = true; 904 this.loading = true;
905 http() 905 http()
906 .post("/createCourseDetail", courseDetailsData) 906 .post("/createCourseDetail", courseDetailsData)
907 .then(response => { 907 .then(response => {
908 this.addCourseDetailDialog = false; 908 this.addCourseDetailDialog = false;
909 this.loading = false; 909 this.loading = false;
910 this.snackbar = true; 910 this.snackbar = true;
911 this.text = response.data.message; 911 this.text = response.data.message;
912 this.color = "green"; 912 this.color = "green";
913 this.clear(); 913 this.clear();
914 this.removeAddFind(); 914 this.removeAddFind();
915 }) 915 })
916 .catch(error => { 916 .catch(error => {
917 this.snackbar = true; 917 this.snackbar = true;
918 this.text = error.response.data.message; 918 this.text = error.response.data.message;
919 this.color = "error"; 919 this.color = "error";
920 this.loading = false; 920 this.loading = false;
921 }); 921 });
922 } 922 }
923 }, 923 },
924 clear() { 924 clear() {
925 this.$refs.form.reset(); 925 this.$refs.form.reset();
926 }, 926 },
927 saveChapter() { 927 saveChapter() {
928 this.editedItem.courseDetailId = this.editedItem._id; 928 this.editedItem.courseDetailId = this.editedItem._id;
929 // console.log("this.updates", this.updates); 929 // console.log("this.updates", this.updates);
930 var chapterPoints = []; 930 var chapterPoints = [];
931 for (let i = 0; i < this.updates.length; i++) { 931 for (let i = 0; i < this.updates.length; i++) {
932 console.log("this.updates[i]", this.updates[i]); 932 console.log("this.updates[i]", this.updates[i]);
933 chapterPoints.push(this.updates[i].value); 933 chapterPoints.push(this.updates[i].value);
934 } 934 }
935 var updateData = { 935 var updateData = {
936 courseDetailId: this.courseId, 936 courseDetailId: this.courseId,
937 chapterId: this.editChapter._id, 937 chapterId: this.editChapter._id,
938 chapterName: this.editChapter.chapterName, 938 chapterName: this.editChapter.chapterName,
939 description: this.editChapter.description, 939 description: this.editChapter.description,
940 chapterPoints: chapterPoints 940 chapterPoints: chapterPoints
941 }; 941 };
942 console.log("chapterPoints", updateData); 942 console.log("chapterPoints", updateData);
943 this.editLoading = true; 943 this.editLoading = true;
944 http() 944 http()
945 .put("/updateChapters", updateData) 945 .put("/updateChapters", updateData)
946 .then(response => { 946 .then(response => {
947 this.editChapterDetailDialog = false; 947 this.editChapterDetailDialog = false;
948 this.snackbar = true; 948 this.snackbar = true;
949 this.text = response.data.message; 949 this.text = response.data.message;
950 this.color = "green"; 950 this.color = "green";
951 this.editLoading = false; 951 this.editLoading = false;
952 // this.removeUpdatePoints(); 952 // this.removeUpdatePoints();
953 this.getCourseDetailsList(); 953 this.getCourseDetailsList();
954 }) 954 })
955 .catch(error => { 955 .catch(error => {
956 this.editLoading = false; 956 this.editLoading = false;
957 this.snackbar = true; 957 this.snackbar = true;
958 this.text = error.response.data.message; 958 this.text = error.response.data.message;
959 this.color = "error"; 959 this.color = "error";
960 }); 960 });
961 }, 961 },
962 save() { 962 save() {
963 // console.log("utykgigiu", this.editedCourse); 963 // console.log("utykgigiu", this.editedCourse);
964 var updateData = { 964 var updateData = {
965 courseDetailId: this.editedCourse._id, 965 courseDetailId: this.editedCourse._id,
966 courseId: this.editedCourse.courseId, 966 courseId: this.editedCourse.courseId,
967 classId: this.editedCourse.classId 967 classId: this.editedCourse.classId
968 }; 968 };
969 this.editLoading = true; 969 this.editLoading = true;
970 http() 970 http()
971 .put("/updateCourseDetail", updateData) 971 .put("/updateCourseDetail", updateData)
972 .then(response => { 972 .then(response => {
973 this.getCourseDetailsList(); 973 this.getCourseDetailsList();
974 this.editCourseDetailDialog = false; 974 this.editCourseDetailDialog = false;
975 this.snackbar = true; 975 this.snackbar = true;
976 this.text = response.data.message; 976 this.text = response.data.message;
977 this.color = "green"; 977 this.color = "green";
978 this.editLoading = false; 978 this.editLoading = false;
979 // this.editChapterPointName = ""; 979 // this.editChapterPointName = "";
980 this.editFiles = []; 980 this.editFiles = [];
981 }) 981 })
982 .catch(error => { 982 .catch(error => {
983 this.editLoading = false; 983 this.editLoading = false;
984 this.snackbar = true; 984 this.snackbar = true;
985 this.text = error.response.data.message; 985 this.text = error.response.data.message;
986 this.color = "error"; 986 this.color = "error";
987 }); 987 });
988 }, 988 },
989 getAllClasses() { 989 getAllClasses() {
990 http() 990 http()
991 .get("/getClassesList", { 991 .get("/getClassesList", {
992 headers: { Authorization: "Bearer " + this.token } 992 headers: { Authorization: "Bearer " + this.token }
993 }) 993 })
994 .then(response => { 994 .then(response => {
995 this.addclass = response.data.data; 995 this.addclass = response.data.data;
996 }) 996 })
997 .catch(err => { 997 .catch(err => {
998 // console.log("err====>", err); 998 // console.log("err====>", err);
999 }); 999 });
1000 }, 1000 },
1001 removeChapterPoint: function() { 1001 removeChapterPoint: function() {
1002 this.findsChapterPoint = [{ value: "" }]; 1002 this.findsChapterPoint = [{ value: "" }];
1003 }, 1003 },
1004 removeAddFind: function() { 1004 removeAddFind: function() {
1005 this.finds = [{ value: "" }]; 1005 this.finds = [{ value: "" }];
1006 }, 1006 },
1007 addFind: function() { 1007 addFind: function() {
1008 this.finds.push({ value: "" }); 1008 this.finds.push({ value: "" });
1009 }, 1009 },
1010 addChapterPoint: function() { 1010 addChapterPoint: function() {
1011 this.findsChapterPoint.push({ value: "" }); 1011 this.findsChapterPoint.push({ value: "" });
1012 console.log("this.findsChapterPoint", this.findsChapterPoint); 1012 console.log("this.findsChapterPoint", this.findsChapterPoint);
1013 }, 1013 },
1014 update: function() { 1014 update: function() {
1015 this.updates.push({ value: "" }); 1015 this.updates.push({ value: "" });
1016 }, 1016 },
1017 // removeUpdatePoints: function() { 1017 // removeUpdatePoints: function() {
1018 // this.updates = [{ value: "" }]; 1018 // this.updates = [{ value: "" }];
1019 // }, 1019 // },
1020 deleteFind: function(index) { 1020 deleteFind: function(index) {
1021 this.finds.splice(index, 1); 1021 this.finds.splice(index, 1);
1022 if (index === 0) this.addFind(); 1022 if (index === 0) this.addFind();
1023 }, 1023 },
1024 deleteChapterPoint: function(index) { 1024 deleteChapterPoint: function(index) {
1025 this.findsChapterPoint.splice(index, 1); 1025 this.findsChapterPoint.splice(index, 1);
1026 if (index === 0) this.addChapterPoint(); 1026 if (index === 0) this.addChapterPoint();
1027 }, 1027 },
1028 deleteUpdate: function(index) { 1028 deleteUpdate: function(index) {
1029 this.updates.splice(index, 1); 1029 this.updates.splice(index, 1);
1030 if (index === 0) this.update(); 1030 if (index === 0) this.update();
1031 }, 1031 },
1032 deleteUrl: function(index, youTubelinkId, id) { 1032 deleteUrl: function(index, youTubelinkId, id) {
1033 this.editChapter.chapterPoints.splice(index, 1); 1033 this.editChapter.chapterPoints.splice(index, 1);
1034 if (index === 0) this.update(); 1034 if (index === 0) this.update();
1035 }, 1035 },
1036 displaySearch() { 1036 displaySearch() {
1037 this.show = false; 1037 this.show = false;
1038 this.showSearch = true; 1038 this.showSearch = true;
1039 }, 1039 },
1040 closeSearch() { 1040 closeSearch() {
1041 this.showSearch = false; 1041 this.showSearch = false;
1042 this.show = true; 1042 this.show = true;
1043 this.search = ""; 1043 this.search = "";
1044 } 1044 }
1045 }, 1045 },
1046 mounted() { 1046 mounted() {
1047 this.token = this.$store.state.token; 1047 this.token = this.$store.state.token;
1048 this.getAllClasses(); 1048 this.getAllClasses();
1049 } 1049 }
1050 }; 1050 };
1051 </script> 1051 </script>
src/pages/Dashboard/ChapterInfo.vue
Diff comments   View file @e91641f
1 <template> 1 <template>
2 <div> 2 <div>
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 class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row class="mt-1"> 23 <v-layout row class="mt-1">
24 <v-flex xs8> 24 <v-flex xs8>
25 <!-- CHAPTER INFO --> 25 <!-- CHAPTER INFO -->
26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div> 26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div> 27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>
28 <div 28 <div
29 v-for="(point,index) in chapter.chapters[0].chapterPoints" 29 v-for="(point,index) in chapter.chapters[0].chapterPoints"
30 :key="index" 30 :key="index"
31 class="ml-2 mt-2" 31 class="ml-2 mt-2"
32 > 32 >
33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span> 33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>
34 </div> 34 </div>
35 <!-- ACTIVITIES --> 35 <!-- ACTIVITIES -->
36 <div class="mt-5"> 36 <div class="mt-5">
37 <v-icon>library_books</v-icon> 37 <v-icon>library_books</v-icon>
38 <span class="subheading font-weight-bold">Activities</span> 38 <span class="subheading font-weight-bold">Activities</span>
39 </div> 39 </div>
40 <!-- OTHER OPTIONS --> 40 <!-- OTHER OPTIONS -->
41 <div class="mt-5"> 41 <div class="mt-5">
42 <ul class="subheading" style="cursor: pointer"> 42 <ul class="subheading" style="cursor: pointer">
43 <li @click="$router.push({name: 'Live Online Class'})"> 43 <li
44 <v-btn flat>Live online classes solution</v-btn> 44 @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })"
45 >
46 <v-btn flat>Live online classes</v-btn>
45 </li> 47 </li>
46 <!-- <li> 48 <!-- <li>
47 <v-btn flat>Tutorial-pharmacetutical</v-btn> 49 <v-btn flat>Tutorial-pharmacetutical</v-btn>
48 </li> 50 </li>
49 <li> 51 <li>
50 <v-btn flat>HSP Interactive content</v-btn> 52 <v-btn flat>HSP Interactive content</v-btn>
51 </li> 53 </li>
52 <li> 54 <li>
53 <v-btn flat>Assessment</v-btn> 55 <v-btn flat>Assessment</v-btn>
54 </li>--> 56 </li>-->
55 </ul> 57 </ul>
56 </div> 58 </div>
57 59
58 <!-- SELECT CHAPTERS --> 60 <!-- SELECT CHAPTERS -->
59 <v-layout row class="mt-5"> 61 <v-layout row class="mt-5">
60 <!-- PREVIOUS CHAPTER --> 62 <!-- PREVIOUS CHAPTER -->
61 <v-flex 63 <v-flex
62 style="cursor: pointer;" 64 style="cursor: pointer;"
63 class="subheading font-weight-bold text-xs-left" 65 class="subheading font-weight-bold text-xs-left"
64 v-if="indexSelectedChapter > 0" 66 v-if="indexSelectedChapter > 0"
65 @click="showSelectedChapter('back')" 67 @click="showSelectedChapter('back')"
66 > 68 >
67 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon> 69 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>
68 {{chapterNames[indexSelectedChapter - 1]}} 70 {{chapterNames[indexSelectedChapter - 1]}}
69 </v-flex> 71 </v-flex>
70 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
71 <!-- NEXT CHAPTER --> 73 <!-- NEXT CHAPTER -->
72 <v-flex 74 <v-flex
73 style="cursor: pointer;" 75 style="cursor: pointer;"
74 class="subheading font-weight-bold text-xs-right" 76 class="subheading font-weight-bold text-xs-right"
75 v-if="indexSelectedChapter < chapterNames.length -1" 77 v-if="indexSelectedChapter < chapterNames.length -1"
76 @click="showSelectedChapter('forward')" 78 @click="showSelectedChapter('forward')"
77 > 79 >
78 {{chapterNames[indexSelectedChapter + 1]}} 80 {{chapterNames[indexSelectedChapter + 1]}}
79 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon> 81 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
80 </v-flex> 82 </v-flex>
81 </v-layout> 83 </v-layout>
82 <!-- <v-flex class="text-xs-right mt-5" v-else> 84 <!-- <v-flex class="text-xs-right mt-5" v-else>
83 <span class="subheading font-weight-bold">Return to chapter one</span> 85 <span class="subheading font-weight-bold">Return to chapter one</span>
84 </v-flex>--> 86 </v-flex>-->
85 </v-flex> 87 </v-flex>
86 88
87 <v-spacer></v-spacer> 89 <v-spacer></v-spacer>
88 90
89 <!-- COURSES - positioned to the right of the page --> 91 <!-- COURSES SIDE BAR- positioned to the right of the page -->
90 <v-flex xs3> 92 <v-flex xs3>
91 <v-card class="elevation-0 card-border" height="100%"> 93 <v-card class="elevation-0 card-border" height="100%">
92 <v-container class="pt-0"> 94 <CoursesSideBar></CoursesSideBar>
93 <div class="side-bar-color font-weight-bold title">Courses</div>
94
95 <div v-for="(course,index) in courseData" :key="index">
96 <v-btn
97 flat
98 class="subheading text-xs-start justify-left"
99 style="cursor: pointer;"
100 block
101 @click="routeToCourseDetails(course._id)"
102 >
103 <div style="width: 100%;text-align: left;">
104 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
105 {{course.courseName}}
106 </div>
107 </v-btn>
108 </div>
109 </v-container>
110 </v-card> 95 </v-card>
111 </v-flex> 96 </v-flex>
112 </v-layout> 97 </v-layout>
113 </v-container> 98 </v-container>
114 </div> 99 </div>
115 </template> 100 </template>
116 <script> 101 <script>
117 import http from "@/Services/http.js"; 102 import http from "@/Services/http.js";
118 import AllApiCalls from "@/Services/AllApiCalls.js"; 103 import AllApiCalls from "@/Services/AllApiCalls.js";
104 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
119 export default { 105 export default {
120 mixins: [AllApiCalls], 106 mixins: [AllApiCalls],
107 components: {
108 CoursesSideBar
109 },
121 data() { 110 data() {
122 return { 111 return {
123 // courseData: [], 112 // courseData: [],
113 localStorage: localStorage,
124 showLoader: false, 114 showLoader: false,
125 chapter: { chapters: [{}] }, 115 chapter: { chapters: [{}] },
126 chapterNames: [], 116 chapterNames: [],
127 chapterIds: [], 117 chapterIds: [],
128 selectedChapterId: "", 118 selectedChapterId: "",
129 indexSelectedChapter: "" 119 indexSelectedChapter: ""
130 }; 120 };
131 }, 121 },
132 methods: { 122 methods: {
133 showSelectedChapter(newChapter) { 123 showSelectedChapter(newChapter) {
134 if (newChapter == "forward") { 124 if (newChapter == "forward") {
135 this.indexSelectedChapter += 1; 125 this.indexSelectedChapter += 1;
136 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 126 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
137 this.getParticularChapterDetail(); 127 this.getParticularChapterDetail();
138 } 128 }
139 if (newChapter == "back") { 129 if (newChapter == "back") {
140 this.indexSelectedChapter -= 1; 130 this.indexSelectedChapter -= 1;
141 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 131 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
142 this.getParticularChapterDetail(); 132 this.getParticularChapterDetail();
143 } 133 }
144 }, 134 },
145 getParticularChapterDetail() { 135 getParticularChapterDetail() {
146 http() 136 http()
147 .get("/getParticularChapterDetail", { 137 .get("/getParticularChapterDetail", {
148 params: { 138 params: {
149 courseDetailId: this.$route.query.courseDetailId, 139 courseDetailId: this.$route.query.courseDetailId,
150 chapterId: this.selectedChapterId 140 chapterId: this.selectedChapterId
151 } 141 }
152 }) 142 })
153 .then(response => { 143 .then(response => {
154 this.chapter = response.data.data; 144 this.chapter = response.data.data;
155 console.log(" chapter data - ", this.chapter);
156 this.showLoader = false; 145 this.showLoader = false;
157 }) 146 })
158 .catch(err => { 147 .catch(err => {
159 console.log("err====>", err); 148 console.log("err in getParticularChapterDetail====>", err);
160 this.showLoader = false; 149 this.showLoader = false;
161 }); 150 });
162 },
163 async routeToCourseDetails(courseId) {
164 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
165 let response = await this.getParticularCourseDetail(courseId);
166
167 /* If the response is null then dont route */
168 if (response.data.data.length > 0) {
169 this.$router.push({
170 name: "Course Details",
171 query: { courseId: courseId }
172 });
173 } else {
174 this.seeSnackbar("No Data Available", "warning");
175 }
176 } 151 }
177 }, 152 },
178 // computed:{ 153 // computed:{
179 // nextChapterIndex(){ 154 // nextChapterIndex(){
180 155
181 // } 156 // }
182 // } 157 // }
183 async created() { 158 async created() {
184 console.log("route query - ", this.$route.query); 159 console.log("route query - ", this.$route.query);
185 160
186 this.selectedChapterId = this.$route.query.chapterId; 161 this.selectedChapterId = this.$route.query.selectedChapterId;
187 162
188 /* set chapterNames array */ 163 /* set chapterNames array */
189 this.chapterNames = Object.keys(this.$route.query); 164 this.chapterNames = Object.keys(this.$route.query);
190 this.chapterNames.pop(); 165 this.chapterNames.pop();
191 this.chapterNames.pop(); 166 this.chapterNames.pop();
192 console.log("chapter names - ", this.chapterNames); 167 this.chapterNames.pop();
193 168
194 /* set chapter Ids */ 169 /* set chapter Ids */
195 this.chapterIds = Object.values(this.$route.query); 170 this.chapterIds = Object.values(this.$route.query);
196 this.chapterIds.pop(); 171 this.chapterIds.pop();
197 this.chapterIds.pop(); 172 this.chapterIds.pop();
198 console.log("chapter Ids - ", this.chapterIds); 173 this.chapterIds.pop();
199 174
200 this.indexSelectedChapter = this.chapterIds.findIndex(id => { 175 this.indexSelectedChapter = this.chapterIds.findIndex(id => {
201 return id == this.selectedChapterId; 176 return id == this.selectedChapterId;
202 }); 177 });
203 console.log(" index of selected chapter - ", this.indexSelectedChapter);
204 178
205 /* get chapter clicked on using the id */ 179 /* get chapter clicked on using the id */
206 await this.getParticularChapterDetail(this.selectedChapterId); 180 await this.getParticularChapterDetail(this.selectedChapterId);
207
208 /* getStudentCourses - to get courseData - defined in GetApis.js*/
209 await this.getStudentCourses({
210 classId: localStorage.getItem("parentClassId"),
211 studentId: localStorage.getItem("parentStudentId")
212 });
213 } 181 }
214 }; 182 };
215 </script> 183 </script>
216 <style scoped> 184 <style scoped>
217 .side-bar-color { 185 .side-bar-color {
218 color: #827bfa !important; 186 color: #827bfa !important;
219 /* border-top-right-radius: 74px !important; */ 187 /* border-top-right-radius: 74px !important; */
src/pages/Dashboard/CourseDetails.vue
Diff comments   View file @e91641f
1 <template> 1 <template>
2 <div> 2 <div>
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 class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <v-flex xs12 md8> 24 <v-flex xs12 md8>
25 <div 25 <div
26 class="title side-bar-color font-weight-bold" 26 class="title side-bar-color font-weight-bold"
27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div> 27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div>
28 <v-flex xs12 class="subheading mt-2"> 28 <v-flex xs12 class="subheading mt-2">
29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl 29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl
30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj 30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj
31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl 31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl
32 </v-flex> 32 </v-flex>
33 33
34 <div class="mt-5"> 34 <div class="mt-5">
35 <span 35 <v-btn
36 style="cursor: pointer;"
37 class="grey--text lighten-1"
38 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})" 36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
37 flat
38 class="grey--text lighten-1"
39 > 39 >
40 <v-icon>question_answer</v-icon> 40 <v-icon>volume_up</v-icon>
41 <span class="ml-2">Announcement</span> 41 <span>Announcement</span>
42 </span> 42 </v-btn>
43 </div> 43 </div>
44 <div> 44 <div>
45 <span 45 <v-btn
46 style="cursor: pointer;"
47 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})" 46 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
48 class="grey--text lighten-1" 47 class="grey--text lighten-1"
48 flat
49 > 49 >
50 <v-icon>question_answer</v-icon> 50 <v-icon>forum</v-icon>
51 <span class="ml-2">Course discussion forum</span> 51 <span class="ml-2">Course discussion forum</span>
52 </span> 52 </v-btn>
53 </div> 53 </div>
54 <!-- CHAPTERS --> 54 <!-- CHAPTERS -->
55 <v-layout column class="mt-5"> 55 <v-layout column class="mt-5">
56 <v-flex 56 <v-flex
57 v-for="(chapter,index) in courseDetails[0].chapters" 57 v-for="(chapter,index) in courseDetails[0].chapters"
58 :key="index" 58 :key="index"
59 style="cursor: pointer;" 59 style="cursor: pointer;"
60 @click="routeToChapterInfo(chapter._id)" 60 @click="routeToChapterInfo(chapter._id)"
61 > 61 >
62 <v-card class="mt-2 elevation-0 card-border"> 62 <v-card class="mt-2 elevation-0 card-border">
63 <v-container class="pt-0"> 63 <v-container class="pt-0">
64 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div> 64 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div>
65 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div> 65 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div>
66 <div 66 <div
67 v-for="(point,index) in chapter.chapterPoints" 67 v-for="(point,index) in chapter.chapterPoints"
68 :key="index" 68 :key="index"
69 class="ml-2 mt-2" 69 class="ml-2 mt-2"
70 > 70 >
71 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span> 71 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span>
72 </div> 72 </div>
73 </v-container> 73 </v-container>
74 </v-card> 74 </v-card>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-flex> 77 </v-flex>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 79
80 <!-- COURSES --> 80 <!-- COURSES -->
81 <v-flex xs12 md3> 81 <v-flex xs12 md3>
82 <v-card class="elevation-0 card-border" height="100%"> 82 <v-card class="elevation-0 card-border" height="100%">
83 <v-container class="pt-0"> 83 <v-container class="pt-0">
84 <div class="side-bar-color font-weight-bold title">Courses</div> 84 <div class="side-bar-color font-weight-bold title">Courses</div>
85 85
86 <div v-for="(course,index) in courseData"> 86 <div v-for="(course,index) in courseData">
87 <v-btn 87 <v-btn
88 flat 88 flat
89 class="subheading text-xs-start justify-left" 89 class="subheading text-xs-start justify-left"
90 style="cursor: pointer;" 90 style="cursor: pointer;"
91 block 91 block
92 @click="routeToCourseDetails(course._id)" 92 @click="routeToCourseDetails(course._id)"
93 > 93 >
94 <div style="width: 100%;text-align: left;"> 94 <div style="width: 100%;text-align: left;">
95 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 95 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
96 {{course.courseName}} 96 {{course.courseName}}
97 </div> 97 </div>
98 </v-btn> 98 </v-btn>
99 </div> 99 </div>
100 <!-- <v-expansion-panel focusable class="elevation-0"> 100 <!-- <v-expansion-panel focusable class="elevation-0">
101 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i"> 101 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
102 <template v-slot:header> 102 <template v-slot:header>
103 <div class="subheading">{{item.courseName}}</div> 103 <div class="subheading">{{item.courseName}}</div>
104 </template> 104 </template>
105 </v-expansion-panel-content> 105 </v-expansion-panel-content>
106 </v-expansion-panel>--> 106 </v-expansion-panel>-->
107 </v-container> 107 </v-container>
108 </v-card> 108 </v-card>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-container> 111 </v-container>
112 </div> 112 </div>
113 </template> 113 </template>
114 <script> 114 <script>
115 import AllApiCalls from "@/Services/AllApiCalls.js"; 115 import AllApiCalls from "@/Services/AllApiCalls.js";
116 import http from "@/Services/http.js"; 116 import http from "@/Services/http.js";
117 import moment from "moment"; 117 import moment from "moment";
118 export default { 118 export default {
119 mixins: [AllApiCalls], 119 mixins: [AllApiCalls],
120 data() { 120 data() {
121 return { 121 return {
122 showLoader: false, 122 showLoader: false,
123 courseDetails: [{ courseId: {}, classId: {} }], 123 courseDetails: [{ courseId: {}, classId: {} }],
124 chapterIds: [], 124 chapterIds: [],
125 // courseData: [], 125 // courseData: [],
126 courseDataTree: [] 126 courseDataTree: []
127 }; 127 };
128 }, 128 },
129 methods: { 129 methods: {
130 routeToChapterInfo(chapterId) { 130 routeToChapterInfo(selectedChapterId) {
131 /* set value of present chapter selected, and other chapters ids in the obj */ 131 /* set value of present chapter selected, and other chapters ids in the obj */
132 let obj = {}; 132 let obj = {};
133 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) { 133 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
134 obj[ 134 obj[
135 this.courseDetails[0].chapters[i].chapterName 135 this.courseDetails[0].chapters[i].chapterName
136 ] = this.courseDetails[0].chapters[i]._id; 136 ] = this.courseDetails[0].chapters[i]._id;
137 } 137 }
138 obj.chapterId = chapterId; 138 obj.selectedChapterId = selectedChapterId;
139 obj.courseDetailId = this.courseDetails[0]._id; 139 obj.courseDetailId = this.courseDetails[0]._id;
140 obj.courseId = this.$route.query.courseId;
140 this.$router.push({ 141 this.$router.push({
141 name: "Chapter Info", 142 name: "Chapter Info",
142 query: obj 143 query: obj
143 }); 144 });
144 }, 145 },
145 async routeToCourseDetails(courseId) { 146 async routeToCourseDetails(courseId) {
146 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 147 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
147 let response = await this.getParticularCourseDetail(courseId); 148 let response = await this.getParticularCourseDetail(courseId);
148 149
149 /* If the response is null then dont route */ 150 /* If the response is null then dont route */
150 if (response.data.data.length > 0) { 151 if (response.data.data.length > 0) {
151 // REQUIRED TO WAIT FOR UPDATE CYCLE 152 // REQUIRED TO WAIT FOR UPDATE CYCLE
152 this.$nextTick(() => { 153 this.$nextTick(() => {
153 // this.filters.locEmitted = "emitted"; 154 // this.filters.locEmitted = "emitted";
154 this.$router.push({ query: { courseId: courseId } }); 155 this.$router.push({ query: { courseId: courseId } });
155 }); 156 });
156 } else { 157 } else {
157 this.seeSnackbar("No Data Available", "warning"); 158 this.seeSnackbar("No Data Available", "warning");
158 } 159 }
159 } 160 }
160 }, 161 },
161 async created() { 162 async created() {
162 console.log("its working"); 163 console.log("its working");
163 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 164 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
164 let response = await this.getParticularCourseDetail( 165 let response = await this.getParticularCourseDetail(
165 this.$route.query.courseId 166 this.$route.query.courseId
166 ); 167 );
167 this.courseDetails = response.data.data; 168 this.courseDetails = response.data.data;
168 console.log("its working courseDetails - ", this.courseDetails); 169 console.log("its working courseDetails - ", this.courseDetails);
169 170
170 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 171 /* getStudentCourses - to get courseData - defined in GetApis.js*/
171 await this.getStudentCourses({ 172 await this.getStudentCourses({
172 classId: localStorage.getItem("parentClassId"), 173 classId: localStorage.getItem("parentClassId"),
173 studentId: localStorage.getItem("parentStudentId") 174 studentId: localStorage.getItem("parentStudentId")
174 }); 175 });
175 } 176 }
176 }; 177 };
177 </script> 178 </script>
178 <style scoped> 179 <style scoped>
179 .side-bar-color { 180 .side-bar-color {
180 color: #827bfa !important; 181 color: #827bfa !important;
181 /* border-top-right-radius: 74px !important; */ 182 /* border-top-right-radius: 74px !important; */
182 } 183 }
183 .card-border { 184 .card-border {
184 border: 1px #bdbdbd solid; 185 border: 1px #bdbdbd solid;
185 border-radius: 3px; 186 border-radius: 3px;
186 } 187 }
187 /* .v-treeview-node__toggle { 188 /* .v-treeview-node__toggle {
src/pages/Dashboard/CourseDiscussionForum.vue
Diff comments   View file @e91641f
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 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM --> 22 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
23 <v-dialog v-model="addForumDialog" max-width="500" persistent> 23 <v-dialog v-model="addForumDialog" max-width="500" persistent>
24 <v-card flat class="card-style pa-2" dark> 24 <v-card flat class="card-style pa-2" dark>
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">Add Forum</label> 27 <label class="title text-xs-center">Add Forum</label>
28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon> 28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-container fluid> 31 <v-container fluid>
32 <v-layout align-center> 32 <v-layout align-center>
33 <v-flex xs12> 33 <v-flex xs12>
34 <v-flex xs12 sm12> 34 <v-flex xs12 sm12>
35 <v-form ref="form" v-model="valid" lazy-validation> 35 <v-form ref="form" v-model="valid" lazy-validation>
36 <v-layout> 36 <v-layout>
37 <v-flex 37 <v-flex
38 xs12 38 xs12
39 class="text-xs-center text-sm-center text-md-center text-lg-center" 39 class="text-xs-center text-sm-center text-md-center text-lg-center"
40 > 40 >
41 <v-avatar size="100px" v-if="!imageUrl"> 41 <v-avatar size="100px" v-if="!imageUrl">
42 <img src="/static/icon/user.png" /> 42 <img src="/static/icon/user.png" />
43 </v-avatar> 43 </v-avatar>
44 <input 44 <input
45 type="file" 45 type="file"
46 style="display: none" 46 style="display: none"
47 ref="image" 47 ref="image"
48 accept="image/*" 48 accept="image/*"
49 @change="onFilePicked" 49 @change="onFilePicked"
50 /> 50 />
51 <img 51 <img
52 :src="imageData.imageUrl" 52 :src="imageData.imageUrl"
53 height="150" 53 height="150"
54 width="150" 54 width="150"
55 v-if="imageUrl" 55 v-if="imageUrl"
56 style="border-radius:50%; width:200px" 56 style="border-radius:50%; width:200px"
57 /> 57 />
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 60
61 <v-layout wrap> 61 <v-layout wrap>
62 <!-- SUBJECT --> 62 <!-- SUBJECT -->
63 <v-flex xs12 sm12> 63 <v-flex xs12 sm12>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 sm4 class="pt-4 subheading"> 65 <v-flex xs4 sm4 class="pt-4 subheading">
66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label> 66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
68 </v-flex> 68 </v-flex>
69 <v-flex xs8 sm8 class="ml-3"> 69 <v-flex xs8 sm8 class="ml-3">
70 <v-text-field 70 <v-text-field
71 v-model="addForumParams.subject" 71 v-model="addForumParams.subject"
72 placeholder="subject" 72 placeholder="subject"
73 type="text" 73 type="text"
74 :rules="cantBeEmpty" 74 :rules="cantBeEmpty"
75 required 75 required
76 ></v-text-field> 76 ></v-text-field>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <!-- DESCRIPTION --> 80 <!-- DESCRIPTION -->
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
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 hidden-xs-only hidden-sm-only">Description:</label> 84 <label class="right hidden-xs-only hidden-sm-only">Description:</label>
85 <label 85 <label
86 class="right hidden-lg-only hidden-md-only hidden-xl-only" 86 class="right hidden-lg-only hidden-md-only hidden-xl-only"
87 >Description:</label> 87 >Description:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8 sm8 class="ml-3"> 89 <v-flex xs8 sm8 class="ml-3">
90 <v-text-field 90 <v-text-field
91 v-model="addForumParams.description" 91 v-model="addForumParams.description"
92 placeholder="Description" 92 placeholder="Description"
93 type="text" 93 type="text"
94 :rules="cantBeEmpty" 94 :rules="cantBeEmpty"
95 required 95 required
96 ></v-text-field> 96 ></v-text-field>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 </v-flex> 99 </v-flex>
100 <!-- UPLOAD IMAGE --> 100 <!-- UPLOAD IMAGE -->
101 <v-flex xs12 sm12> 101 <v-flex xs12 sm12>
102 <v-layout> 102 <v-layout>
103 <v-flex xs4 class="pt-4 subheading"> 103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs8 class="ml-3"> 107 <v-flex xs8 class="ml-3">
108 <v-text-field 108 <v-text-field
109 label="Select Image" 109 label="Select Image"
110 @click="pickFile" 110 @click="pickFile"
111 v-model="imageName" 111 v-model="imageName"
112 append-icon="attach_file" 112 append-icon="attach_file"
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 </v-layout> 117 </v-layout>
118 <v-layout> 118 <v-layout>
119 <v-flex xs12 sm12> 119 <v-flex xs12 sm12>
120 <v-layout class="right"> 120 <v-layout class="right">
121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-form> 125 </v-form>
126 </v-flex> 126 </v-flex>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-container> 129 </v-container>
130 </v-card> 130 </v-card>
131 </v-dialog> 131 </v-dialog>
132 132
133 <v-container grid-list-xl class="pt-0"> 133 <v-container grid-list-xl class="pt-0">
134 <v-layout row wrap class="mt-1"> 134 <v-layout row wrap class="mt-1">
135 <v-flex xs12 sm12 md9> 135 <v-flex xs12 sm12 md9>
136 <v-layout column> 136 <v-layout column>
137 <!-- HEADING --> 137 <!-- HEADING -->
138 <v-flex> 138 <v-flex>
139 <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div> 139 <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
140 <div class="subheading grey--text lighten-1">General news and announcements</div> 140 <div class="subheading grey--text lighten-1">General news and announcements</div>
141 </v-flex> 141 </v-flex>
142 142
143 <!-- ADD DISCUSSION FORUM BUTTON --> 143 <!-- ADD DISCUSSION FORUM BUTTON -->
144 <v-flex> 144 <v-flex>
145 <div> 145 <div>
146 <v-btn 146 <v-btn
147 fab 147 fab
148 dark 148 dark
149 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 149 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
150 small 150 small
151 @click="addForumDialog = true" 151 @click="addForumDialog = true"
152 > 152 >
153 <v-icon dark>add</v-icon> 153 <v-icon dark>add</v-icon>
154 </v-btn> 154 </v-btn>
155 <v-btn 155 <v-btn
156 round 156 round
157 class="open-dialog-button hidden-sm-only hidden-xs-only" 157 class="open-dialog-button hidden-sm-only hidden-xs-only"
158 dark 158 dark
159 @click="addForumDialog = true" 159 @click="addForumDialog = true"
160 > 160 >
161 <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic 161 <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
162 </v-btn> 162 </v-btn>
163 </div> 163 </div>
164 </v-flex> 164 </v-flex>
165 165
166 <!-- DATA TABLE --> 166 <!-- DATA TABLE -->
167 <v-flex> 167 <v-flex>
168 <v-data-table 168 <v-data-table
169 :headers="courseDiscussionHeaders" 169 :headers="courseDiscussionHeaders"
170 :items="courseDiscussionItems" 170 :items="courseDiscussionItems"
171 :pagination.sync="pagination" 171 :pagination.sync="pagination"
172 :search="search" 172 :search="search"
173 item-key="_id" 173 item-key="_id"
174 > 174 >
175 <template slot="items" slot-scope="props"> 175 <template slot="items" slot-scope="props">
176 <tr 176 <tr
177 class="tr" 177 class="tr"
178 style="cursor: pointer;" 178 style="cursor: pointer;"
179 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 179 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
180 > 180 >
181 <td class="text-xs-center td td-row"> 181 <td class="text-xs-center td td-row">
182 <v-avatar size="40"> 182 <v-avatar size="40">
183 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 183 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
184 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 184 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
185 </v-avatar> 185 </v-avatar>
186 </td> 186 </td>
187 <td class="td td-row text-xs-center">{{ props.item.subject}}</td> 187 <td class="td td-row text-xs-center">{{ props.item.subject}}</td>
188 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> 188 <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
189 <td class="td td-row text-xs-center">-</td> 189 <td class="td td-row text-xs-center">-</td>
190 <td class="td td-row text-xs-center">{{ props.item.forumThread.length }}</td> 190 <td class="td td-row text-xs-center">{{ props.item.forumThread.length }}</td>
191 </tr> 191 </tr>
192 </template> 192 </template>
193 <!-- REPLY FUNCTIONALITY -->
193 <template slot="expand" slot-scope="props"> 194 <template slot="expand" slot-scope="props">
194 <v-layout> 195 <v-layout>
195 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i"> 196 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
196 <v-card class="elevation-0 grey lighten-3 pa-2" flat> 197 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
197 <v-list two-line subheader> 198 <v-list two-line subheader>
198 <v-list-tile> 199 <v-list-tile>
199 <v-list-tile-avatar> 200 <v-list-tile-avatar>
200 <v-avatar size="46"> 201 <v-avatar size="46">
201 <img 202 <img
202 :src="courseDiscussionData.attachementUrl" 203 :src="courseDiscussionData.attachementUrl"
203 v-if="courseDiscussionData.attachementUrl" 204 v-if="courseDiscussionData.attachementUrl"
204 /> 205 />
205 <img 206 <img
206 src="/static/icon/user.png" 207 src="/static/icon/user.png"
207 v-else-if="!courseDiscussionData.attachementUrl" 208 v-else-if="!courseDiscussionData.attachementUrl"
208 /> 209 />
209 </v-avatar> 210 </v-avatar>
210 </v-list-tile-avatar> 211 </v-list-tile-avatar>
211 <v-list-tile-content> 212 <v-list-tile-content>
212 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title> 213 <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title>
213 <v-list-tile-sub-title> 214 <v-list-tile-sub-title>
214 By 215 By
215 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span> 216 <span class="info--text">{{ courseDiscussionData.studentId.name }}</span>
216 - {{dates(courseDiscussionData.created ) }} 217 - {{dates(courseDiscussionData.created ) }}
217 </v-list-tile-sub-title> 218 </v-list-tile-sub-title>
218 </v-list-tile-content> 219 </v-list-tile-content>
219 <v-list-tile-action> 220 <v-list-tile-action>
220 <div> 221 <div>
221 <v-btn 222 <v-btn
222 flat 223 flat
223 round 224 round
224 dark 225 dark
225 class="reply-btn" 226 class="reply-btn"
226 @click="showReplyBox = true" 227 @click="showReplyBox = true"
227 >Reply</v-btn> 228 >Reply</v-btn>
228 </div> 229 </div>
229 </v-list-tile-action> 230 </v-list-tile-action>
230 </v-list-tile> 231 </v-list-tile>
231 </v-list> 232 </v-list>
232 </v-card> 233 </v-card>
233 <v-flex xs12 class="mt-4" v-show="showReplyBox"> 234 <v-flex xs12 class="mt-4" v-show="showReplyBox">
234 <v-textarea 235 <v-textarea
235 name="input-7-1" 236 name="input-7-1"
236 solo 237 solo
237 label="Label Text" 238 label="Label Text"
238 multi-line 239 multi-line
239 v-model="replyDescription" 240 v-model="replyDescription"
240 ></v-textarea> 241 ></v-textarea>
241 <v-btn 242 <v-btn
242 round 243 round
243 dark 244 dark
244 class="open-dialog-button" 245 class="open-dialog-button"
245 flat 246 flat
246 @click="showReplyBox = false" 247 @click="showReplyBox = false"
247 >Cancel</v-btn> 248 >Cancel</v-btn>
248 <v-btn 249 <v-btn
249 round 250 round
250 dark 251 dark
251 :loading="loading" 252 :loading="loading"
252 class="reply-btn" 253 class="reply-btn"
253 @click="replyThreadDiscussion(props.item)" 254 @click="replyThreadDiscussion(props.item)"
254 >Submit</v-btn> 255 >Submit</v-btn>
255 </v-flex> 256 </v-flex>
256 <v-flex 257
257 xs12 258 <!-- REPLY THREAD -->
258 class="mt-4 pl-5 mx-auto" 259 <v-layout
259 v-for="(replyThread,i) in courseDiscussionData.forumThread" 260 :class="[mt-4,pl-5,mx-auto,replyThread.teacherId?'justify-start':'justify-end']"
261 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
260 :key="i" 262 :key="i"
261 > 263 >
262 <v-card class="elevation-0 grey lighten-3" flat> 264 <v-flex xs12 md7>
263 <v-list two-line subheader class="grey lighten-3 pa-1"> 265 <v-card class="elevation-0 grey lighten-3" flat>
264 <v-list-tile> 266 <v-list two-line subheader class="grey lighten-3 pa-1">
265 <v-list-tile-avatar> 267 <v-list-tile>
266 <v-avatar size="46"> 268 <v-list-tile-avatar>
267 <img 269 <v-avatar size="46">
268 :src="courseDiscussionData.attachementUrl" 270 <img
269 v-if="courseDiscussionData.attachementUrl" 271 :src="courseDiscussionData.attachementUrl"
270 /> 272 v-if="courseDiscussionData.attachementUrl"
271 <img 273 />
272 src="/static/icon/user.png" 274 <img
273 v-else-if="!courseDiscussionData.attachementUrl" 275 src="/static/icon/user.png"
274 /> 276 v-else-if="!courseDiscussionData.attachementUrl"
275 </v-avatar> 277 />
276 </v-list-tile-avatar> 278 </v-avatar>
279 </v-list-tile-avatar>
280 <v-list-tile-content>
281 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
282 <v-list-tile-sub-title>
283 By
284 <span
285 class="info--text"
286 v-if="replyThread.studentId"
287 >{{ replyThread.studentId.name }}</span>
288 <span
289 class="info--text"
290 v-if="replyThread.teacherId"
291 >{{ replyThread.teacherId.name }}</span>
292 - {{dates(replyThread.created ) }}
293 </v-list-tile-sub-title>
294 </v-list-tile-content>
295 </v-list-tile>
296 </v-list>
297 <v-list class="pa-2 reply-desc">
277 <v-list-tile-content> 298 <v-list-tile-content>
278 <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title> 299 <v-list-tile-title
279 <v-list-tile-sub-title> 300 v-show="replyThread.showDescriptionReplyThread"
280 By 301 >{{ replyThread.description }}</v-list-tile-title>
281 <span 302 <v-flex
282 class="info--text" 303 xs12
283 v-if="replyThread.studentId" 304 sm12
284 >{{ replyThread.studentId.name }}</span> 305 md4
285 <span 306 v-show="replyThread.showUpdateReplyThread == true"
286 class="info--text" 307 >
287 v-if="replyThread.teacherId" 308 <v-text-field v-model="replyThread.description"></v-text-field>
288 >{{ replyThread.teacherId.name }}</span> 309 <v-btn
289 - {{dates(replyThread.created ) }} 310 flat
290 </v-list-tile-sub-title> 311 round
312 dark
313 class="reply-btn right"
314 @click="updateRelpyThreadDiscussion(replyThread,props.item)"
315 >Save</v-btn>
316 </v-flex>
291 </v-list-tile-content> 317 </v-list-tile-content>
292 </v-list-tile> 318 </v-list>
293 </v-list> 319 <v-list class="grey lighten-4 pa-0">
294 <v-list class="pa-2 reply-desc"> 320 <v-list-tile-action>
295 <v-list-tile-content> 321 <v-spacer></v-spacer>
296 <v-list-tile-title 322 <div
297 v-show="replyThread.showDescriptionReplyThread" 323 v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
298 >{{ replyThread.description }}</v-list-tile-title> 324 >
299 <v-flex 325 <v-btn
300 xs12 326 flat
301 sm12 327 round
302 md4 328 dark
303 v-show="replyThread.showUpdateReplyThread == true" 329 class="reply-btn"
304 > 330 @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)"
305 <v-text-field v-model="replyThread.description"></v-text-field> 331 >Delete</v-btn>
306 <v-btn 332 <v-btn
307 flat 333 flat
308 round 334 round
309 dark 335 dark
310 class="reply-btn right" 336 class="reply-btn mr-4"
311 @click="updateRelpyThreadDiscussion(replyThread,props.item)" 337 @click="showUpdateReplyThreadDiscussion(replyThread)"
312 >Save</v-btn> 338 >Edit</v-btn>
313 </v-flex> 339 </div>
314 </v-list-tile-content> 340 </v-list-tile-action>
315 </v-list> 341 </v-list>
316 <v-list class="grey lighten-4 pa-0"> 342 </v-card>
317 <v-list-tile-action> 343 </v-flex>
318 <v-spacer></v-spacer> 344 </v-layout>
319 <div>
320 <v-btn
321 flat
322 round
323 dark
324 class="reply-btn"
325 @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)"
326 >Delete</v-btn>
327 <v-btn
328 flat
329 round
330 dark
331 class="reply-btn mr-4"
332 @click="showUpdateReplyThreadDiscussion(replyThread)"
333 >Edit</v-btn>
334 </div>
335 </v-list-tile-action>
336 </v-list>
337 </v-card>
338 </v-flex>
339 </v-flex> 345 </v-flex>
340 </v-layout> 346 </v-layout>
341 </template> 347 </template>
342 <v-alert 348 <v-alert
343 slot="no-results" 349 slot="no-results"
344 :value="true" 350 :value="true"
345 color="error" 351 color="error"
346 icon="warning" 352 icon="warning"
347 >Your search for "{{ search }}" found no results.</v-alert> 353 >Your search for "{{ search }}" found no results.</v-alert>
348 </v-data-table> 354 </v-data-table>
349 </v-flex> 355 </v-flex>
350 </v-layout> 356 </v-layout>
351 </v-flex> 357 </v-flex>
352 358
353 <v-spacer></v-spacer> 359 <v-spacer></v-spacer>
354 360
355 <!-- COURSES - positioned to the right of the page --> 361 <!-- COURSES - positioned to the right of the page -->
356 <v-flex xs12 sm12 md3> 362 <v-flex xs12 sm12 md3>
357 <v-card class="elevation-0 card-border" height="100%"> 363 <v-card class="elevation-0 card-border" height="100%">
358 <v-container class="pt-0"> 364 <v-container class="pt-0">
359 <div class="side-bar-color font-weight-bold title">Courses</div> 365 <div class="side-bar-color font-weight-bold title">Courses</div>
360 366
361 <div v-for="(course,index) in courseData"> 367 <div v-for="(course,index) in courseData">
362 <v-btn 368 <v-btn
363 flat 369 flat
364 class="subheading text-xs-start justify-left" 370 class="subheading text-xs-start justify-left"
365 style="cursor: pointer;" 371 style="cursor: pointer;"
366 block 372 block
367 @click="routeToCourseDetails(course._id)" 373 @click="routeToCourseDetails(course._id)"
368 > 374 >
369 <div style="width: 100%;text-align: left;"> 375 <div style="width: 100%;text-align: left;">
370 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 376 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
371 {{course.courseName}} 377 {{course.courseName}}
372 </div> 378 </div>
373 </v-btn> 379 </v-btn>
374 </div> 380 </div>
375 </v-container> 381 </v-container>
376 </v-card> 382 </v-card>
377 </v-flex> 383 </v-flex>
378 </v-layout> 384 </v-layout>
379 </v-container> 385 </v-container>
380 </div> 386 </div>
381 </template> 387 </template>
382 <script> 388 <script>
383 import AllApiCalls from "@/Services/AllApiCalls.js"; 389 import AllApiCalls from "@/Services/AllApiCalls.js";
384 import http from "@/Services/http.js"; 390 import http from "@/Services/http.js";
385 import moment from "moment"; 391 import moment from "moment";
386 export default { 392 export default {
387 mixins: [AllApiCalls], 393 mixins: [AllApiCalls],
388 data() { 394 data() {
389 return { 395 return {
390 localStorage: localStorage, 396 localStorage: localStorage,
391 valid: true, 397 valid: true,
392 addForumDialog: false, 398 addForumDialog: false,
393 addForumParams: {}, 399 addForumParams: {},
394 // UPLOAD IMAGE 400 // UPLOAD IMAGE
395 imageName: "", 401 imageName: "",
396 imageUrl: "", 402 imageUrl: "",
397 imageFile: "", 403 imageFile: "",
398 imageData: {}, 404 imageData: {},
399 405
400 // DATA TABLE 406 // DATA TABLE
401 search: "", 407 search: "",
402 pagination: { 408 pagination: {
403 rowsPerPage: 10 409 rowsPerPage: 10
404 }, 410 },
405 courseDiscussionHeaders: [ 411 courseDiscussionHeaders: [
406 { 412 {
407 text: "Image", 413 text: "Image",
408 value: "attachementUrl", 414 value: "attachementUrl",
409 sortable: false, 415 sortable: false,
410 align: "center" 416 align: "center"
411 }, 417 },
412 { 418 {
413 text: "Discussion", 419 text: "Discussion",
414 align: "center", 420 align: "center",
415 sortable: false, 421 sortable: false,
416 value: "" 422 value: ""
417 }, 423 },
418 { 424 {
419 text: "Started", 425 text: "Started",
420 value: "", 426 value: "",
421 sortable: false, 427 sortable: false,
422 align: "center" 428 align: "center"
423 }, 429 },
424 { text: "Last Pot", value: "", sortable: false, align: "center" }, 430 { text: "Last Pot", value: "", sortable: false, align: "center" },
425 { text: "Replies", value: "", sortable: false, align: "center" } 431 { text: "Replies", value: "", sortable: false, align: "center" }
426 ], 432 ],
427 courseDiscussionItems: [], 433 courseDiscussionItems: [],
428 434
429 // COURSE DISCUSSION REPLTY FUNCTIONALITY 435 // COURSE DISCUSSION REPLTY FUNCTIONALITY
430 courseDiscussionId: "", 436 courseDiscussionId: "",
431 showReplyBox: false, 437 showReplyBox: false,
432 courseDiscussionData: [], 438 courseDiscussionData: [],
433 replyDescription: "", 439 replyDescription: "",
434 loginId: "", 440 loginId: "",
435 editedIndex: -1 441 editedIndex: -1
436 }; 442 };
437 }, 443 },
438 methods: { 444 methods: {
439 dates: function(date) { 445 dates: function(date) {
440 return moment(date).format("MMMM DD, YYYY hh:mm A"); 446 return moment(date).format("MMMM DD, YYYY hh:mm A");
441 }, 447 },
442 /* UPLOAD IMAGE */ 448 /* UPLOAD IMAGE */
443 pickFile() { 449 pickFile() {
444 this.$refs.image.click(); 450 this.$refs.image.click();
445 }, 451 },
446 452
447 onFilePicked(e) { 453 onFilePicked(e) {
448 // console.log(e) 454 // console.log(e)
449 const files = e.target.files; 455 const files = e.target.files;
450 this.imageData.upload = e.target.files[0]; 456 this.imageData.upload = e.target.files[0];
451 if (files[0] !== undefined) { 457 if (files[0] !== undefined) {
452 this.imageName = files[0].name; 458 this.imageName = files[0].name;
453 if (this.imageName.lastIndexOf(".") <= 0) { 459 if (this.imageName.lastIndexOf(".") <= 0) {
454 return; 460 return;
455 } 461 }
456 const fr = new FileReader(); 462 const fr = new FileReader();
457 fr.readAsDataURL(files[0]); 463 fr.readAsDataURL(files[0]);
458 fr.addEventListener("load", () => { 464 fr.addEventListener("load", () => {
459 this.imageUrl = fr.result; 465 this.imageUrl = fr.result;
460 this.imageFile = files[0]; // this is an image file that can be sent to server... 466 this.imageFile = files[0]; // this is an image file that can be sent to server...
461 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 467 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
462 }); 468 });
463 } else { 469 } else {
464 this.imageName = ""; 470 this.imageName = "";
465 this.imageFile = ""; 471 this.imageFile = "";
466 this.imageUrl = ""; 472 this.imageUrl = "";
467 } 473 }
468 }, 474 },
469 async submit() { 475 async submit() {
470 if (this.$refs.form.validate()) { 476 if (this.$refs.form.validate()) {
471 this.addForumParams.classId = localStorage.getItem("parentClassId"); 477 this.addForumParams.classId = localStorage.getItem("parentClassId");
472 this.addForumParams.courseId = this.$route.query.courseId; 478 this.addForumParams.courseId = this.$route.query.courseId;
473 this.addForumParams.studentId = localStorage.getItem("parentStudentId"); 479 this.addForumParams.studentId = localStorage.getItem("parentStudentId");
474 480
475 if (this.imageUrl) { 481 if (this.imageUrl) {
476 var str = this.imageUrl; 482 var str = this.imageUrl;
477 const [baseUrl, imageUrl] = str.split(/,/); 483 const [baseUrl, imageUrl] = str.split(/,/);
478 this.addForumParams.upload = imageUrl; 484 this.addForumParams.upload = imageUrl;
479 } 485 }
480 this.loading = true; 486 this.loading = true;
481 await http() 487 await http()
482 .post("/createCourseDiscussion", this.addForumParams) 488 .post("/createCourseDiscussion", this.addForumParams)
483 .then(response => { 489 .then(response => {
484 this.snackbar = true; 490 this.snackbar = true;
485 this.text = "Discussion added successfully"; 491 this.text = "Discussion added successfully";
486 this.snackbarColor = "green"; 492 this.snackbarColor = "green";
487 this.addForumDialog = false; 493 this.addForumDialog = false;
488 this.clear(); 494 this.clear();
489 this.loading = false; 495 this.loading = false;
490 console.log("response of createCourseDiscussion - ", response); 496 console.log("response of createCourseDiscussion - ", response);
491 }) 497 })
492 .catch(error => { 498 .catch(error => {
493 this.snackbar = true; 499 this.snackbar = true;
494 this.text = error.response.data.message; 500 this.text = error.response.data.message;
495 this.snackbarColor = "error"; 501 this.snackbarColor = "error";
496 this.loading = false; 502 this.loading = false;
497 }); 503 });
498 504
499 /* getCourseDiscussionesList - to populate the data table */ 505 /* getCourseDiscussionesList - to populate the data table */
500 await this.getCourseDiscussionesList({ 506 await this.getCourseDiscussionesList({
501 courseId: this.$route.query.courseId, 507 courseId: this.$route.query.courseId,
502 classId: localStorage.getItem("parentClassId") 508 classId: localStorage.getItem("parentClassId")
503 }); 509 });
504 this.addForumDialog = false; 510 this.addForumDialog = false;
505 } 511 }
506 }, 512 },
507 clear() { 513 clear() {
508 this.$refs.form.reset(); 514 this.$refs.form.reset();
509 this.imageUrl = ""; 515 this.imageUrl = "";
510 }, 516 },
511 async routeToCourseDetails(courseId) { 517 async routeToCourseDetails(courseId) {
512 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 518 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
513 let response = await this.getParticularCourseDetail(courseId); 519 let response = await this.getParticularCourseDetail(courseId);
514 520
515 /* If the response is null then dont route */ 521 /* If the response is null then dont route */
516 if (response.data.data.length > 0) { 522 if (response.data.data.length > 0) {
517 this.$router.push({ 523 this.$router.push({
518 name: "Course Details", 524 name: "Course Details",
519 query: { courseId: courseId } 525 query: { courseId: courseId }
520 }); 526 });
521 } else { 527 } else {
522 this.seeSnackbar("No Data Available", "warning"); 528 this.seeSnackbar("No Data Available", "warning");
523 } 529 }
524 }, 530 },
525 531
526 // COURSE DISCUSSION REPLY FUNCTIONALITY 532 // COURSE DISCUSSION REPLY FUNCTIONALITY
527 533
528 getDiscussionesThread() { 534 getDiscussionesThread() {
529 // console.log("id", this.getSelectedData.courseId); 535 // console.log("id", this.getSelectedData.courseId);
530 this.showLoader = true; 536 this.showLoader = true;
531 http() 537 http()
532 .get("/getParticularCourseDiscussion", { 538 .get("/getParticularCourseDiscussion", {
533 params: { 539 params: {
534 courseDiscussionId: this.courseDiscussionId 540 courseDiscussionId: this.courseDiscussionId
535 } 541 }
536 }) 542 })
537 .then(response => { 543 .then(response => {
538 // console.log("response", response.data.data); 544 // console.log("response", response.data.data);
539 this.courseDiscussionData = response.data.data; 545 this.courseDiscussionData = response.data.data;
540 for (let i = 0; i < this.courseDiscussionData.length; i++) { 546 for (let i = 0; i < this.courseDiscussionData.length; i++) {
541 for ( 547 for (
542 let j = 0; 548 let j = 0;
543 j < this.courseDiscussionData[i].forumThread.length; 549 j < this.courseDiscussionData[i].forumThread.length;
544 j++ 550 j++
545 ) { 551 ) {
546 this.courseDiscussionData[i].forumThread[ 552 this.courseDiscussionData[i].forumThread[
547 j 553 j
548 ].showUpdateReplyThread = false; 554 ].showUpdateReplyThread = false;
549 this.courseDiscussionData[i].forumThread[ 555 this.courseDiscussionData[i].forumThread[
550 j 556 j
551 ].showDescriptionReplyThread = true; 557 ].showDescriptionReplyThread = true;
552 } 558 }
553 } 559 }
554 this.showLoader = false; 560 this.showLoader = false;
555 this.showReplyBox = false; 561 this.showReplyBox = false;
556 }) 562 })
557 .catch(error => { 563 .catch(error => {
558 console.log("err====>", error); 564 console.log("err====>", error);
559 this.showLoader = false; 565 this.showLoader = false;
560 }); 566 });
561 }, 567 },
562 replyThreadDiscussion(selected) { 568 replyThreadDiscussion(selected) {
563 this.showLoader = true; 569 this.showLoader = true;
564 var payloadData = { 570 var payloadData = {
565 courseDiscussionId: selected._id, 571 courseDiscussionId: selected._id,
566 studentId: localStorage.getItem("parentStudentId"), 572 studentId: localStorage.getItem("parentStudentId"),
567 description: this.replyDescription 573 description: this.replyDescription
568 }; 574 };
569 http() 575 http()
570 .put("/replyForumThread", payloadData) 576 .put("/replyForumThread", payloadData)
571 .then(response => { 577 .then(response => {
572 // console.log("response", response.data.data); 578 // console.log("response", response.data.data);
573 this.showLoader = false; 579 this.showLoader = false;
574 this.getDiscussionesThread(); 580 this.getDiscussionesThread();
575 }) 581 })
576 .catch(error => { 582 .catch(error => {
577 this.showLoader = false; 583 this.showLoader = false;
578 }); 584 });
579 }, 585 },
580 showUpdateReplyThreadDiscussion(item) { 586 showUpdateReplyThreadDiscussion(item) {
581 this.editedIndex = this.courseDiscussionData.indexOf(item); 587 this.editedIndex = this.courseDiscussionData.indexOf(item);
582 var editedItem = Object.assign({}, item); 588 var editedItem = Object.assign({}, item);
583 var arrayOfcourseDiscussionData = []; 589 var arrayOfcourseDiscussionData = [];
584 for (let i = 0; i < this.courseDiscussionData.length; i++) { 590 for (let i = 0; i < this.courseDiscussionData.length; i++) {
585 for ( 591 for (
586 let j = 0; 592 let j = 0;
587 j < this.courseDiscussionData[i].forumThread.length; 593 j < this.courseDiscussionData[i].forumThread.length;
588 j++ 594 j++
589 ) { 595 ) {
590 if ( 596 if (
591 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id 597 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
592 ) { 598 ) {
593 this.courseDiscussionData[i].forumThread[ 599 this.courseDiscussionData[i].forumThread[
594 j 600 j
595 ].showUpdateReplyThread = true; 601 ].showUpdateReplyThread = true;
596 this.courseDiscussionData[i].forumThread[ 602 this.courseDiscussionData[i].forumThread[
597 j 603 j
598 ].showDescriptionReplyThread = false; 604 ].showDescriptionReplyThread = false;
599 } 605 }
600 } 606 }
601 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]); 607 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
602 } 608 }
603 this.courseDiscussionData = arrayOfcourseDiscussionData; 609 this.courseDiscussionData = arrayOfcourseDiscussionData;
604 }, 610 },
605 updateRelpyThreadDiscussion(replyThread, selected) { 611 updateRelpyThreadDiscussion(replyThread, selected) {
606 this.showLoader = true; 612 this.showLoader = true;
607 var payloadData = { 613 var payloadData = {
608 forumThreadId: replyThread._id, 614 forumThreadId: replyThread._id,
609 courseDiscussionId: selected._id, 615 courseDiscussionId: selected._id,
610 studentId: localStorage.getItem("parentStudentId"), 616 studentId: localStorage.getItem("parentStudentId"),
611 description: replyThread.description 617 description: replyThread.description
612 }; 618 };
613 http() 619 http()
614 .put("/updateForumThread", payloadData) 620 .put("/updateForumThread", payloadData)
615 .then(response => { 621 .then(response => {
616 this.showLoader = false; 622 this.showLoader = false;
617 this.getDiscussionesThread(); 623 this.getDiscussionesThread();
618 }) 624 })
619 .catch(error => { 625 .catch(error => {
620 this.showLoader = false; 626 this.showLoader = false;
621 }); 627 });
622 }, 628 },
623 deleteRelpyThreadDiscussion(id, courseDiscussionId) { 629 deleteRelpyThreadDiscussion(id, courseDiscussionId) {
624 this.showLoader = true; 630 this.showLoader = true;
625 var payloadData = { 631 var payloadData = {
626 forumThreadId: id, 632 forumThreadId: id,
627 courseDiscussionId: courseDiscussionId 633 courseDiscussionId: courseDiscussionId
628 }; 634 };
629 http() 635 http()
630 .put( 636 .put(
631 "/deleteForumThread", 637 "/deleteForumThread",
632 confirm("Are you sure you want to delete this?") && payloadData 638 confirm("Are you sure you want to delete this?") && payloadData
633 ) 639 )
634 .then(response => { 640 .then(response => {
635 this.showLoader = false; 641 this.showLoader = false;
636 this.getDiscussionesThread(); 642 this.getDiscussionesThread();
637 }) 643 })
638 .catch(error => { 644 .catch(error => {
639 this.showLoader = false; 645 this.showLoader = false;
640 }); 646 });
641 } 647 }
642 }, 648 },
643 async created() { 649 async created() {
644 this.loginId = this.$store.state.id; 650 this.loginId = this.$store.state.id;
645 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 651 /* getStudentCourses - to get courseData - defined in GetApis.js*/
646 await this.getStudentCourses({ 652 await this.getStudentCourses({
647 classId: localStorage.getItem("parentClassId"), 653 classId: localStorage.getItem("parentClassId"),
648 studentId: localStorage.getItem("parentStudentId") 654 studentId: localStorage.getItem("parentStudentId")
649 }); 655 });
650 656
651 /* getCourseDiscussionesList - to populate the data table */ 657 /* getCourseDiscussionesList - to populate the data table */
652 await this.getCourseDiscussionesList({ 658 await this.getCourseDiscussionesList({
653 courseId: this.$route.query.courseId, 659 courseId: this.$route.query.courseId,
654 classId: localStorage.getItem("parentClassId") 660 classId: localStorage.getItem("parentClassId")
655 }); 661 });
656 } 662 }
657 }; 663 };
658 </script> 664 </script>
659 <style scoped> 665 <style scoped>
660 .side-bar-color { 666 .side-bar-color {
661 color: #827bfa !important; 667 color: #827bfa !important;
662 /* border-top-right-radius: 74px !important; */ 668 /* border-top-right-radius: 74px !important; */
663 } 669 }
664 .card-border { 670 .card-border {
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @e91641f
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 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
23 <v-dialog v-model="addForumDialog" max-width="500" persistent>
24 <v-card flat class="card-style pa-2" dark>
25 <v-layout>
26 <v-flex xs12>
27 <label class="title text-xs-center">Add Forum</label>
28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
29 </v-flex>
30 </v-layout>
31 <v-container fluid>
32 <v-layout align-center>
33 <v-flex xs12>
34 <v-flex xs12 sm12>
35 <v-form ref="form" v-model="valid" lazy-validation>
36 <v-layout>
37 <v-flex
38 xs12
39 class="text-xs-center text-sm-center text-md-center text-lg-center"
40 >
41 <v-avatar size="100px" v-if="!imageUrl">
42 <img src="/static/icon/user.png" />
43 </v-avatar>
44 <input
45 type="file"
46 style="display: none"
47 ref="image"
48 accept="image/*"
49 @change="onFilePicked"
50 />
51 <img
52 :src="imageData.imageUrl"
53 height="150"
54 width="150"
55 v-if="imageUrl"
56 style="border-radius:50%; width:200px"
57 />
58 </v-flex>
59 </v-layout>
60
61 <v-layout wrap>
62 <!-- SUBJECT -->
63 <v-flex xs12 sm12>
64 <v-layout>
65 <v-flex xs4 sm4 class="pt-4 subheading">
66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
68 </v-flex>
69 <v-flex xs8 sm8 class="ml-3">
70 <v-text-field
71 v-model="addForumParams.subject"
72 placeholder="subject"
73 type="text"
74 :rules="cantBeEmpty"
75 required
76 ></v-text-field>
77 </v-flex>
78 </v-layout>
79 </v-flex>
80 <!-- DESCRIPTION -->
81 <v-flex xs12 sm12>
82 <v-layout>
83 <v-flex xs4 sm4 class="pt-4 subheading">
84 <label class="right hidden-xs-only hidden-sm-only">Description:</label>
85 <label
86 class="right hidden-lg-only hidden-md-only hidden-xl-only"
87 >Description:</label>
88 </v-flex>
89 <v-flex xs8 sm8 class="ml-3">
90 <v-text-field
91 v-model="addForumParams.description"
92 placeholder="Description"
93 type="text"
94 :rules="cantBeEmpty"
95 required
96 ></v-text-field>
97 </v-flex>
98 </v-layout>
99 </v-flex>
100 <!-- UPLOAD IMAGE -->
101 <v-flex xs12 sm12>
102 <v-layout>
103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
106 </v-flex>
107 <v-flex xs8 class="ml-3">
108 <v-text-field
109 label="Select Image"
110 @click="pickFile"
111 v-model="imageName"
112 append-icon="attach_file"
113 ></v-text-field>
114 </v-flex>
115 </v-layout>
116 </v-flex>
117 </v-layout>
118 <v-layout>
119 <v-flex xs12 sm12>
120 <v-layout class="right">
121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
122 </v-layout>
123 </v-flex>
124 </v-layout>
125 </v-form>
126 </v-flex>
127 </v-flex>
128 </v-layout>
129 </v-container>
130 </v-card>
131 </v-dialog>
132
133 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
134 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <!-- if logged in user is parent -->
135 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
136 <v-layout column> 26 <v-layout column>
137 <!-- HEADING --> 27 <!-- HEADING -->
138 <v-flex> 28 <v-flex>
139 <div class="title side-bar-color font-weight-bold">Live Online Classes - Solution</div> 29 <div
140 <div class="subheading grey--text lighten-1">This conference is in progress</div> 30 class="title side-bar-color font-weight-bold"
31 >Live Online Classes - {{$route.query.chapterName}}</div>
32 <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>
141 <div 33 <div
142 class="subheading grey--text lighten-1" 34 class="subheading grey--text lighten-1"
143 >The session started at 1:00 there is 1 moderator</div> 35 >The session started at 1:00 there is 1 moderator</div>
144 </v-flex> 36 </v-flex>
145 37
146 <!-- JOIN OR END SESSION --> 38 <!-- JOIN OR END SESSION -->
147 <v-flex> 39 <v-flex>
148 <div> 40 <div>
149 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 41 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
150 </div> 42 </div>
151 </v-flex> 43 </v-flex>
152 44
153 <!-- DATA TABLE --> 45 <!-- DATA TABLE -->
154 <v-flex> 46 <!-- <v-flex>
155 <div> 47 <div>
156 <span class="subheading font-weight-bold">Recording</span> 48 <span class="subheading font-weight-bold">Recording</span>
157 </div> 49 </div>
158 <v-data-table 50 <v-data-table
159 :headers="liveOnlineHeaders" 51 :headers="liveOnlineHeaders"
160 :items="liveOnlineHeaders" 52 :items="liveOnlineHeaders"
161 :pagination.sync="pagination" 53 :pagination.sync="pagination"
162 :search="search" 54 :search="search"
163 item-key="_id" 55 item-key="_id"
164 > 56 >
165 <template slot="items" slot-scope="props"> 57 <template slot="items" slot-scope="props">
166 <tr 58 <tr
167 class="tr" 59 class="tr"
168 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 60 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
169 > 61 >
170 <td class="text-xs-center td td-row"> 62 <td class="text-xs-center td td-row">
171 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 63 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
172 </td> 64 </td>
173 <td class="td td-row text-xs-center">{{ }}</td> 65 <td class="td td-row text-xs-center">{{ }}</td>
174 <td class="td td-row text-xs-center">{{ }}</td> 66 <td class="td td-row text-xs-center">{{ }}</td>
175 <td class="td td-row text-xs-center">-</td> 67 <td class="td td-row text-xs-center">-</td>
176 <td class="td td-row text-xs-center">{{ }}</td> 68 <td class="td td-row text-xs-center">{{ }}</td>
177 </tr> 69 </tr>
178 </template> 70 </template>
179 </v-data-table> 71 </v-data-table>
180 </v-flex> 72 </v-flex>-->
181 </v-layout> 73 </v-layout>
182 </v-flex> 74 </v-flex>
75
76 <!-- if logged in user is teacher -->
183 <v-flex xs12 sm12 md12 v-else> 77 <v-flex xs12 sm12 md12 v-else>
184 <v-layout column> 78 <v-layout column>
185 <!-- HEADING --> 79 <!-- HEADING -->
186 <v-flex> 80 <v-flex>
187 <div 81 <div
188 class="title side-bar-color font-weight-bold" 82 class="title side-bar-color font-weight-bold"
189 >Live Online Classes - {{$route.query.chapterName}}</div> 83 >Live Online Classes - {{$route.query.chapterName}}</div>
190 <div class="subheading grey--text lighten-1">This conference is in progress</div> 84 <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>
191 <div 85 <div
192 class="subheading grey--text lighten-1" 86 class="subheading grey--text lighten-1"
193 >The session started at 1:00 there is 1 moderator</div> 87 >The session started at 1:00 there is 1 moderator</div>
194 </v-flex> 88 </v-flex>
195 89
196 <!-- JOIN OR END SESSION --> 90 <!-- JOIN OR END SESSION -->
197 <v-flex> 91 <v-flex>
198 <div> 92 <div>
199 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 93 <v-btn
94 round
95 class="open-dialog-button"
96 dark
97 @click="createRoom($route.query.classId)"
98 >Start Session</v-btn>
200 </div> 99 </div>
201 </v-flex> 100 </v-flex>
202 101
203 <!-- DATA TABLE --> 102 <!-- DATA TABLE -->
204 <v-flex> 103 <!-- <v-flex>
205 <div> 104 <div>
206 <span class="subheading font-weight-bold">Recording</span> 105 <span class="subheading font-weight-bold">Recording</span>
207 </div> 106 </div>
208 <v-data-table 107 <v-data-table
209 :headers="liveOnlineHeaders" 108 :headers="liveOnlineHeaders"
210 :items="liveOnlineHeaders" 109 :items="liveOnlineHeaders"
211 :pagination.sync="pagination" 110 :pagination.sync="pagination"
212 :search="search" 111 :search="search"
213 item-key="_id" 112 item-key="_id"
214 > 113 >
215 <template slot="items" slot-scope="props"> 114 <template slot="items" slot-scope="props">
216 <tr 115 <tr
217 class="tr" 116 class="tr"
218 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 117 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
219 > 118 >
220 <td class="text-xs-center td td-row"> 119 <td class="text-xs-center td td-row">
221 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 120 <v-btn round class="open-dialog-button" dark>Start Session</v-btn>
222 </td> 121 </td>
223 <td class="td td-row text-xs-center">{{ }}</td> 122 <td class="td td-row text-xs-center">{{ }}</td>
224 <td class="td td-row text-xs-center">{{ }}</td> 123 <td class="td td-row text-xs-center">{{ }}</td>
225 <td class="td td-row text-xs-center">-</td> 124 <td class="td td-row text-xs-center">-</td>
226 <td class="td td-row text-xs-center">{{ }}</td> 125 <td class="td td-row text-xs-center">{{ }}</td>
227 </tr> 126 </tr>
228 </template> 127 </template>
229 </v-data-table> 128 </v-data-table>
129 </v-flex>-->
130
131 <v-flex>
132 <div id="jitsi-container"></div>
230 </v-flex> 133 </v-flex>
231 </v-layout> 134 </v-layout>
232 </v-flex> 135 </v-flex>
233 136
234 <v-spacer></v-spacer> 137 <v-spacer></v-spacer>
235 138
236 <!-- COURSES - positioned to the right of the page --> 139 <!-- COURSES SIDE BAR- positioned to the right of the page -->
237 <v-flex xs12 sm12 md3 v-if=" $store.state.role === 'PARENT' "> 140 <v-flex xs3>
238 <v-card class="elevation-0 card-border" height="100%"> 141 <v-card class="elevation-0 card-border" height="100%">
239 <v-container class="pt-0"> 142 <CoursesSideBar></CoursesSideBar>
240 <div class="side-bar-color font-weight-bold title">Courses</div>
241
242 <div v-for="(course,index) in courseData">
243 <v-btn
244 flat
245 class="subheading text-xs-start justify-left"
246 style="cursor: pointer;"
247 block
248 @click="routeToCourseDetails(course._id)"
249 >
250 <div style="width: 100%;text-align: left;">
251 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
252 {{course.courseName}}
253 </div>
254 </v-btn>
255 </div>
256 </v-container>
257 </v-card> 143 </v-card>
258 </v-flex> 144 </v-flex>
259 </v-layout> 145 </v-layout>
260 </v-container> 146 </v-container>
261 </div> 147 </div>
262 </template> 148 </template>
263 <script> 149 <script>
264 import AllApiCalls from "@/Services/AllApiCalls.js"; 150 import AllApiCalls from "@/Services/AllApiCalls.js";
265 import http from "@/Services/http.js"; 151 import http from "@/Services/http.js";
266 import moment from "moment"; 152 import moment from "moment";
153 import Meet from "@/pages/Meet/meet.vue";
154 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
267 export default { 155 export default {
268 mixins: [AllApiCalls], 156 mixins: [AllApiCalls],
157 components: {
158 CoursesSideBar
159 },
269 data() { 160 data() {
270 return { 161 return {
271 localStorage: localStorage, 162 startLiveSession: "",
272 valid: true,
273 addForumDialog: false,
274 addForumParams: {},
275 // UPLOAD IMAGE
276 imageName: "",
277 imageUrl: "",
278 imageFile: "",
279 imageData: {},
280 163
281 // DATA TABLE 164 // DATA TABLE
282 search: "", 165 search: "",
283 pagination: { 166 pagination: {
284 rowsPerPage: 10 167 rowsPerPage: 10
285 }, 168 },
286 liveOnlineHeaders: [ 169 liveOnlineHeaders: [
287 { 170 {
288 text: "Playback", 171 text: "Playback",
289 value: "attachementUrl", 172 value: "attachementUrl",
290 sortable: false, 173 sortable: false,
291 align: "center" 174 align: "center"
292 }, 175 },
293 { 176 {
294 text: "Meeting", 177 text: "Meeting",
295 align: "center", 178 align: "center",
296 sortable: false, 179 sortable: false,
297 value: "" 180 value: ""
298 }, 181 },
299 { 182 {
300 text: "Recording", 183 text: "Recording",
301 value: "", 184 value: "",
302 sortable: false, 185 sortable: false,
303 align: "center" 186 align: "center"
304 }, 187 },
305 { 188 {
306 text: "Description Preview", 189 text: "Description Preview",
307 value: "", 190 value: "",
308 sortable: false, 191 sortable: false,
309 align: "center" 192 align: "center"
310 }, 193 },
311 { text: "Date", value: "", sortable: false, align: "center" }, 194 { text: "Date", value: "", sortable: false, align: "center" },
312 { text: "Duration", value: "", sortable: false, align: "center" }, 195 { text: "Duration", value: "", sortable: false, align: "center" },
313 { text: "Toolbar", value: "", sortable: false, align: "center" } 196 { text: "Toolbar", value: "", sortable: false, align: "center" }
314 ], 197 ],
315 liveOnlineItems: [], 198 liveOnlineItems: [],
316 199
317 // COURSE DISCUSSION REPLTY FUNCTIONALITY 200 // JITSI CONTAINER
318 courseDiscussionId: "", 201 token: "",
319 showReplyBox: false, 202 selectStudents: {},
320 courseDiscussionData: [], 203 classRules: [v => !!v || " Class Name is required"],
321 replyDescription: "", 204 sectionRules: [v => !!v || " Section Name is required"],
322 loginId: "", 205 addclass: [],
323 editedIndex: -1 206 addSection: [],
207 loading: false,
208 room: "",
209 username: "",
210 roomPassword: ""
324 }; 211 };
325 }, 212 },
326 methods: { 213 methods: {
327 dates: function(date) { 214 // JITSI CONTAINER
328 return moment(date).format("MMMM DD, YYYY hh:mm A"); 215 startConference() {
329 }, 216 var _this = this;
330 /* UPLOAD IMAGE */ 217 try {
331 pickFile() { 218 const domain = "meet.jit.si";
332 this.$refs.image.click(); 219 const options = {
333 }, 220 audioInput: "<deviceLabel>",
221 audioOutput: "<deviceLabel>",
222 videoInput: "<deviceLabel>",
223 roomName: this.room,
224 height: 500,
225 parentNode: document.getElementById("jitsi-container"),
226 interfaceConfigOverwrite: {
227 filmStripOnly: false,
228 SHOW_JITSI_WATERMARK: false,
229 TOOLBAR_BUTTONS: [
230 "microphone",
231 "camera",
232 "closedcaptions",
233 "desktop",
234 "fullscreen",
235 "fodeviceselection",
236 "hangup",
237 "profile",
238 "info",
239 "chat",
240 "recording",
241 "livestreaming",
242 "etherpad",
243 "sharedvideo",
244 "settings",
245 "raisehand",
246 "videoquality",
247 "filmstrip",
248 "invite",
249 "feedback",
250 "stats",
251 "shortcuts",
252 "tileview"
253 ]
254 },
255 configOverwrite: {
256 disableSimulcast: false
257 },
258 teacherName: "",
259 romm: ""
260 };
334 261
335 onFilePicked(e) { 262 this.api = new JitsiMeetExternalAPI(domain, options);
336 // console.log(e) 263 this.api.addEventListener("videoConferenceJoined", () => {
337 const files = e.target.files; 264 console.log("Local User Joined");
338 this.imageData.upload = e.target.files[0];
339 if (files[0] !== undefined) {
340 this.imageName = files[0].name;
341 if (this.imageName.lastIndexOf(".") <= 0) {
342 return;
343 }
344 const fr = new FileReader();
345 fr.readAsDataURL(files[0]);
346 fr.addEventListener("load", () => {
347 this.imageUrl = fr.result;
348 this.imageFile = files[0]; // this is an image file that can be sent to server...
349 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
350 });
351 } else {
352 this.imageName = "";
353 this.imageFile = "";
354 this.imageUrl = "";
355 }
356 },
357 async submit() {
358 if (this.$refs.form.validate()) {
359 this.addForumParams.classId = localStorage.getItem("parentClassId");
360 this.addForumParams.courseId = this.$route.query.courseId;
361 this.addForumParams.studentId = localStorage.getItem("parentStudentId");
362
363 if (this.imageUrl) {
364 var str = this.imageUrl;
365 const [baseUrl, imageUrl] = str.split(/,/);
366 this.addForumParams.upload = imageUrl;
367 }
368 this.loading = true;
369 await http()
370 .post("/createCourseDiscussion", this.addForumParams)
371 .then(response => {
372 this.snackbar = true;
373 this.text = "Discussion added successfully";
374 this.snackbarColor = "green";
375 this.addForumDialog = false;
376 this.clear();
377 this.loading = false;
378 console.log("response of createCourseDiscussion - ", response);
379 })
380 .catch(error => {
381 this.snackbar = true;
382 this.text = error.response.data.message;
383 this.snackbarColor = "error";
384 this.loading = false;
385 });
386 265
387 /* getCourseDiscussionesList - to populate the data table */ 266 _this.api.executeCommand("displayName", _this.username);
388 await this.getCourseDiscussionesList({ 267 _this.api.executeCommand("password", this.roomPassword);
389 courseId: this.$route.query.courseId,
390 classId: localStorage.getItem("parentClassId")
391 }); 268 });
392 this.addForumDialog = false; 269 } catch (error) {
270 console.error("Failed to load Jitsi API", error);
393 } 271 }
394 }, 272 },
395 clear() { 273 openRoom() {
396 this.$refs.form.reset(); 274 // verify the JitsiMeetExternalAPI constructor is added to the global..
397 this.imageUrl = ""; 275 // if (this.teacherName != "" || this.room != "") {
398 }, 276 // if (window.JitsiMeetExternalAPI) {
399 async routeToCourseDetails(courseId) { 277 // // var person = prompt("Please enter your name:", "Rabie");
400 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 278 // if (person != null || person != "") this.username = this.teacherName;
401 let response = await this.getParticularCourseDetail(courseId); 279 // var room = prompt("Please enter your room:", "Test Room");
402 280 // if (room != null || room != "") this.room = this.room;
403 /* If the response is null then dont route */ 281 // this.startConference();
404 if (response.data.data.length > 0) { 282 // } else alert("Jitsi Meet API script not loaded");
405 this.$router.push({ 283 // }
406 name: "Course Details",
407 query: { courseId: courseId }
408 });
409 } else {
410 this.seeSnackbar("No Data Available", "warning");
411 }
412 }, 284 },
413 285
414 // COURSE DISCUSSION REPLY FUNCTIONALITY 286 createRoom(classId) {
415
416 getDiscussionesThread() {
417 // console.log("id", this.getSelectedData.courseId);
418 this.showLoader = true; 287 this.showLoader = true;
419 http() 288 var classId = {
420 .get("/getParticularCourseDiscussion", { 289 classId: classId
421 params: {
422 courseDiscussionId: this.courseDiscussionId
423 }
424 })
425 .then(response => {
426 // console.log("response", response.data.data);
427 this.courseDiscussionData = response.data.data;
428 for (let i = 0; i < this.courseDiscussionData.length; i++) {
429 for (
430 let j = 0;
431 j < this.courseDiscussionData[i].forumThread.length;
432 j++
433 ) {
434 this.courseDiscussionData[i].forumThread[
435 j
436 ].showUpdateReplyThread = false;
437 this.courseDiscussionData[i].forumThread[
438 j
439 ].showDescriptionReplyThread = true;
440 }
441 }
442 this.showLoader = false;
443 this.showReplyBox = false;
444 })
445 .catch(error => {
446 console.log("err====>", error);
447 this.showLoader = false;
448 });
449 },
450 replyThreadDiscussion(selected) {
451 this.showLoader = true;
452 var payloadData = {
453 courseDiscussionId: selected._id,
454 studentId: localStorage.getItem("parentStudentId"),
455 description: this.replyDescription
456 };
457 http()
458 .put("/replyForumThread", payloadData)
459 .then(response => {
460 // console.log("response", response.data.data);
461 this.showLoader = false;
462 this.getDiscussionesThread();
463 })
464 .catch(error => {
465 this.showLoader = false;
466 });
467 },
468 showUpdateReplyThreadDiscussion(item) {
469 this.editedIndex = this.courseDiscussionData.indexOf(item);
470 var editedItem = Object.assign({}, item);
471 var arrayOfcourseDiscussionData = [];
472 for (let i = 0; i < this.courseDiscussionData.length; i++) {
473 for (
474 let j = 0;
475 j < this.courseDiscussionData[i].forumThread.length;
476 j++
477 ) {
478 if (
479 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
480 ) {
481 this.courseDiscussionData[i].forumThread[
482 j
483 ].showUpdateReplyThread = true;
484 this.courseDiscussionData[i].forumThread[
485 j
486 ].showDescriptionReplyThread = false;
487 }
488 }
489 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
490 }
491 this.courseDiscussionData = arrayOfcourseDiscussionData;
492 },
493 updateRelpyThreadDiscussion(replyThread, selected) {
494 this.showLoader = true;
495 var payloadData = {
496 forumThreadId: replyThread._id,
497 courseDiscussionId: selected._id,
498 studentId: localStorage.getItem("parentStudentId"),
499 description: replyThread.description
500 }; 290 };
501 http() 291 http()
502 .put("/updateForumThread", payloadData) 292 .post("/createLiveClasses", {
src/pages/Meet/meet.vue
Diff comments   View file @e91641f
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-card flat class="elevation-0 transparent"> 3 <v-card flat class="elevation-0 transparent">
4 <v-flex xs12> 4 <v-flex xs12>
5 <v-layout> 5 <v-layout>
6 <v-flex lg2> 6 <v-flex lg2>
7 <v-select 7 <v-select
8 :items="addclass" 8 :items="addclass"
9 label="Select Class" 9 label="Select Class"
10 v-model="selectStudents.classId" 10 v-model="selectStudents.classId"
11 item-text="classNum" 11 item-text="classNum"
12 item-value="_id" 12 item-value="_id"
13 name="Select Class" 13 name="Select Class"
14 :rules="classRules" 14 :rules="classRules"
15 class="ml-4" 15 class="ml-4"
16 ></v-select> 16 ></v-select>
17 </v-flex> 17 </v-flex>
18 <!-- <v-flex xs3> 18 <!-- <v-flex xs3>
19 <v-select 19 <v-select
20 :items="addSection" 20 :items="addSection"
21 label="Select Section" 21 label="Select Section"
22 v-model="selectStudents.selectSection" 22 v-model="selectStudents.selectSection"
23 item-text="name" 23 item-text="name"
24 item-value="_id" 24 item-value="_id"
25 name="Select Section" 25 name="Select Section"
26 :rules="sectionRules" 26 :rules="sectionRules"
27 class="px-2" 27 class="px-2"
28 required 28 required
29 ></v-select> 29 ></v-select>
30 </v-flex>--> 30 </v-flex>-->
31 <v-flex xs3> 31 <v-flex xs3>
32 <v-btn @click="createRoom()" round dark :loading="loading" class="add-button mt-3">Find</v-btn> 32 <v-btn
33 @click="createRoom(selectStudents.classId)"
34 round
35 dark
36 :loading="loading"
37 class="add-button mt-3"
38 >Find</v-btn>
33 </v-flex> 39 </v-flex>
34 </v-layout> 40 </v-layout>
35 </v-flex> 41 </v-flex>
36 </v-card> 42 </v-card>
37 <div id="jitsi-container"></div> 43 <div id="jitsi-container"></div>
38 </v-container> 44 </v-container>
39 </template> 45 </template>
40 <script> 46 <script>
41 import http from "@/Services/http.js"; 47 import http from "@/Services/http.js";
42 import moment from "moment"; 48 import moment from "moment";
43 49
44 export default { 50 export default {
45 data() { 51 data() {
46 return { 52 return {
47 token: "", 53 token: "",
48 selectStudents: {}, 54 selectStudents: {},
49 classRules: [v => !!v || " Class Name is required"], 55 classRules: [v => !!v || " Class Name is required"],
50 sectionRules: [v => !!v || " Section Name is required"], 56 sectionRules: [v => !!v || " Section Name is required"],
51 addclass: [], 57 addclass: [],
52 addSection: [], 58 addSection: [],
53 loading: false, 59 loading: false,
54 room: "", 60 room: "",
55 username: "", 61 username: "",
56 roomPassword: "" 62 roomPassword: ""
57 }; 63 };
58 }, 64 },
59 methods: { 65 methods: {
60 startConference() { 66 startConference() {
61 var _this = this; 67 var _this = this;
62 try { 68 try {
63 const domain = "meet.jit.si"; 69 const domain = "meet.jit.si";
64 const options = { 70 const options = {
65 audioInput: "<deviceLabel>", 71 audioInput: "<deviceLabel>",
66 audioOutput: "<deviceLabel>", 72 audioOutput: "<deviceLabel>",
67 videoInput: "<deviceLabel>", 73 videoInput: "<deviceLabel>",
68 roomName: this.room, 74 roomName: this.room,
69 height: 500, 75 height: 500,
70 parentNode: document.getElementById("jitsi-container"), 76 parentNode: document.getElementById("jitsi-container"),
71 interfaceConfigOverwrite: { 77 interfaceConfigOverwrite: {
72 filmStripOnly: false, 78 filmStripOnly: false,
73 SHOW_JITSI_WATERMARK: false, 79 SHOW_JITSI_WATERMARK: false,
74 TOOLBAR_BUTTONS: [ 80 TOOLBAR_BUTTONS: [
75 "microphone", 81 "microphone",
76 "camera", 82 "camera",
77 "closedcaptions", 83 "closedcaptions",
78 "desktop", 84 "desktop",
79 "fullscreen", 85 "fullscreen",
80 "fodeviceselection", 86 "fodeviceselection",
81 "hangup", 87 "hangup",
82 "profile", 88 "profile",
83 "info", 89 "info",
84 "chat", 90 "chat",
85 "recording", 91 "recording",
86 "livestreaming", 92 "livestreaming",
87 "etherpad", 93 "etherpad",
88 "sharedvideo", 94 "sharedvideo",
89 "settings", 95 "settings",
90 "raisehand", 96 "raisehand",
91 "videoquality", 97 "videoquality",
92 "filmstrip", 98 "filmstrip",
93 "invite", 99 "invite",
94 "feedback", 100 "feedback",
95 "stats", 101 "stats",
96 "shortcuts", 102 "shortcuts",
97 "tileview" 103 "tileview"
98 ] 104 ]
99 }, 105 },
100 configOverwrite: { 106 configOverwrite: {
101 disableSimulcast: false 107 disableSimulcast: false
102 }, 108 },
103 teacherName: "", 109 teacherName: "",
104 romm: "" 110 romm: ""
105 }; 111 };
106 112
107 this.api = new JitsiMeetExternalAPI(domain, options); 113 this.api = new JitsiMeetExternalAPI(domain, options);
108 this.api.addEventListener("videoConferenceJoined", () => { 114 this.api.addEventListener("videoConferenceJoined", () => {
109 console.log("Local User Joined"); 115 console.log("Local User Joined");
110 116
111 _this.api.executeCommand("displayName", _this.username); 117 _this.api.executeCommand("displayName", _this.username);
112 _this.api.executeCommand("password", this.roomPassword); 118 _this.api.executeCommand("password", this.roomPassword);
113 }); 119 });
114 } catch (error) { 120 } catch (error) {
115 console.error("Failed to load Jitsi API", error); 121 console.error("Failed to load Jitsi API", error);
116 } 122 }
117 }, 123 },
118 openRoom() { 124 openRoom() {
119 // verify the JitsiMeetExternalAPI constructor is added to the global.. 125 // verify the JitsiMeetExternalAPI constructor is added to the global..
120 // if (this.teacherName != "" || this.room != "") { 126 // if (this.teacherName != "" || this.room != "") {
121 // if (window.JitsiMeetExternalAPI) { 127 // if (window.JitsiMeetExternalAPI) {
122 // // var person = prompt("Please enter your name:", "Rabie"); 128 // // var person = prompt("Please enter your name:", "Rabie");
123 // if (person != null || person != "") this.username = this.teacherName; 129 // if (person != null || person != "") this.username = this.teacherName;
124 // var room = prompt("Please enter your room:", "Test Room"); 130 // var room = prompt("Please enter your room:", "Test Room");
125 // if (room != null || room != "") this.room = this.room; 131 // if (room != null || room != "") this.room = this.room;
126 // this.startConference(); 132 // this.startConference();
127 // } else alert("Jitsi Meet API script not loaded"); 133 // } else alert("Jitsi Meet API script not loaded");
128 // } 134 // }
129 }, 135 },
130 getClassData() { 136 getClassData() {
131 http() 137 http()
132 .get("/getClassesList", { 138 .get("/getClassesList", {
133 headers: { Authorization: "Bearer " + this.token } 139 headers: { Authorization: "Bearer " + this.token }
134 }) 140 })
135 .then(response => { 141 .then(response => {
136 this.addclass = response.data.data; 142 this.addclass = response.data.data;
137 }) 143 })
138 .catch(error => { 144 .catch(error => {
139 this.showLoader = false; 145 this.showLoader = false;
140 if (error.response.status === 401) { 146 if (error.response.status === 401) {
141 this.$router.replace({ path: "/" }); 147 this.$router.replace({ path: "/" });
142 this.$store.dispatch("setToken", null); 148 this.$store.dispatch("setToken", null);
143 this.$store.dispatch("Id", null); 149 this.$store.dispatch("Id", null);
144 this.$store.dispatch("Role", null); 150 this.$store.dispatch("Role", null);
145 } 151 }
146 }); 152 });
147 }, 153 },
148 createRoom() { 154 createRoom(classId) {
149 this.showLoader = true; 155 this.showLoader = true;
150 var classId = { 156 var classId = {
151 classId: this.selectStudents.classId 157 classId: classId
152 }; 158 };
153 http() 159 http()
154 .post("/createRoom", classId) 160 .post("/createRoom", classId)
155 .then(response => { 161 .then(response => {
156 // this.addSection = response.data.data; 162 // this.addSection = response.data.data;
157 console.log("CREATE___ROOOM", response.data); 163 console.log("CREATE___ROOOM", response.data);
158 this.room = response.data.data.roomName; 164 this.room = response.data.data.roomName;
159 this.username = response.data.data.teacherName; 165 this.username = response.data.data.teacherName;
160 this.roomPassword = response.data.data.roomPassword; 166 this.roomPassword = response.data.data.roomPassword;
161 var this_ = this; 167 var this_ = this;
162 if (this.username != "" || this.room != "") { 168 if (this.username != "" || this.room != "") {
163 if (window.JitsiMeetExternalAPI) { 169 if (window.JitsiMeetExternalAPI) {
164 // var person = prompt("Please enter your name:", "Rabie"); 170 // var person = prompt("Please enter your name:", "Rabie");
165 if (this_.username != null || this_.username != "") { 171 if (this_.username != null || this_.username != "") {
166 this.username = this.username; 172 this.username = this.username;
167 } 173 }
168 // var room = prompt("Please enter your room:", "Test Room"); 174 // var room = prompt("Please enter your room:", "Test Room");
169 if (this_.room != null || this_.room != "") { 175 if (this_.room != null || this_.room != "") {
170 this.room = this.room; 176 this.room = this.room;
171 } 177 }
172 this.startConference(); 178 this.startConference();
173 } else alert("Jitsi Meet API script not loaded"); 179 } else alert("Jitsi Meet API script not loaded");
174 } 180 }
175 this.showLoader = false; 181 this.showLoader = false;
176 }) 182 })
177 .catch(err => { 183 .catch(err => {
178 this.showLoader = false; 184 this.showLoader = false;
179 }); 185 });
180 } 186 }
181 }, 187 },
182 188
183 mounted() { 189 mounted() {
184 this.token = this.$store.state.token; 190 this.token = this.$store.state.token;
185 this.getClassData(); 191 this.getClassData();
186 // this.openRoom(); 192 // this.openRoom();
187 } 193 }
188 }; 194 };
189 </script> 195 </script>
190 196
191 197
192 <style> 198 <style>
193 #jitsi-container { 199 #jitsi-container {
194 height: 100vh; 200 height: 100vh;
195 } 201 }
196 </style> 202 </style>