viithiisys / School-Management-dashboard

Browse Code »

Commit 0b7006a1caf9cf26c46b841bad35d0b42b68cd51

Authored by Amber Dev 2020-07-14 09:38:47 -0400

1 parent 1eaabc5a2d

Exists in master and in 2 other branches

solved bug regarding routing in CourseDetails.vue

Showing 3 changed files with 7 additions and 5 deletions Show diff stats

src/App.vue

Diff comments View file @0b7006a

1	<template>	1	<template>
2	<div id="appRoot">	2	<div id="appRoot">
3	<template v-if="!$route.meta.public">	3	<template v-if="!$route.meta.public">
4	<!-- Go to top -->	4	<!-- Go to top -->
5	<v-app id="inspire" class="app">	5	<v-app id="inspire" class="app">
6	<app-drawer class="app--drawer"></app-drawer>	6	<app-drawer class="app--drawer"></app-drawer>
7	<v-content>	7	<v-content>
8	<div class="page-wrapper">	8	<div class="page-wrapper">
9	<!-- Header toolbar with Seacrh -->	9	<!-- Header toolbar with Seacrh -->
10	<app-toolbar class="app--toolbar"></app-toolbar>	10	<app-toolbar class="app--toolbar"></app-toolbar>
11	<router-view></router-view>	11	<router-view :key="$route.fullPath"></router-view>
12	</div>	12	</div>
13	<!-- App Footer -->	13	<!-- App Footer -->
14	</v-content>	14	</v-content>
15	<!-- theme setting -->	15	<!-- theme setting -->
16	<!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">	16	<!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
17	<v-icon>settings</v-icon>	17	<v-icon>settings</v-icon>
18	</v-btn>	18	</v-btn>
19	<v-navigation-drawer	19	<v-navigation-drawer
20	class="setting-drawer"	20	class="setting-drawer"
21	temporary	21	temporary
22	right	22	right
23	v-model="rightDrawer"	23	v-model="rightDrawer"
24	hide-overlay	24	hide-overlay
25	fixed	25	fixed
26	>	26	>
27	<theme-settings></theme-settings>	27	<theme-settings></theme-settings>
28	</v-navigation-drawer>-->	28	</v-navigation-drawer>-->
29	</v-app>	29	</v-app>
30	</template>	30	</template>
31	<template v-else>	31	<template v-else>
32	<transition>	32	<transition>
33	<keep-alive>	33	<keep-alive>
34	<router-view></router-view>	34	<router-view></router-view>
35	</keep-alive>	35	</keep-alive>
36	</transition>	36	</transition>
37	</template>	37	</template>
38	<v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">	38	<v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
39	{{ snackbar.text }}	39	{{ snackbar.text }}
40	<v-btn dark flat @click.native="snackbar.show = false" icon>	40	<v-btn dark flat @click.native="snackbar.show = false" icon>
41	<v-icon>close</v-icon>	41	<v-icon>close</v-icon>
42	</v-btn>	42	</v-btn>
43	</v-snackbar>	43	</v-snackbar>
44	</div>	44	</div>
45	</template>	45	</template>
46	<script>	46	<script>
47	import AppDrawer from "@/components/pageHeader/AppDrawer";	47	import AppDrawer from "@/components/pageHeader/AppDrawer";
48	import AppToolbar from "@/components/pageHeader/AppToolbar";	48	import AppToolbar from "@/components/pageHeader/AppToolbar";
49	import menu from "@/api/menu";	49	import menu from "@/api/menu";
50	import AppEvents from "./event";	50	import AppEvents from "./event";
51	import ThemeSettings from "@/components/ThemeSettings";	51	import ThemeSettings from "@/components/ThemeSettings";
52	// import { FunctionalCalendar } from "vue-functional-calendar";	52	// import { FunctionalCalendar } from "vue-functional-calendar";
53		53
54	export default {	54	export default {
55	components: {	55	components: {
56	AppDrawer,	56	AppDrawer,
57	AppToolbar,	57	AppToolbar,
58	ThemeSettings	58	ThemeSettings
59	// FunctionalCalendar	59	// FunctionalCalendar
60	},	60	},
61	data: () => ({	61	data: () => ({
62	expanded: true,	62	expanded: true,
63	rightDrawer: false,	63	rightDrawer: false,
64	snackbar: {	64	snackbar: {
65	show: false,	65	show: false,
66	text: "",	66	text: "",
67	color: ""	67	color: ""
68	}	68	}
69	}),	69	}),
70		70
71	computed: {},	71	computed: {},
72		72
73	created() {	73	created() {
74	AppEvents.forEach(item => {	74	AppEvents.forEach(item => {
75	this.$on(item.name, item.callback);	75	this.$on(item.name, item.callback);
76	});	76	});
77	window.getApp = this;	77	window.getApp = this;
78	},	78	},
79	methods: {	79	methods: {
80	openThemeSettings() {	80	openThemeSettings() {
81	this.$vuetify.goTo(0);	81	this.$vuetify.goTo(0);
82	this.rightDrawer = !this.rightDrawer;	82	this.rightDrawer = !this.rightDrawer;
83	}	83	}
84	}	84	}
85	};	85	};
86	</script>	86	</script>
87		87
88		88
89	<style lang="stylus" scoped>	89	<style lang="stylus" scoped>
90	.setting-fab {	90	.setting-fab {
91	top: 50% !important;	91	top: 50% !important;
92	right: 0;	92	right: 0;
93	border-radius: 0;	93	border-radius: 0;
94	}	94	}
95		95
96	.page-wrapper {	96	.page-wrapper {
97	min-height: calc(1200px - 64px - 50px - 81px);	97	min-height: calc(1200px - 64px - 50px - 81px);
98	}	98	}
99	</style>	99	</style>
100	<style>	100	<style>
101	.application {	101	.application {
102	background-color: white !important;	102	background-color: white !important;
103	font-family: "Poppins", sans-serif;	103	font-family: "Poppins", sans-serif;
104	-webkit-font-smoothing: antialiased;	104	-webkit-font-smoothing: antialiased;
105	-moz-osx-font-smoothing: grayscale;	105	-moz-osx-font-smoothing: grayscale;
106	scroll-behavior: smooth;	106	scroll-behavior: smooth;
107	}	107	}
108	</style>	108	</style>
109		109

src/Services/GetApis.js

Diff comments View file @0b7006a

 import ApiCalls from "@/Services/ApiCalls.js";
 export default {
     mixins: [ApiCalls],
     data() {
         return {
             courseData: [],
             // dashboard.vue data properties
             particularEvent: {},
         }
     },
     methods: {
         /* getParticularCourseDetail */
         async getParticularCourseDetail(courseId) {
             try {
                 let response = await this.getMethod("/getParticularCourseDetail", {
                     courseId: courseId
                 })
                 return response
             } catch (error) {
                 console.log("error in getParticularCourseDetail - ", error.message)
             }
         },
         /* getStudentCourses - to get courseData */
         async getStudentCourses(params) {
             try {
                 let response = await this.getMethod("/getStudentCourses", {
                     classId: params.classId,
                     studentId: params.studentId
                 })
                 this.courseData = response.data.data;
-                console.log("coursesData - ", this.courseData)
             } catch (error) {
                 console.log("error in getStudentCourses - ", error.message)
             }
         },
         /* getCourseDiscussionesList - used in courseDiscussionForum.vue */
         async getCourseDiscussionesList(params) {
             try {
                 let response = await this.getMethod("/getCourseDiscussionesList", {
                     courseId: params.courseId,
                     classId: params.classId,
                 })
                 this.courseDiscussionItems = response.data.data
                 // return response
                 console.log("response of getCourseDiscussionesList - ", response)
             } catch (error) {
                 console.log("error in getCourseDiscussionesList - ", error.message)
             }
         },
         /***************************************************************************************************************************** */
         // APIS USED IN dashboard.vue
         /* studentMeetingEvents required in dashboard to display list of latest events */
         async studentMeetingEvents(params) {
             try {
                 let response = await this.getMethod("/studentMeetingEvents", {
                     studentId: params.studentId
                 })
                 console.log("response of studentMeetingEvents - ", response);
                 return response
             } catch (error) {
                 console.log("error in studentMeetingEvents - ", error.message)
             }
         },
         async getParticularMeetingEvent(params) {
             try {
                 let response = await this.getMethod("/getParticularMeetingEvent", {
                     meetingEventId: params.meetingEventId
                 })
                 this.particularEvent = response.data.data
             } catch (error) {
                 console.log("Error in getParticularMeetingEvent - ", error.message)
             }
         },
         /************************************************************************************************************************ */
         /* APIS USED IN announcement.vue */
         async getAnnoucementesList(params) {
             try {
                 let response = await this.getMethod("/getAnnoucementesList", {
                     courseId: params.courseId
                 })
                 return response;
             } catch (error) {
                 console.log("Error in getAnnoucementesList - ", error.message)
             }
         }
     },
 }

src/pages/Dashboard/CourseDetails.vue

Diff comments View file @0b7006a

 <template>
   <div>
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <v-container class="pt-0">
       <v-layout row wrap class="mt-1">
         <v-flex xs12 md8>
           <div
             class="title side-bar-color font-weight-bold"
           >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div>
           <v-flex xs12 class="subheading mt-2">
             Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl
             jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj
             lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl
           </v-flex>
           <div class="mt-5">
             <span
               style="cursor: pointer;"
               class="grey--text lighten-1"
               @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
             >
               <v-icon>question_answer</v-icon>
               <span class="ml-2">Announcement</span>
             </span>
           </div>
           <div>
             <span
               style="cursor: pointer;"
               @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
               class="grey--text lighten-1"
             >
               <v-icon>question_answer</v-icon>
               <span class="ml-2">Course discussion forum</span>
             </span>
           </div>
           <!-- CHAPTERS -->
           <v-layout column class="mt-5">
             <v-flex
               v-for="(chapter,index) in courseDetails[0].chapters"
               :key="index"
               style="cursor: pointer;"
               @click="routeToChapterInfo(chapter._id)"
             >
               <v-card class="mt-2 elevation-0 card-border">
                 <v-container class="pt-0">
                   <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div>
                   <div class="grey--text lighten-1 subheading">{{chapter.description}}</div>
                   <div
                     v-for="(point,index) in chapter.chapterPoints"
                     :key="index"
                     class="ml-2 mt-2"
                   >
                     <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span>
                   </div>
                 </v-container>
               </v-card>
             </v-flex>
           </v-layout>
         </v-flex>
         <v-spacer></v-spacer>
         <!-- COURSES -->
         <v-flex xs12 md3>
           <v-card class="elevation-0 card-border" height="100%">
             <v-container class="pt-0">
               <div class="side-bar-color font-weight-bold title">Courses</div>
               <div v-for="(course,index) in courseData">
                 <v-btn
                   flat
                   class="subheading text-xs-start justify-left"
                   style="cursor: pointer;"
                   block
                   @click="routeToCourseDetails(course._id)"
                 >
                   <div style="width: 100%;text-align: left;">
                     <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
                     {{course.courseName}}
                   </div>
                 </v-btn>
               </div>
               <!-- <v-expansion-panel focusable class="elevation-0">
                 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
                   <template v-slot:header>
                     <div class="subheading">{{item.courseName}}</div>
                   </template>
                 </v-expansion-panel-content>
               </v-expansion-panel>-->
             </v-container>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
   </div>
 </template>
 <script>
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   mixins: [AllApiCalls],
   data() {
     return {
       showLoader: false,
       courseDetails: [{ courseId: {}, classId: {} }],
       chapterIds: [],
       // courseData: [],
       courseDataTree: []
     };
   },
   methods: {
     routeToChapterInfo(chapterId) {
       /* set value of present chapter selected, and other chapters ids in the obj */
       let obj = {};
       for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
         obj[
           this.courseDetails[0].chapters[i].chapterName
         ] = this.courseDetails[0].chapters[i]._id;
       }
       obj.chapterId = chapterId;
       obj.courseDetailId = this.courseDetails[0]._id;
       this.$router.push({
         name: "Chapter Info",
         query: obj
       });
     },
     async routeToCourseDetails(courseId) {
       /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
       let response = await this.getParticularCourseDetail(courseId);
       /* If the response is null then dont route */
       if (response.data.data.length > 0) {
-        this.$router.push({
+        // REQUIRED TO WAIT FOR UPDATE CYCLE
-          name: "Course Details",
+        this.$nextTick(() => {
-          query: { courseId: courseId }
+          // this.filters.locEmitted = "emitted";
+          this.$router.push({ query: { courseId: courseId } });
         });
       } else {
         this.seeSnackbar("No Data Available", "warning");
       }
     }
   },
   async created() {
+    console.log("its working");
     /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
     let response = await this.getParticularCourseDetail(
       this.$route.query.courseId
     );
     this.courseDetails = response.data.data;
+    console.log("its working courseDetails - ", this.courseDetails);
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     await this.getStudentCourses({
       classId: localStorage.getItem("parentClassId"),
       studentId: localStorage.getItem("parentStudentId")
     });
   }
 };
 </script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .card-border {
   border: 1px #bdbdbd solid;
   border-radius: 3px;
 }
 /* .v-treeview-node__toggle {
   color: red !important;
 } */
 </style>