Blame view

src/pages/Common/CoursesSideBar.vue 2.17 KB
e91641fe5   Amber Dev   solved bugs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  <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">
        <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-container>
    </div>
  </template>
  <script>
  import AllApiCalls from "@/Services/AllApiCalls.js";
  export default {
    mixins: [AllApiCalls],
    data() {
      return {};
    },
    methods: {
      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({
            name: "Course Details",
            query: { courseId: courseId }
          });
        } else {
          this.seeSnackbar("No Data Available", "warning");
        }
      }
    },
    async created() {
      /* 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;
  }
  </style>