viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 998ada766f04cfe5aa1d77eeacd0ef3676ba08da

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

added icons

Showing 1 changed file with 1 additions and 1 deletions   Show diff stats
src/pages/Dashboard/CourseDetails.vue
Diff comments   View file @998ada7
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <v-flex xs12 md8> 24 <v-flex xs12 md8>
25 <div 25 <div
26 class="title side-bar-color font-weight-bold" 26 class="title side-bar-color font-weight-bold"
27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div> 27 >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div>
28 <v-flex xs12 class="subheading mt-2"> 28 <v-flex xs12 class="subheading mt-2">
29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl 29 Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl
30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj 30 jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj
31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl 31 lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl
32 </v-flex> 32 </v-flex>
33 33
34 <div class="mt-5"> 34 <div class="mt-5">
35 <v-btn 35 <v-btn
36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})" 36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
37 flat 37 flat
38 class="grey--text lighten-1" 38 class="grey--text lighten-1"
39 > 39 >
40 <v-icon>volume_up</v-icon> 40 <v-icon>volume_up</v-icon>
41 <span>Announcement</span> 41 <span class="ml-2">Announcement</span>
42 </v-btn> 42 </v-btn>
43 </div> 43 </div>
44 <div> 44 <div>
45 <v-btn 45 <v-btn
46 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})" 46 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
47 class="grey--text lighten-1" 47 class="grey--text lighten-1"
48 flat 48 flat
49 > 49 >
50 <v-icon>forum</v-icon> 50 <v-icon>forum</v-icon>
51 <span class="ml-2">Course discussion forum</span> 51 <span class="ml-2">Course discussion forum</span>
52 </v-btn> 52 </v-btn>
53 </div> 53 </div>
54 <!-- CHAPTERS --> 54 <!-- CHAPTERS -->
55 <v-layout column class="mt-5"> 55 <v-layout column class="mt-5">
56 <v-flex 56 <v-flex
57 v-for="(chapter,index) in courseDetails[0].chapters" 57 v-for="(chapter,index) in courseDetails[0].chapters"
58 :key="index" 58 :key="index"
59 style="cursor: pointer;" 59 style="cursor: pointer;"
60 @click="routeToChapterInfo(chapter._id)" 60 @click="routeToChapterInfo(chapter._id)"
61 > 61 >
62 <v-card class="mt-2 elevation-0 card-border"> 62 <v-card class="mt-2 elevation-0 card-border">
63 <v-container class="pt-0"> 63 <v-container class="pt-0">
64 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div> 64 <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div>
65 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div> 65 <div class="grey--text lighten-1 subheading">{{chapter.description}}</div>
66 <div 66 <div
67 v-for="(point,index) in chapter.chapterPoints" 67 v-for="(point,index) in chapter.chapterPoints"
68 :key="index" 68 :key="index"
69 class="ml-2 mt-2" 69 class="ml-2 mt-2"
70 > 70 >
71 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span> 71 <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span>
72 </div> 72 </div>
73 </v-container> 73 </v-container>
74 </v-card> 74 </v-card>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 </v-flex> 77 </v-flex>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 79
80 <!-- COURSES --> 80 <!-- COURSES -->
81 <v-flex xs12 md3> 81 <v-flex xs12 md3>
82 <v-card class="elevation-0 card-border" height="100%"> 82 <v-card class="elevation-0 card-border" height="100%">
83 <v-container class="pt-0"> 83 <v-container class="pt-0">
84 <div class="side-bar-color font-weight-bold title">Courses</div> 84 <div class="side-bar-color font-weight-bold title">Courses</div>
85 85
86 <div v-for="(course,index) in courseData"> 86 <div v-for="(course,index) in courseData">
87 <v-btn 87 <v-btn
88 flat 88 flat
89 class="subheading text-xs-start justify-left" 89 class="subheading text-xs-start justify-left"
90 style="cursor: pointer;" 90 style="cursor: pointer;"
91 block 91 block
92 @click="routeToCourseDetails(course._id)" 92 @click="routeToCourseDetails(course._id)"
93 > 93 >
94 <div style="width: 100%;text-align: left;"> 94 <div style="width: 100%;text-align: left;">
95 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 95 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
96 {{course.courseName}} 96 {{course.courseName}}
97 </div> 97 </div>
98 </v-btn> 98 </v-btn>
99 </div> 99 </div>
100 <!-- <v-expansion-panel focusable class="elevation-0"> 100 <!-- <v-expansion-panel focusable class="elevation-0">
101 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i"> 101 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
102 <template v-slot:header> 102 <template v-slot:header>
103 <div class="subheading">{{item.courseName}}</div> 103 <div class="subheading">{{item.courseName}}</div>
104 </template> 104 </template>
105 </v-expansion-panel-content> 105 </v-expansion-panel-content>
106 </v-expansion-panel>--> 106 </v-expansion-panel>-->
107 </v-container> 107 </v-container>
108 </v-card> 108 </v-card>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 </v-container> 111 </v-container>
112 </div> 112 </div>
113 </template> 113 </template>
114 <script> 114 <script>
115 import AllApiCalls from "@/Services/AllApiCalls.js"; 115 import AllApiCalls from "@/Services/AllApiCalls.js";
116 import http from "@/Services/http.js"; 116 import http from "@/Services/http.js";
117 import moment from "moment"; 117 import moment from "moment";
118 export default { 118 export default {
119 mixins: [AllApiCalls], 119 mixins: [AllApiCalls],
120 data() { 120 data() {
121 return { 121 return {
122 showLoader: false, 122 showLoader: false,
123 courseDetails: [{ courseId: {}, classId: {} }], 123 courseDetails: [{ courseId: {}, classId: {} }],
124 chapterIds: [], 124 chapterIds: [],
125 // courseData: [], 125 // courseData: [],
126 courseDataTree: [] 126 courseDataTree: []
127 }; 127 };
128 }, 128 },
129 methods: { 129 methods: {
130 routeToChapterInfo(selectedChapterId) { 130 routeToChapterInfo(selectedChapterId) {
131 /* set value of present chapter selected, and other chapters ids in the obj */ 131 /* set value of present chapter selected, and other chapters ids in the obj */
132 let obj = {}; 132 let obj = {};
133 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) { 133 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
134 obj[ 134 obj[
135 this.courseDetails[0].chapters[i].chapterName 135 this.courseDetails[0].chapters[i].chapterName
136 ] = this.courseDetails[0].chapters[i]._id; 136 ] = this.courseDetails[0].chapters[i]._id;
137 } 137 }
138 obj.selectedChapterId = selectedChapterId; 138 obj.selectedChapterId = selectedChapterId;
139 obj.courseDetailId = this.courseDetails[0]._id; 139 obj.courseDetailId = this.courseDetails[0]._id;
140 obj.courseId = this.$route.query.courseId; 140 obj.courseId = this.$route.query.courseId;
141 this.$router.push({ 141 this.$router.push({
142 name: "Chapter Info", 142 name: "Chapter Info",
143 query: obj 143 query: obj
144 }); 144 });
145 }, 145 },
146 async routeToCourseDetails(courseId) { 146 async routeToCourseDetails(courseId) {
147 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 147 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
148 let response = await this.getParticularCourseDetail(courseId); 148 let response = await this.getParticularCourseDetail(courseId);
149 149
150 /* If the response is null then dont route */ 150 /* If the response is null then dont route */
151 if (response.data.data.length > 0) { 151 if (response.data.data.length > 0) {
152 // REQUIRED TO WAIT FOR UPDATE CYCLE 152 // REQUIRED TO WAIT FOR UPDATE CYCLE
153 this.$nextTick(() => { 153 this.$nextTick(() => {
154 // this.filters.locEmitted = "emitted"; 154 // this.filters.locEmitted = "emitted";
155 this.$router.push({ query: { courseId: courseId } }); 155 this.$router.push({ query: { courseId: courseId } });
156 }); 156 });
157 } else { 157 } else {
158 this.seeSnackbar("No Data Available", "warning"); 158 this.seeSnackbar("No Data Available", "warning");
159 } 159 }
160 } 160 }
161 }, 161 },
162 async created() { 162 async created() {
163 console.log("its working"); 163 console.log("its working");
164 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 164 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
165 let response = await this.getParticularCourseDetail( 165 let response = await this.getParticularCourseDetail(
166 this.$route.query.courseId 166 this.$route.query.courseId
167 ); 167 );
168 this.courseDetails = response.data.data; 168 this.courseDetails = response.data.data;
169 console.log("its working courseDetails - ", this.courseDetails); 169 console.log("its working courseDetails - ", this.courseDetails);
170 170
171 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 171 /* getStudentCourses - to get courseData - defined in GetApis.js*/
172 await this.getStudentCourses({ 172 await this.getStudentCourses({
173 classId: localStorage.getItem("parentClassId"), 173 classId: localStorage.getItem("parentClassId"),
174 studentId: localStorage.getItem("parentStudentId") 174 studentId: localStorage.getItem("parentStudentId")
175 }); 175 });
176 } 176 }
177 }; 177 };
178 </script> 178 </script>
179 <style scoped> 179 <style scoped>
180 .side-bar-color { 180 .side-bar-color {
181 color: #827bfa !important; 181 color: #827bfa !important;
182 /* border-top-right-radius: 74px !important; */ 182 /* border-top-right-radius: 74px !important; */
183 } 183 }
184 .card-border { 184 .card-border {
185 border: 1px #bdbdbd solid; 185 border: 1px #bdbdbd solid;
186 border-radius: 3px; 186 border-radius: 3px;
187 } 187 }
188 /* .v-treeview-node__toggle { 188 /* .v-treeview-node__toggle {
189 color: red !important; 189 color: red !important;
190 } */ 190 } */
191 </style> 191 </style>