Merge pull request #533 from matematikk-mooc/aj/DIT-137

DIT-137: Added support for url navigated course previews on frontpage

src/vue/components/CardList.vue

@@ -46,9 +46,11 @@
           <p class="course-description">{{ course.public_description }}</p>
           <ModulesList :modules="modules"></ModulesList>
         </template>
-        <template v-slot:actions>
+        <template v-if="(!authorized || !course.enrolled)" v-slot:actions>
           <Button :type="'filled'" :size="'md'" @click="enrollToCourse(course.self_enrollment_code)">Meld deg på</Button>
-          <Button type="outlined" :size="'md'" @click="closeModal(course)">Lukk</Button>
+        </template>
+        <template v-if="(authorized && course.enrolled)" v-slot:actions>
+          <Button :type="'outlined'" :size="'md'" @click="goToCourse(course.id)">Gå til kompetansepakke</Button>
         </template>
       </Modal>
     </div>
@@ -62,6 +64,7 @@ import ModulesList from './ModulesList.vue';
 import Modal from '../components/modal/Modal';
 import RegisterChoice from './login-choice/RegisterChoice.vue';
 import NewCourseFlag from './NewCourseFlag.vue';
+import { shallowUpdateUrlParameter } from '../utils/url-utils';
 
 export default {
   name: 'CardList',
@@ -79,12 +82,18 @@ export default {
     newCoursesIndicator: Boolean,
   },
   data() {
+    var url = new URL(window.location.href);
+    var coursePreviewId = url.searchParams.get("course_preview_id");
+    this.courses.find((courseItem) => {
+      if (courseItem.id == coursePreviewId) {
+        this.handleModal(courseItem)
+      }
+    });
+
     return {
-      showModal: false,
       domain: window.location.origin,
       selectedCourse: {},
       modules: [],
-      kpasApiUrl: KPASAPIURL,
     };
   },
   created () {
@@ -115,17 +124,19 @@ export default {
       window.location.href = this.domain + '/courses/' + courseId;
     },
     async handleModal(course) {
-      await this.viewModules(course.id);
-      course.isModalOpen = true;
+      shallowUpdateUrlParameter("course_preview_id", course.id)
+      await this.viewModules(course);
     },
     closeModal(course) {
+      shallowUpdateUrlParameter("course_preview_id", null)
       course.isModalOpen = false;
     },
-    async viewModules(courseId) {
+    async viewModules(course) {
+      let courseId = course.id;
       let self = this;
       self.modules = [];
       if (this.authorized) {
-        await fetch(self.domain + '/api/v1/courses/' + courseId + '/modules', {
+        await fetch(window.location.origin + '/api/v1/courses/' + courseId + '/modules', {
           method: 'GET',
           headers: {},
         })
@@ -141,7 +152,7 @@ export default {
             });
           });
       } else {
-        await fetch(this.kpasApiUrl + '/course/' + courseId + '/moduletitles', {
+        await fetch(KPASAPIURL + '/course/' + courseId + '/moduletitles', {
           method: 'GET',
           headers: {},
         })
@@ -158,6 +169,8 @@ export default {
             });
           });
       }
+
+      course.isModalOpen = true;
     },
 
     handleMultilangModules(module) {

src/vue/components/NotLoggedInIntro.vue

@@ -46,7 +46,6 @@
         </template>
         <template v-slot:actions>
           <RegisterChoice :selfEnrollmentCode="newestCourse.self_enrollment_code"></RegisterChoice>
-          <Button type="outlined" :size="'md'" @click="closeModal()">Lukk</Button>
         </template>
       </Modal>
     </div>
@@ -60,6 +59,7 @@ import ModulesList from './ModulesList.vue';
 import Modal from '../components/modal/Modal';
 import RegisterChoice from './login-choice/RegisterChoice.vue';
 import NewCourseFlag from './NewCourseFlag.vue';
+import { shallowUpdateUrlParameter } from '../utils/url-utils';
 
 export default {
   name: 'NotLoggedInIntro',
@@ -75,21 +75,26 @@ export default {
     newestCourse: Object,
   },
   data() {
+    var url = new URL(window.location.href);
+    var coursePreviewId = url.searchParams.get("course_preview_id");
+    var showCoursePreview = coursePreviewId != null && this.newestCourse != null
+      && coursePreviewId == this.newestCourse.id;
+
+    if (showCoursePreview) {
+      this.viewModules(coursePreviewId)
+    }
+
     return {
       modules: [],
-      showModal: false,
-      kpasApiUrl: KPASAPIURL,
-      isModalOpen: false,
+      isModalOpen: showCoursePreview,
       domain: window.location.origin,
-
     }
   },
   methods: {
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;
     },
     newCourseFlag() {
-      console.log("NEWEST COURSE", this.newestCourse)
     if (this.newestCourse.course_settings) {
       console.log(this.newestCourse.course_settings.course_category.new)
       if (this.newestCourse.course_settings.course_category) {
@@ -112,32 +117,37 @@ export default {
     },
     async handleModal() {
       await this.viewModules(this.newestCourse.id);
-      this.isModalOpen = true;
     },
     closeModal() {
+      shallowUpdateUrlParameter("course_preview_id", null)
       this.isModalOpen = false;
     },
     async viewModules(courseId) {
+      shallowUpdateUrlParameter("course_preview_id", courseId)
+
+      this.isModalOpen = true;
       let self = this;
       self.modules = [];
 
-        await fetch(this.kpasApiUrl + '/course/' + courseId + '/moduletitles', {
-          method: 'GET',
-          headers: {},
-        })
-          .then(response => response.json())
-          .then(response => {
-            response = response.result;
-            response.forEach(module => {
-              if (module.published === true) {
-                if (module.name.includes('nb:')) {
-                  self.handleMultilangModules(module);
-                }
-                self.modules.push(module);
+      await fetch(KPASAPIURL + '/course/' + courseId + '/moduletitles', {
+        method: 'GET',
+        headers: {},
+      })
+        .then(response => response.json())
+        .then(response => {
+          response = response.result;
+          response.forEach(module => {
+            if (module.published === true) {
+              if (module.name.includes('nb:')) {
+                self.handleMultilangModules(module);
               }
-            });
+              self.modules.push(module);
+            }
           });
-
+        })
+        .catch(() => {
+          this.closeModal()
+        });
     },
 
     handleMultilangModules(module) {

src/vue/components/modal/Modal.vue

@@ -105,7 +105,7 @@ const closeModal = () => {
       word-wrap: break-word;
       padding:0.5rem 1rem 0.5rem 1rem;
       width: 100%;
-      overflow-y:scroll;
+      overflow-y:auto;
    }
 
     &__actions {

src/vue/utils/url-utils.js

@@ -0,0 +1,21 @@
+/**
+ * Adds, updates, or removes a parameter in the current URL without refreshing the page.
+ * @param {string} param - The name of the parameter to add, update, or remove.
+ * @param {string|null} value - The value of the parameter. If set to `null`, the parameter will be removed.
+ * @returns {string} The modified URL.
+ */
+export function shallowUpdateUrlParameter(param, value) {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (value === null) {
+        urlParams.delete(param);
+    } else {
+        urlParams.set(param, value);
+    }
+
+    const baseUrl = window.location.pathname;
+    const newParams = urlParams.toString();
+    const newUrl = baseUrl + (newParams ? '?' + newParams : '');
+
+    window.history.pushState({ path: newUrl }, '', newUrl);
+    return newUrl;
+}