Dev

src/js/main.js

@@ -105,9 +105,11 @@ jQuery(function($) {
   });
 
   routes.addRouteForPath(/\/courses\/\d+/, function() {
+    let courseUnenrollmentUuid = util.getCourseUnenrollmentUuid();
+
     document.body.classList.add('course-menu-expanded');
     document.getElementById('left-side').setAttribute('style', 'display: block !important');
-    coursepagebanner.insertCourseBanner();
+    coursepagebanner.insertCourseBanner(util.course.id, courseUnenrollmentUuid);
     let authenticated = util.isAuthenticated();
     informationBanner.updateInformationBanner();
     if(!authenticated) {
@@ -123,8 +125,10 @@ jQuery(function($) {
 
   //The logic below should be refactored and cleaned up.
   routes.addRouteForPath(/\/courses\/\d+$/, function () {
+    let courseUnenrollmentUuid = util.getCourseUnenrollmentUuid();
+
     coursepage.hideElementsFromUsers();
-    coursepagebanner.insertCourseBanner();
+    coursepagebanner.insertCourseBanner(util.course.id, courseUnenrollmentUuid);
     renderCourseModules("left-side");
     util.updateRightMenuButtons();
     util.removeRecentFeedback();

src/js/modules/coursepagebanner.js

@@ -6,7 +6,7 @@ import kpasApi from "../api/kpas-api";
 
 export default (function() {
     return {
-    insertCourseBanner: function () {
+    insertCourseBanner: function (courseId, courseUnenrollmentUuid) {
         let currentCourseId  = ENV.COURSE_ID? ENV.COURSE_ID : ENV.course_id ? ENV.course_id : ENV.COURSE.id;
         let isEnrolled = ENV.current_user_is_student? ENV.current_user_is_student || ENV.COURSE.is_student : false;
         let isFrontPage = false;
@@ -25,7 +25,9 @@ export default (function() {
                     title: course.name,
                     isEnrolled: isEnrolled,
                     isFrontPage: isFrontPage,
-                    languages: settings.multilang.toLowerCase()
+                    languages: settings.multilang.toLowerCase(),
+                    courseId: courseId,
+                    unenrollmentUuid: courseUnenrollmentUuid
                 });
                 let coursePageBannerWrapper = document.createElement("div");
                 coursePageBannerWrapper.id =  "course-page-banner-wrapper";

src/js/modules/enroll.js

@@ -13,23 +13,23 @@ export default (function () {
 
   return {
 
-    displayRegisterPopup: function(authenticated, selfRegisterCode) {
+    displayRegisterPopup: function (authenticated, selfRegisterCode) {
       let wrapper = document.getElementById("wrapper");
       let enrollPopup = document.createElement("div");
       enrollPopup.setAttribute("id", "enrollPopup");
-      let enrollPopupComponent = createApp(EnrollToCourse, {authenticated: authenticated, selfEnrollmentCode: selfRegisterCode});
+      let enrollPopupComponent = createApp(EnrollToCourse, { authenticated: authenticated, selfEnrollmentCode: selfRegisterCode });
       wrapper.appendChild(enrollPopup);
       enrollPopupComponent.mount("#enrollPopup");
 
     },
     changeEnrollInformationPolicyLink: function () {
       var informationPolicy = $('.ic-Self-enrollment-footer__Secondary > a');
-      if(informationPolicy) {
+      if (informationPolicy) {
         informationPolicy.attr("href", settings.privacyPolicyLink);
       }
 
       var termsOfService = $('#create_user_info > div.ic-Checkbox-group > div > label');
-      if(termsOfService) {
+      if (termsOfService) {
         termsOfService.html("Jeg er enig i personvernspolitikken.");
       }
     },
@@ -53,23 +53,23 @@ export default (function () {
       const newUserButton = $('#selfEnrollmentAuthRegCreate');
       newUserButton.on('click', _ => forgotPasswordButton.hide());
     },
-    updateGotoDashboardButton: function() {
-      $(".ic-Self-enrollment-footer__Primary > a").each(function() {
+    updateGotoDashboardButton: function () {
+      $(".ic-Self-enrollment-footer__Primary > a").each(function () {
         var $this = $(this);
-        if ($this.hasClass('btn-primary')){
+        if ($this.hasClass('btn-primary')) {
           var _href = $this.attr("href");
-        }else {
+        } else {
           var _href = $this.attr("href");
         }
 
         const urlParamsObj = utilRoot.urlParamsToObject();
 
         let forwardTo = urlParamsObj && urlParamsObj['forwardTo'];
-        if(forwardTo) {
+        if (forwardTo) {
           _href += "&forwardTo=" + encodeURIComponent(forwardTo);
         }
         $this.attr("href", _href);
-     });
+      });
     },
     changeEnrollPage: function () {
       this.changeEnrollInformationPolicyLink();
@@ -80,9 +80,11 @@ export default (function () {
       var allCoursesWithStatus = [];
       for (var i = 0; i < allCourses.length; i++) {
         allCourses[i].course.enrolled = false;
+        allCourses[i].course.course_progress = null;
         for (var j = 0; j < enrolledCourses.length; j++) {
           if (allCourses[i].course.id == enrolledCourses[j].id) {
             allCourses[i].course.enrolled = true;
+            allCourses[i].course.course_progress = enrolledCourses[j].course_progress;
           }
         }
         allCoursesWithStatus.push(allCourses[i].course);
@@ -117,47 +119,47 @@ export default (function () {
                 document.getElementById('content').innerHTML = "";
                 let wrapper = document.getElementById("content");
                 try {
-                  if(wrapper != null){
-                      const customContent = document.createElement("div");
-                      var mobiletablet = util.isMobileOrTablet();
-                      let props = {
-                        courses : allCoursesWithSettings,
-                        filterData : allFiltersList,
-                        mobiletablet : mobiletablet
-                      };
-                      let page = createApp(LoggedInLandingPage, props);
-                      customContent.setAttribute("id", "loggedInLandingPage");
-                      customContent.setAttribute("style", "width: 100%; justify-content: center; display: flex;");
-                      let footerNode = document.getElementById("wrapper");
-                      footerNode.parentNode.insertBefore(customContent, footerNode)
-                      document.getElementById('wrapper').innerHTML = '';
-                      $('#wrapper').remove();
-                      document.getElementById('loader').remove();
-                      page.mount("#loggedInLandingPage");
+                  if (wrapper != null) {
+                    const customContent = document.createElement("div");
+                    var mobiletablet = util.isMobileOrTablet();
+                    let props = {
+                      courses: allCoursesWithSettings,
+                      filterData: allFiltersList,
+                      mobiletablet: mobiletablet
+                    };
+                    let page = createApp(LoggedInLandingPage, props);
+                    customContent.setAttribute("id", "loggedInLandingPage");
+                    customContent.setAttribute("style", "width: 100%; justify-content: center; display: flex;");
+                    let footerNode = document.getElementById("wrapper");
+                    footerNode.parentNode.insertBefore(customContent, footerNode)
+                    document.getElementById('wrapper').innerHTML = '';
+                    $('#wrapper').remove();
+                    document.getElementById('loader').remove();
+                    page.mount("#loggedInLandingPage");
                   }
                 } catch (e) {
                   console.log(e);
                 }
               }
               else {
                 try {
-                  if(wrapper != null){
+                  if (wrapper != null) {
                     kpasApi.getHighlightedCourse(function (highlightedCourse) {
                       var highlightedCourseId = highlightedCourse.result.course_id;
                       var allFiltersList = allFilters.result;
                       var allCoursesWithSettings = util.mapCourseSettings(allCoursesWithStatus, allCoursesSettings.result);
 
                       const customContent = document.createElement("div");
                       var highlightedCourse = allCoursesWithSettings.find(course => course.id == highlightedCourseId);
-                      if(highlightedCourse == null || highlightedCourse == undefined) {
+                      if (highlightedCourse == null || highlightedCourse == undefined) {
                         highlightedCourse = allCoursesWithSettings[0];
                       }
                       var mobiletablet = util.isMobileOrTablet();
                       let props = {
-                        courses : allCoursesWithSettings,
-                        filterData : allFiltersList,
-                        highlightedCourse : highlightedCourse,
-                        mobiletablet : mobiletablet
+                        courses: allCoursesWithSettings,
+                        filterData: allFiltersList,
+                        highlightedCourse: highlightedCourse,
+                        mobiletablet: mobiletablet
                       };
                       let page = createApp(NotLoggedInPage, props);
                       customContent.setAttribute("id", "notLoggedInPage");

src/js/modules/util.js

@@ -1,4 +1,4 @@
-import  api from '../api/api.js'
+import api from '../api/api.js'
 import settings from "../settings";
 
 export default (function () {
@@ -14,7 +14,7 @@ export default (function () {
     mapCourseSettings: function (courses, courseSettings) {
       courses.forEach(course => {
         var cc = courseSettings.find(x => x.course_id === course.id)
-        if(cc) {
+        if (cc) {
           course.course_settings = cc
         }
       });
@@ -28,19 +28,19 @@ export default (function () {
     },
 
 
-    isMobileOrTablet: function() {
+    isMobileOrTablet: function () {
       if (navigator.userAgent.match(/Android/i)
-         || navigator.userAgent.match(/webOS/i)
-         || navigator.userAgent.match(/iPhone/i)
-         || navigator.userAgent.match(/iPad/i)
-         || navigator.userAgent.match(/iPod/i)
-         || navigator.userAgent.match(/BlackBerry/i)
-         || navigator.userAgent.match(/Windows Phone/i)) {
+        || navigator.userAgent.match(/webOS/i)
+        || navigator.userAgent.match(/iPhone/i)
+        || navigator.userAgent.match(/iPad/i)
+        || navigator.userAgent.match(/iPod/i)
+        || navigator.userAgent.match(/BlackBerry/i)
+        || navigator.userAgent.match(/Windows Phone/i)) {
         return true;
       }
       else {
-            return false;
-         }
+        return false;
+      }
     },
 
     getPageTitleBeforeColon: function () {
@@ -214,13 +214,13 @@ export default (function () {
       return false;
     },
 
-    isMultilangCourse() { return this.course.kpas.multilang != "NONE"},
-    isNynorskCourse() { return this.course.kpas.multilang == "NN"},
-    isSamiskCourse() { return this.course.kpas.multilang == "SE"},
+    isMultilangCourse() { return this.course.kpas.multilang != "NONE" },
+    isNynorskCourse() { return this.course.kpas.multilang == "NN" },
+    isSamiskCourse() { return this.course.kpas.multilang == "SE" },
     isPrincipal() {
       return (this.isTeacherOrAdmin() || this.isEnrolledWithRole(this.course, settings.principalRoleType));
     },
-    isRoleBasedCourse() {return this.course.kpas.role_support == 1},
+    isRoleBasedCourse() { return this.course.kpas.role_support == 1 },
     isMMOOCLicense() {
       return this.course.kpas.licence == 1;
     },
@@ -239,46 +239,46 @@ export default (function () {
 
     getBannerType() {
       console.log(this.course)
-      if(this.course && this.course.kpas && this.course.kpas.banner_type){
+      if (this.course && this.course.kpas && this.course.kpas.banner_type) {
         return this.course.kpas.banner_type;
       }
       return "NONE";
     },
     getAlertMsg() {
       if (this.course) {
-        if(this.course.kpas.banner_type == "ALERT"){
+        if (this.course.kpas.banner_type == "ALERT") {
           return this.course.kpas.banner_text;
         }
       }
       return "";
     },
     getUnmaintainedMsg() {
       if (this.course) {
-        if(this.course.kpas.banner_type == "UNMAINTAINED"){
+        if (this.course.kpas.banner_type == "UNMAINTAINED") {
           return this.course.kpas.banner_text;
         }
       }
       return "";
     },
     getUnmaintainedSinceDate() {
-      if(this.course){
-        if(this.course.kpas.banner_type == "UNMAINTAINED"){
+      if (this.course) {
+        if (this.course.kpas.banner_type == "UNMAINTAINED") {
           return this.course.kpas.unmaintained_since;
         }
       }
       return null;
     },
     getNotificationMsg() {
       if (this.course) {
-        if(this.course.kpas.banner_type == "NOTIFICATION"){
+        if (this.course.kpas.banner_type == "NOTIFICATION") {
           return this.course.kpas.banner_text;
         }
       }
       return "";
     },
     getFeedbackMsg() {
       if (this.course) {
-        if(this.course.kpas.banner_type == "FEEDBACK"){
+        if (this.course.kpas.banner_type == "FEEDBACK") {
           return this.course.kpas.banner_text;
         }
       }
@@ -300,7 +300,7 @@ export default (function () {
     },
     isMemberOfExpiredCommunity(course, callback) {
       let self = this
-      if(!course) {
+      if (!course) {
         return;
       }
       api.getUserGroupsForCourse(course.id, function (groups) {
@@ -327,6 +327,16 @@ export default (function () {
       return api.getRoles() !== null;
     },
 
+    getCourseUnenrollmentUuid() {
+      const unenrollmentLink = document.querySelector("#self_unenrollment_dialog a.btn-primary.action");
+      if (!unenrollmentLink) return null;
+
+      const hrefValue = unenrollmentLink.getAttribute("href") ?? "";
+      const match = hrefValue.match(/\/self_unenrollment\/([^/]+)/);
+
+      const unenrollmentUuid = match ? match[1] : null;
+      return unenrollmentUuid;
+    },
     getGroupsInfo(groups) {
       var groupsInfo = {};
       for (var i = 0; i < groups.length; i++) {
@@ -467,20 +477,20 @@ export default (function () {
         (key, value) => key === "" ? value : decodeURIComponent(value)
       );
     },
-    updateRightMenuButtons: function() {
-      $("#course_show_secondary > a").each(function() {
+    updateRightMenuButtons: function () {
+      $("#course_show_secondary > a").each(function () {
         var $this = $(this);
         var _href = $this.attr("href");
-        if(_href.includes("/calendar?")){
+        if (_href.includes("/calendar?")) {
           $this.remove();
         }
-        else{
+        else {
           $this.attr("href", _href);
         }
       });
     },
-    removeRecentFeedback: function() {
-      $(".recent_feedback").each(function() {
+    removeRecentFeedback: function () {
+      $(".recent_feedback").each(function () {
         var $this = $(this);
         $this.remove()
       });

src/vue/components/Button.vue

@@ -3,6 +3,7 @@
     :class="[
       'btn',
       { 'btn--filled': isFilled },
+      { 'btn--fullwidth': isFullWidth },
       { 'btn--outlined': isOutlined },
       { 'btn--dropdown': isDropdown },
       { 'btn--sm': size === 'sm' },
@@ -22,12 +23,14 @@ import Icon from './icon/Icon.vue';
 const props = defineProps({
   size: String,
   type: String,
+  fullWidth: Boolean,
 });
 const server = SERVER;
 
 const isFilled = !props.type || props.type === 'submit' || props.type === 'filled' || props.type === 'feideLogin';
 const isOutlined = props.type === 'outlined' || props.type === 'previous' || props.type === 'next';
 const isDropdown = props.type === 'dropdown';
+const isFullWidth = props.fullWidth;
 </script>
 
 <style lang="scss">
@@ -60,11 +63,15 @@ const isDropdown = props.type === 'dropdown';
     }
     &.btn--md {
       padding: 0.5rem 1.375rem 0.5rem 1.375rem;
+      height: 40px; 
     }
     &.btn--lg {
       padding: 0.75rem 1.75rem 0.75rem 1.75rem;
     }
   }
+  &--fullwidth {
+    width: 100%;
+  }
 
   &--outlined {
     background: $color-white;