From eeb8db6032b8cba7bd185c1ea037b91257cc1033 Mon Sep 17 00:00:00 2001
From: amber <amber.dev@viithiisys.com>
Date: Mon, 3 Aug 2020 19:36:21 +0530
Subject: [PATCH] added pdf link in teachers

---
 src/pages/Course/courseDetail.vue | 265 ++++++++++++++++++++------------------
 1 file changed, 142 insertions(+), 123 deletions(-)

diff --git a/src/pages/Course/courseDetail.vue b/src/pages/Course/courseDetail.vue
index b75f724..d97f9f7 100644
--- a/src/pages/Course/courseDetail.vue
+++ b/src/pages/Course/courseDetail.vue
@@ -393,6 +393,22 @@
                     </h5>
                   </v-flex>
                 </v-layout>
+                <!-- LINK TO PDF -->
+                <v-layout row justify-center>
+                  <v-flex xs6>
+                    <div style="width: 100%;">
+                      <a
+                        :href="editedItem.pdfFileUrl"
+                        target="_blank"
+                        style="text-decoration: none!important;"
+                      >
+                        <v-btn flat block>
+                          <span><h5><b>Open PDF</b></h5></span>
+                        </v-btn>
+                      </a>
+                    </div>
+                  </v-flex>
+                </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
@@ -401,66 +417,72 @@
     </v-dialog>
 
     <!-- ****** Course Detail TABLE ****** -->
-
-    <v-toolbar color="transparent" flat>
-      <v-btn
-        fab
-        dark
-        class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
-        small
-        @click="addCourseDetailDialog = true"
-      >
-        <v-icon dark>add</v-icon>
-      </v-btn>
-      <v-btn
-        round
-        class="open-dialog-button hidden-sm-only hidden-xs-only"
-        dark
-        @click="addCourseDetailDialog = true"
-      >
-        <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail
-      </v-btn>
-      <v-flex xs12 sm4 md2>
-        <v-select
+    <v-container grid-list-lg class="pa-0">
+      <v-layout row wrap>
+        <!-- <v-btn
+          fab
+          dark
+          class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
           small
-          :items="addclass"
-          label="Select Class"
-          v-model="getCourse.classId"
-          item-text="classNum"
-          item-value="_id"
-          name="Select Class"
-          @change="getCourses(getCourse.classId)"
-          class="mr-2"
-          required
-        ></v-select>
-      </v-flex>
-      <v-flex xs12 sm4 md2>
-        <v-select
-          :items="courseData"
-          label="Select Course"
-          v-model="getCourse.courseId"
-          item-text="courseName"
-          item-value="_id"
-          required
-          class="ml-2"
-          @change="getCourseDetailsList(getCourse.courseId)"
-        ></v-select>
-      </v-flex>
-      <v-spacer></v-spacer>
-      <v-card-title class="body-1" v-show="show">
-        <v-btn icon large flat @click="displaySearch">
-          <v-avatar size="27">
-            <img src="/static/icon/search.png" alt="icon" />
-          </v-avatar>
-        </v-btn>
-      </v-card-title>
-      <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
-        <v-layout>
-          <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
-          <v-icon @click="closeSearch" color="error">close</v-icon>
-        </v-layout>
-      </v-flex>
-    </v-toolbar>
+          @click="addCourseDetailDialog = true"
+        >
+          <v-icon dark>add</v-icon>
+        </v-btn>-->
+        <v-flex xs12 sm4>
+          <v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
+            <v-icon class="white--text pr-1" size="20">add</v-icon>
+            <span class="hidden-sm-and-down">Add Course Detail</span>
+            <span class="hidden-md-and-up">Add</span>
+          </v-btn>
+        </v-flex>
+
+        <v-flex xs12 sm4 md2>
+          <v-select
+            :items="addclass"
+            label="Select Class"
+            v-model="getCourse.classId"
+            item-text="classNum"
+            item-value="_id"
+            name="Select Class"
+            @change="getCourses(getCourse.classId)"
+            required
+          ></v-select>
+        </v-flex>
+        <v-flex xs12 sm4 md2>
+          <v-select
+            :items="courseData"
+            label="Select Course"
+            v-model="getCourse.courseId"
+            item-text="courseName"
+            item-value="_id"
+            required
+            @change="getCourseDetailsList(getCourse.courseId)"
+          ></v-select>
+        </v-flex>
+
+        <v-flex xs12 sm1 v-if="show">
+          <v-btn icon large flat @click="show = false;showSearch = true;">
+            <v-avatar size="27">
+              <img src="/static/icon/search.png" alt="icon" />
+            </v-avatar>
+          </v-btn>
+        </v-flex>
+
+        <v-flex xs12 sm3 md3 v-if="showSearch">
+          <div style="display: inline-block;width: 70%;">
+            <v-text-field
+              v-model="search"
+              label="Search"
+              prepend-inner-icon="search"
+              color="primary"
+            ></v-text-field>
+          </div>
+          <div style="display: inline-block;">
+            <v-icon @click="closeSearch" color="error">close</v-icon>
+          </div>
+        </v-flex>
+      </v-layout>
+    </v-container>
     <v-data-table
       :headers="headers"
       :items="CourseDetailsList"
@@ -518,6 +540,7 @@
           </td>
         </tr>
       </template>
+      <!-- CHAPTERS IN A COURSE -->
       <template slot="expand">
         <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
           <template slot="items" slot-scope="props">
@@ -728,12 +751,7 @@
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
-                  <v-btn
-                    @click="clear();"
-                    round
-                    dark
-                    class="clear-button"
-                  >Clear</v-btn>
+                  <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-layout>
               </v-flex>
@@ -766,7 +784,7 @@ export default {
   mixins: [AllApiCalls],
   components: {
     UploadFiles,
-    UploadPdf
+    UploadPdf,
   },
   data: () => ({
     snackbar: false,
@@ -801,55 +819,55 @@ export default {
         {
           chapterName: "",
           description: "",
-          chapterPoints: []
-        }
-      ]
+          chapterPoints: [],
+        },
+      ],
     },
     chapters: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     editFiles: [],
     files: [],
     courseData: [],
     token: "",
     courseId: "",
-    clsssRules: [v => !!v || " Class is required"],
-    courseRules: [v => !!v || " Course is required"],
-    chapterNameRules: [v => !!v || " Tilte is required"],
-    descriptionRules: [v => !!v || " Description is required"],
+    clsssRules: [(v) => !!v || " Class is required"],
+    courseRules: [(v) => !!v || " Course is required"],
+    chapterNameRules: [(v) => !!v || " Tilte is required"],
+    descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
-        value: "index"
+        value: "index",
       },
       {
         text: "Class Name",
         value: "classNum",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Course Name",
         value: "courseName",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     CourseDetailsList: [],
     editedIndex: -1,
     editedItem: {},
     editedCourse: {},
     editChapter: {
-      chapterPoints: []
+      chapterPoints: [],
     },
     index: "",
     addChapterItem: {},
     addChapterItemObj: {},
-    addChapterDialog: false
+    addChapterDialog: false,
   }),
   methods: {
     getCourses(classId) {
@@ -857,16 +875,16 @@ export default {
       http()
         .get("/getCourseesList", {
           params: {
-            classId: classId
-          }
+            classId: classId,
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.editChapter.courseId = "";
           this.courseData = response.data.data;
           // console.log("this.courseData", this.courseData);
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
@@ -876,17 +894,17 @@ export default {
       http()
         .get("/getParticularCourseDetail", {
           params: {
-            courseId: this.getCourse.courseId
-          }
+            courseId: this.getCourse.courseId,
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.CourseDetailsList = response.data.data;
           if (response.data.data[0]) {
             this.chapters = response.data.data[0].chapters;
           }
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
@@ -913,7 +931,7 @@ export default {
       this.loading = true;
       http()
         .put("/addChapters", this.addChapterItem)
-        .then(response => {
+        .then((response) => {
           this.addChapterDialog = false;
           this.loading = false;
           this.snackbar = true;
@@ -923,7 +941,7 @@ export default {
           this.removeChapterPoint();
           this.getCourseDetailsList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
@@ -931,6 +949,7 @@ export default {
         });
     },
     profile(item) {
+      console.log("chaper - ", item);
       this.editedIndex = this.chapters.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewProfileGallery = true;
@@ -951,7 +970,7 @@ export default {
     },
     deleteItem(item) {
       let deleteGallery = {
-        courseDetailId: item._id
+        courseDetailId: item._id,
       };
       http()
         .delete(
@@ -959,17 +978,17 @@ export default {
           confirm("Are you sure you want to delete this?") && {
             params: deleteGallery,
             headers: {
-              Authorization: "Bearer " + this.token
-            }
+              Authorization: "Bearer " + this.token,
+            },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Course Details";
           this.color = "green";
           this.getCourseDetailsList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
@@ -980,20 +999,20 @@ export default {
       // console.log("item", item);
       let deleteChapters = {
         courseDetailId: this.courseId,
-        chapterId: item._id
+        chapterId: item._id,
       };
       http()
         .put(
           "/deleteChapters",
           confirm("Are you sure you want to delete this?") && deleteChapters
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Chapters";
           this.color = "green";
           this.getCourseDetailsList();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
@@ -1018,8 +1037,8 @@ export default {
             description: this.addCourseDetail.description,
             chapterPoints: chapterPoints,
             uploadPdf: this.pdfFile,
-            uploadPpt: this.pptFile
-          }
+            uploadPpt: this.pptFile,
+          },
         ];
       }
       if (this.$refs.form.validate()) {
@@ -1027,12 +1046,12 @@ export default {
         var courseDetailsData = {
           classId: this.addCourseDetail.classId,
           courseId: this.addCourseDetail.courseId,
-          chapters: chapters
+          chapters: chapters,
         };
         this.loading = true;
         http()
           .post("/createCourseDetail", courseDetailsData)
-          .then(response => {
+          .then((response) => {
             this.addCourseDetailDialog = false;
             this.loading = false;
             this.snackbar = true;
@@ -1043,7 +1062,7 @@ export default {
             this.emptyPdf = "reset";
             this.removeAddFind();
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
@@ -1068,12 +1087,12 @@ export default {
         description: this.editChapter.description,
         chapterPoints: chapterPoints,
         uploadPdf: this.pdfFile,
-        uploadPpt: this.pptFile
+        uploadPpt: this.pptFile,
       };
       this.editLoading = true;
       http()
         .put("/updateChapters", updateData)
-        .then(response => {
+        .then((response) => {
           this.editChapterDetailDialog = false;
           this.snackbar = true;
           this.text = response.data.message;
@@ -1084,7 +1103,7 @@ export default {
           this.emptyPdf = "reset";
           this.getCourseDetailsList();
         })
-        .catch(error => {
+        .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
@@ -1095,12 +1114,12 @@ export default {
       var updateData = {
         courseDetailId: this.editedCourse._id,
         courseId: this.editedCourse.courseId,
-        classId: this.editedCourse.classId
+        classId: this.editedCourse.classId,
       };
       this.editLoading = true;
       http()
         .put("/updateCourseDetail", updateData)
-        .then(response => {
+        .then((response) => {
           this.getCourseDetailsList();
           this.editCourseDetailDialog = false;
           this.snackbar = true;
@@ -1110,7 +1129,7 @@ export default {
           // this.editChapterPointName = "";
           this.editFiles = [];
         })
-        .catch(error => {
+        .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
@@ -1120,46 +1139,46 @@ export default {
     getAllClasses() {
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(err => {
+        .catch((err) => {
           // console.log("err====>", err);
         });
     },
-    removeChapterPoint: function() {
+    removeChapterPoint: function () {
       this.findsChapterPoint = [{ value: "" }];
     },
-    removeAddFind: function() {
+    removeAddFind: function () {
       this.finds = [{ value: "" }];
     },
-    addFind: function() {
+    addFind: function () {
       this.finds.push({ value: "" });
     },
-    addChapterPoint: function() {
+    addChapterPoint: function () {
       this.findsChapterPoint.push({ value: "" });
     },
-    update: function() {
+    update: function () {
       this.updates.push({ value: "" });
     },
     // removeUpdatePoints: function() {
     //   this.updates = [{ value: "" }];
     // },
-    deleteFind: function(index) {
+    deleteFind: function (index) {
       this.finds.splice(index, 1);
       if (index === 0) this.addFind();
     },
-    deleteChapterPoint: function(index) {
+    deleteChapterPoint: function (index) {
       this.findsChapterPoint.splice(index, 1);
       if (index === 0) this.addChapterPoint();
     },
-    deleteUpdate: function(index) {
+    deleteUpdate: function (index) {
       this.updates.splice(index, 1);
       if (index === 0) this.update();
     },
-    deleteUrl: function(index, youTubelinkId, id) {
+    deleteUrl: function (index, youTubelinkId, id) {
       this.editChapter.chapterPoints.splice(index, 1);
       if (index === 0) this.update();
     },
@@ -1171,11 +1190,11 @@ export default {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
-  }
+  },
 };
 </script>
\ No newline at end of file
-- 
2.0.0