Merge pull request #49 from os2ulf/feature/OS2UOL-124

Feature/os2 uol 124

components/view-components/EducationalCards.vue

@@ -52,6 +52,7 @@ const determineIcon = (cardLink: string) => {
                     ? card.field_material_file
                     : card?.field_material_url?.url
                 "
+                target="_blank"
               >
                 <span class="educational-materials__card-link-text">
                   {{ card?.field_material_download_text }}
@@ -80,8 +81,6 @@ const determineIcon = (cardLink: string) => {
 
 <style lang="postcss" scoped>
 .educational-materials {
-  margin-bottom: 20px;
-
   &__card-wrapper {
     .row {
       margin-right: -12px;

components/view-components/RegistrationSection.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div class="course__registration">
+    <h2>Tilmelding</h2>
+    <div v-if="props.data.free || props.data.price" class="course__registration__prices">
+      <BaseTag
+        v-if="props.data.free"
+        :data="{ label: 'Gratis' }"
+        color="secondary"
+      />
+      <div
+        v-else-if="props.data.price"
+        v-for="(price, index) in props.data.price"
+        :key="index"
+        class="course__registration__price-item"
+      >
+        <div>
+          {{ price?.field_price }} kr.
+          {{ price?.field_price_settlement_unit?.label }}
+        </div>
+        <div>{{ price?.field_price_vat?.label }}</div>
+      </div>
+    </div>
+    <div v-if="props.data.description" class="course__registration__price-description" v-html="props.data.price_description" />
+    <h4 v-if="props.data.title" class="course__registration__title" v-html="props.data.title" />
+    <div v-if="props.data.description" class="course__registration__description" v-html="props.data.description" />
+    <div v-if="props.data.deadline" class="course__registration__description" v-html="props.data.deadline" />
+    <div v-if="props.data.phone" class="course__registration__phone">
+      Tlf.: {{ props.data.phone }}
+    </div>
+    <div v-if="props.data.email" class="course__registration__email">
+      Email: <a :href="'mailto:' + props.data.email">{{ props.data.email }}</a>
+    </div>
+    <div v-if="props.data.url" class="course__registration__url">
+      <a :href="props.data.url" target="_blank">{{ props.data.url }}</a>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+  .course__registration {
+    text-align: center;
+    padding: 48px var(--grid-gutter-half) @(--md) 96px var(--grid-gutter-half);
+    background: var(--color-secondary-lighten-5);
+
+    & h2 {
+      margin-bottom: 16px;
+    }
+
+    &__title {
+      margin-bottom: 16px;
+      padding-top: 16px @(--md) 32px;
+    }
+
+    &__price-item {
+      margin-bottom: 16px;
+      font-size: 16px @(--md) 22px;
+    }
+  }
+</style>

components/views/courseView.vue

@@ -33,6 +33,20 @@ useHead({
   ],
 });
 
+const registrationData = computed(() => {
+  return {
+    'deadline': props.data?.field_registration_deadline,
+    'description': props.data?.field_registration_description,
+    'email': props.data?.field_registration_email,
+    'phone': props.data?.field_registration_phone,
+    'title': props.data?.field_registration_title,
+    'url': props.data?.field_registration_url,
+    'price': props.data?.field_price,
+    'price_description': props.data?.field_description_of_price,
+    'free': props.data?.field_is_free,
+  }
+});
+
 const practicalInfoData = computed(() => {
   const data = [
     {
@@ -331,19 +345,25 @@ const practicalInfoData = computed(() => {
         </div>
 
         <!-- Section calendar -->
-        <div class="col-xs-12 col-sm-12 col-md-12 course__section-calendar">
-          <div class="course__calendar">
-            <h3>Tilmelding</h3>
-            <p>calendar integration goes here</p>
-          </div>
+        <div
+          v-if="
+            data.field_registration_deadline ||
+            data.field_registration_description ||
+            data.field_registration_email ||
+            data.field_registration_phone ||
+            data.field_registration_title ||
+            data.field_registration_url"
+          class="col-xs-12 col-sm-12 col-md-12 course__section-registration"
+        >
+          <RegistrationSection :data="registrationData" />
         </div>
 
         <!-- Section related articles -->
         <div
           class="col-xs-12 col-sm-12 col-md-12 course__section-related-articles"
         >
           <div class="course__related-articles">
-            <h3>Relaterede forløb</h3>
+            <h2>Relaterede forløb</h2>
             <div>article cards</div>
           </div>
         </div>
@@ -419,14 +439,23 @@ const practicalInfoData = computed(() => {
     padding-top: 48px @(--md) 96px;
   }
 
-  &__section-video,
-  &__section-cards,
-  &__section-calendar,
-  &__section-related-articles {
+  &__section-registration {
+    padding-top: 24px @(--md) 48px;
+    padding-bottom: 24px @(--md) 48px;
+  }
+
+  &__section-cards {
+    padding-top: 24px @(--md) 48px;
+    padding-bottom: 24px @(--md) 48px;
+  }
+
+  &__section-video {
     padding-top: 48px @(--md) 96px;
+    padding-bottom: 24px @(--md) 48px;
   }
 
   &__section-related-articles {
+    padding-top: 24px @(--md) 48px;
     padding-bottom: 48px @(--md) 96px;
   }
 }