Merge pull request #318 from matematikk-mooc/KURSP-875-innlogget-land…

…ing-side Kursp 875 innlogget landing side
matematikk-mooc · Oct 25, 2023 · 31e681d · 31e681d
2 parents 60ea797 + a8a9eaf
commit 31e681d
Show file tree

Hide file tree

Showing 17 changed files with 395 additions and 125 deletions.
diff --git a/src/js/api/kpas-api.js b/src/js/api/kpas-api.js
@@ -6,8 +6,7 @@ export default (function() {
   return {
     _ajax: typeof $ !== 'undefined' ? $ : {},
     _env: typeof ENV !== 'undefined' ? ENV : {},
-    _location: 'https://udir-kpas-api.eu.ngrok.io',
-    _uriPrefix: '/api',
+    _location: KPASAPIURL,
     _defaultError(event, jqxhr, settings, thrownError) {
       console.log(event, jqxhr, settings, thrownError);
     },
@@ -16,7 +15,7 @@ export default (function() {
     _get(options) {
 
 
-      const uri = this._location + this._uriPrefix + options.uri;
+      const uri = this._location + options.uri;
       console.log(uri)
       const params = options.params || {};
       const callback = options.callback;

diff --git a/src/js/modules/enroll.js b/src/js/modules/enroll.js
@@ -1,6 +1,6 @@
+import LoggedInLandingPage from "../../vue/pages/LoggedInLandingPage.vue";
 import NotLoggedInPage from "../../vue/pages/NotLoggedInPage.vue";
 import allcoursescontainer from '../../templates/modules/allcoursescontainer.hbs'
-import allcourseslist from '../../templates/modules/allcourseslist.hbs'
 import api from "../api/api";
 import { createApp } from "vue/dist/vue.runtime.esm-bundler.js";
 import { hrefQueryString } from "../settingsRoot";
@@ -144,56 +144,39 @@ export default (function () {
             enrolledCourses
           );
 
-          var allCoursesWithStatusSorted = util.sortCourses(allCoursesWithStatus);
-          var categorys = util.getCourseCategories(allCoursesWithStatusSorted);
-
-          var coursesCategorized = util.getCoursesCategorized(
-            allCoursesWithStatusSorted,
-            categorys
-          );
+          kpasApi.getAllCourseSettings(function (allCoursesSettings) {
+            kpasApi.getAllFilters(function (allFilters) {
+              var allFiltersList = allFilters.result;
+              var allCoursesWithSettings = util.mapCourseSettings(allCoursesWithStatus, allCoursesSettings.result);
 
             var isAuthenticated = util.isAuthenticated();
-            var courseRegisterText = i18n.LogInCanvas;
             if (isAuthenticated) {
-              for (var i = 0; i < coursesCategorized.length; i++) {
-                const coursesCategory = coursesCategorized[i];
-                const coursesEnrolledAmount = util.filter(
-                  coursesCategory.courses,
-                  function (course) {
-                    return course.enrolled === true
-                  }).length;
-                const coursesAmount = coursesCategory.courses && coursesCategory.courses.length;
-              courseRegisterText = i18n.CourseRegisterWhenAuthenticated;
-              var html = util.renderTemplateWithData(allcourseslist, {
-                queryString: hrefQueryString,
-                title: coursesCategory.title,
-                isAuthenticated: isAuthenticated,
-                courses: coursesCategory.courses,
-                coursesEnrolledAmount: coursesEnrolledAmount,
-                coursesAmount: coursesAmount,
-                coursesRoleBasedAmount: coursesCategory.noOfRoleBasedCourses,
-                coursesPersonalBasedAmount: coursesCategory.noOfPersonalBasedCourses,
-                coursesAmountText: i18n.CoursesAmount(coursesAmount),
-                courseLabel: i18n.Course.toLowerCase(),
-                goToCourse: i18n.GoToCourse,
-                courseRegister: courseRegisterText,
-                openCoursesGroupText: i18n.OpenCoursesGroup,
-                closeCoursesGroupText: i18n.CloseCoursesGroup,
-                YouAreRegisteredToXCoursesText: i18n.YouAreRegisteredToXCourses(coursesEnrolledAmount),
-                index: i
-              });
-              $('.mmooc-all-courses-list').append(html);
-            }
+              document.getElementById('content').innerHTML = "";
+              let wrapper = document.getElementById("application");
+              try {
+                if(wrapper != null){
+                    const customContent = document.createElement("div");
+                    let props = {
+                      courses : allCoursesWithSettings,
+                      filterData : allFiltersList,
+                    };
+                    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)
+                    $('#wrapper').hide();
+                    page.mount("#loggedInLandingPage");
+                }
+              } catch (e) {
+                console.log(e);
+              }
             }
             else {
               try {
-                document.getElementById('content').innerHTML = "";
-                let wrapper = document.getElementById("application");
                 if(wrapper != null){
-                  kpasApi.getAllCourseSettings(function (allCoursesSettings) {
-                    kpasApi.getAllFilters(function (allFilters) {
                     var allFiltersList = allFilters.result;
-                    var allCoursesWithSettings = util.mapCourseSettings(allCourses, allCoursesSettings.result);
+                    var allCoursesWithSettings = util.mapCourseSettings(allCoursesWithStatus, allCoursesSettings.result);
                     const customContent = document.createElement("div");
                     let props = {
                       courses : allCoursesWithSettings,
@@ -206,21 +189,14 @@ export default (function () {
                     footerNode.parentNode.insertBefore(customContent, footerNode)
                     $('#wrapper').hide();
                     page.mount("#notLoggedInPage");
-                    });
-                  });
                 }
               } catch (e) {
                 console.log(e);
               }
             }
             self.handleRegisterButtonClick(isAuthenticated);
-
-
-          // Displays information, that there is no current courses available to enroll
-          if (coursesCategorized.length == 0) {
-            var html = '<p class="text-center">' + i18n.NoCoursesInfo + '</p>';
-            $('.mmooc-all-courses-list').append(html);
-          }
+          });
+        });
 
           self.insertModalAndOverlay();
           self.setClickHandlers();

diff --git a/src/js/modules/menu.js b/src/js/modules/menu.js
@@ -504,6 +504,17 @@ export default (function() {
 
         login.handleLoginButtonClick();
       }
+      else {
+        $('#header').hide();
+        var headerwrapper = document.getElementById("application").children[0];
+        headerwrapper.append(document.createElement("div"));
+        headerwrapper.setAttribute("id", "loggedInHeader");
+        const headerProps = {
+          logged_in: true
+        }
+        let customHeader = createApp(NavBar, headerProps);
+        customHeader.mount("#loggedInHeader");
+      }
     },
     hideRightMenu: function() {
       $('#right-side').hide();

diff --git a/src/js/modules/util.js b/src/js/modules/util.js
@@ -20,9 +20,9 @@ export default (function () {
 
     mapCourseSettings: function (courses, courseSettings) {
       courses.forEach(course => {
-        var cc = courseSettings.find(x => x.course_id === course.course.id)
+        var cc = courseSettings.find(x => x.course_id === course.id)
         if(cc) {
-          course.course.course_settings = cc
+          course.course_settings = cc
         }
       });
       return courses

diff --git a/src/vue/assets/enrolled-green-circle.svg b/src/vue/assets/enrolled-green-circle.svg
diff --git a/src/vue/components/Banner.vue b/src/vue/components/Banner.vue
@@ -1,8 +1,3 @@
-<script setup>
-
-const server = SERVER
-
-</script>
 <template>
   <div class="banner">
     <div class="before-login-image-left">
@@ -11,7 +6,7 @@ const server = SERVER
       />
     </div>
     <div class="caption">
-      <h1>Velkommen til utdanningsdirektoratets kompetanseportal!</h1>
+      <h1>Velkommen til Utdanningsdirektoratets kompetanseportal!</h1>
     </div>
     <div class="before-login-image-right">
       <img
@@ -21,6 +16,11 @@ const server = SERVER
   </div>
 </template>
 
+<script setup>
+const server= SERVER
+
+</script>
+
 <style lang="scss">
 @import '../design/colors.scss';
 

diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
@@ -2,40 +2,58 @@
   <div class="card">
     <div class="card-illustration-box" :class="theme">
       <img
-        class="card-illustration-box-image"
-        :src="courseIllustration"
-        alt="illustrasjon"
+      class="card-illustration-box-image"
+      :src="courseIllustration"
+      alt="illustrasjon"
       />
+      <slot name="closeModalButton"></slot>
     </div>
     <div class="card-content-container">
       <div class="card-content-title">
         <h3> <slot name="title"></slot></h3>
       </div>
       <div class="card-content-description">
+        <p :class="{ description_text: !isModalOpen}">
         <slot name="description"></slot>
+        <slot name="moduleList"></slot>
+      </p>
+      </div>
+      <div>
+        <slot name="filtername"></slot>
+      </div>
+      <div class="card-content-enrolled" v-if="hasGoToCourse">
+        <img class="card-content-enrolled-icon" :src="server +'enrolled-green-circle.svg'"/>
+        <p class="card-content-enrolled-text">
+          <slot name="enrolled"></slot>
+        </p>
       </div>
       <div class="card-content-button-container">
-        <Button :type="'filled'" :size="'md'">
-          <template v-slot:default>
-            <slot name="leftButton"></slot>
-          </template>
-        </Button>
-        <Button :type="'outlined'" :size="'md'">
-          <template v-slot:default>
-            <slot name="rightButton"></slot>
-          </template>
-        </Button>
+        <slot name="leftButton"></slot>
+        <slot name="rightButton"></slot>
+        <slot name="goToCourse"></slot>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="js">
-import Button from './Button.vue';
-
-const server= SERVER
-defineProps(['theme', 'courseIllustration'])
+<script lang="js">
 
+export default {
+  name: 'Card',
+  components: {
+  },
+  props: {
+    theme: String,
+    courseIllustration: String,
+    isModalOpen: Boolean,
+  },
+  data(){
+    return {
+      server: SERVER,
+      hasGoToCourse: this.$slots.goToCourse !== undefined,
+    }
+  }
+}
 </script>
 
 <style lang="scss">
@@ -113,5 +131,34 @@ defineProps(['theme', 'courseIllustration'])
       line-height: 150%;
     }
   }
+  .card-content-enrolled {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+
+  }
+  .card-content-enrolled-text {
+    font-size: 0.875rem;
+    font-family: 'Roboto';
+    font-weight: 400;
+    color: black;
+
+  }
+  .card-content-enrolled-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .description_text {
+    overflow:hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+
 }
 </style>