viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 0e5675ffee7d02a8f06738b56fbced7a677e9e44

Authored by Amber Dev
1 parent 6f7cf8cf51
Exists in master and in 3 other branches amber-development, development, ui-design

added chapter navigation

Showing 1 changed file with 33 additions and 13 deletions   Show diff stats
src/pages/Dashboard/ChapterInfo.vue
Diff comments   View file @0e5675f
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row class="mt-1"> 23 <v-layout row class="mt-1">
24 <v-flex xs8> 24 <v-flex xs8>
25 <!-- CHAPTER INFO --> 25 <!-- CHAPTER INFO -->
26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div> 26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div> 27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>
28 <div 28 <div
29 v-for="(point,index) in chapter.chapters[0].chapterPoints" 29 v-for="(point,index) in chapter.chapters[0].chapterPoints"
30 :key="index" 30 :key="index"
31 class="ml-2 mt-2" 31 class="ml-2 mt-2"
32 > 32 >
33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span> 33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>
34 </div> 34 </div>
35 <!-- ACTIVITIES --> 35 <!-- ACTIVITIES -->
36 <div class="mt-5"> 36 <div class="mt-5">
37 <v-icon>library_books</v-icon> 37 <v-icon>library_books</v-icon>
38 <span class="subheading font-weight-bold">Activities</span> 38 <span class="subheading font-weight-bold">Activities</span>
39 </div> 39 </div>
40 <!-- OTHER OPTIONS --> 40 <!-- OTHER OPTIONS -->
41 <div class="mt-5"> 41 <div class="mt-5">
42 <ul class="subheading"> 42 <ul class="subheading">
43 <li>Live online classes solution</li> 43 <li>Live online classes solution</li>
44 <li>Tutorial-pharmacetutical</li> 44 <li>Tutorial-pharmacetutical</li>
45 <li>HSP Interactive content</li> 45 <li>HSP Interactive content</li>
46 <li>Assessment</li> 46 <li>Assessment</li>
47 </ul> 47 </ul>
48 </div> 48 </div>
49 49
50 <!-- NEXT CHAPTER --> 50 <!-- SELECT CHAPTERS -->
51 <v-flex 51 <v-layout row class="mt-5">
52 class="text-xs-right mt-5" 52 <!-- PREVIOUS CHAPTER -->
53 v-if="indexSelectedChapter < chapterNames.length -1" 53 <v-flex
54 @click="showSelectedChapter()" 54 style="cursor: pointer;"
55 > 55 class="subheading font-weight-bold text-xs-left"
56 <span style="cursor: pointer;" class="subheading font-weight-bold"> 56 v-if="indexSelectedChapter > 0"
57 @click="showSelectedChapter('back')"
58 >
59 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>
60 {{chapterNames[indexSelectedChapter - 1]}}
61 </v-flex>
62 <v-spacer></v-spacer>
63 <!-- NEXT CHAPTER -->
64 <v-flex
65 style="cursor: pointer;"
66 class="subheading font-weight-bold text-xs-right"
67 v-if="indexSelectedChapter < chapterNames.length -1"
68 @click="showSelectedChapter('forward')"
69 >
57 {{chapterNames[indexSelectedChapter + 1]}} 70 {{chapterNames[indexSelectedChapter + 1]}}
58 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon> 71 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
59 </span> 72 </v-flex>
60 </v-flex> 73 </v-layout>
61 <!-- <v-flex class="text-xs-right mt-5" v-else> 74 <!-- <v-flex class="text-xs-right mt-5" v-else>
62 <span class="subheading font-weight-bold">Return to chapter one</span> 75 <span class="subheading font-weight-bold">Return to chapter one</span>
63 </v-flex>--> 76 </v-flex>-->
64 </v-flex> 77 </v-flex>
65 78
66 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
67 80
68 <!-- COURSES - positioned to the right of the page --> 81 <!-- COURSES - positioned to the right of the page -->
69 <v-flex xs3> 82 <v-flex xs3>
70 <v-card class="elevation-0 card-border" height="100%"> 83 <v-card class="elevation-0 card-border" height="100%">
71 <v-container class="pt-0"> 84 <v-container class="pt-0">
72 <div class="side-bar-color font-weight-bold title">Courses</div> 85 <div class="side-bar-color font-weight-bold title">Courses</div>
73 86
74 <div v-for="(course,index) in courseData" :key="index"> 87 <div v-for="(course,index) in courseData" :key="index">
75 <v-btn 88 <v-btn
76 flat 89 flat
77 class="subheading text-xs-start justify-left" 90 class="subheading text-xs-start justify-left"
78 style="cursor: pointer;" 91 style="cursor: pointer;"
79 block 92 block
80 @click="routeToCourseDetails(course._id)" 93 @click="routeToCourseDetails(course._id)"
81 > 94 >
82 <div style="width: 100%;text-align: left;"> 95 <div style="width: 100%;text-align: left;">
83 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon> 96 <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
84 {{course.coursrName}} 97 {{course.coursrName}}
85 </div> 98 </div>
86 </v-btn> 99 </v-btn>
87 </div> 100 </div>
88 </v-container> 101 </v-container>
89 </v-card> 102 </v-card>
90 </v-flex> 103 </v-flex>
91 </v-layout> 104 </v-layout>
92 </v-container> 105 </v-container>
93 </div> 106 </div>
94 </template> 107 </template>
95 <script> 108 <script>
96 import http from "@/Services/http.js"; 109 import http from "@/Services/http.js";
97 import AllApiCalls from "@/Services/AllApiCalls.js"; 110 import AllApiCalls from "@/Services/AllApiCalls.js";
98 export default { 111 export default {
99 mixins: [AllApiCalls], 112 mixins: [AllApiCalls],
100 data() { 113 data() {
101 return { 114 return {
102 // courseData: [], 115 // courseData: [],
103 showLoader: false, 116 showLoader: false,
104 chapter: { chapters: [{}] }, 117 chapter: { chapters: [{}] },
105 chapterNames: [], 118 chapterNames: [],
106 chapterIds: [], 119 chapterIds: [],
107 selectedChapterId: "", 120 selectedChapterId: "",
108 indexSelectedChapter: "" 121 indexSelectedChapter: ""
109 }; 122 };
110 }, 123 },
111 methods: { 124 methods: {
112 showSelectedChapter() { 125 showSelectedChapter(newChapter) {
113 this.indexSelectedChapter += 1; 126 if (newChapter == "forward") {
114 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 127 this.indexSelectedChapter += 1;
115 this.getParticularChapterDetail(); 128 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
129 this.getParticularChapterDetail();
130 }
131 if (newChapter == "back") {
132 this.indexSelectedChapter -= 1;
133 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
134 this.getParticularChapterDetail();
135 }
116 }, 136 },
117 getParticularChapterDetail() { 137 getParticularChapterDetail() {
118 http() 138 http()
119 .get("/getParticularChapterDetail", { 139 .get("/getParticularChapterDetail", {
120 params: { 140 params: {
121 courseDetailId: this.$route.query.courseDetailId, 141 courseDetailId: this.$route.query.courseDetailId,
122 chapterId: this.selectedChapterId 142 chapterId: this.selectedChapterId
123 } 143 }
124 }) 144 })
125 .then(response => { 145 .then(response => {
126 this.chapter = response.data.data; 146 this.chapter = response.data.data;
127 console.log(" chapter data - ", this.chapter); 147 console.log(" chapter data - ", this.chapter);
128 this.showLoader = false; 148 this.showLoader = false;
129 }) 149 })
130 .catch(err => { 150 .catch(err => {
131 console.log("err====>", err); 151 console.log("err====>", err);
132 this.showLoader = false; 152 this.showLoader = false;
133 }); 153 });
134 }, 154 },
135 async routeToCourseDetails(courseId) { 155 async routeToCourseDetails(courseId) {
136 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 156 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
137 let response = await this.getParticularCourseDetail(courseId); 157 let response = await this.getParticularCourseDetail(courseId);
138 158
139 /* If the response is null then dont route */ 159 /* If the response is null then dont route */
140 if (response.data.data.length > 0) { 160 if (response.data.data.length > 0) {
141 this.$router.push({ 161 this.$router.push({
142 name: "Course Details", 162 name: "Course Details",
143 query: { courseId: courseId } 163 query: { courseId: courseId }
144 }); 164 });
145 } else { 165 } else {
146 this.seeSnackbar("No Data Available", "warning"); 166 this.seeSnackbar("No Data Available", "warning");
147 } 167 }
148 } 168 }
149 }, 169 },
150 // computed:{ 170 // computed:{
151 // nextChapterIndex(){ 171 // nextChapterIndex(){
152 172
153 // } 173 // }
154 // } 174 // }
155 async created() { 175 async created() {
156 console.log("route query - ", this.$route.query); 176 console.log("route query - ", this.$route.query);
157 177
158 this.selectedChapterId = this.$route.query.chapterId; 178 this.selectedChapterId = this.$route.query.chapterId;
159 179
160 /* set chapterNames array */ 180 /* set chapterNames array */
161 this.chapterNames = Object.keys(this.$route.query); 181 this.chapterNames = Object.keys(this.$route.query);
162 this.chapterNames.pop(); 182 this.chapterNames.pop();
163 this.chapterNames.pop(); 183 this.chapterNames.pop();
164 console.log("chapter names - ", this.chapterNames); 184 console.log("chapter names - ", this.chapterNames);
165 185
166 /* set chapter Ids */ 186 /* set chapter Ids */
167 this.chapterIds = Object.values(this.$route.query); 187 this.chapterIds = Object.values(this.$route.query);
168 this.chapterIds.pop(); 188 this.chapterIds.pop();
169 this.chapterIds.pop(); 189 this.chapterIds.pop();
170 console.log("chapter Ids - ", this.chapterIds); 190 console.log("chapter Ids - ", this.chapterIds);
171 191
172 this.indexSelectedChapter = this.chapterIds.findIndex(id => { 192 this.indexSelectedChapter = this.chapterIds.findIndex(id => {
173 return id == this.selectedChapterId; 193 return id == this.selectedChapterId;
174 }); 194 });
175 console.log(" index of selected chapter - ", this.indexSelectedChapter); 195 console.log(" index of selected chapter - ", this.indexSelectedChapter);
176 196
177 /* get chapter clicked on using the id */ 197 /* get chapter clicked on using the id */
178 await this.getParticularChapterDetail(this.selectedChapterId); 198 await this.getParticularChapterDetail(this.selectedChapterId);
179 199
180 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 200 /* getStudentCourses - to get courseData - defined in GetApis.js*/
181 await this.getStudentCourses({ 201 await this.getStudentCourses({
182 classId: localStorage.getItem("parentClassId"), 202 classId: localStorage.getItem("parentClassId"),
183 studentId: localStorage.getItem("parentStudentId") 203 studentId: localStorage.getItem("parentStudentId")
184 }); 204 });
185 } 205 }
186 }; 206 };
187 </script> 207 </script>
188 <style scoped> 208 <style scoped>
189 .side-bar-color { 209 .side-bar-color {
190 color: #827bfa !important; 210 color: #827bfa !important;
191 /* border-top-right-radius: 74px !important; */ 211 /* border-top-right-radius: 74px !important; */
192 } 212 }
193 .card-border { 213 .card-border {
194 border: 1px #bdbdbd solid; 214 border: 1px #bdbdbd solid;
195 border-radius: 3px; 215 border-radius: 3px;
196 } 216 }
197 </style> 217 </style>
198 218