viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 30e404e657b995ac58a0ee94f2a46fc4105eb755

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

added live session

Showing 1 changed file with 49 additions and 1 deletions   Show diff stats
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @30e404e
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM --> 22 <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
23 <v-dialog v-model="addForumDialog" max-width="500" persistent> 23 <v-dialog v-model="addForumDialog" max-width="500" persistent>
24 <v-card flat class="card-style pa-2" dark> 24 <v-card flat class="card-style pa-2" dark>
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">Add Forum</label> 27 <label class="title text-xs-center">Add Forum</label>
28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon> 28 <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-container fluid> 31 <v-container fluid>
32 <v-layout align-center> 32 <v-layout align-center>
33 <v-flex xs12> 33 <v-flex xs12>
34 <v-flex xs12 sm12> 34 <v-flex xs12 sm12>
35 <v-form ref="form" v-model="valid" lazy-validation> 35 <v-form ref="form" v-model="valid" lazy-validation>
36 <v-layout> 36 <v-layout>
37 <v-flex 37 <v-flex
38 xs12 38 xs12
39 class="text-xs-center text-sm-center text-md-center text-lg-center" 39 class="text-xs-center text-sm-center text-md-center text-lg-center"
40 > 40 >
41 <v-avatar size="100px" v-if="!imageUrl"> 41 <v-avatar size="100px" v-if="!imageUrl">
42 <img src="/static/icon/user.png" /> 42 <img src="/static/icon/user.png" />
43 </v-avatar> 43 </v-avatar>
44 <input 44 <input
45 type="file" 45 type="file"
46 style="display: none" 46 style="display: none"
47 ref="image" 47 ref="image"
48 accept="image/*" 48 accept="image/*"
49 @change="onFilePicked" 49 @change="onFilePicked"
50 /> 50 />
51 <img 51 <img
52 :src="imageData.imageUrl" 52 :src="imageData.imageUrl"
53 height="150" 53 height="150"
54 width="150" 54 width="150"
55 v-if="imageUrl" 55 v-if="imageUrl"
56 style="border-radius:50%; width:200px" 56 style="border-radius:50%; width:200px"
57 /> 57 />
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 60
61 <v-layout wrap> 61 <v-layout wrap>
62 <!-- SUBJECT --> 62 <!-- SUBJECT -->
63 <v-flex xs12 sm12> 63 <v-flex xs12 sm12>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 sm4 class="pt-4 subheading"> 65 <v-flex xs4 sm4 class="pt-4 subheading">
66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label> 66 <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label> 67 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
68 </v-flex> 68 </v-flex>
69 <v-flex xs8 sm8 class="ml-3"> 69 <v-flex xs8 sm8 class="ml-3">
70 <v-text-field 70 <v-text-field
71 v-model="addForumParams.subject" 71 v-model="addForumParams.subject"
72 placeholder="subject" 72 placeholder="subject"
73 type="text" 73 type="text"
74 :rules="cantBeEmpty" 74 :rules="cantBeEmpty"
75 required 75 required
76 ></v-text-field> 76 ></v-text-field>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <!-- DESCRIPTION --> 80 <!-- DESCRIPTION -->
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 sm4 class="pt-4 subheading"> 83 <v-flex xs4 sm4 class="pt-4 subheading">
84 <label class="right hidden-xs-only hidden-sm-only">Description:</label> 84 <label class="right hidden-xs-only hidden-sm-only">Description:</label>
85 <label 85 <label
86 class="right hidden-lg-only hidden-md-only hidden-xl-only" 86 class="right hidden-lg-only hidden-md-only hidden-xl-only"
87 >Description:</label> 87 >Description:</label>
88 </v-flex> 88 </v-flex>
89 <v-flex xs8 sm8 class="ml-3"> 89 <v-flex xs8 sm8 class="ml-3">
90 <v-text-field 90 <v-text-field
91 v-model="addForumParams.description" 91 v-model="addForumParams.description"
92 placeholder="Description" 92 placeholder="Description"
93 type="text" 93 type="text"
94 :rules="cantBeEmpty" 94 :rules="cantBeEmpty"
95 required 95 required
96 ></v-text-field> 96 ></v-text-field>
97 </v-flex> 97 </v-flex>
98 </v-layout> 98 </v-layout>
99 </v-flex> 99 </v-flex>
100 <!-- UPLOAD IMAGE --> 100 <!-- UPLOAD IMAGE -->
101 <v-flex xs12 sm12> 101 <v-flex xs12 sm12>
102 <v-layout> 102 <v-layout>
103 <v-flex xs4 class="pt-4 subheading"> 103 <v-flex xs4 class="pt-4 subheading">
104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 104 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 105 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs8 class="ml-3"> 107 <v-flex xs8 class="ml-3">
108 <v-text-field 108 <v-text-field
109 label="Select Image" 109 label="Select Image"
110 @click="pickFile" 110 @click="pickFile"
111 v-model="imageName" 111 v-model="imageName"
112 append-icon="attach_file" 112 append-icon="attach_file"
113 ></v-text-field> 113 ></v-text-field>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-layout> 118 <v-layout>
119 <v-flex xs12 sm12> 119 <v-flex xs12 sm12>
120 <v-layout class="right"> 120 <v-layout class="right">
121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 121 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 </v-form> 125 </v-form>
126 </v-flex> 126 </v-flex>
127 </v-flex> 127 </v-flex>
128 </v-layout> 128 </v-layout>
129 </v-container> 129 </v-container>
130 </v-card> 130 </v-card>
131 </v-dialog> 131 </v-dialog>
132 132
133 <v-container grid-list-xl class="pt-0"> 133 <v-container grid-list-xl class="pt-0">
134 <v-layout row wrap class="mt-1"> 134 <v-layout row wrap class="mt-1">
135 <v-flex xs12 sm12 md9> 135 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
136 <v-layout column>
137 <!-- HEADING -->
138 <v-flex>
139 <div class="title side-bar-color font-weight-bold">Live Online Classes - Solution</div>
140 <div class="subheading grey--text lighten-1">This conference is in progress</div>
141 <div
142 class="subheading grey--text lighten-1"
143 >The session started at 1:00 there is 1 moderator</div>
144 </v-flex>
145
146 <!-- JOIN OR END SESSION -->
147 <v-flex>
148 <div>
149 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
150 </div>
151 </v-flex>
152
153 <!-- DATA TABLE -->
154 <v-flex>
155 <div>
156 <span class="subheading font-weight-bold">Recording</span>
157 </div>
158 <v-data-table
159 :headers="liveOnlineHeaders"
160 :items="liveOnlineHeaders"
161 :pagination.sync="pagination"
162 :search="search"
163 item-key="_id"
164 >
165 <template slot="items" slot-scope="props">
166 <tr
167 class="tr"
168 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
169 >
170 <td class="text-xs-center td td-row">
171 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
172 </td>
173 <td class="td td-row text-xs-center">{{ }}</td>
174 <td class="td td-row text-xs-center">{{ }}</td>
175 <td class="td td-row text-xs-center">-</td>
176 <td class="td td-row text-xs-center">{{ }}</td>
177 </tr>
178 </template>
179 </v-data-table>
180 </v-flex>
181 </v-layout>
182 </v-flex>
183 <v-flex xs12 sm12 md12 v-else>
136 <v-layout column> 184 <v-layout column>
137 <!-- HEADING --> 185 <!-- HEADING -->
138 <v-flex> 186 <v-flex>
139 <div class="title side-bar-color font-weight-bold">Live Online Classes - Solution</div> 187 <div class="title side-bar-color font-weight-bold">Live Online Classes - Solution</div>
140 <div class="subheading grey--text lighten-1">This conference is in progress</div> 188 <div class="subheading grey--text lighten-1">This conference is in progress</div>
141 <div 189 <div
142 class="subheading grey--text lighten-1" 190 class="subheading grey--text lighten-1"
143 >The session started at 1:00 there is 1 moderator</div> 191 >The session started at 1:00 there is 1 moderator</div>
144 </v-flex> 192 </v-flex>
145 193
146 <!-- JOIN OR END SESSION --> 194 <!-- JOIN OR END SESSION -->
147 <v-flex> 195 <v-flex>
148 <div> 196 <div>
149 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 197 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
150 </div> 198 </div>
151 </v-flex> 199 </v-flex>
152 200
153 <!-- DATA TABLE --> 201 <!-- DATA TABLE -->
154 <v-flex> 202 <v-flex>
155 <div> 203 <div>
156 <span class="subheading font-weight-bold">Recording</span> 204 <span class="subheading font-weight-bold">Recording</span>
157 </div> 205 </div>
158 <v-data-table 206 <v-data-table
159 :headers="liveOnlineHeaders" 207 :headers="liveOnlineHeaders"
160 :items="liveOnlineHeaders" 208 :items="liveOnlineHeaders"
161 :pagination.sync="pagination" 209 :pagination.sync="pagination"
162 :search="search" 210 :search="search"
163 item-key="_id" 211 item-key="_id"
164 > 212 >
165 <template slot="items" slot-scope="props"> 213 <template slot="items" slot-scope="props">
166 <tr 214 <tr
167 class="tr" 215 class="tr"
168 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 216 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
169 > 217 >
170 <td class="text-xs-center td td-row"> 218 <td class="text-xs-center td td-row">
171 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 219 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
172 </td> 220 </td>
173 <td class="td td-row text-xs-center">{{ }}</td> 221 <td class="td td-row text-xs-center">{{ }}</td>
174 <td class="td td-row text-xs-center">{{ }}</td> 222 <td class="td td-row text-xs-center">{{ }}</td>
175 <td class="td td-row text-xs-center">-</td> 223 <td class="td td-row text-xs-center">-</td>
176 <td class="td td-row text-xs-center">{{ }}</td> 224 <td class="td td-row text-xs-center">{{ }}</td>
177 </tr> 225 </tr>
178 </template> 226 </template>
179 </v-data-table> 227 </v-data-table>
180 </v-flex> 228 </v-flex>
181 </v-layout> 229 </v-layout>
182 </v-flex> 230 </v-flex>
183 231
184 <v-spacer></v-spacer> 232 <v-spacer></v-spacer>
185 233
186 <!-- COURSES - positioned to the right of the page --> 234 <!-- COURSES - positioned to the right of the page -->
187 <v-flex xs12 sm12 md3 v-if=" $store.state.role === 'PARENT' "> 235 <v-flex xs12 sm12 md3 v-if=" $store.state.role === 'PARENT' ">
188 <v-card class="elevation-0 card-border" height="100%"> 236 <v-card class="elevation-0 card-border" height="100%">
189 <v-container class="pt-0"> 237 <v-container class="pt-0">
190 <div class="side-bar-color font-weight-bold title">Courses</div> 238 <div class="side-bar-color font-weight-bold title">Courses</div>
191 239
192 <div v-for="(course,index) in courseData"> 240 <div v-for="(course,index) in courseData">
193 <v-btn 241 <v-btn
194 flat 242 flat
195 class="subheading text-xs-start justify-left" 243 class="subheading text-xs-start justify-left"
196 style="cursor: pointer;" 244 style="cursor: pointer;"
197 block 245 block
198 @click="routeToCourseDetails(course._id)" 246 @click="routeToCourseDetails(course._id)"
199 > 247 >
200 <div style="width: 100%;text-align: left;"> 248 <div style="width: 100%;text-align: left;">
201 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 249 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
202 {{course.courseName}} 250 {{course.courseName}}
203 </div> 251 </div>
204 </v-btn> 252 </v-btn>
205 </div> 253 </div>
206 </v-container> 254 </v-container>
207 </v-card> 255 </v-card>
208 </v-flex> 256 </v-flex>
209 </v-layout> 257 </v-layout>
210 </v-container> 258 </v-container>
211 </div> 259 </div>
212 </template> 260 </template>
213 <script> 261 <script>
214 import AllApiCalls from "@/Services/AllApiCalls.js"; 262 import AllApiCalls from "@/Services/AllApiCalls.js";
215 import http from "@/Services/http.js"; 263 import http from "@/Services/http.js";
216 import moment from "moment"; 264 import moment from "moment";
217 export default { 265 export default {
218 mixins: [AllApiCalls], 266 mixins: [AllApiCalls],
219 data() { 267 data() {
220 return { 268 return {
221 localStorage: localStorage, 269 localStorage: localStorage,
222 valid: true, 270 valid: true,
223 addForumDialog: false, 271 addForumDialog: false,
224 addForumParams: {}, 272 addForumParams: {},
225 // UPLOAD IMAGE 273 // UPLOAD IMAGE
226 imageName: "", 274 imageName: "",
227 imageUrl: "", 275 imageUrl: "",
228 imageFile: "", 276 imageFile: "",
229 imageData: {}, 277 imageData: {},
230 278
231 // DATA TABLE 279 // DATA TABLE
232 search: "", 280 search: "",
233 pagination: { 281 pagination: {
234 rowsPerPage: 10 282 rowsPerPage: 10
235 }, 283 },
236 liveOnlineHeaders: [ 284 liveOnlineHeaders: [
237 { 285 {
238 text: "Playback", 286 text: "Playback",
239 value: "attachementUrl", 287 value: "attachementUrl",
240 sortable: false, 288 sortable: false,
241 align: "center" 289 align: "center"
242 }, 290 },
243 { 291 {
244 text: "Meeting", 292 text: "Meeting",
245 align: "center", 293 align: "center",
246 sortable: false, 294 sortable: false,
247 value: "" 295 value: ""
248 }, 296 },
249 { 297 {
250 text: "Recording", 298 text: "Recording",
251 value: "", 299 value: "",
252 sortable: false, 300 sortable: false,
253 align: "center" 301 align: "center"
254 }, 302 },
255 { 303 {
256 text: "Description Preview", 304 text: "Description Preview",
257 value: "", 305 value: "",
258 sortable: false, 306 sortable: false,
259 align: "center" 307 align: "center"
260 }, 308 },
261 { text: "Date", value: "", sortable: false, align: "center" }, 309 { text: "Date", value: "", sortable: false, align: "center" },
262 { text: "Duration", value: "", sortable: false, align: "center" }, 310 { text: "Duration", value: "", sortable: false, align: "center" },
263 { text: "Toolbar", value: "", sortable: false, align: "center" } 311 { text: "Toolbar", value: "", sortable: false, align: "center" }
264 ], 312 ],
265 liveOnlineItems: [], 313 liveOnlineItems: [],
266 314
267 // COURSE DISCUSSION REPLTY FUNCTIONALITY 315 // COURSE DISCUSSION REPLTY FUNCTIONALITY
268 courseDiscussionId: "", 316 courseDiscussionId: "",
269 showReplyBox: false, 317 showReplyBox: false,
270 courseDiscussionData: [], 318 courseDiscussionData: [],
271 replyDescription: "", 319 replyDescription: "",
272 loginId: "", 320 loginId: "",
273 editedIndex: -1 321 editedIndex: -1
274 }; 322 };
275 }, 323 },
276 methods: { 324 methods: {
277 dates: function(date) { 325 dates: function(date) {
278 return moment(date).format("MMMM DD, YYYY hh:mm A"); 326 return moment(date).format("MMMM DD, YYYY hh:mm A");
279 }, 327 },
280 /* UPLOAD IMAGE */ 328 /* UPLOAD IMAGE */
281 pickFile() { 329 pickFile() {
282 this.$refs.image.click(); 330 this.$refs.image.click();
283 }, 331 },
284 332
285 onFilePicked(e) { 333 onFilePicked(e) {
286 // console.log(e) 334 // console.log(e)
287 const files = e.target.files; 335 const files = e.target.files;
288 this.imageData.upload = e.target.files[0]; 336 this.imageData.upload = e.target.files[0];
289 if (files[0] !== undefined) { 337 if (files[0] !== undefined) {
290 this.imageName = files[0].name; 338 this.imageName = files[0].name;
291 if (this.imageName.lastIndexOf(".") <= 0) { 339 if (this.imageName.lastIndexOf(".") <= 0) {
292 return; 340 return;
293 } 341 }
294 const fr = new FileReader(); 342 const fr = new FileReader();
295 fr.readAsDataURL(files[0]); 343 fr.readAsDataURL(files[0]);
296 fr.addEventListener("load", () => { 344 fr.addEventListener("load", () => {
297 this.imageUrl = fr.result; 345 this.imageUrl = fr.result;
298 this.imageFile = files[0]; // this is an image file that can be sent to server... 346 this.imageFile = files[0]; // this is an image file that can be sent to server...
299 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 347 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
300 }); 348 });
301 } else { 349 } else {
302 this.imageName = ""; 350 this.imageName = "";
303 this.imageFile = ""; 351 this.imageFile = "";
304 this.imageUrl = ""; 352 this.imageUrl = "";
305 } 353 }
306 }, 354 },
307 async submit() { 355 async submit() {
308 if (this.$refs.form.validate()) { 356 if (this.$refs.form.validate()) {
309 this.addForumParams.classId = localStorage.getItem("parentClassId"); 357 this.addForumParams.classId = localStorage.getItem("parentClassId");
310 this.addForumParams.courseId = this.$route.query.courseId; 358 this.addForumParams.courseId = this.$route.query.courseId;
311 this.addForumParams.studentId = localStorage.getItem("parentStudentId"); 359 this.addForumParams.studentId = localStorage.getItem("parentStudentId");
312 360
313 if (this.imageUrl) { 361 if (this.imageUrl) {
314 var str = this.imageUrl; 362 var str = this.imageUrl;
315 const [baseUrl, imageUrl] = str.split(/,/); 363 const [baseUrl, imageUrl] = str.split(/,/);
316 this.addForumParams.upload = imageUrl; 364 this.addForumParams.upload = imageUrl;
317 } 365 }
318 this.loading = true; 366 this.loading = true;
319 await http() 367 await http()
320 .post("/createCourseDiscussion", this.addForumParams) 368 .post("/createCourseDiscussion", this.addForumParams)
321 .then(response => { 369 .then(response => {
322 this.snackbar = true; 370 this.snackbar = true;
323 this.text = "Discussion added successfully"; 371 this.text = "Discussion added successfully";
324 this.snackbarColor = "green"; 372 this.snackbarColor = "green";
325 this.addForumDialog = false; 373 this.addForumDialog = false;
326 this.clear(); 374 this.clear();
327 this.loading = false; 375 this.loading = false;
328 console.log("response of createCourseDiscussion - ", response); 376 console.log("response of createCourseDiscussion - ", response);
329 }) 377 })
330 .catch(error => { 378 .catch(error => {
331 this.snackbar = true; 379 this.snackbar = true;
332 this.text = error.response.data.message; 380 this.text = error.response.data.message;
333 this.snackbarColor = "error"; 381 this.snackbarColor = "error";
334 this.loading = false; 382 this.loading = false;
335 }); 383 });
336 384
337 /* getCourseDiscussionesList - to populate the data table */ 385 /* getCourseDiscussionesList - to populate the data table */
338 await this.getCourseDiscussionesList({ 386 await this.getCourseDiscussionesList({
339 courseId: this.$route.query.courseId, 387 courseId: this.$route.query.courseId,
340 classId: localStorage.getItem("parentClassId") 388 classId: localStorage.getItem("parentClassId")
341 }); 389 });
342 this.addForumDialog = false; 390 this.addForumDialog = false;
343 } 391 }
344 }, 392 },
345 clear() { 393 clear() {
346 this.$refs.form.reset(); 394 this.$refs.form.reset();
347 this.imageUrl = ""; 395 this.imageUrl = "";
348 }, 396 },
349 async routeToCourseDetails(courseId) { 397 async routeToCourseDetails(courseId) {
350 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 398 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
351 let response = await this.getParticularCourseDetail(courseId); 399 let response = await this.getParticularCourseDetail(courseId);
352 400
353 /* If the response is null then dont route */ 401 /* If the response is null then dont route */
354 if (response.data.data.length > 0) { 402 if (response.data.data.length > 0) {
355 this.$router.push({ 403 this.$router.push({
356 name: "Course Details", 404 name: "Course Details",
357 query: { courseId: courseId } 405 query: { courseId: courseId }
358 }); 406 });
359 } else { 407 } else {
360 this.seeSnackbar("No Data Available", "warning"); 408 this.seeSnackbar("No Data Available", "warning");
361 } 409 }
362 }, 410 },
363 411
364 // COURSE DISCUSSION REPLY FUNCTIONALITY 412 // COURSE DISCUSSION REPLY FUNCTIONALITY
365 413
366 getDiscussionesThread() { 414 getDiscussionesThread() {
367 // console.log("id", this.getSelectedData.courseId); 415 // console.log("id", this.getSelectedData.courseId);
368 this.showLoader = true; 416 this.showLoader = true;
369 http() 417 http()
370 .get("/getParticularCourseDiscussion", { 418 .get("/getParticularCourseDiscussion", {
371 params: { 419 params: {
372 courseDiscussionId: this.courseDiscussionId 420 courseDiscussionId: this.courseDiscussionId
373 } 421 }
374 }) 422 })
375 .then(response => { 423 .then(response => {
376 // console.log("response", response.data.data); 424 // console.log("response", response.data.data);
377 this.courseDiscussionData = response.data.data; 425 this.courseDiscussionData = response.data.data;
378 for (let i = 0; i < this.courseDiscussionData.length; i++) { 426 for (let i = 0; i < this.courseDiscussionData.length; i++) {
379 for ( 427 for (
380 let j = 0; 428 let j = 0;
381 j < this.courseDiscussionData[i].forumThread.length; 429 j < this.courseDiscussionData[i].forumThread.length;
382 j++ 430 j++
383 ) { 431 ) {
384 this.courseDiscussionData[i].forumThread[ 432 this.courseDiscussionData[i].forumThread[
385 j 433 j
386 ].showUpdateReplyThread = false; 434 ].showUpdateReplyThread = false;
387 this.courseDiscussionData[i].forumThread[ 435 this.courseDiscussionData[i].forumThread[
388 j 436 j
389 ].showDescriptionReplyThread = true; 437 ].showDescriptionReplyThread = true;
390 } 438 }
391 } 439 }
392 this.showLoader = false; 440 this.showLoader = false;
393 this.showReplyBox = false; 441 this.showReplyBox = false;
394 }) 442 })
395 .catch(error => { 443 .catch(error => {
396 console.log("err====>", error); 444 console.log("err====>", error);
397 this.showLoader = false; 445 this.showLoader = false;
398 }); 446 });
399 }, 447 },
400 replyThreadDiscussion(selected) { 448 replyThreadDiscussion(selected) {
401 this.showLoader = true; 449 this.showLoader = true;
402 var payloadData = { 450 var payloadData = {
403 courseDiscussionId: selected._id, 451 courseDiscussionId: selected._id,
404 studentId: localStorage.getItem("parentStudentId"), 452 studentId: localStorage.getItem("parentStudentId"),
405 description: this.replyDescription 453 description: this.replyDescription
406 }; 454 };
407 http() 455 http()
408 .put("/replyForumThread", payloadData) 456 .put("/replyForumThread", payloadData)
409 .then(response => { 457 .then(response => {
410 // console.log("response", response.data.data); 458 // console.log("response", response.data.data);
411 this.showLoader = false; 459 this.showLoader = false;
412 this.getDiscussionesThread(); 460 this.getDiscussionesThread();
413 }) 461 })
414 .catch(error => { 462 .catch(error => {
415 this.showLoader = false; 463 this.showLoader = false;
416 }); 464 });
417 }, 465 },
418 showUpdateReplyThreadDiscussion(item) { 466 showUpdateReplyThreadDiscussion(item) {
419 this.editedIndex = this.courseDiscussionData.indexOf(item); 467 this.editedIndex = this.courseDiscussionData.indexOf(item);
420 var editedItem = Object.assign({}, item); 468 var editedItem = Object.assign({}, item);
421 var arrayOfcourseDiscussionData = []; 469 var arrayOfcourseDiscussionData = [];
422 for (let i = 0; i < this.courseDiscussionData.length; i++) { 470 for (let i = 0; i < this.courseDiscussionData.length; i++) {
423 for ( 471 for (
424 let j = 0; 472 let j = 0;
425 j < this.courseDiscussionData[i].forumThread.length; 473 j < this.courseDiscussionData[i].forumThread.length;
426 j++ 474 j++
427 ) { 475 ) {
428 if ( 476 if (
429 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id 477 editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
430 ) { 478 ) {
431 this.courseDiscussionData[i].forumThread[ 479 this.courseDiscussionData[i].forumThread[
432 j 480 j
433 ].showUpdateReplyThread = true; 481 ].showUpdateReplyThread = true;
434 this.courseDiscussionData[i].forumThread[ 482 this.courseDiscussionData[i].forumThread[
435 j 483 j
436 ].showDescriptionReplyThread = false; 484 ].showDescriptionReplyThread = false;
437 } 485 }
438 } 486 }
439 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]); 487 arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
440 } 488 }
441 this.courseDiscussionData = arrayOfcourseDiscussionData; 489 this.courseDiscussionData = arrayOfcourseDiscussionData;
442 }, 490 },
443 updateRelpyThreadDiscussion(replyThread, selected) { 491 updateRelpyThreadDiscussion(replyThread, selected) {
444 this.showLoader = true; 492 this.showLoader = true;
445 var payloadData = { 493 var payloadData = {
446 forumThreadId: replyThread._id, 494 forumThreadId: replyThread._id,
447 courseDiscussionId: selected._id, 495 courseDiscussionId: selected._id,
448 studentId: localStorage.getItem("parentStudentId"), 496 studentId: localStorage.getItem("parentStudentId"),
449 description: replyThread.description 497 description: replyThread.description
450 }; 498 };
451 http() 499 http()
452 .put("/updateForumThread", payloadData) 500 .put("/updateForumThread", payloadData)
453 .then(response => { 501 .then(response => {
454 this.showLoader = false; 502 this.showLoader = false;
455 this.getDiscussionesThread(); 503 this.getDiscussionesThread();
456 }) 504 })
457 .catch(error => { 505 .catch(error => {
458 this.showLoader = false; 506 this.showLoader = false;
459 }); 507 });
460 }, 508 },
461 deleteRelpyThreadDiscussion(id, courseDiscussionId) { 509 deleteRelpyThreadDiscussion(id, courseDiscussionId) {
462 this.showLoader = true; 510 this.showLoader = true;
463 var payloadData = { 511 var payloadData = {
464 forumThreadId: id, 512 forumThreadId: id,
465 courseDiscussionId: courseDiscussionId 513 courseDiscussionId: courseDiscussionId
466 }; 514 };
467 http() 515 http()
468 .put( 516 .put(
469 "/deleteForumThread", 517 "/deleteForumThread",
470 confirm("Are you sure you want to delete this?") && payloadData 518 confirm("Are you sure you want to delete this?") && payloadData
471 ) 519 )
472 .then(response => { 520 .then(response => {
473 this.showLoader = false; 521 this.showLoader = false;
474 this.getDiscussionesThread(); 522 this.getDiscussionesThread();
475 }) 523 })
476 .catch(error => { 524 .catch(error => {
477 this.showLoader = false; 525 this.showLoader = false;
478 }); 526 });
479 } 527 }
480 }, 528 },
481 async created() { 529 async created() {
482 this.loginId = this.$store.state.id; 530 this.loginId = this.$store.state.id;
483 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 531 /* getStudentCourses - to get courseData - defined in GetApis.js*/
484 await this.getStudentCourses({ 532 await this.getStudentCourses({
485 classId: localStorage.getItem("parentClassId"), 533 classId: localStorage.getItem("parentClassId"),
486 studentId: localStorage.getItem("parentStudentId") 534 studentId: localStorage.getItem("parentStudentId")
487 }); 535 });
488 } 536 }
489 }; 537 };
490 </script> 538 </script>
491 <style scoped> 539 <style scoped>
492 .side-bar-color { 540 .side-bar-color {
493 color: #827bfa !important; 541 color: #827bfa !important;
494 /* border-top-right-radius: 74px !important; */ 542 /* border-top-right-radius: 74px !important; */
495 } 543 }
496 .card-border { 544 .card-border {
497 border: 1px #bdbdbd solid; 545 border: 1px #bdbdbd solid;
498 border-radius: 3px; 546 border-radius: 3px;
499 } 547 }
500 .reply-desc { 548 .reply-desc {
501 border: 1px solid #f2f2f2; 549 border: 1px solid #f2f2f2;
502 } 550 }
503 .open-dialog-button { 551 .open-dialog-button {
504 background: #827bfa !important; 552 background: #827bfa !important;
505 border-color: #827bfa !important; 553 border-color: #827bfa !important;
506 text-transform: none !important; 554 text-transform: none !important;
507 } 555 }
508 556
509 .reply-btn { 557 .reply-btn {
510 background: #feb83c !important; 558 background: #feb83c !important;
511 border-color: #feb83c !important; 559 border-color: #feb83c !important;
512 text-transform: none !important; 560 text-transform: none !important;
513 -webkit-box-shadow: none !important; 561 -webkit-box-shadow: none !important;
514 box-shadow: none !important; 562 box-shadow: none !important;
515 } 563 }
516 </style> 564 </style>