viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 1dea1c0efedcfce20186397ee651834c78440ab4

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

solved bugs

Showing 3 changed files with 13 additions and 18 deletions   Show diff stats
src/Services/GetApis.js
Diff comments   View file @1dea1c0
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
57
58
59
60
61
56 /***************************************************************************************************************************** */ 62 /***************************************************************************************************************************** */
57 63
58 // APIS USED IN dashboard.vue 64 // APIS USED IN dashboard.vue
59 /* studentMeetingEvents required in dashboard to display list of latest events */ 65 /* studentMeetingEvents required in dashboard to display list of latest events */
60 async studentMeetingEvents(params) { 66 async studentMeetingEvents(params) {
61 try { 67 try {
62 let response = await this.getMethod("/studentMeetingEvents", { 68 let response = await this.getMethod("/studentMeetingEvents", {
63 studentId: params.studentId 69 studentId: params.studentId
64 }) 70 })
65 console.log("response of studentMeetingEvents - ", response); 71 console.log("response of studentMeetingEvents - ", response);
66 return response 72 return response
67 } catch (error) { 73 } catch (error) {
68 console.log("error in studentMeetingEvents - ", error.message) 74 console.log("error in studentMeetingEvents - ", error.message)
69 } 75 }
70 76
71 }, 77 },
72 78
73 async getParticularMeetingEvent(params) { 79 async getParticularMeetingEvent(params) {
74 try { 80 try {
75 let response = await this.getMethod("/getParticularMeetingEvent", { 81 let response = await this.getMethod("/getParticularMeetingEvent", {
76 meetingEventId: params.meetingEventId 82 meetingEventId: params.meetingEventId
77 }) 83 })
78 this.particularEvent = response.data.data 84 this.particularEvent = response.data.data
79 } catch (error) { 85 } catch (error) {
80 console.log("Error in getParticularMeetingEvent - ", error.message) 86 console.log("Error in getParticularMeetingEvent - ", error.message)
81 } 87 }
82 }, 88 },
83 89
84 /************************************************************************************************************************ */ 90 /************************************************************************************************************************ */
85 91
86 /* APIS USED IN LiveOnlineClass.vue */ 92 /* APIS USED IN LiveOnlineClass.vue */
87 async getLiveClassesesList(params) { 93 async getLiveClassesesList(params) {
88 try { 94 try {
89 let response = await this.getMethod("/getLiveClassesesList", { 95 let response = await this.getMethod("/getLiveClassesesList", {
90 classId: params.classId, 96 classId: params.classId,
91 courseId: params.courseId, 97 courseId: params.courseId,
92 chapterId: params.chapterId, 98 chapterId: params.chapterId,
93 }) 99 })
94 return response 100 return response
95 } catch (error) { 101 } catch (error) {
96 console.log(" error in getLiveClassesesList - ", error.message) 102 console.log(" error in getLiveClassesesList - ", error.message)
97 } 103 }
98 }, 104 },
99 105
100 106
101 107
102 /*************************************************************************************************************************** */ 108 /*************************************************************************************************************************** */
103 109
104 110
105 /* APIS USED IN announcement.vue */ 111 /* APIS USED IN announcement.vue */
106 async getAnnoucementesList(params) { 112 async getAnnoucementesList(params) {
107 try { 113 try {
108 let response = await this.getMethod("/getAnnoucementesList", { 114 let response = await this.getMethod("/getAnnoucementesList", {
109 courseId: params.courseId 115 courseId: params.courseId
110 }) 116 })
111 return response; 117 return response;
112 } catch (error) { 118 } catch (error) {
113 console.log("Error in getAnnoucementesList - ", error.message) 119 console.log("Error in getAnnoucementesList - ", error.message)
114 } 120 }
115 } 121 }
116 122
117 }, 123 },
118 } 124 }
src/pages/Course/courseDetail.vue
Diff comments   View file @1dea1c0
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 <!-- DIALOG BOX - Edit Chapter detail ****** --> 70 <!-- DIALOG BOX - 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 76 <v-icon size="24" class="right" @click="editChapterDetailDialog = false;">cancel</v-icon>
77 size="24"
78 class="right"
79 @click="editChapterDetailDialog = false;"
80 >cancel</v-icon>
81 </v-flex> 77 </v-flex>
82 </v-layout> 78 </v-layout>
83 <v-card-text> 79 <v-card-text>
84 <v-layout wrap> 80 <v-layout wrap>
85 <!-- CHAPTER NAME --> 81 <!-- CHAPTER NAME -->
86 <v-flex xs12 sm12> 82 <v-flex xs12 sm12>
87 <v-layout> 83 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 84 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Chapter Name:</label> 85 <label class="right">Chapter Name:</label>
90 </v-flex> 86 </v-flex>
91 <v-flex xs8 sm6 class="ml-3"> 87 <v-flex xs8 sm6 class="ml-3">
92 <v-text-field 88 <v-text-field
93 v-model="editChapter.chapterName" 89 v-model="editChapter.chapterName"
94 placeholder="fill your Title" 90 placeholder="fill your Title"
95 type="text" 91 type="text"
96 required 92 required
97 ></v-text-field> 93 ></v-text-field>
98 </v-flex> 94 </v-flex>
99 </v-layout> 95 </v-layout>
100 </v-flex> 96 </v-flex>
101 <!-- DESCRIPTION --> 97 <!-- DESCRIPTION -->
102 <v-flex xs12 sm12> 98 <v-flex xs12 sm12>
103 <v-layout> 99 <v-layout>
104 <v-flex xs4 class="pt-4 subheading"> 100 <v-flex xs4 class="pt-4 subheading">
105 <label class="right">Description:</label> 101 <label class="right">Description:</label>
106 </v-flex> 102 </v-flex>
107 <v-flex xs8 sm6 class="ml-3"> 103 <v-flex xs8 sm6 class="ml-3">
108 <v-text-field 104 <v-text-field
109 placeholder="fill your Description" 105 placeholder="fill your Description"
110 v-model="editChapter.description" 106 v-model="editChapter.description"
111 type="text" 107 type="text"
112 required 108 required
113 ></v-text-field> 109 ></v-text-field>
114 </v-flex> 110 </v-flex>
115 </v-layout> 111 </v-layout>
116 </v-flex> 112 </v-flex>
117 <!-- UPLOAD PPT --> 113 <!-- UPLOAD PPT -->
118 <v-flex xs12> 114 <v-flex xs12>
119 <v-layout> 115 <v-layout>
120 <v-flex xs4 class="pt-4 subheading"> 116 <v-flex xs4 class="pt-4 subheading">
121 <label class="right">Upload PPT:</label> 117 <label class="right">Upload PPT:</label>
122 </v-flex> 118 </v-flex>
123 <v-flex xs8 sm6 class="ml-3"> 119 <v-flex xs8 sm6 class="ml-3">
124 <UploadFiles 120 <UploadFiles
125 @fileSelected="fileSelected($event,'uploadPPT')" 121 @fileSelected="fileSelected($event,'uploadPPT')"
126 label="Add PPT" 122 label="Add PPT"
127 reference="ppt" 123 reference="ppt"
128 id="pptInput" 124 id="pptInput"
129
130 ></UploadFiles> 125 ></UploadFiles>
131 </v-flex> 126 </v-flex>
132 </v-layout> 127 </v-layout>
133 </v-flex> 128 </v-flex>
134 <!-- UPLOAD PDF --> 129 <!-- UPLOAD PDF -->
135 <v-flex xs12> 130 <v-flex xs12>
136 <v-layout> 131 <v-layout>
137 <v-flex xs4 class="pt-4 subheading"> 132 <v-flex xs4 class="pt-4 subheading">
138 <label class="right">Upload PDF:</label> 133 <label class="right">Upload PDF:</label>
139 </v-flex> 134 </v-flex>
140 <v-flex xs8 sm6 class="ml-3"> 135 <v-flex xs8 sm6 class="ml-3">
141 <UploadFiles 136 <UploadFiles
142 @fileSelected="fileSelected($event,'uploadPDF')" 137 @fileSelected="fileSelected($event,'uploadPDF')"
143 label="Add PDF" 138 label="Add PDF"
144 reference="pdf" 139 reference="pdf"
145 id="pdfInput" 140 id="pdfInput"
146
147 ></UploadFiles> 141 ></UploadFiles>
148 </v-flex> 142 </v-flex>
149 </v-layout> 143 </v-layout>
150 </v-flex> 144 </v-flex>
151 </v-layout> 145 </v-layout>
152 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> 146 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
153 <v-layout 147 <v-layout
154 wrap 148 wrap
155 v-for="(editChapterPoint,index) in editChapter.chapterPoints" 149 v-for="(editChapterPoint,index) in editChapter.chapterPoints"
156 :key="index" 150 :key="index"
157 > 151 >
158 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 152 <v-flex xs12 sm12 md4 class="pt-4 subheading">
159 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 153 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
160 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 154 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
161 </v-flex> 155 </v-flex>
162 <v-layout> 156 <v-layout>
163 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 157 <v-flex xs10 sm10 sm5 md9 class="ml-3">
164 <v-text-field :value="editChapterPoint" type="text" required></v-text-field> 158 <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
165 </v-flex> 159 </v-flex>
166 <v-flex xs2 class="pt-4"> 160 <v-flex xs2 class="pt-4">
167 <v-icon @click="deleteUrl(index)">cancel</v-icon> 161 <v-icon @click="deleteUrl(index)">cancel</v-icon>
168 </v-flex> 162 </v-flex>
169 </v-layout> 163 </v-layout>
170 </v-layout> 164 </v-layout>
171 </v-flex>--> 165 </v-flex>-->
172 <v-flex xs12> 166 <v-flex xs12>
173 <div v-for="(updateImage,index) in updates" :key="index"> 167 <div v-for="(updateImage,index) in updates" :key="index">
174 <v-layout wrap> 168 <v-layout wrap>
175 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 169 <v-flex xs12 sm12 md4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 170 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
177 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 171 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
178 </v-flex> 172 </v-flex>
179 <v-layout> 173 <v-layout>
180 <v-flex xs10 sm12 md9 class="ml-3"> 174 <v-flex xs10 sm12 md9 class="ml-3">
181 <v-text-field 175 <v-text-field
182 v-model="updateImage.value" 176 v-model="updateImage.value"
183 placeholder="Upload new Chapter Points" 177 placeholder="Upload new Chapter Points"
184 required 178 required
185 ></v-text-field> 179 ></v-text-field>
186 </v-flex> 180 </v-flex>
187 <v-flex xs2 class="pt-4"> 181 <v-flex xs2 class="pt-4">
188 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 182 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
189 <v-icon @click="update">add_circle</v-icon> 183 <v-icon @click="update">add_circle</v-icon>
190 </v-flex> 184 </v-flex>
191 </v-layout> 185 </v-layout>
192 </v-layout> 186 </v-layout>
193 </div> 187 </div>
194 </v-flex> 188 </v-flex>
195 <v-layout> 189 <v-layout>
196 <v-flex xs12 sm12 md11 lg11> 190 <v-flex xs12 sm12 md11 lg11>
197 <v-card-actions class="hidden-xs-only hidden-sm-only"> 191 <v-card-actions class="hidden-xs-only hidden-sm-only">
198 <v-spacer></v-spacer> 192 <v-spacer></v-spacer>
199 <v-btn 193 <v-btn
200 round 194 round
201 dark 195 dark
202 @click="saveChapter" 196 @click="saveChapter"
203 :loading="editLoading" 197 :loading="editLoading"
204 class="add-button mr-4" 198 class="add-button mr-4"
205 >Save</v-btn> 199 >Save</v-btn>
206 </v-card-actions> 200 </v-card-actions>
207 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 201 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
208 <v-spacer></v-spacer> 202 <v-spacer></v-spacer>
209 <v-btn 203 <v-btn
210 round 204 round
211 dark 205 dark
212 @click="saveChapter" 206 @click="saveChapter"
213 :loading="editLoading" 207 :loading="editLoading"
214 class="add-button" 208 class="add-button"
215 >Save</v-btn> 209 >Save</v-btn>
216 <v-spacer></v-spacer> 210 <v-spacer></v-spacer>
217 </v-card-actions> 211 </v-card-actions>
218 </v-flex> 212 </v-flex>
219 </v-layout> 213 </v-layout>
220 </v-card-text> 214 </v-card-text>
221 </v-card> 215 </v-card>
222 </v-dialog> 216 </v-dialog>
223 <!-- ****** Add Chapter detail ****** --> 217 <!-- ****** Add Chapter detail ****** -->
224 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable> 218 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
225 <v-card class="card-style pa-2" dark> 219 <v-card class="card-style pa-2" dark>
226 <v-layout> 220 <v-layout>
227 <v-flex xs12> 221 <v-flex xs12>
228 <label class="title text-xs-center">Add Chapter Detail</label> 222 <label class="title text-xs-center">Add Chapter Detail</label>
229 <v-icon size="24" class="right" @click="addChapterDialog = false">cancel</v-icon> 223 <v-icon size="24" class="right" @click="addChapterDialog = false">cancel</v-icon>
230 </v-flex> 224 </v-flex>
231 </v-layout> 225 </v-layout>
232 <v-card-text> 226 <v-card-text>
233 <v-layout wrap> 227 <v-layout wrap>
234 <v-flex xs12 sm12> 228 <v-flex xs12 sm12>
235 <v-layout> 229 <v-layout>
236 <v-flex xs4 class="pt-4 subheading"> 230 <v-flex xs4 class="pt-4 subheading">
237 <label class="right">Chapter Name:</label> 231 <label class="right">Chapter Name:</label>
238 </v-flex> 232 </v-flex>
239 <v-flex xs8 sm6 class="ml-3"> 233 <v-flex xs8 sm6 class="ml-3">
240 <v-text-field 234 <v-text-field
241 v-model="addChapterItem.chapterName" 235 v-model="addChapterItem.chapterName"
242 placeholder="fill your Title" 236 placeholder="fill your Title"
243 type="text" 237 type="text"
244 required 238 required
245 ></v-text-field> 239 ></v-text-field>
246 </v-flex> 240 </v-flex>
247 </v-layout> 241 </v-layout>
248 </v-flex> 242 </v-flex>
249 <v-flex xs12 sm12> 243 <v-flex xs12 sm12>
250 <v-layout> 244 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 245 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Description:</label> 246 <label class="right">Description:</label>
253 </v-flex> 247 </v-flex>
254 <v-flex xs8 sm6 class="ml-3"> 248 <v-flex xs8 sm6 class="ml-3">
255 <v-text-field 249 <v-text-field
256 placeholder="fill your Description" 250 placeholder="fill your Description"
257 v-model="addChapterItem.description" 251 v-model="addChapterItem.description"
258 type="text" 252 type="text"
259 required 253 required
260 ></v-text-field> 254 ></v-text-field>
261 </v-flex> 255 </v-flex>
262 </v-layout> 256 </v-layout>
263 </v-flex> 257 </v-flex>
264 <!-- UPLOAD PPT --> 258 <!-- UPLOAD PPT -->
265 <v-flex xs12> 259 <v-flex xs12>
266 <v-layout> 260 <v-layout>
267 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
268 <label class="right">Upload PPT:</label> 262 <label class="right">Upload PPT:</label>
269 </v-flex> 263 </v-flex>
270 <v-flex xs8 sm6 class="ml-3"> 264 <v-flex xs8 sm6 class="ml-3">
271 <UploadFiles 265 <UploadFiles
272 @fileSelected="fileSelected($event,'uploadPPT')" 266 @fileSelected="fileSelected($event,'uploadPPT')"
273 label="Add PPT" 267 label="Add PPT"
274 reference="ppt" 268 reference="ppt"
275 id="pptInput" 269 id="pptInput"
276
277 ></UploadFiles> 270 ></UploadFiles>
278 </v-flex> 271 </v-flex>
279 </v-layout> 272 </v-layout>
280 </v-flex> 273 </v-flex>
281 <!-- UPLOAD PDF --> 274 <!-- UPLOAD PDF -->
282 <v-flex xs12> 275 <v-flex xs12>
283 <v-layout> 276 <v-layout>
284 <v-flex xs4 class="pt-4 subheading"> 277 <v-flex xs4 class="pt-4 subheading">
285 <label class="right">Upload PDF:</label> 278 <label class="right">Upload PDF:</label>
286 </v-flex> 279 </v-flex>
287 <v-flex xs8 sm6 class="ml-3"> 280 <v-flex xs8 sm6 class="ml-3">
288 <UploadFiles 281 <UploadFiles
289 @fileSelected="fileSelected($event,'uploadPDF')" 282 @fileSelected="fileSelected($event,'uploadPDF')"
290 label="Add PDF" 283 label="Add PDF"
291 reference="pdf" 284 reference="pdf"
292 id="pdfInput" 285 id="pdfInput"
293
294 ></UploadFiles> 286 ></UploadFiles>
295 </v-flex> 287 </v-flex>
296 </v-layout> 288 </v-layout>
297 </v-flex> 289 </v-flex>
298 </v-layout> 290 </v-layout>
299 <v-flex xs12> 291 <v-flex xs12>
300 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> 292 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
301 <v-layout> 293 <v-layout>
302 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
303 <label class="right">Chapter Points:</label> 295 <label class="right">Chapter Points:</label>
304 </v-flex> 296 </v-flex>
305 <v-flex xs8 sm8 md6 class="ml-3"> 297 <v-flex xs8 sm8 md6 class="ml-3">
306 <v-text-field 298 <v-text-field
307 placeholder="fill your Chapter Points" 299 placeholder="fill your Chapter Points"
308 v-model="chapterPoints.value" 300 v-model="chapterPoints.value"
309 type="text" 301 type="text"
310 name="link" 302 name="link"
311 required 303 required
312 ></v-text-field> 304 ></v-text-field>
313 </v-flex> 305 </v-flex>
314 <v-flex xs2 class="pt-4"> 306 <v-flex xs2 class="pt-4">
315 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> 307 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
316 <v-icon @click="addChapterPoint()">add_circle</v-icon> 308 <v-icon @click="addChapterPoint()">add_circle</v-icon>
317 </v-flex> 309 </v-flex>
318 </v-layout> 310 </v-layout>
319 </div> 311 </div>
320 </v-flex> 312 </v-flex>
321 <v-layout> 313 <v-layout>
322 <v-flex xs12 sm12 md11 lg11> 314 <v-flex xs12 sm12 md11 lg11>
323 <v-card-actions class="hidden-xs-only hidden-sm-only"> 315 <v-card-actions class="hidden-xs-only hidden-sm-only">
324 <v-spacer></v-spacer> 316 <v-spacer></v-spacer>
325 <v-btn 317 <v-btn
326 round 318 round
327 dark 319 dark
328 @click="submitChapter" 320 @click="submitChapter"
329 :loading="editLoading" 321 :loading="editLoading"
330 class="add-button mr-4" 322 class="add-button mr-4"
331 >Submit</v-btn> 323 >Submit</v-btn>
332 </v-card-actions> 324 </v-card-actions>
333 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 325 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
334 <v-spacer></v-spacer> 326 <v-spacer></v-spacer>
335 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 327 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
336 <v-spacer></v-spacer> 328 <v-spacer></v-spacer>
337 </v-card-actions> 329 </v-card-actions>
338 </v-flex> 330 </v-flex>
339 </v-layout> 331 </v-layout>
340 </v-card-text> 332 </v-card-text>
341 </v-card> 333 </v-card>
342 </v-dialog> 334 </v-dialog>
343 335
344 <!-- ****** PROFILE Gallery ****** --> 336 <!-- ****** PROFILE Gallery ****** -->
345 337
346 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable> 338 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
347 <v-card flat class="card-style pa-3" dark> 339 <v-card flat class="card-style pa-3" dark>
348 <v-layout> 340 <v-layout>
349 <v-flex xs12> 341 <v-flex xs12>
350 <label class="title text-xs-center">View Course Detail</label> 342 <label class="title text-xs-center">View Course Detail</label>
351 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 343 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
352 </v-flex> 344 </v-flex>
353 </v-layout> 345 </v-layout>
354 <v-card-text> 346 <v-card-text>
355 <v-container grid-list-md> 347 <v-container grid-list-md>
356 <v-layout wrap> 348 <v-layout wrap>
357 <v-flex xs12> 349 <v-flex xs12>
358 <v-layout> 350 <v-layout>
359 <v-flex xs4 sm6> 351 <v-flex xs4 sm6>
360 <h5 class="right my-1"> 352 <h5 class="right my-1">
361 <b>Chapter Name:</b> 353 <b>Chapter Name:</b>
362 </h5> 354 </h5>
363 </v-flex> 355 </v-flex>
364 <v-flex sm6 xs8> 356 <v-flex sm6 xs8>
365 <h5 class="my-1">{{ editedItem.chapterName }}</h5> 357 <h5 class="my-1">{{ editedItem.chapterName }}</h5>
366 </v-flex> 358 </v-flex>
367 </v-layout> 359 </v-layout>
368 <v-layout> 360 <v-layout>
369 <v-flex xs4 sm6> 361 <v-flex xs4 sm6>
370 <h5 class="right my-1"> 362 <h5 class="right my-1">
371 <b>Description:</b> 363 <b>Description:</b>
372 </h5> 364 </h5>
373 </v-flex> 365 </v-flex>
374 <v-flex sm6 xs8> 366 <v-flex sm6 xs8>
375 <h5 class="my-1">{{ editedItem.description }}</h5> 367 <h5 class="my-1">{{ editedItem.description }}</h5>
376 </v-flex> 368 </v-flex>
377 </v-layout> 369 </v-layout>
378 <v-layout> 370 <v-layout>
379 <v-flex xs5 sm6> 371 <v-flex xs5 sm6>
380 <h5 class="right my-1"> 372 <h5 class="right my-1">
381 <b>You Tube Link Url:</b> 373 <b>You Tube Link Url:</b>
382 </h5> 374 </h5>
383 </v-flex> 375 </v-flex>
384 <v-flex sm6 xs8> 376 <v-flex sm6 xs8>
385 <h5 class="my-1"> 377 <h5 class="my-1">
386 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> 378 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
387 <li>{{ chapterPoint}}</li> 379 <li>{{ chapterPoint}}</li>
388 </ul> 380 </ul>
389 </h5> 381 </h5>
390 </v-flex> 382 </v-flex>
391 </v-layout> 383 </v-layout>
392 </v-flex> 384 </v-flex>
393 </v-layout> 385 </v-layout>
394 </v-container> 386 </v-container>
395 </v-card-text> 387 </v-card-text>
396 </v-card> 388 </v-card>
397 </v-dialog> 389 </v-dialog>
398 390
399 <!-- ****** Course Detail TABLE ****** --> 391 <!-- ****** Course Detail TABLE ****** -->
400 392
401 <v-toolbar color="transparent" flat> 393 <v-toolbar color="transparent" flat>
402 <v-btn 394 <v-btn
403 fab 395 fab
404 dark 396 dark
405 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 397 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
406 small 398 small
407 @click="addCourseDetailDialog = true" 399 @click="addCourseDetailDialog = true"
408 > 400 >
409 <v-icon dark>add</v-icon> 401 <v-icon dark>add</v-icon>
410 </v-btn> 402 </v-btn>
411 <v-btn 403 <v-btn
412 round 404 round
413 class="open-dialog-button hidden-sm-only hidden-xs-only" 405 class="open-dialog-button hidden-sm-only hidden-xs-only"
414 dark 406 dark
415 @click="addCourseDetailDialog = true" 407 @click="addCourseDetailDialog = true"
416 > 408 >
417 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail 409 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail
418 </v-btn> 410 </v-btn>
419 <v-flex xs12 sm4 md2> 411 <v-flex xs12 sm4 md2>
420 <v-select 412 <v-select
421 small 413 small
422 :items="addclass" 414 :items="addclass"
423 label="Select Class" 415 label="Select Class"
424 v-model="getCourse.classId" 416 v-model="getCourse.classId"
425 item-text="classNum" 417 item-text="classNum"
426 item-value="_id" 418 item-value="_id"
427 name="Select Class" 419 name="Select Class"
428 @change="getCourses(getCourse.classId)" 420 @change="getCourses(getCourse.classId)"
429 class="mr-2" 421 class="mr-2"
430 required 422 required
431 ></v-select> 423 ></v-select>
432 </v-flex> 424 </v-flex>
433 <v-flex xs12 sm4 md2> 425 <v-flex xs12 sm4 md2>
434 <v-select 426 <v-select
435 :items="courseData" 427 :items="courseData"
436 label="Select Course" 428 label="Select Course"
437 v-model="getCourse.courseId" 429 v-model="getCourse.courseId"
438 item-text="courseName" 430 item-text="courseName"
439 item-value="_id" 431 item-value="_id"
440 required 432 required
441 class="ml-2" 433 class="ml-2"
442 @change="getCourseDetailsList(getCourse.courseId)" 434 @change="getCourseDetailsList(getCourse.courseId)"
443 ></v-select> 435 ></v-select>
444 </v-flex> 436 </v-flex>
445 <v-spacer></v-spacer> 437 <v-spacer></v-spacer>
446 <v-card-title class="body-1" v-show="show"> 438 <v-card-title class="body-1" v-show="show">
447 <v-btn icon large flat @click="displaySearch"> 439 <v-btn icon large flat @click="displaySearch">
448 <v-avatar size="27"> 440 <v-avatar size="27">
449 <img src="/static/icon/search.png" alt="icon" /> 441 <img src="/static/icon/search.png" alt="icon" />
450 </v-avatar> 442 </v-avatar>
451 </v-btn> 443 </v-btn>
452 </v-card-title> 444 </v-card-title>
453 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 445 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
454 <v-layout> 446 <v-layout>
455 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 447 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
456 <v-icon @click="closeSearch" color="error">close</v-icon> 448 <v-icon @click="closeSearch" color="error">close</v-icon>
457 </v-layout> 449 </v-layout>
458 </v-flex> 450 </v-flex>
459 </v-toolbar> 451 </v-toolbar>
460 <v-data-table 452 <v-data-table
461 :headers="headers" 453 :headers="headers"
462 :items="CourseDetailsList" 454 :items="CourseDetailsList"
463 :pagination.sync="pagination" 455 :pagination.sync="pagination"
464 :search="search" 456 :search="search"
465 item-key="_id" 457 item-key="_id"
466 > 458 >
467 <template slot="items" slot-scope="props"> 459 <template slot="items" slot-scope="props">
468 <tr class="tr" @click="courseTableRow(props.item._id)"> 460 <tr class="tr" @click="courseTableRow(props.item._id)">
469 <td class="td td-row">{{ props.index + 1}}</td> 461 <td class="td td-row">{{ props.index + 1}}</td>
470 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 462 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
471 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> 463 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
472 <td class="td td-row text-xs-center"> 464 <td class="td td-row text-xs-center">
473 <div style="vertical-align: top;"> 465 <div style="vertical-align: top;">
474 <v-tooltip top> 466 <v-tooltip top>
475 <v-icon 467 <v-icon
476 slot="activator" 468 slot="activator"
477 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 469 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
478 class="mr-3" 470 class="mr-3"
479 @click="addChapters(props.item)" 471 @click="addChapters(props.item)"
480 >add_circle_outline</v-icon> 472 >add_circle_outline</v-icon>
481 <span>Add</span> 473 <span>Add</span>
482 </v-tooltip> 474 </v-tooltip>
483 <v-tooltip top> 475 <v-tooltip top>
484 <img 476 <img
485 slot="activator" 477 slot="activator"
486 style="cursor:pointer; width:25px; height:25px; " 478 style="cursor:pointer; width:25px; height:25px; "
487 class="mr-3" 479 class="mr-3"
488 @click="props.expanded = !props.expanded" 480 @click="props.expanded = !props.expanded"
489 src="/static/icon/view.png" 481 src="/static/icon/view.png"
490 /> 482 />
491 <span>View</span> 483 <span>View</span>
492 </v-tooltip> 484 </v-tooltip>
493 <v-tooltip top> 485 <v-tooltip top>
494 <img 486 <img
495 slot="activator" 487 slot="activator"
496 style="cursor:pointer; width:20px; height:18px; " 488 style="cursor:pointer; width:20px; height:18px; "
497 class="mr-3" 489 class="mr-3"
498 @click="editItem(props.item)" 490 @click="editItem(props.item)"
499 src="/static/icon/edit.png" 491 src="/static/icon/edit.png"
500 /> 492 />
501 <span>Edit</span> 493 <span>Edit</span>
502 </v-tooltip> 494 </v-tooltip>
503 <v-tooltip top> 495 <v-tooltip top>
504 <img 496 <img
505 slot="activator" 497 slot="activator"
506 style="cursor:pointer; width:20px; height:20px; " 498 style="cursor:pointer; width:20px; height:20px; "
507 class="mr-3" 499 class="mr-3"
508 @click="deleteItem(props.item)" 500 @click="deleteItem(props.item)"
509 src="/static/icon/delete.png" 501 src="/static/icon/delete.png"
510 /> 502 />
511 <span>Delete</span> 503 <span>Delete</span>
512 </v-tooltip> 504 </v-tooltip>
513 </div> 505 </div>
514 </td> 506 </td>
515 </tr> 507 </tr>
516 </template> 508 </template>
517 <template slot="expand"> 509 <template slot="expand">
518 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> 510 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
519 <template slot="items" slot-scope="props"> 511 <template slot="items" slot-scope="props">
520 <tr class="tr" @click="props.expanded = !props.expanded"> 512 <tr class="tr" @click="props.expanded = !props.expanded">
521 <td class="td td-row">{{ props.index + 1}}</td> 513 <td class="td td-row">{{ props.index + 1}}</td>
522 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> 514 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
523 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 515 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
524 <td class="text-xs-center td td-row"> 516 <td class="text-xs-center td td-row">
525 <v-tooltip top> 517 <v-tooltip top>
526 <v-icon 518 <v-icon
527 slot="activator" 519 slot="activator"
528 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 520 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
529 class="mr-3" 521 class="mr-3"
530 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" 522 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
531 >video_call</v-icon> 523 >video_call</v-icon>
532 <span>Live Session</span> 524 <span>Live Session</span>
533 </v-tooltip> 525 </v-tooltip>
534 <v-tooltip top> 526 <v-tooltip top>
535 <img 527 <img
536 slot="activator" 528 slot="activator"
537 style="cursor:pointer; width:25px; height:25px; " 529 style="cursor:pointer; width:25px; height:25px; "
538 class="mr-3" 530 class="mr-3"
539 @click="profile(props.item)" 531 @click="profile(props.item)"
540 src="/static/icon/view.png" 532 src="/static/icon/view.png"
541 /> 533 />
542 <span>View</span> 534 <span>View</span>
543 </v-tooltip> 535 </v-tooltip>
544 <v-tooltip top> 536 <v-tooltip top>
545 <img 537 <img
546 slot="activator" 538 slot="activator"
547 style="cursor:pointer; width:20px; height:18px; " 539 style="cursor:pointer; width:20px; height:18px; "
548 class="mr-3" 540 class="mr-3"
549 @click="editChapterItem(props.item)" 541 @click="editChapterItem(props.item)"
550 src="/static/icon/edit.png" 542 src="/static/icon/edit.png"
551 /> 543 />
552 <span>Edit</span> 544 <span>Edit</span>
553 </v-tooltip> 545 </v-tooltip>
554 <v-tooltip top> 546 <v-tooltip top>
555 <img 547 <img
556 slot="activator" 548 slot="activator"
557 style="cursor:pointer; width:20px; height:20px; " 549 style="cursor:pointer; width:20px; height:20px; "
558 class="mr-3" 550 class="mr-3"
559 @click="deleteChapters(props.item)" 551 @click="deleteChapters(props.item)"
560 src="/static/icon/delete.png" 552 src="/static/icon/delete.png"
561 /> 553 />
562 <span>Delete Chapter</span> 554 <span>Delete Chapter</span>
563 </v-tooltip> 555 </v-tooltip>
564 </td> 556 </td>
565 </tr> 557 </tr>
566 </template> 558 </template>
567 </v-data-table> 559 </v-data-table>
568 </template> 560 </template>
569 561
570 <v-alert 562 <v-alert
571 slot="no-results" 563 slot="no-results"
572 :value="true" 564 :value="true"
573 color="error" 565 color="error"
574 icon="warning" 566 icon="warning"
575 >Your search for "{{ search }}" found no results.</v-alert> 567 >Your search for "{{ search }}" found no results.</v-alert>
576 </v-data-table> 568 </v-data-table>
577 <!-- ****** ADD Course Detail ****** --> 569 <!-- ****** ADD Course Detail ****** -->
578 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> 570 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
579 <v-card flat class="card-style pa-2" dark> 571 <v-card flat class="card-style pa-2" dark>
580 <v-layout> 572 <v-layout>
581 <v-flex xs12> 573 <v-flex xs12>
582 <label class="title text-xs-center">Add Course Details</label> 574 <label class="title text-xs-center">Add Course Details</label>
583 <v-icon 575 <v-icon size="24" class="right" @click="addCourseDetailDialog = false; clear();">cancel</v-icon>
584 size="24"
585 class="right"
586 @click="addCourseDetailDialog = false; clear();"
587 >cancel</v-icon>
588 </v-flex> 576 </v-flex>
589 </v-layout> 577 </v-layout>
590 <v-form ref="form" v-model="valid" lazy-validation> 578 <v-form ref="form" v-model="valid" lazy-validation>
591 <v-container fluid> 579 <v-container fluid>
592 <v-flex xs12> 580 <v-flex xs12>
593 <v-layout> 581 <v-layout>
594 <v-flex xs4 class="pt-4 subheading"> 582 <v-flex xs4 class="pt-4 subheading">
595 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 583 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
596 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 584 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
597 </v-flex> 585 </v-flex>
598 <v-flex xs8 sm8 md7 class="ml-3"> 586 <v-flex xs8 sm8 md7 class="ml-3">
599 <v-select 587 <v-select
600 :items="addclass" 588 :items="addclass"
601 label="Select Class" 589 label="Select Class"
602 v-model="addCourseDetail.classId" 590 v-model="addCourseDetail.classId"
603 item-text="classNum" 591 item-text="classNum"
604 item-value="_id" 592 item-value="_id"
605 name="Select Class" 593 name="Select Class"
606 :rules="clsssRules" 594 :rules="clsssRules"
607 @change="getCourses(addCourseDetail.classId)" 595 @change="getCourses(addCourseDetail.classId)"
608 required 596 required
609 ></v-select> 597 ></v-select>
610 </v-flex> 598 </v-flex>
611 </v-layout> 599 </v-layout>
612 </v-flex> 600 </v-flex>
613 <v-flex xs12> 601 <v-flex xs12>
614 <v-layout> 602 <v-layout>
615 <v-flex xs4 class="pt-4 subheading"> 603 <v-flex xs4 class="pt-4 subheading">
616 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> 604 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
617 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 605 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
618 </v-flex> 606 </v-flex>
619 <v-flex xs8 sm8 md7 class="ml-3"> 607 <v-flex xs8 sm8 md7 class="ml-3">
620 <v-select 608 <v-select
621 :items="courseData" 609 :items="courseData"
622 label="Select Course" 610 label="Select Course"
623 v-model="addCourseDetail.courseId" 611 v-model="addCourseDetail.courseId"
624 item-text="courseName" 612 item-text="courseName"
625 item-value="_id" 613 item-value="_id"
626 :rules="courseRules" 614 :rules="courseRules"
627 required 615 required
628 ></v-select> 616 ></v-select>
629 </v-flex> 617 </v-flex>
630 </v-layout> 618 </v-layout>
631 </v-flex> 619 </v-flex>
632 <v-flex xs12> 620 <v-flex xs12>
633 <v-layout> 621 <v-layout>
634 <v-flex xs4 class="pt-4 subheading"> 622 <v-flex xs4 class="pt-4 subheading">
635 <label class="right">Chapter Name:</label> 623 <label class="right">Chapter Name:</label>
636 </v-flex> 624 </v-flex>
637 <v-flex xs8 sm8 md7 class="ml-3"> 625 <v-flex xs8 sm8 md7 class="ml-3">
638 <v-text-field 626 <v-text-field
639 v-model="addCourseDetail.chapterName" 627 v-model="addCourseDetail.chapterName"
640 placeholder="fill your Title" 628 placeholder="fill your Title"
641 name="name" 629 name="name"
642 type="text" 630 type="text"
643 :rules="chapterNameRules" 631 :rules="chapterNameRules"
644 required 632 required
645 ></v-text-field> 633 ></v-text-field>
646 </v-flex> 634 </v-flex>
647 </v-layout> 635 </v-layout>
648 </v-flex> 636 </v-flex>
649 <!-- DESCRIPTION --> 637 <!-- DESCRIPTION -->
650 <v-flex xs12> 638 <v-flex xs12>
651 <v-layout> 639 <v-layout>
652 <v-flex xs4 class="pt-4 subheading"> 640 <v-flex xs4 class="pt-4 subheading">
653 <label class="right">Description:</label> 641 <label class="right">Description:</label>
654 </v-flex> 642 </v-flex>
655 <v-flex xs8 sm8 md7 class="ml-3"> 643 <v-flex xs8 sm8 md7 class="ml-3">
656 <v-text-field 644 <v-text-field
657 placeholder="fill your Description" 645 placeholder="fill your Description"
658 :rules="descriptionRules" 646 :rules="descriptionRules"
659 v-model="addCourseDetail.description" 647 v-model="addCourseDetail.description"
660 type="text" 648 type="text"
661 name="email" 649 name="email"
662 required 650 required
663 ></v-text-field> 651 ></v-text-field>
664 </v-flex> 652 </v-flex>
665 </v-layout> 653 </v-layout>
666 </v-flex> 654 </v-flex>
667 <!-- UPLOAD PPT --> 655 <!-- UPLOAD PPT -->
668 <v-flex xs12> 656 <v-flex xs12>
669 <v-layout> 657 <v-layout>
670 <v-flex xs4 class="pt-4 subheading"> 658 <v-flex xs4 class="pt-4 subheading">
671 <label class="right">Upload PPT:</label> 659 <label class="right">Upload PPT:</label>
672 </v-flex> 660 </v-flex>
673 <v-flex xs8 sm8 md7 class="ml-3"> 661 <v-flex xs8 sm8 md7 class="ml-3">
674 <UploadFiles 662 <UploadFiles
675 @fileSelected="fileSelected($event,'uploadPPT')" 663 @fileSelected="fileSelected($event,'uploadPPT')"
676 label="Add PPT" 664 label="Add PPT"
677 reference="ppt" 665 reference="ppt"
678 id="pptInput" 666 id="pptInput"
679 ></UploadFiles> 667 ></UploadFiles>
680 </v-flex> 668 </v-flex>
681 </v-layout> 669 </v-layout>
682 </v-flex> 670 </v-flex>
683 <!-- UPLOAD PDF --> 671 <!-- UPLOAD PDF -->
684 <v-flex xs12> 672 <v-flex xs12>
685 <v-layout> 673 <v-layout>
686 <v-flex xs4 class="pt-4 subheading"> 674 <v-flex xs4 class="pt-4 subheading">
687 <label class="right">Upload PDF:</label> 675 <label class="right">Upload PDF:</label>
688 </v-flex> 676 </v-flex>
689 <v-flex xs8 sm8 md7 class="ml-3"> 677 <v-flex xs8 sm8 md7 class="ml-3">
690 <UploadFiles 678 <UploadFiles
691 @fileSelected="fileSelected($event,'uploadPDF')" 679 @fileSelected="fileSelected($event,'uploadPDF')"
692 label="Add PDF" 680 label="Add PDF"
693 reference="pdf" 681 reference="pdf"
694 id="pdfInput" 682 id="pdfInput"
695 ></UploadFiles> 683 ></UploadFiles>
696 </v-flex> 684 </v-flex>
697 </v-layout> 685 </v-layout>
698 </v-flex> 686 </v-flex>
699 <v-layout> 687 <v-layout>
700 <v-flex xs12> 688 <v-flex xs12>
701 <div v-for="(chapterPoints,index) in finds" :key="index"> 689 <div v-for="(chapterPoints,index) in finds" :key="index">
702 <v-layout> 690 <v-layout>
703 <v-flex xs4 class="pt-4 subheading"> 691 <v-flex xs4 class="pt-4 subheading">
704 <label class="right">Chapter Points:</label> 692 <label class="right">Chapter Points:</label>
705 </v-flex> 693 </v-flex>
706 <v-flex xs8 sm8 md6 class="ml-3"> 694 <v-flex xs8 sm8 md6 class="ml-3">
707 <v-text-field 695 <v-text-field
708 placeholder="fill your Chapter Points" 696 placeholder="fill your Chapter Points"
709 v-model="chapterPoints.value" 697 v-model="chapterPoints.value"
710 type="text" 698 type="text"
711 required 699 required
712 ></v-text-field> 700 ></v-text-field>
713 </v-flex> 701 </v-flex>
714 <v-flex xs2 class="pt-4"> 702 <v-flex xs2 class="pt-4">
715 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 703 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
716 <v-icon @click="addFind">add_circle</v-icon> 704 <v-icon @click="addFind">add_circle</v-icon>
717 </v-flex> 705 </v-flex>
718 </v-layout> 706 </v-layout>
719 </div> 707 </div>
720 </v-flex> 708 </v-flex>
721 </v-layout> 709 </v-layout>
722 <v-layout> 710 <v-layout>
723 <v-flex xs12 sm12> 711 <v-flex xs12 sm12>
724 <v-layout class="right"> 712 <v-layout class="right">
725 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 713 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
726 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 714 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
727 </v-layout> 715 </v-layout>
728 </v-flex> 716 </v-flex>
729 </v-layout> 717 </v-layout>
730 </v-container> 718 </v-container>
731 </v-form> 719 </v-form>
732 </v-card> 720 </v-card>
733 </v-dialog> 721 </v-dialog>
734 <v-snackbar 722 <v-snackbar
735 :timeout="timeout" 723 :timeout="timeout"
736 :top="y === 'top'" 724 :top="y === 'top'"
737 :right="x === 'right'" 725 :right="x === 'right'"
738 :vertical="mode === 'vertical'" 726 :vertical="mode === 'vertical'"
739 v-model="snackbar" 727 v-model="snackbar"
740 :color="color" 728 :color="color"
741 >{{ text }}</v-snackbar> 729 >{{ text }}</v-snackbar>
742 <div class="loader" v-if="showLoader"> 730 <div class="loader" v-if="showLoader">
743 <v-progress-circular indeterminate color="white"></v-progress-circular> 731 <v-progress-circular indeterminate color="white"></v-progress-circular>
744 </div> 732 </div>
745 </v-container> 733 </v-container>
746 </template> 734 </template>
747 735
748 <script> 736 <script>
749 import http from "@/Services/http.js"; 737 import http from "@/Services/http.js";
750 import UploadFiles from "@/pages/Common/UploadFiles.vue"; 738 import UploadFiles from "@/pages/Common/UploadFiles.vue";
751 739
752 export default { 740 export default {
753 components: { 741 components: {
754 UploadFiles 742 UploadFiles
755 }, 743 },
756 data: () => ({ 744 data: () => ({
757 snackbar: false, 745 snackbar: false,
758 y: "top", 746 y: "top",
759 x: "right", 747 x: "right",
760 mode: "", 748 mode: "",
761 timeout: 3000, 749 timeout: 3000,
762 text: "", 750 text: "",
763 loading: false, 751 loading: false,
764 color: "", 752 color: "",
765 date: null, 753 date: null,
766 search: "", 754 search: "",
767 show: true, 755 show: true,
768 addCourseDetailDialog: false, 756 addCourseDetailDialog: false,
769 showSearch: false, 757 showSearch: false,
770 showLoader: false, 758 showLoader: false,
771 editCourseDetailDialog: false, 759 editCourseDetailDialog: false,
772 editChapterDetailDialog: false, 760 editChapterDetailDialog: false,
773 viewProfileGallery: false, 761 viewProfileGallery: false,
774 valid: true, 762 valid: true,
775 editLoading: false, 763 editLoading: false,
776 addclass: [], 764 addclass: [],
777 courseData: [], 765 courseData: [],
778 addSection: [], 766 addSection: [],
779 getCourse: {}, 767 getCourse: {},
780 finds: [{ value: "" }], 768 finds: [{ value: "" }],
781 findsChapterPoint: [{ value: "" }], 769 findsChapterPoint: [{ value: "" }],
782 updates: [], 770 updates: [],
783 youTubeLink: {}, 771 youTubeLink: {},
784 addCourseDetail: { 772 addCourseDetail: {
785 chapters: [ 773 chapters: [
786 { 774 {
787 chapterName: "", 775 chapterName: "",
788 description: "", 776 description: "",
789 chapterPoints: [] 777 chapterPoints: []
790 } 778 }
791 ] 779 ]
792 }, 780 },
793 chapters: [], 781 chapters: [],
794 pagination: { 782 pagination: {
795 rowsPerPage: 10 783 rowsPerPage: 10
796 }, 784 },
797 editFiles: [], 785 editFiles: [],
798 files: [], 786 files: [],
799 courseData: [], 787 courseData: [],
800 token: "", 788 token: "",
801 courseId: "", 789 courseId: "",
802 clsssRules: [v => !!v || " Class is required"], 790 clsssRules: [v => !!v || " Class is required"],
803 courseRules: [v => !!v || " Course is required"], 791 courseRules: [v => !!v || " Course is required"],
804 chapterNameRules: [v => !!v || " Tilte is required"], 792 chapterNameRules: [v => !!v || " Tilte is required"],
805 descriptionRules: [v => !!v || " Description is required"], 793 descriptionRules: [v => !!v || " Description is required"],
806 headers: [ 794 headers: [
807 { 795 {
808 align: "", 796 align: "",
809 text: "No", 797 text: "No",
810 sortable: false, 798 sortable: false,
811 value: "index" 799 value: "index"
812 }, 800 },
813 { 801 {
814 text: "Class Name", 802 text: "Class Name",
815 value: "classNum", 803 value: "classNum",
816 sortable: false, 804 sortable: false,
817 align: "center" 805 align: "center"
818 }, 806 },
819 { 807 {
820 text: "Course Name", 808 text: "Course Name",
821 value: "courseName", 809 value: "courseName",
822 sortable: false, 810 sortable: false,
823 align: "center" 811 align: "center"
824 }, 812 },
825 { text: "Action", value: "", sortable: false, align: "center" } 813 { text: "Action", value: "", sortable: false, align: "center" }
826 ], 814 ],
827 CourseDetailsList: [], 815 CourseDetailsList: [],
828 editedIndex: -1, 816 editedIndex: -1,
829 editedItem: {}, 817 editedItem: {},
830 editedCourse: {}, 818 editedCourse: {},
831 editChapter: { 819 editChapter: {
832 chapterPoints: [] 820 chapterPoints: []
833 }, 821 },
834 index: "", 822 index: "",
835 addChapterItem: {}, 823 addChapterItem: {},
836 addChapterItemObj: {}, 824 addChapterItemObj: {},
837 addChapterDialog: false, 825 addChapterDialog: false,
838 826
839 // UPLOAD FILE 827 // UPLOAD FILE
840 pptFile: "", 828 pptFile: "",
841 pptFileName: "", 829 pptFileName: "",
842 pdfFile: "", 830 pdfFile: "",
843 pdfFileName: "" 831 pdfFileName: ""
844 }), 832 }),
845 methods: { 833 methods: {
846 fileSelected(e, message) { 834 fileSelected(e, message) {
847 if (message == "uploadPPT") { 835 if (message == "uploadPPT") {
848 this.pptFile = e.fileInBase64; 836 this.pptFile = e.fileInBase64;
849 this.pptFileName = e.selectedFileName; 837 this.pptFileName = e.selectedFileName;
850 console.log("ppt file - ", this.pptFile); 838 console.log("ppt file - ", this.pptFile);
851 } 839 }
852 if (message == "uploadPDF") { 840 if (message == "uploadPDF") {
853 this.pdfFile = e.fileInBase64; 841 this.pdfFile = e.fileInBase64;
854 this.pdfFileName = e.selectedFileName; 842 this.pdfFileName = e.selectedFileName;
855 console.log("pdf file - ", this.pdfFile); 843 console.log("pdf file - ", this.pdfFile);
856 } 844 }
857 }, 845 },
858 getCourses(classId) { 846 getCourses(classId) {
859 this.showLoader = true; 847 this.showLoader = true;
860 http() 848 http()
861 .get("/getCourseesList", { 849 .get("/getCourseesList", {
862 params: { 850 params: {
863 classId: classId 851 classId: classId
864 } 852 }
865 }) 853 })
866 .then(response => { 854 .then(response => {
867 this.editChapter.courseId = ""; 855 this.editChapter.courseId = "";
868 this.courseData = response.data.data; 856 this.courseData = response.data.data;
869 // console.log("this.courseData", this.courseData); 857 // console.log("this.courseData", this.courseData);
870 this.showLoader = false; 858 this.showLoader = false;
871 }) 859 })
872 .catch(err => { 860 .catch(err => {
873 console.log("err====>", err); 861 console.log("err====>", err);
874 this.showLoader = false; 862 this.showLoader = false;
875 }); 863 });
876 }, 864 },
877 getCourseDetailsList() { 865 getCourseDetailsList() {
878 this.showLoader = true; 866 this.showLoader = true;
879 http() 867 http()
880 .get("/getParticularCourseDetail", { 868 .get("/getParticularCourseDetail", {
881 params: { 869 params: {
882 courseId: this.getCourse.courseId 870 courseId: this.getCourse.courseId
883 } 871 }
884 }) 872 })
885 .then(response => { 873 .then(response => {
886 this.CourseDetailsList = response.data.data; 874 this.CourseDetailsList = response.data.data;
887 if (response.data.data[0]) { 875 if (response.data.data[0]) {
888 this.chapters = response.data.data[0].chapters; 876 this.chapters = response.data.data[0].chapters;
889 console.log(" this.chapters - ", this.chapters); 877 console.log(" this.chapters - ", this.chapters);
890 } 878 }
891 // console.log("response.data.data", this.CourseDetailsList); 879 // console.log("response.data.data", this.CourseDetailsList);
892 this.showLoader = false; 880 this.showLoader = false;
893 }) 881 })
894 .catch(error => { 882 .catch(error => {
895 // console.log("err====>", err); 883 // console.log("err====>", err);
896 this.showLoader = false; 884 this.showLoader = false;
897 if (error.response.status === 401) { 885 if (error.response.status === 401) {
898 this.$router.replace({ path: "/" }); 886 this.$router.replace({ path: "/" });
899 this.$store.dispatch("setToken", null); 887 this.$store.dispatch("setToken", null);
900 this.$store.dispatch("Id", null); 888 this.$store.dispatch("Id", null);
901 } 889 }
902 }); 890 });
903 }, 891 },
904 courseTableRow(id) { 892 courseTableRow(id) {
905 // console.log("click7", id); 893 // console.log("click7", id);
906 this.courseId = id; 894 this.courseId = id;
907 }, 895 },
908 addChapters(item) { 896 addChapters(item) {
909 this.editedIndex = this.CourseDetailsList.indexOf(item); 897 this.editedIndex = this.CourseDetailsList.indexOf(item);
910 this.addChapterItemObj = Object.assign({}, item); 898 this.addChapterItemObj = Object.assign({}, item);
911 this.addChapterItem.courseDetailId = this.addChapterItemObj._id; 899 this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
912 this.addChapterDialog = true; 900 this.addChapterDialog = true;
913 }, 901 },
914 submitChapter() { 902 submitChapter() {
915 this.addChapterItem.chapterPoints = []; 903 this.addChapterItem.chapterPoints = [];
916 for (let i = 0; i < this.findsChapterPoint.length; i++) { 904 for (let i = 0; i < this.findsChapterPoint.length; i++) {
917 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); 905 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
918 } 906 }
919 // console.log("this.addChapterItem", this.addChapterItem); 907 // console.log("this.addChapterItem", this.addChapterItem);
920 this.loading = true; 908 this.loading = true;
921 http() 909 http()
922 .put("/addChapters", this.addChapterItem) 910 .put("/addChapters", this.addChapterItem)
923 .then(response => { 911 .then(response => {
924 this.addChapterDialog = false; 912 this.addChapterDialog = false;
925 this.loading = false; 913 this.loading = false;
926 this.snackbar = true; 914 this.snackbar = true;
927 this.text = response.data.message; 915 this.text = response.data.message;
928 this.color = "green"; 916 this.color = "green";
929 this.addChapterItem = {}; 917 this.addChapterItem = {};
930 this.removeChapterPoint(); 918 this.removeChapterPoint();
931 this.getCourseDetailsList(); 919 this.getCourseDetailsList();
932 }) 920 })
933 .catch(error => { 921 .catch(error => {
934 this.snackbar = true; 922 this.snackbar = true;
935 this.text = error.response.data.message; 923 this.text = error.response.data.message;
936 this.color = "error"; 924 this.color = "error";
937 this.loading = false; 925 this.loading = false;
938 }); 926 });
939 }, 927 },
940 profile(item) { 928 profile(item) {
941 this.editedIndex = this.chapters.indexOf(item); 929 this.editedIndex = this.chapters.indexOf(item);
942 this.editedItem = Object.assign({}, item); 930 this.editedItem = Object.assign({}, item);
943 this.viewProfileGallery = true; 931 this.viewProfileGallery = true;
944 }, 932 },
945 editItem(item) { 933 editItem(item) {
946 this.editedIndex = this.CourseDetailsList.indexOf(item); 934 this.editedIndex = this.CourseDetailsList.indexOf(item);
947 this.editedCourse = Object.assign({}, item); 935 this.editedCourse = Object.assign({}, item);
948 this.editCourseDetailDialog = true; 936 this.editCourseDetailDialog = true;
949 }, 937 },
950 editChapterItem(item) { 938 editChapterItem(item) {
951 this.editedIndex = this.chapters.indexOf(item); 939 this.editedIndex = this.chapters.indexOf(item);
952 this.editChapter = Object.assign({}, item); 940 this.editChapter = Object.assign({}, item);
953 this.updates = []; 941 this.updates = [];
954 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { 942 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
955 this.updates.push({ value: this.editChapter.chapterPoints[i] }); 943 this.updates.push({ value: this.editChapter.chapterPoints[i] });
956 } 944 }
957 this.editChapterDetailDialog = true; 945 this.editChapterDetailDialog = true;
958 }, 946 },
959 deleteItem(item) { 947 deleteItem(item) {
960 let deleteGallery = { 948 let deleteGallery = {
961 courseDetailId: item._id 949 courseDetailId: item._id
962 }; 950 };
963 http() 951 http()
964 .delete( 952 .delete(
965 "/deleteCourseDetail", 953 "/deleteCourseDetail",
966 confirm("Are you sure you want to delete this?") && { 954 confirm("Are you sure you want to delete this?") && {
967 params: deleteGallery, 955 params: deleteGallery,
968 headers: { 956 headers: {
969 Authorization: "Bearer " + this.token 957 Authorization: "Bearer " + this.token
970 } 958 }
971 } 959 }
972 ) 960 )
973 .then(response => { 961 .then(response => {
974 this.snackbar = true; 962 this.snackbar = true;
975 this.text = "Successfully delete Course Details"; 963 this.text = "Successfully delete Course Details";
976 this.color = "green"; 964 this.color = "green";
977 this.getCourseDetailsList(); 965 this.getCourseDetailsList();
978 }) 966 })
979 .catch(error => { 967 .catch(error => {
980 // console.log(error); 968 // console.log(error);
981 this.snackbar = true; 969 this.snackbar = true;
982 this.text = error.response.data.message; 970 this.text = error.response.data.message;
983 this.color = "error"; 971 this.color = "error";
984 }); 972 });
985 }, 973 },
986 deleteChapters(item) { 974 deleteChapters(item) {
987 // console.log("item", item); 975 // console.log("item", item);
988 let deleteChapters = { 976 let deleteChapters = {
989 courseDetailId: this.courseId, 977 courseDetailId: this.courseId,
990 chapterId: item._id 978 chapterId: item._id
991 }; 979 };
992 http() 980 http()
993 .put( 981 .put(
994 "/deleteChapters", 982 "/deleteChapters",
995 confirm("Are you sure you want to delete this?") && deleteChapters 983 confirm("Are you sure you want to delete this?") && deleteChapters
996 ) 984 )
997 .then(response => { 985 .then(response => {
998 this.snackbar = true; 986 this.snackbar = true;
999 this.text = "Successfully delete Chapters"; 987 this.text = "Successfully delete Chapters";
1000 this.color = "green"; 988 this.color = "green";
1001 this.getCourseDetailsList(); 989 this.getCourseDetailsList();
1002 }) 990 })
1003 .catch(error => { 991 .catch(error => {
1004 // console.log(error); 992 // console.log(error);
1005 this.snackbar = true; 993 this.snackbar = true;
1006 this.text = error.response.data.message; 994 this.text = error.response.data.message;
1007 this.color = "error"; 995 this.color = "error";
1008 }); 996 });
1009 }, 997 },
1010 close() { 998 close() {
1011 this.editCourseDetailDialog = false; 999 this.editCourseDetailDialog = false;
1012 }, 1000 },
1013 closeProfileGallery() { 1001 closeProfileGallery() {
1014 this.viewProfileGallery = false; 1002 this.viewProfileGallery = false;
1015 }, 1003 },
1016 submit() { 1004 submit() {
1017 let chapters = []; 1005 let chapters = [];
1018 var chapterPoints = []; 1006 var chapterPoints = [];
1019 for (let i = 0; i < this.finds.length; i++) { 1007 for (let i = 0; i < this.finds.length; i++) {
1020 chapterPoints.push(this.finds[i].value); 1008 chapterPoints.push(this.finds[i].value);
1021 // console.log("this.finds[i].value", this.finds[i].value); 1009 // console.log("this.finds[i].value", this.finds[i].value);
1022 chapters = [ 1010 chapters = [
1023 { 1011 {
1024 chapterName: this.addCourseDetail.chapterName, 1012 chapterName: this.addCourseDetail.chapterName,
1025 description: this.addCourseDetail.description, 1013 description: this.addCourseDetail.description,
1026 chapterPoints: chapterPoints, 1014 chapterPoints: chapterPoints,
1027 uploadPdf: this.pdfFile, 1015 uploadPdf: this.pdfFile,
1028 uploadPpt: this.pptFile 1016 uploadPpt: this.pptFile
1029 } 1017 }
1030 ]; 1018 ];
1031 } 1019 }
1032 if (this.$refs.form.validate()) { 1020 if (this.$refs.form.validate()) {
1033 // console.log("this.addCourseDetail", this.addCourseDetail); 1021 // console.log("this.addCourseDetail", this.addCourseDetail);
1034 var courseDetailsData = { 1022 var courseDetailsData = {
1035 classId: this.addCourseDetail.classId, 1023 classId: this.addCourseDetail.classId,
1036 courseId: this.addCourseDetail.courseId, 1024 courseId: this.addCourseDetail.courseId,
1037 chapters: chapters 1025 chapters: chapters
1038 }; 1026 };
1039 this.loading = true; 1027 this.loading = true;
1040 http() 1028 http()
1041 .post("/createCourseDetail", courseDetailsData) 1029 .post("/createCourseDetail", courseDetailsData)
1042 .then(response => { 1030 .then(response => {
1043 this.addCourseDetailDialog = false; 1031 this.addCourseDetailDialog = false;
1044 this.loading = false; 1032 this.loading = false;
1045 this.snackbar = true; 1033 this.snackbar = true;
1046 this.text = response.data.message; 1034 this.text = response.data.message;
1047 this.color = "green"; 1035 this.color = "green";
1048 this.clear(); 1036 this.clear();
1049 this.removeAddFind(); 1037 this.removeAddFind();
1050 }) 1038 })
1051 .catch(error => { 1039 .catch(error => {
1052 this.snackbar = true; 1040 this.snackbar = true;
1053 this.text = error.response.data.message; 1041 this.text = error.response.data.message;
1054 this.color = "error"; 1042 this.color = "error";
1055 this.loading = false; 1043 this.loading = false;
1056 }); 1044 });
1057 } 1045 }
1058 }, 1046 },
1059 clear() { 1047 clear() {
1060 this.$refs.form.reset(); 1048 this.$refs.form.reset();
1061 }, 1049 },
1062 saveChapter() { 1050 saveChapter() {
1063 this.editedItem.courseDetailId = this.editedItem._id; 1051 this.editedItem.courseDetailId = this.editedItem._id;
1064 // console.log("this.updates", this.updates); 1052 // console.log("this.updates", this.updates);
1065 var chapterPoints = []; 1053 var chapterPoints = [];
1066 for (let i = 0; i < this.updates.length; i++) { 1054 for (let i = 0; i < this.updates.length; i++) {
1067 console.log("this.updates[i]", this.updates[i]); 1055 console.log("this.updates[i]", this.updates[i]);
1068 chapterPoints.push(this.updates[i].value); 1056 chapterPoints.push(this.updates[i].value);
1069 } 1057 }
1070 var updateData = { 1058 var updateData = {
1071 courseDetailId: this.courseId, 1059 courseDetailId: this.courseId,
1072 chapterId: this.editChapter._id, 1060 chapterId: this.editChapter._id,
1073 chapterName: this.editChapter.chapterName, 1061 chapterName: this.editChapter.chapterName,
1074 description: this.editChapter.description, 1062 description: this.editChapter.description,
1075 chapterPoints: chapterPoints 1063 chapterPoints: chapterPoints
1076 }; 1064 };
1077 console.log("chapterPoints", updateData); 1065 console.log("chapterPoints", updateData);
1078 this.editLoading = true; 1066 this.editLoading = true;
1079 http() 1067 http()
1080 .put("/updateChapters", updateData) 1068 .put("/updateChapters", updateData)
1081 .then(response => { 1069 .then(response => {
1082 this.editChapterDetailDialog = false; 1070 this.editChapterDetailDialog = false;
1083 this.snackbar = true; 1071 this.snackbar = true;
1084 this.text = response.data.message; 1072 this.text = response.data.message;
1085 this.color = "green"; 1073 this.color = "green";
1086 this.editLoading = false; 1074 this.editLoading = false;
1087 // this.removeUpdatePoints(); 1075 // this.removeUpdatePoints();
1088 this.getCourseDetailsList(); 1076 this.getCourseDetailsList();
1089 }) 1077 })
1090 .catch(error => { 1078 .catch(error => {
1091 this.editLoading = false; 1079 this.editLoading = false;
1092 this.snackbar = true; 1080 this.snackbar = true;
1093 this.text = error.response.data.message; 1081 this.text = error.response.data.message;
1094 this.color = "error"; 1082 this.color = "error";
1095 }); 1083 });
1096 }, 1084 },
1097 save() { 1085 save() {
1098 // console.log("utykgigiu", this.editedCourse); 1086 // console.log("utykgigiu", this.editedCourse);
1099 var updateData = { 1087 var updateData = {
1100 courseDetailId: this.editedCourse._id, 1088 courseDetailId: this.editedCourse._id,
1101 courseId: this.editedCourse.courseId, 1089 courseId: this.editedCourse.courseId,
1102 classId: this.editedCourse.classId 1090 classId: this.editedCourse.classId
1103 }; 1091 };
1104 this.editLoading = true; 1092 this.editLoading = true;
1105 http() 1093 http()
1106 .put("/updateCourseDetail", updateData) 1094 .put("/updateCourseDetail", updateData)
1107 .then(response => { 1095 .then(response => {
1108 this.getCourseDetailsList(); 1096 this.getCourseDetailsList();
1109 this.editCourseDetailDialog = false; 1097 this.editCourseDetailDialog = false;
1110 this.snackbar = true; 1098 this.snackbar = true;
1111 this.text = response.data.message; 1099 this.text = response.data.message;
1112 this.color = "green"; 1100 this.color = "green";
1113 this.editLoading = false; 1101 this.editLoading = false;
1114 // this.editChapterPointName = ""; 1102 // this.editChapterPointName = "";
1115 this.editFiles = []; 1103 this.editFiles = [];
1116 }) 1104 })
1117 .catch(error => { 1105 .catch(error => {
1118 this.editLoading = false; 1106 this.editLoading = false;
1119 this.snackbar = true; 1107 this.snackbar = true;
1120 this.text = error.response.data.message; 1108 this.text = error.response.data.message;
1121 this.color = "error"; 1109 this.color = "error";
1122 }); 1110 });
1123 }, 1111 },
1124 getAllClasses() { 1112 getAllClasses() {
1125 http() 1113 http()
1126 .get("/getClassesList", { 1114 .get("/getClassesList", {
1127 headers: { Authorization: "Bearer " + this.token } 1115 headers: { Authorization: "Bearer " + this.token }
1128 }) 1116 })
1129 .then(response => { 1117 .then(response => {
1130 this.addclass = response.data.data; 1118 this.addclass = response.data.data;
1131 }) 1119 })
1132 .catch(err => { 1120 .catch(err => {
1133 // console.log("err====>", err); 1121 // console.log("err====>", err);
1134 }); 1122 });
1135 }, 1123 },
1136 removeChapterPoint: function() { 1124 removeChapterPoint: function() {
1137 this.findsChapterPoint = [{ value: "" }]; 1125 this.findsChapterPoint = [{ value: "" }];
1138 }, 1126 },
1139 removeAddFind: function() { 1127 removeAddFind: function() {
1140 this.finds = [{ value: "" }]; 1128 this.finds = [{ value: "" }];
1141 }, 1129 },
1142 addFind: function() { 1130 addFind: function() {
1143 this.finds.push({ value: "" }); 1131 this.finds.push({ value: "" });
1144 }, 1132 },
1145 addChapterPoint: function() { 1133 addChapterPoint: function() {
1146 this.findsChapterPoint.push({ value: "" }); 1134 this.findsChapterPoint.push({ value: "" });
1147 console.log("this.findsChapterPoint", this.findsChapterPoint); 1135 console.log("this.findsChapterPoint", this.findsChapterPoint);
1148 }, 1136 },
1149 update: function() { 1137 update: function() {
1150 this.updates.push({ value: "" }); 1138 this.updates.push({ value: "" });
1151 }, 1139 },
1152 // removeUpdatePoints: function() { 1140 // removeUpdatePoints: function() {
1153 // this.updates = [{ value: "" }]; 1141 // this.updates = [{ value: "" }];
1154 // }, 1142 // },
1155 deleteFind: function(index) { 1143 deleteFind: function(index) {
1156 this.finds.splice(index, 1); 1144 this.finds.splice(index, 1);
1157 if (index === 0) this.addFind(); 1145 if (index === 0) this.addFind();
1158 }, 1146 },
1159 deleteChapterPoint: function(index) { 1147 deleteChapterPoint: function(index) {
1160 this.findsChapterPoint.splice(index, 1); 1148 this.findsChapterPoint.splice(index, 1);
1161 if (index === 0) this.addChapterPoint(); 1149 if (index === 0) this.addChapterPoint();
1162 }, 1150 },
1163 deleteUpdate: function(index) { 1151 deleteUpdate: function(index) {
1164 this.updates.splice(index, 1); 1152 this.updates.splice(index, 1);
1165 if (index === 0) this.update(); 1153 if (index === 0) this.update();
1166 }, 1154 },
1167 deleteUrl: function(index, youTubelinkId, id) { 1155 deleteUrl: function(index, youTubelinkId, id) {
1168 this.editChapter.chapterPoints.splice(index, 1); 1156 this.editChapter.chapterPoints.splice(index, 1);
1169 if (index === 0) this.update(); 1157 if (index === 0) this.update();
1170 }, 1158 },
1171 displaySearch() { 1159 displaySearch() {
1172 this.show = false; 1160 this.show = false;
1173 this.showSearch = true; 1161 this.showSearch = true;
1174 }, 1162 },
1175 closeSearch() { 1163 closeSearch() {
1176 this.showSearch = false; 1164 this.showSearch = false;
1177 this.show = true; 1165 this.show = true;
1178 this.search = ""; 1166 this.search = "";
1179 } 1167 }
1180 }, 1168 },
1181 mounted() { 1169 mounted() {
1182 this.token = this.$store.state.token; 1170 this.token = this.$store.state.token;
1183 this.getAllClasses(); 1171 this.getAllClasses();
1184 } 1172 }
1185 }; 1173 };
1186 </script> 1174 </script>
src/pages/Dashboard/dashboard.vue
Diff comments   View file @1dea1c0
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500"> 72 <v-dialog v-model="viewEventDetails" max-width="500">
73 <v-card flat class="card-style pa-2" dark> 73 <v-card flat class="card-style pa-2" dark>
74 <!-- TITLE --> 74 <!-- TITLE -->
75 <v-layout> 75 <v-layout>
76 <v-layout> 76 <v-layout>
77 <v-flex xs12> 77 <v-flex xs12>
78 <label class="title text-xs-center">{{particularEvent.title}}</label> 78 <label class="title text-xs-center">{{particularEvent.title}}</label>
79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> 79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-layout> 82 </v-layout>
83 83
84 <v-card-text> 84 <v-card-text>
85 <v-list dark class="card-style"> 85 <v-list dark class="card-style">
86 <v-list-tile> 86 <v-list-tile>
87 <v-list-tile-content> 87 <v-list-tile-content>
88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> 88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
89 </v-list-tile-content> 89 </v-list-tile-content>
90 </v-list-tile> 90 </v-list-tile>
91 <v-list-tile> 91 <v-list-tile>
92 <v-list-tile-content> 92 <v-list-tile-content>
93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> 93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
94 </v-list-tile-content> 94 </v-list-tile-content>
95 </v-list-tile> 95 </v-list-tile>
96 </v-list> 96 </v-list>
97 </v-card-text> 97 </v-card-text>
98 </v-card> 98 </v-card>
99 </v-dialog> 99 </v-dialog>
100 100
101 <v-layout wrap row> 101 <v-layout wrap row>
102 <v-flex xs12 sm12 md9> 102 <v-flex xs12 sm12 md9>
103 <v-container fluid grid-list-xl> 103 <v-container fluid grid-list-xl>
104 <!-- ***** Total Students ***** --> 104 <!-- ***** Total Students ***** -->
105 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 105 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
106 <v-flex xs12 sm12 md3> 106 <v-flex xs12 sm12 md3>
107 <router-link :to="{ name:'Students' }"> 107 <router-link :to="{ name:'Students' }">
108 <v-card class="card pink-bgcolor"> 108 <v-card class="card pink-bgcolor">
109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
112 </v-card> 112 </v-card>
113 </router-link> 113 </router-link>
114 </v-flex> 114 </v-flex>
115 <!-- ***** Total Teachers***** --> 115 <!-- ***** Total Teachers***** -->
116 <v-flex xs12 sm12 md3> 116 <v-flex xs12 sm12 md3>
117 <router-link :to="{ name:'Teachers' }"> 117 <router-link :to="{ name:'Teachers' }">
118 <v-card flat class="card elevation-2 firozi-bgcolor"> 118 <v-card flat class="card elevation-2 firozi-bgcolor">
119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
121 121
122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
123 </v-card> 123 </v-card>
124 </router-link> 124 </router-link>
125 </v-flex> 125 </v-flex>
126 <!-- ***** Total Parents ***** --> 126 <!-- ***** Total Parents ***** -->
127 <v-flex xs12 sm12 md3> 127 <v-flex xs12 sm12 md3>
128 <router-link :to="{ name:'Parents' }"> 128 <router-link :to="{ name:'Parents' }">
129 <v-card flat class="card yellow darken-3"> 129 <v-card flat class="card yellow darken-3">
130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
133 </v-card> 133 </v-card>
134 </router-link> 134 </router-link>
135 </v-flex> 135 </v-flex>
136 <!-- ***** Total Class***** --> 136 <!-- ***** Total Class***** -->
137 <v-flex xs12 sm12 md3> 137 <v-flex xs12 sm12 md3>
138 <router-link :to="{ name:'Class' }"> 138 <router-link :to="{ name:'Class' }">
139 <v-card flat class="card darkBlue-bgcolor"> 139 <v-card flat class="card darkBlue-bgcolor">
140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
143 </v-card> 143 </v-card>
144 </router-link> 144 </router-link>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 147
148 <p 148 <p
149 v-if="studentsData.length === 0 && role == 'PARENT'" 149 v-if="studentsData.length === 0 && role == 'PARENT'"
150 class="text-center title grey lighten-4 error--text" 150 class="text-center title grey lighten-4 error--text"
151 >You have no student registered with school</p> 151 >You have no student registered with school</p>
152 <!-- ACCOUNT --> 152 <!-- ACCOUNT -->
153 <!-- <v-layout v-if="role != 'PARENT'"> 153 <!-- <v-layout v-if="role != 'PARENT'">
154 <v-flex xs12> 154 <v-flex xs12>
155 <v-card class="card mt-2 account-Card"> 155 <v-card class="card mt-2 account-Card">
156 <h4> 156 <h4>
157 <b>Account</b> 157 <b>Account</b>
158 </h4> 158 </h4>
159 <v-layout wrap> 159 <v-layout wrap>
160 <v-flex xs12 sm12 md3> 160 <v-flex xs12 sm12 md3>
161 <v-list two-line> 161 <v-list two-line>
162 <template> 162 <template>
163 <v-list-tile> 163 <v-list-tile>
164 <v-list-tile-avatar> 164 <v-list-tile-avatar>
165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
166 </v-list-tile-avatar> 166 </v-list-tile-avatar>
167 <v-list-tile-content> 167 <v-list-tile-content>
168 <v-list-tile-title class="mt-2"> 168 <v-list-tile-title class="mt-2">
169 <p class="subheading font-color">Fees</p> 169 <p class="subheading font-color">Fees</p>
170 </v-list-tile-title> 170 </v-list-tile-title>
171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
172 </v-list-tile-content> 172 </v-list-tile-content>
173 </v-list-tile> 173 </v-list-tile>
174 <v-list-tile> 174 <v-list-tile>
175 <v-list-tile-avatar> 175 <v-list-tile-avatar>
176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
177 </v-list-tile-avatar> 177 </v-list-tile-avatar>
178 <v-list-tile-content> 178 <v-list-tile-content>
179 <v-list-tile-title class="mt-2"> 179 <v-list-tile-title class="mt-2">
180 <p class="subheading font-color">Collection</p> 180 <p class="subheading font-color">Collection</p>
181 </v-list-tile-title> 181 </v-list-tile-title>
182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
183 </v-list-tile-content> 183 </v-list-tile-content>
184 </v-list-tile> 184 </v-list-tile>
185 <v-list-tile> 185 <v-list-tile>
186 <v-list-tile-avatar> 186 <v-list-tile-avatar>
187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
188 </v-list-tile-avatar> 188 </v-list-tile-avatar>
189 <v-list-tile-content> 189 <v-list-tile-content>
190 <v-list-tile-title class="mt-2"> 190 <v-list-tile-title class="mt-2">
191 <p class="subheading font-color">Expences</p> 191 <p class="subheading font-color">Expences</p>
192 </v-list-tile-title> 192 </v-list-tile-title>
193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
194 </v-list-tile-content> 194 </v-list-tile-content>
195 </v-list-tile> 195 </v-list-tile>
196 </template> 196 </template>
197 </v-list> 197 </v-list>
198 </v-flex> 198 </v-flex>
199 <v-flex xs12 sm12 md9 lg9> 199 <v-flex xs12 sm12 md9 lg9>
200 <div id="chart"> 200 <div id="chart">
201 <div v-if="this.series"> 201 <div v-if="this.series">
202 <apexchart 202 <apexchart
203 type="bar" 203 type="bar"
204 height="250" 204 height="250"
205 style="max-width: 800px !important" 205 style="max-width: 800px !important"
206 :options="chartOptions" 206 :options="chartOptions"
207 :series="series" 207 :series="series"
208 v-show="true" 208 v-show="true"
209 ></apexchart> 209 ></apexchart>
210 </div> 210 </div>
211 </div> 211 </div>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 </v-card> 214 </v-card>
215 </v-flex> 215 </v-flex>
216 </v-layout> --> 216 </v-layout>-->
217 217
218 <v-card class="mt-2 card" v-if="role != 'PARENT'"> 218 <v-card class="mt-2 card" v-if="role != 'PARENT'">
219 <!-- <full-calendar 219 <!-- <full-calendar
220 ref="calendar" 220 ref="calendar"
221 defaultView="month" 221 defaultView="month"
222 droppable="false" 222 droppable="false"
223 :events="events" 223 :events="events"
224 :config="config" 224 :config="config"
225 ></full-calendar>--> 225 ></full-calendar>-->
226 <h4 class="pa-3"> 226 <h4 class="pa-3">
227 <b>Notice</b> 227 <b>Notice</b>
228 </h4> 228 </h4>
229 229
230 <v-data-table 230 <v-data-table
231 :items="noticeData" 231 :items="noticeData"
232 class="elevation-0" 232 class="elevation-0"
233 flat 233 flat
234 hide-actions 234 hide-actions
235 hide-headers 235 hide-headers
236 style="border-spacing: 0 !important;" 236 style="border-spacing: 0 !important;"
237 > 237 >
238 <template 238 <template
239 slot="items" 239 slot="items"
240 slot-scope="props" 240 slot-scope="props"
241 v-if="props.index < 5" 241 v-if="props.index < 5"
242 style="border-spacing: 0 !important;" 242 style="border-spacing: 0 !important;"
243 > 243 >
244 <tr class="td-notice"> 244 <tr class="td-notice">
245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
246 <td> 246 <td>
247 <span class="grey--text caption">{{ date(props.item.created) }}</span> 247 <span class="grey--text caption">{{ date(props.item.created) }}</span>
248 <br /> 248 <br />
249 <span class="body-2">{{ props.item.title}}</span> 249 <span class="body-2">{{ props.item.title}}</span>
250 </td> 250 </td>
251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
252 252
253 <td class="text-xs-center"> 253 <td class="text-xs-center">
254 <span> 254 <span>
255 <v-tooltip top> 255 <v-tooltip top>
256 <img 256 <img
257 slot="activator" 257 slot="activator"
258 style="cursor:pointer; width:25px; height:25px; " 258 style="cursor:pointer; width:25px; height:25px; "
259 @click="profile" 259 @click="profile"
260 src="/static/icon/view.png" 260 src="/static/icon/view.png"
261 /> 261 />
262 <span>View</span> 262 <span>View</span>
263 </v-tooltip> 263 </v-tooltip>
264 </span> 264 </span>
265 </td> 265 </td>
266 </tr> 266 </tr>
267 </template> 267 </template>
268 </v-data-table> 268 </v-data-table>
269 </v-card> 269 </v-card>
270 <!-- COURSES --> 270 <!-- COURSES -->
271 <v-layout v-if="role == 'PARENT'"> 271 <v-layout v-if="role == 'PARENT'">
272 <v-flex xs12> 272 <v-flex xs12>
273 <v-card class="card mt-2 account-Card"> 273 <v-card class="card mt-2 account-Card">
274 <h4> 274 <h4>
275 <b>My Courses</b> 275 <b>My Courses</b>
276 </h4> 276 </h4>
277 <v-layout wrap> 277 <v-layout wrap>
278 <v-flex xs12 sm12> 278 <v-flex xs12 sm12>
279 <v-list two-line> 279 <v-list two-line>
280 <template> 280 <template>
281 <v-list-tile v-for="(course,i) in courseData" :key="i"> 281 <v-list-tile v-for="(course,i) in courseData" :key="i">
282 <v-list-tile-avatar> 282 <v-list-tile-avatar>
283 <v-icon 283 <v-icon
284 class="account-circle darkBlue-color" 284 class="account-circle darkBlue-color"
285 style="cursor: pointer;" 285 style="cursor: pointer;"
286 >panorama_fish_eye</v-icon> 286 >panorama_fish_eye</v-icon>
287 </v-list-tile-avatar> 287 </v-list-tile-avatar>
288 <v-list-tile-content> 288 <v-list-tile-content>
289 <v-list-tile-title 289 <v-list-tile-title
290 style="cursor: pointer;" 290 style="cursor: pointer;"
291 @click="routeToCourseDetails(course._id)" 291 @click="routeToCourseDetails(course._id)"
292 >{{ course.courseName }}</v-list-tile-title> 292 >{{ course.courseName }}</v-list-tile-title>
293 </v-list-tile-content> 293 </v-list-tile-content>
294 </v-list-tile> 294 </v-list-tile>
295 </template> 295 </template>
296 </v-list> 296 </v-list>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-card> 299 </v-card>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 <v-layout v-if="role == 'PARENT'"> 302 <v-layout v-if="role == 'PARENT'">
303 <v-flex xs6> 303 <v-flex xs6>
304 <v-card class="mt-2 card"> 304 <v-card class="mt-2 card">
305 <h4 class="pa-3"> 305 <h4 class="pa-3">
306 <b>Latest Annoucements</b> 306 <b>Latest Annoucements</b>
307 </h4> 307 </h4>
308 308
309 <v-data-table 309 <v-data-table
310 :items="annoucementData" 310 :items="annoucementData"
311 class="elevation-0" 311 class="elevation-0"
312 flat 312 flat
313 hide-actions 313 hide-actions
314 hide-headers 314 hide-headers
315 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
316 > 316 >
317 <template 317 <template
318 slot="items" 318 slot="items"
319 slot-scope="props" 319 slot-scope="props"
320 v-if="props.index < 5" 320 v-if="props.index < 5"
321 style="border-spacing: 0 !important;" 321 style="border-spacing: 0 !important;"
322 > 322 >
323 <tr class="td-notice"> 323 <tr class="td-notice">
324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
325 <td> 325 <td>
326 <span class="grey--text caption">{{ date(props.item.created) }}</span> 326 <span class="grey--text caption">{{ date(props.item.created) }}</span>
327 <br /> 327 <br />
328 <span class="body-2">{{ props.item.discussionType}}</span> 328 <span class="body-2">{{ props.item.discussionType}}</span>
329 </td> 329 </td>
330 <td class="text-xs-center"> 330 <td class="text-xs-center">
331 <span> 331 <span>
332 <v-tooltip top> 332 <v-tooltip top>
333 <img 333 <img
334 slot="activator" 334 slot="activator"
335 style="cursor:pointer; width:25px; height:25px; " 335 style="cursor:pointer; width:25px; height:25px; "
336 src="/static/icon/view.png" 336 src="/static/icon/view.png"
337 /> 337 />
338 <span>View</span> 338 <span>View</span>
339 </v-tooltip> 339 </v-tooltip>
340 </span> 340 </span>
341 </td> 341 </td>
342 </tr> 342 </tr>
343 </template> 343 </template>
344 </v-data-table> 344 </v-data-table>
345 </v-card> 345 </v-card>
346 </v-flex> 346 </v-flex>
347 <v-flex xs6> 347 <v-flex xs6>
348 <v-card class="mt-2 card"> 348 <v-card class="mt-2 card">
349 <h4 class="pa-3"> 349 <h4 class="pa-3">
350 <b>Online User</b> 350 <b>Online User</b>
351 </h4> 351 </h4>
352 352
353 <v-data-table 353 <v-data-table
354 :items="onlineUser" 354 :items="onlineUser"
355 class="elevation-0" 355 class="elevation-0"
356 flat 356 flat
357 hide-actions 357 hide-actions
358 hide-headers 358 hide-headers
359 style="border-spacing: 0 !important;" 359 style="border-spacing: 0 !important;"
360 > 360 >
361 <template 361 <template
362 slot="items" 362 slot="items"
363 slot-scope="props" 363 slot-scope="props"
364 v-if="props.index < 5" 364 v-if="props.index < 5"
365 style="border-spacing: 0 !important;" 365 style="border-spacing: 0 !important;"
366 > 366 >
367 <tr class="td-notice"> 367 <tr class="td-notice">
368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
369 <td> 369 <td>
370 <span class="body-2">{{ props.item.user }}</span> 370 <span class="body-2">{{ props.item.user }}</span>
371 </td> 371 </td>
372 <td class="text-xs-center"> 372 <td class="text-xs-center">
373 <span> 373 <span>
374 <v-tooltip top> 374 <v-tooltip top>
375 <img 375 <img
376 slot="activator" 376 slot="activator"
377 style="cursor:pointer; width:25px; height:25px; " 377 style="cursor:pointer; width:25px; height:25px; "
378 src="/static/icon/view.png" 378 src="/static/icon/view.png"
379 /> 379 />
380 <span>View</span> 380 <span>View</span>
381 </v-tooltip> 381 </v-tooltip>
382 </span> 382 </span>
383 </td> 383 </td>
384 </tr> 384 </tr>
385 </template> 385 </template>
386 </v-data-table> 386 </v-data-table>
387 </v-card> 387 </v-card>
388 </v-flex> 388 </v-flex>
389 </v-layout> 389 </v-layout>
390 </v-container> 390 </v-container>
391 </v-flex> 391 </v-flex>
392 <v-spacer></v-spacer> 392 <v-spacer></v-spacer>
393 <!-- SIDE BAR --> 393 <!-- SIDE BAR -->
394 <v-flex xs12 sm12 md3> 394 <v-flex xs12 sm12 md3>
395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
396 <v-card-text class="px-2"> 396 <v-card-text class="px-2">
397 <h4 class="text-xs-center py-3"> 397 <h4 class="text-xs-center py-3">
398 <b>Profile</b> 398 <b>Profile</b>
399 </h4> 399 </h4>
400 <v-flex xs12 class="py-3"> 400 <v-flex xs12 class="py-3">
401 <v-layout wrap> 401 <v-layout wrap>
402 <v-flex xs12 sm12 md4> 402 <v-flex xs12 sm12 md4>
403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" /> 404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" />
405 </v-flex> 405 </v-flex>
406 <v-flex xs12 sm12 md6> 406 <v-flex xs12 sm12 md6>
407 <p class="mb-0 body-1"> 407 <p class="mb-0 body-1">
408 <i>{{ userData.name }}</i> 408 <i>{{ userData.name }}</i>
409 </p> 409 </p>
410 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 410 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
412 <address class="caption grey--text mb-3">{{ userData.address }}</address> 412 <address class="caption grey--text mb-3">{{ userData.address }}</address>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <hr /> 416 <hr />
417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
418 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 418 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
419 <!-- LATEST ACTIVITY --> 419
420 <!-- LATEST EVENTS -->
420 <v-card class="my-3 elevation-0"> 421 <v-card class="my-3 elevation-0">
421 <v-card-text> 422 <v-card-text>
422 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 423 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
423 <div 424 <div
424 v-for="(activity,index) in activityList" 425 v-for="(activity,index) in activityList"
425 :key="index" 426 :key="index"
426 class="mt-2" 427 class="mt-2"
427 style="cursor: pointer;" 428 style="cursor: pointer;"
428 @click="seeEventDetails(activity)" 429 @click="seeEventDetails(activity)"
429 > 430 >
430 <span 431 <span
431 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 432 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
432 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 433 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
433 ></span> 434 ></span>
434 <div style="display: inline-block;" class="ml-2"> 435 <div style="display: inline-block;" class="ml-2">
436 <!-- LATEST EVENTS FOR PARENT -->
435 <div v-if="$store.state.role === 'PARENT' "> 437 <div v-if="$store.state.role === 'PARENT' ">
436 <div 438 <div
437 class="grey--text lighten-1 caption" 439 class="grey--text lighten-1 caption"
438 v-if="activity.meetingEvent" 440 v-if="activity.meetingEvent"
439 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 441 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
440 <div 442 <div
441 class="body-2" 443 class="body-2"
442 v-if="activity.meetingEvent" 444 v-if="activity.meetingEvent"
443 >{{activity.meetingEvent.title}}</div> 445 >{{activity.meetingEvent.title}}</div>
444 </div> 446 </div>
445 447
446 <!-- LATEST EVENTS FOR TEACHER --> 448 <!-- LATEST EVENTS FOR TEACHER -->
447 <div v-if="role == 'TEACHER'"> 449 <div v-if="role == 'TEACHER'">
448 <div 450 <div
449 class="grey--text lighten-1 caption" 451 class="grey--text lighten-1 caption"
450 v-if="activity.dateOfEvent" 452 v-if="activity.dateOfEvent"
451 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 453 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
452 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 454 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
453 </div> 455 </div>
454 </div> 456 </div>
455 </div> 457 </div>
456 <div v-if="activityList.length == 0"> 458 <div v-if="activityList.length == 0">
457 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 459 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
458 </div> 460 </div>
459 </v-card-text> 461 </v-card-text>
460 </v-card> 462 </v-card>
461 </v-card-text> 463 </v-card-text>
462 </v-card> 464 </v-card>
463 </v-flex> 465 </v-flex>
464 </v-layout> 466 </v-layout>
465 467
466 <v-dialog v-model="dialog" max-width="500"> 468 <v-dialog v-model="dialog" max-width="500">
467 <v-card color="grey lighten-4" flat> 469 <v-card color="grey lighten-4" flat>
468 <v-toolbar dark color="fixcolors"> 470 <v-toolbar dark color="fixcolors">
469 <v-spacer></v-spacer> 471 <v-spacer></v-spacer>
470 <v-btn icon @click="dialog= false"> 472 <v-btn icon @click="dialog= false">
471 <v-icon>close</v-icon> 473 <v-icon>close</v-icon>
472 </v-btn> 474 </v-btn>
473 </v-toolbar> 475 </v-toolbar>
474 <v-flex class="py-4"> 476 <v-flex class="py-4">
475 <v-list-tile> 477 <v-list-tile>
476 <v-list-tile-action> 478 <v-list-tile-action>
477 <v-icon>edit</v-icon> 479 <v-icon>edit</v-icon>
478 </v-list-tile-action> 480 </v-list-tile-action>
479 <v-list-tile-content> 481 <v-list-tile-content>
480 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 482 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
481 </v-list-tile-content> 483 </v-list-tile-content>
482 </v-list-tile> 484 </v-list-tile>
483 <v-list-tile> 485 <v-list-tile>
484 <v-list-tile-action> 486 <v-list-tile-action>
485 <v-icon>access_time</v-icon> 487 <v-icon>access_time</v-icon>
486 </v-list-tile-action> 488 </v-list-tile-action>
487 <v-list-tile-content> 489 <v-list-tile-content>
488 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 490 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
489 </v-list-tile-content> 491 </v-list-tile-content>
490 </v-list-tile> 492 </v-list-tile>
491 </v-flex> 493 </v-flex>
492 </v-card> 494 </v-card>
493 </v-dialog> 495 </v-dialog>
494 </v-app> 496 </v-app>
495 </template> 497 </template>
496 498
497 <script> 499 <script>
498 import http from "@/Services/http.js"; 500 import http from "@/Services/http.js";
499 import moment from "moment"; 501 import moment from "moment";
500 import AllApiCalls from "@/Services/AllApiCalls.js"; 502 import AllApiCalls from "@/Services/AllApiCalls.js";
501 // import { FunctionalCalendar } from "vue-functional-calendar"; 503 // import { FunctionalCalendar } from "vue-functional-calendar";
502 504
503 export default { 505 export default {
504 components: { 506 components: {
505 // FunctionalCalendar 507 // FunctionalCalendar
506 }, 508 },
507 mixins: [AllApiCalls], 509 mixins: [AllApiCalls],
508 data() { 510 data() {
509 return { 511 return {
510 // data: { 512 // data: {
511 // clieckedToday: false 513 // clieckedToday: false
512 // }, 514 // },
513 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 515 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
514 // calendarData: {}, 516 // calendarData: {},
515 // calendar: {}, 517 // calendar: {},
516 518
517 // DIALOG BOX EVENT DETAILS 519 // DIALOG BOX EVENT DETAILS
518 viewEventDetails: false, 520 viewEventDetails: false,
519 521
520 // CALENDER 522 // CALENDER
521 moment: moment, 523 moment: moment,
522 activityEvents: [], 524 activityEvents: [],
523 onlineUser: [ 525 onlineUser: [
524 { 526 {
525 user: "Student Demo" 527 user: "Student Demo"
526 }, 528 },
527 { 529 {
528 user: "Teacher Demo" 530 user: "Teacher Demo"
529 }, 531 },
530 { 532 {
531 user: "Priyansh Gupta" 533 user: "Priyansh Gupta"
532 }, 534 },
533 { 535 {
534 user: "Gaurav Aggarwal" 536 user: "Gaurav Aggarwal"
535 }, 537 },
536 { 538 {
537 user: "Approve Arorra" 539 user: "Approve Arorra"
538 } 540 }
539 ], 541 ],
540 showLoader: false, 542 showLoader: false,
541 calendarData: {}, 543 calendarData: {},
542 dialog: false, 544 dialog: false,
543 dialogNotice: false, 545 dialogNotice: false,
544 HolidaysList: [], 546 HolidaysList: [],
545 EventsList: [], 547 EventsList: [],
546 events: [], 548 events: [],
547 config: { 549 config: {
548 eventClick: event => { 550 eventClick: event => {
549 this.selected = event; 551 this.selected = event;
550 this.dialog = true; 552 this.dialog = true;
551 } 553 }
552 }, 554 },
553 selected: {}, 555 selected: {},
554 barGraph: [], 556 barGraph: [],
555 // notice: {}, 557 // notice: {},
556 userData: {}, 558 userData: {},
557 dated: new Date(2018, 0, 9), 559 dated: new Date(2018, 0, 9),
558 userList: [], 560 userList: [],
559 sectionList: [], 561 sectionList: [],
560 students: "", 562 students: "",
561 parents: "", 563 parents: "",
562 teachers: "", 564 teachers: "",
563 classes: "", 565 classes: "",
564 noticeData: [], 566 noticeData: [],
565 expenseData: [], 567 expenseData: [],
566 feeData: [], 568 feeData: [],
567 collectionData: [], 569 collectionData: [],
568 courseData: [], 570 courseData: [],
569 studentsData: [], 571 studentsData: [],
570 annoucementData: [], 572 annoucementData: [],
571 role: "", 573 role: "",
572 attrs: [ 574 attrs: [
573 { 575 {
574 key: "today", 576 key: "today",
575 highlight: true, 577 highlight: true,
576 dates: new Date() 578 dates: new Date()
577 } 579 }
578 ], 580 ],
579 drawer: true, 581 drawer: true,
580 items: [ 582 items: [
581 { title: "Home", icon: "dashboard" }, 583 { title: "Home", icon: "dashboard" },
582 { title: "About", icon: "question_answer" } 584 { title: "About", icon: "question_answer" }
583 ], 585 ],
584 right: null, 586 right: null,
585 587
586 series: [ 588 series: [
587 { 589 {
588 name: "Total", 590 name: "Total",
589 data: [] 591 data: []
590 } 592 }
591 ], 593 ],
592 chartOptions: { 594 chartOptions: {
593 chart: { 595 chart: {
594 type: "bar", 596 type: "bar",
595 height: 150, 597 height: 150,
596 stacked: true 598 stacked: true
597 // animations: { 599 // animations: {
598 // enabled: true, 600 // enabled: true,
599 // easing: "easeinout", 601 // easing: "easeinout",
600 // speed: 1200, 602 // speed: 1200,
601 // animateGradually: { 603 // animateGradually: {
602 // enabled: true, 604 // enabled: true,
603 // delay: 450 605 // delay: 450
604 // }, 606 // },
605 // dynamicAnimation: { 607 // dynamicAnimation: {
606 // enabled: true, 608 // enabled: true,
607 // speed: 450 609 // speed: 450
608 // } 610 // }
609 // } 611 // }
610 }, 612 },
611 plotOptions: { 613 plotOptions: {
612 bar: { 614 bar: {
613 horizontal: false, 615 horizontal: false,
614 columnWidth: "25%", 616 columnWidth: "25%",
615 // endingShape: "rounded", 617 // endingShape: "rounded",
616 distributed: true 618 distributed: true
617 } 619 }
618 }, 620 },
619 responsive: [ 621 responsive: [
620 { 622 {
621 breakpoint: 480, 623 breakpoint: 480,
622 options: { 624 options: {
623 legend: { 625 legend: {
624 position: "bottom", 626 position: "bottom",
625 offsetX: -10, 627 offsetX: -10,
626 offsetY: 0 628 offsetY: 0
627 } 629 }
628 } 630 }
629 } 631 }
630 ], 632 ],
631 legend: { 633 legend: {
632 show: false 634 show: false
633 }, 635 },
634 colors: ["#7852cc", "#f9a825", "#ff8a89"], 636 colors: ["#7852cc", "#f9a825", "#ff8a89"],
635 dataLabels: { 637 dataLabels: {
636 enabled: false 638 enabled: false
637 }, 639 },
638 stroke: { 640 stroke: {
639 show: true, 641 show: true,
640 width: 2, 642 width: 2,
641 colors: ["transparent"] 643 colors: ["transparent"]
642 }, 644 },
643 xaxis: { 645 xaxis: {
644 categories: ["Fee", "Collections", "Expences"] 646 categories: ["Fee", "Collections", "Expences"]
645 }, 647 },
646 yaxis: { 648 yaxis: {
647 title: { 649 title: {
648 text: "" 650 text: ""
649 } 651 }
650 }, 652 },
651 fill: { 653 fill: {
652 opacity: 1 654 opacity: 1
653 }, 655 },
654 tooltip: { 656 tooltip: {
655 y: { 657 y: {
656 formatter: function(val, opts) { 658 formatter: function(val, opts) {
657 // console.log("opts",opts.w.config.xaxis.categories) 659 // console.log("opts",opts.w.config.xaxis.categories)
658 return "" + val + " "; 660 return "" + val + " ";
659 } 661 }
660 } 662 }
661 } 663 }
662 }, 664 },
663 665
664 // LATEST ACTIVITY 666 // LATEST ACTIVITY
665 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 667 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
666 activityList: [] 668 activityList: []
667 }; 669 };
668 }, 670 },
669 methods: { 671 methods: {
670 async handleDayChanged(e) { 672 async handleDayChanged(e) {
671 console.log("date-changed - ", e);
672 await this.getParticularMeetingEvent({ 673 await this.getParticularMeetingEvent({
673 meetingEventId: e.events[0]._id 674 meetingEventId: e.events[0]._id
674 }); 675 });
675 this.viewEventDetails = true; 676 this.viewEventDetails = true;
676 }, 677 },
677 async seeEventDetails(activity) { 678 async seeEventDetails(activity) {
678 if (this.$store.state.role === "TEACHER") { 679 if (this.$store.state.role === "TEACHER") {
679 await this.getParticularMeetingEvent({ meetingEventId: activity._id }); 680 await this.getParticularMeetingEvent({ meetingEventId: activity._id });
680 this.viewEventDetails = true; 681 this.viewEventDetails = true;
681 } 682 }
682 if (this.$store.state.role === "PARENT") { 683 if (this.$store.state.role === "PARENT") {
683 await this.getParticularMeetingEvent({ 684 await this.getParticularMeetingEvent({
684 meetingEventId: activity.meetingEvent._id 685 meetingEventId: activity.meetingEvent._id
685 }); 686 });
686 this.viewEventDetails = true; 687 this.viewEventDetails = true;
687 } 688 }
688 }, 689 },
689 async routeToCourseDetails(courseId) { 690 async routeToCourseDetails(courseId) {
690 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 691 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
691 let response = await this.getParticularCourseDetail(courseId); 692 let response = await this.getParticularCourseDetail(courseId);
692 693
693 /* If the response is null then dont route */ 694 /* If the response is null then dont route */
694 if (response.data.data.length > 0) { 695 if (response.data.data.length > 0) {
695 this.$router.push({ 696 this.$router.push({
696 name: "Course Details", 697 name: "Course Details",
697 query: { courseId: courseId } 698 query: { courseId: courseId }
698 }); 699 });
699 } else { 700 } else {
700 this.seeSnackbar("No Data Available", "warning"); 701 this.seeSnackbar("No Data Available", "warning");
701 } 702 }
702 }, 703 },
703 704
704 closeNotice() { 705 closeNotice() {
705 this.dialogNotice = false; 706 this.dialogNotice = false;
706 }, 707 },
707 profile() { 708 profile() {
708 // this.editedIndex = this.desserts.indexOf(item); 709 // this.editedIndex = this.desserts.indexOf(item);
709 // this.notice = Object.assign({}, item); 710 // this.notice = Object.assign({}, item);
710 // this.dialogNotice = true; 711 // this.dialogNotice = true;
711 this.$router.push({ name: "NoticeBoard" }); 712 this.$router.push({ name: "NoticeBoard" });
712 }, 713 },
713 date: function(date) { 714 date: function(date) {
714 return moment(date).format("MMMM DD, YYYY HH:mm"); 715 return moment(date).format("MMMM DD, YYYY HH:mm");
715 }, 716 },
716 activityDate(date) { 717 activityDate(date) {
717 return moment(date).format("MMMM DD, YYYY"); 718 return moment(date).format("MMMM DD, YYYY");
718 }, 719 },
719 refreshEvents() { 720 refreshEvents() {
720 this.$refs.calendar.$emit("refetch-events"); 721 this.$refs.calendar.$emit("refetch-events");
721 }, 722 },
722 removeEvent() { 723 removeEvent() {
723 this.$refs.calendar.$emit("remove-event", this.selected); 724 this.$refs.calendar.$emit("remove-event", this.selected);
724 this.selected = {}; 725 this.selected = {};
725 }, 726 },
726 eventSelected(event) { 727 eventSelected(event) {
727 this.selected = event; 728 this.selected = event;
728 console.log("this.selected", this.selected); 729 console.log("this.selected", this.selected);
729 }, 730 },
730 // eventDropStart: function(event) { 731 // eventDropStart: function(event) {
731 // event.editable = false; 732 // event.editable = false;
732 // }, 733 // },
733 eventCreated(...test) { 734 eventCreated(...test) {
734 console.log(test); 735 console.log(test);
735 }, 736 },
736 getStudents() { 737 getStudents() {
737 http() 738 http()
738 .get("/getStudentsList", { 739 .get("/getStudentsList", {
739 headers: { 740 headers: {
740 Authorization: "Bearer " + this.token 741 Authorization: "Bearer " + this.token
741 } 742 }
742 }) 743 })
743 .then(response => { 744 .then(response => {
744 this.students = response.data.data; 745 this.students = response.data.data;
745 this.showLoader = false; 746 this.showLoader = false;
746 }) 747 })
747 .catch(error => { 748 .catch(error => {
748 // console.log("err====>", err); 749 // console.log("err====>", err);
749 this.showLoader = false; 750 this.showLoader = false;
750 if (error.response.status === 401) { 751 if (error.response.status === 401) {
751 this.$router.replace({ path: "/" }); 752 this.$router.replace({ path: "/" });
752 this.$store.dispatch("setToken", null); 753 this.$store.dispatch("setToken", null);
753 this.$store.dispatch("Id", null); 754 this.$store.dispatch("Id", null);
754 } 755 }
755 }); 756 });
756 }, 757 },
757 getParents() { 758 getParents() {
758 http() 759 http()
759 .get("/getParentsList", { 760 .get("/getParentsList", {
760 headers: { 761 headers: {
761 Authorization: "Bearer " + this.token 762 Authorization: "Bearer " + this.token
762 } 763 }
763 }) 764 })
764 .then(response => { 765 .then(response => {
765 this.parents = response.data.data; 766 this.parents = response.data.data;
766 this.showLoader = false; 767 this.showLoader = false;
767 }) 768 })
768 .catch(error => { 769 .catch(error => {
769 // console.log("err====>", err); 770 // console.log("err====>", err);
770 this.showLoader = false; 771 this.showLoader = false;
771 }); 772 });
772 }, 773 },
773 getTeachers() { 774 getTeachers() {
774 http() 775 http()
775 .get("/getTeachersList", { 776 .get("/getTeachersList", {
776 headers: { 777 headers: {
777 Authorization: "Bearer " + this.token 778 Authorization: "Bearer " + this.token
778 } 779 }
779 }) 780 })
780 .then(response => { 781 .then(response => {
781 this.teachers = response.data.data; 782 this.teachers = response.data.data;
782 this.showLoader = false; 783 this.showLoader = false;
783 }) 784 })
784 .catch(error => { 785 .catch(error => {
785 // console.log("err====>", err); 786 // console.log("err====>", err);
786 this.showLoader = false; 787 this.showLoader = false;
787 }); 788 });
788 }, 789 },
789 getClasses() { 790 getClasses() {
790 http() 791 http()
791 .get("/getClassesList", { 792 .get("/getClassesList", {
792 headers: { 793 headers: {
793 Authorization: "Bearer " + this.token 794 Authorization: "Bearer " + this.token
794 } 795 }
795 }) 796 })
796 .then(response => { 797 .then(response => {
797 this.classes = response.data.data; 798 this.classes = response.data.data;
798 this.showLoader = false; 799 this.showLoader = false;
799 }) 800 })
800 .catch(error => { 801 .catch(error => {
801 this.showLoader = false; 802 this.showLoader = false;
802 }); 803 });
803 }, 804 },
804 getNoticeData() { 805 getNoticeData() {
805 this.showLoader = true; 806 this.showLoader = true;
806 http() 807 http()
807 .get("/getEventsList", { 808 .get("/getEventsList", {
808 headers: { 809 headers: {
809 Authorization: "Bearer " + this.token 810 Authorization: "Bearer " + this.token
810 } 811 }
811 }) 812 })
812 .then(response => { 813 .then(response => {
813 this.noticeData = response.data.data; 814 this.noticeData = response.data.data;
814 this.showLoader = false; 815 this.showLoader = false;
815 }) 816 })
816 .catch(error => { 817 .catch(error => {
817 this.showLoader = false; 818 this.showLoader = false;
818 }); 819 });
819 }, 820 },
820 getUserData() { 821 getUserData() {
821 // this.showLoader = true; 822 // this.showLoader = true;
822 if (this.$store.state.role === "PARENT") { 823 if (this.$store.state.role === "PARENT") {
823 http() 824 http()
824 .get("/getParticularUserDetail", { 825 .get("/getParticularUserDetail", {
825 headers: { 826 headers: {
826 Authorization: "Bearer " + this.token 827 Authorization: "Bearer " + this.token
827 }, 828 },
828 params: { 829 params: {
829 studentId: localStorage.getItem("parentStudentId") 830 studentId: localStorage.getItem("parentStudentId")
830 } 831 }
831 }) 832 })
832 .then(response => { 833 .then(response => {
833 this.userData = response.data.data; 834 this.userData = response.data.data;
834 this.showLoader = false; 835 this.showLoader = false;
835 console.log("sdsdfsdfsd - ", response); 836 console.log("sdsdfsdfsd - ", response);
836 }) 837 })
837 .catch(error => { 838 .catch(error => {
838 this.showLoader = false; 839 this.showLoader = false;
839 }); 840 });
840 } else { 841 } else {
841 http() 842 http()
842 .get("/getParticularUserDetail", { 843 .get("/getParticularUserDetail", {
843 headers: { 844 headers: {
844 Authorization: "Bearer " + this.token 845 Authorization: "Bearer " + this.token
845 } 846 }
846 }) 847 })
847 .then(response => { 848 .then(response => {
848 this.userData = response.data.data; 849 this.userData = response.data.data;
849 this.showLoader = false; 850 this.showLoader = false;
850 }) 851 })
851 .catch(error => { 852 .catch(error => {
852 this.showLoader = false; 853 this.showLoader = false;
853 }); 854 });
854 } 855 }
855 }, 856 },
856 857
857 getFeesAndCollectionsData() { 858 getFeesAndCollectionsData() {
858 http() 859 http()
859 .get("/getTotalFeesAndCollections", { 860 .get("/getTotalFeesAndCollections", {
860 headers: { 861 headers: {
861 Authorization: "Bearer " + this.token 862 Authorization: "Bearer " + this.token
862 } 863 }
863 }) 864 })
864 .then(response => { 865 .then(response => {
865 this.feeData = response.data.data; 866 this.feeData = response.data.data;
866 // this.collectionData = response.data.data; 867 // this.collectionData = response.data.data;
867 this.series[0].data[0] = this.feeData.totalFees; 868 this.series[0].data[0] = this.feeData.totalFees;
868 this.series[0].data[1] = this.feeData.totalCollection; 869 this.series[0].data[1] = this.feeData.totalCollection;
869 // console.log("this.series====", this.series); 870 // console.log("this.series====", this.series);
870 871
871 this.showLoader = false; 872 this.showLoader = false;
872 }) 873 })
873 .catch(error => { 874 .catch(error => {
874 this.showLoader = false; 875 this.showLoader = false;
875 }); 876 });
876 }, 877 },
877 getExpensesData() { 878 getExpensesData() {
878 http() 879 http()
879 .get("/getTotalExpenses", { 880 .get("/getTotalExpenses", {
880 headers: { 881 headers: {
881 Authorization: "Bearer " + this.token 882 Authorization: "Bearer " + this.token
882 } 883 }
883 }) 884 })
884 .then(response => { 885 .then(response => {
885 this.expenseData = response.data.data; 886 this.expenseData = response.data.data;
886 // var array = response.data.data.sum; 887 // var array = response.data.data.sum;
887 this.series[0].data[2] = this.expenseData.sum; 888 this.series[0].data[2] = this.expenseData.sum;
888 // this.series = [ 889 // this.series = [
889 // { 890 // {
890 // name: "Total", 891 // name: "Total",
891 // data: array 892 // data: array
892 // } 893 // }
893 // ]; 894 // ];
894 // console.log("this.series====", this.series); 895 // console.log("this.series====", this.series);
895 this.showLoader = false; 896 this.showLoader = false;
896 }) 897 })
897 .catch(error => { 898 .catch(error => {
898 this.showLoader = false; 899 this.showLoader = false;
899 }); 900 });
900 }, 901 },
901 async getparentStudents() { 902 async getparentStudents() {
902 this.showLoader = true; 903 this.showLoader = true;
903 var parentStudentsId; 904 var parentStudentsId;
904 var classId; 905 var classId;
905 await http() 906 await http()
906 .get("/parentStudentsList") 907 .get("/parentStudentsList")
907 .then(response => { 908 .then(response => {
908 // console.log("resssssss", response.data.data.students[0].classId); 909 // console.log("resssssss", response.data.data.students[0].classId);
909 this.studentsData = response.data.data; 910 this.studentsData = response.data.data;
910 localStorage.setItem( 911 localStorage.setItem(
911 "parentStudentId", 912 "parentStudentId",
912 this.studentsData.students[0]._id 913 this.studentsData.students[0]._id
913 ); 914 );
914 localStorage.setItem( 915 localStorage.setItem(
915 "parentClassId", 916 "parentClassId",
916 this.studentsData.students[0].classId 917 this.studentsData.students[0].classId
917 ); 918 );
918 919
919 if (localStorage.getItem("parentStudentId") == null) { 920 if (localStorage.getItem("parentStudentId") == null) {
920 parentStudentsId = response.data.data.students[0].classId; 921 parentStudentsId = response.data.data.students[0].classId;
921 classId = response.data.data.students[0]._id; 922 classId = response.data.data.students[0]._id;
922 } 923 }
923 if (localStorage.getItem("parentStudentId")) { 924 if (localStorage.getItem("parentStudentId")) {
924 parentStudentsId = localStorage.getItem("parentStudentId"); 925 parentStudentsId = localStorage.getItem("parentStudentId");
925 classId = localStorage.getItem("parentClassId"); 926 classId = localStorage.getItem("parentClassId");
926 } 927 }
927 928
928 this.showLoader = false; 929 this.showLoader = false;
929 }) 930 })
930 .catch(err => { 931 .catch(err => {
931 console.log("err====>", err); 932 console.log("err====>", err);
932 this.showLoader = false; 933 this.showLoader = false;
933 }); 934 });
934 await this.getCourses(parentStudentsId, classId); 935 await this.getCourses(parentStudentsId, classId);
935 await this.getAnnoucementes(classId); 936 await this.getAnnoucementes(classId);
936 }, 937 },
937 async getCourses(parentStudentsId, classId) { 938 async getCourses(parentStudentsId, classId) {
938 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 939 /* getStudentCourses - to get courseData - defined in GetApis.js*/
939 await this.getStudentCourses({ 940 await this.getStudentCourses({
940 classId: classId, 941 classId: classId,
941 studentId: parentStudentsId 942 studentId: parentStudentsId
942 }); 943 });
943 }, 944 },
944 getAnnoucementes(classId) { 945 getAnnoucementes(classId) {
945 this.showLoader = true; 946 this.showLoader = true;
946 http() 947 http()
947 .get("/getAnnoucementesList", { 948 .get("/getAnnoucementesList", {
948 params: { 949 params: {
949 classId: classId 950 classId: classId
950 } 951 }
951 }) 952 })
952 .then(response => { 953 .then(response => {
953 this.annoucementData = response.data.data; 954 this.annoucementData = response.data.data;
954 this.showLoader = false; 955 this.showLoader = false;
955 }) 956 })
956 .catch(err => { 957 .catch(err => {
957 console.log("err====>", err); 958 console.log("err====>", err);
958 this.showLoader = false; 959 this.showLoader = false;
959 }); 960 });
960 }, 961 },
961 async getMeetingEventes() { 962 async getMeetingEventes() {
962 if (this.role == "TEACHER") { 963 if (this.role == "TEACHER") {
963 this.showLoader = true; 964 this.showLoader = true;
964 await http() 965 await http()
965 .get("/getMeetingEventesList", { 966 .get("/getMeetingEventesList", {
966 headers: { 967 headers: {
967 Authorization: "Bearer " + this.token 968 Authorization: "Bearer " + this.token
968 } 969 }
969 }) 970 })
970 .then(response => { 971 .then(response => {
971 var activityList = response.data.data; 972 var activityList = response.data.data;
972 this.activityList = activityList; 973 this.activityList = activityList;
973 this.showLoader = false; 974 this.showLoader = false;
974 975
975 /* set activityEvents array to highlight event dates in calender */ 976 /* set activityEvents array to highlight event dates in calender */
976 for (var i = 0; i < this.activityList.length; i++) { 977 for (var i = 0; i < this.activityList.length; i++) {
977 let obj = {}; 978 let obj = {};
978 obj.date = moment(this.activityList[i].dateOfEvent).format( 979 obj.date = moment(this.activityList[i].dateOfEvent).format(
979 "YYYY/MM/DD" 980 "YYYY/MM/DD"
980 ); 981 );
981 obj.title = this.activityList[i].title; 982 obj.title = this.activityList[i].title;
982 obj._id = this.activityList[i]._id; 983 obj._id = this.activityList[i]._id;
983 this.activityEvents.push(obj); 984 this.activityEvents.push(obj);
984 } 985 }
985 }) 986 })
986 .catch(error => { 987 .catch(error => {
987 this.showLoader = false; 988 this.showLoader = false;
988 }); 989 });
989 } 990 }
990 } 991 }
991 }, 992 },
992 993
993 mounted() { 994 mounted() {
994 // = this.$store.state.schoolToken; 995 // = this.$store.state.schoolToken;
995 // console.log("this.$store.state.role", this.token); 996 // console.log("this.$store.state.role", this.token);
996 // this.getUsersList(); 997 // this.getUsersList();
997 }, 998 },
998 999
999 async created() { 1000 async created() {
1000 if (this.$store.state.role === "ADMIN") { 1001 if (this.$store.state.role === "ADMIN") {
1001 this.token = this.$store.state.token; 1002 this.token = this.$store.state.token;
1002 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1003 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1003 this.token = this.$store.state.schoolToken; 1004 this.token = this.$store.state.schoolToken;
1004 } else if (this.$store.state.role === "TEACHER") { 1005 } else if (this.$store.state.role === "TEACHER") {
1005 this.token = this.$store.state.token; 1006 this.token = this.$store.state.token;
1006 } else if (this.$store.state.role === "ACCOUNTANT") { 1007 } else if (this.$store.state.role === "ACCOUNTANT") {
1007 this.token = this.$store.state.token; 1008 this.token = this.$store.state.token;
1008 } else if (this.$store.state.role === "LIBRARIAN") { 1009 } else if (this.$store.state.role === "LIBRARIAN") {
1009 this.token = this.$store.state.token; 1010 this.token = this.$store.state.token;
1010 } else if (this.$store.state.role === "PARENT") { 1011 } else if (this.$store.state.role === "PARENT") {
1011 this.token = this.$store.state.token; 1012 this.token = this.$store.state.token;
1013 await this.getparentStudents();
1012 } 1014 }
1013 this.role = this.$store.state.role; 1015 this.role = this.$store.state.role;
1014 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 1016 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
1015 // this.getData(); 1017 // this.getData();
1016 await this.getStudents(); 1018 await this.getStudents();
1017 await this.getTeachers(); 1019 await this.getTeachers();
1018 await this.getParents(); 1020 await this.getParents();
1019 await this.getClasses(); 1021 await this.getClasses();
1020 await this.getNoticeData(); 1022 await this.getNoticeData();
1021 await this.getUserData(); 1023 await this.getUserData();
1022 await this.getFeesAndCollectionsData(); 1024 await this.getFeesAndCollectionsData();
1023 await this.getExpensesData(); 1025 await this.getExpensesData();
1024 await this.getparentStudents();
1025 1026
1026 /* get Latest events list for student login*/ 1027 /* get Latest events list for student login*/
1027 if (this.$store.state.role == "PARENT") { 1028 if (this.$store.state.role == "PARENT") {
1028 let response = await this.studentMeetingEvents({ 1029 let response = await this.studentMeetingEvents({
1029 studentId: localStorage.getItem("parentStudentId") 1030 studentId: localStorage.getItem("parentStudentId")
1030 }); 1031 });
1031 this.activityList = response.data.data; 1032 this.activityList = response.data.data;
1032 1033
1033 /* set activityEvents array to highlight event dates in calender */ 1034 /* set activityEvents array to highlight event dates in calender */
1034 for (var i = 0; i < this.activityList.length; i++) { 1035 for (var i = 0; i < this.activityList.length; i++) {
1035 let obj = {}; 1036 let obj = {};
1036 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1037 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1037 "YYYY/MM/DD" 1038 "YYYY/MM/DD"
1038 ); 1039 );
1039 obj.title = this.activityList[i].meetingEvent.title; 1040 obj.title = this.activityList[i].meetingEvent.title;
1040 obj._id = this.activityList[i].meetingEvent._id; 1041 obj._id = this.activityList[i].meetingEvent._id;
1041 this.activityEvents.push(obj); 1042 this.activityEvents.push(obj);
1042 } 1043 }
1043 } 1044 }
1044 1045
1045 /* get Latest events list for teacher login*/ 1046 /* get Latest events list for teacher login*/
1046 if (this.role == "TEACHER") { 1047 if (this.role == "TEACHER") {
1047 await this.getMeetingEventes(); 1048 await this.getMeetingEventes();
1048 } 1049 }
1049 } 1050 }
1050 }; 1051 };
1051 </script> 1052 </script>
1052 1053
1053 <style scoped> 1054 <style scoped>