Merge pull request #553 from matematikk-mooc/aj/DIT-233

DIT-233: Added support for course invite

src/js/api/api.js

@@ -982,6 +982,20 @@ export default (function() {
         params: params
       });
     },
+    postEnrollmentAcceptInvite(courseId, enrollmentId, params, callback) {
+      this._post({
+        callback: callback,
+        uri: `/courses/${courseId}/enrollments/${enrollmentId}/accept`,
+        params: params
+      });
+    },
+    postEnrollmentRejectInvite(courseId, enrollmentId, params, callback) {
+      this._post({
+        callback: callback,
+        uri: `/courses/${courseId}/enrollments/${enrollmentId}/reject`,
+        params: params
+      });
+    },
     getEnrollmentsForSection(sectionId, params, callback) {
       this._get({
         callback: callback,

src/vue/components/Card.vue

@@ -21,7 +21,7 @@
         </ul>
       </header>
       <section class="card-content-description">
-        <div class="card-content-enrolled" v-if="hasGoToCourse">
+        <div class="card-content-enrolled" v-if="hasGoToCourse && !isInvited">
           <CircularProgressBar :percentage="percentageValue" :size="50" />
           <div class="card-content-enrolled-text">
             <p class="card-content-enrolled-count">{{ requirementsCompleted }} av {{ requirementsTotal }} fullført</p>
@@ -55,7 +55,8 @@ export default {
     label: String,
     filters: Array,
     requirementsCompleted: Number,
-    requirementsTotal: Number
+    requirementsTotal: Number,
+    isInvited: Boolean
   },
   data() {
     return {

src/vue/components/CardList.vue

@@ -1,14 +1,15 @@
 
 <template>
   <div class="card-container">
-    <div class="card-instance card-container-wrapper"  v-for="course in courses" :key="course.id">
+    <div class="card-instance card-container-wrapper" v-for="course in courses" :key="course.id">
       <Card class="card-item"
         :theme="course.course_settings ? course.course_settings?.course_category?.category.color_code : 'theme_0'"
         :courseIllustration="course.course_settings ? course.course_settings?.image.path : ''"
         :label="course.name"
         :filters="course.course_settings ? course.course_settings.course_filter : []"
         :requirementsCompleted="course?.course_progress?.requirement_completed_count ?? 0"
         :requirementsTotal="course?.course_progress?.requirement_count ?? 0"
+        :isInvited="isInvitedCourse(course)"
       >
         <template v-slot:new-flag>
           <NewCourseFlag v-if="newCoursesIndicator && newCourseFlag(course)"/>
@@ -17,21 +18,31 @@
         <template v-slot:description>{{ truncateString(course.public_description) }}</template>
 
         <template v-if="course.enrolled" v-slot:enrolled>Påmeldt</template>
+
         <template v-if="authorized && !course.enrolled" v-slot:leftButton>
           <Button :fullWidth="true" :type="'filled'" :size="'md'" @click="enrollToCourse(course.self_enrollment_code)">Meld deg på</Button>
         </template>
+
         <template v-if="!authorized" v-slot:leftButton>
           <RegisterChoice :fullWidth="true" :selfEnrollmentCode="course.self_enrollment_code"></RegisterChoice>
         </template>
+
         <template v-if="(!authorized || !course.enrolled)" v-slot:rightButton>
           <Button :fullWidth="true" :type="'outlined'" :size="'md'" @click="handleModal(course)">Les mer</Button>
         </template>
+
         <template v-if="course.isModalOpen && modules.length > 0" v-slot:moduleList>
           <ModulesList :modules="modules"></ModulesList>
         </template>
+
         <template v-if="course.enrolled" v-slot:goToCourse>
-          <Button :fullWidth="true" :type="'filled'" :size="'md'" @click="goToCourse(course.id)"><p>
-            Gå til kompetansepakke</p></Button>
+          <Button :fullWidth="true" :type="'filled'" :size="'md'" @click="goToCourse(course.id)" v-if="!isInvitedCourse(course)">
+            <p>Gå til kompetansepakke</p>
+          </Button>
+
+          <div class="card-item-invite" v-if="isInvitedCourse(course)">
+            <p>Du har blitt invitert til å delta i denne pakken, gå til Mine Kompetansepakker for å godta eller avslå.</p>
+          </div>
         </template>
       </Card>
 
@@ -66,6 +77,7 @@ import Modal from '../components/modal/Modal';
 import RegisterChoice from './login-choice/RegisterChoice.vue';
 import NewCourseFlag from './NewCourseFlag.vue';
 import { shallowUpdateUrlParameter } from '../utils/url-utils';
+import { isInvitedCourse } from "../utils/filter-courses";
 
 export default {
   name: 'CardList',
@@ -105,6 +117,7 @@ export default {
     console.log(this.courses)
   },
   methods: {
+    isInvitedCourse,
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;
     },
@@ -285,3 +298,28 @@ export default {
   background: map-get($theme_9, background);
 }
 </style>
+
+<style lang="scss">
+  .card-content-button-container button.btn,
+  .card-highlighted-content-button-container button.btn {
+    height: 35px;
+    line-height: 1.4;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 4px 15px;
+    border-radius: 4px;
+
+    p {
+      margin: 0px;
+    }
+  }
+
+  .card-item .card-item-invite p {
+    color: #000 !important;
+    font-family: Roboto;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    margin: 0;
+  }
+</style>

src/vue/pages/MyCoursesPage.vue

@@ -2,29 +2,78 @@
   <div class="my-courses-page">
     <div id="main" class="my-courses-page--content">
       <h1>Mine kompetansepakker</h1>
+
+      <div class="my-courses-invites" v-if="hasInvites">
+        <div class="course-invite" v-for="course in invitedCourses" :key="course.id">
+            <div class="course-invite-head">
+              <p class="course-invite-head-title">{{ course.name }}</p>
+
+              <p class="course-invite-head-description">Du har blitt invitert til å delta i denne pakken. Når du er klar kan du godkjenne eller avvise invitasjonen.</p>
+            </div>
+
+            <div class="course-invite-body">
+              <Button class="kpas-button" :type="'filled'" :size="'sm'" @click="respondToInvite(course.id, true)">Godta invitasjonen</Button>
+
+              <Button class="kpas-button" :type="'outlined'" :size="'sm'" @click="respondToInvite(course.id, false)">Avslå invitasjonen</Button>
+            </div>
+        </div>
+      </div>
+
       <div class="my-courses-page--layout">
-        <CardList :authorized="true" :courses="courses" :newCoursesIndicator=false></CardList>
+        <CardList :authorized="true" :courses="coursesToRender" :newCoursesIndicator="false"></CardList>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
+import Button from '../components/Button.vue';
 import CardList from '../components/CardList.vue';
-export default{
+import { isInvitedCourse } from "../utils/filter-courses";
+import api from "../../js/api/api";
+
+export default {
   name: 'MyCoursesPage',
   components: {
+    Button,
     CardList
   },
+  computed: {
+    coursesToRender(){
+      return this.courses?.filter(course => !isInvitedCourse(course)) ?? [];
+    },
+    invitedCourses() {
+      return this.courses?.filter(course => isInvitedCourse(course)) ?? [];
+    },
+    hasInvites() {
+      return this.courses?.find(course => isInvitedCourse(course));
+    }
+  },
+  methods: {
+    respondToInvite(courseId, accept = false) {
+      const userData = api.getUser();
+      api.getEnrollmentsForCourse(courseId, { "state[]": "invited", "user_id": userData.id }, (invites) => {
+        const enrollmentInvite = invites[0];
+
+        if (accept) {
+          api.postEnrollmentAcceptInvite(courseId, enrollmentInvite.id, {}, () => {
+            location.reload();
+          });
+        } else {
+          api.postEnrollmentRejectInvite(courseId, enrollmentInvite.id, {}, () => {
+            location.reload();
+          });
+        }
+      });
+    }
+  },
   props: {
     courses: Array,
   },
 }
 </script>
 
 <style lang="scss">
-
 .my-courses-page {
     height: 100%;
     width: 100%;
@@ -39,19 +88,72 @@ export default{
 
   .my-courses-page--content {
     width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-left: 1.5rem;
+
+    h1 {
+      margin-bottom: 20px;
+    }
+
     h2 {
       font-size: 2rem;
       margin: 1.5rem 0 1.5rem 0;
     }
   }
+
+  .my-courses-invites {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+    gap: 20px;
+
+    .course-invite {
+      width: 100%;
+      max-width: 450px;
+      display: flex;
+      flex-direction: column;
+      border: 2px solid black;
+      border-radius: .5rem;
+      padding: 20px 30px;
+
+      &:last-child {
+        margin-bottom: 0px;
+      }
+
+      .course-invite-head-title {
+        font-weight: bold;
+        margin: 0px;
+        margin-bottom: 6px;
+        font-size: 20px;
+      }
+
+      .course-invite-head-description {
+        margin: 0px;
+      }
+
+      .course-invite-body {
+        display: flex;
+        flex-wrap: wrap;
+
+        button {
+          margin-top: 20px;
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
   .my-courses-page--layout {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
   }
-
 </style>

src/vue/utils/filter-courses.js

@@ -35,7 +35,8 @@ export function filterCourses(courses, filters){
         coursesToView = filter(courses, categories)
     }
     return coursesToView;
+}
 
-
-
+export function isInvitedCourse(course) {
+    return course?.enrolled_status == "invited";
 }