Merge pull request #89 from os2ulf/feature/OS2UOL-129

Feature/os2 uol 129
os2ulf · Jul 1, 2024 · 732c8f6 · 732c8f6
2 parents 504b54a + 3e39424
commit 732c8f6
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 84 deletions.
diff --git a/components/globals/SiteTracking.vue b/components/globals/SiteTracking.vue
@@ -14,23 +14,25 @@ if (settingsDataStore.settingsData === null) {
   settingsDataStore.setSettingsData(data.value.settings);
 }
 
-const scriptSrcFull = ref(data.value?.settings.site_tracking_script.trim());
-
-const extractScriptSrc = (scriptString: string) => {
-  const srcMatch = scriptString.match(/src=['"]?([^'"> ]+)['"]?/i);
-  return srcMatch ? srcMatch[1] : '';
-};
-
-let scriptSrc = extractScriptSrc(scriptSrcFull.value);
-
-useHead({
-  script: [
-    {
-      src: scriptSrc,
-      async: true,
-    },
-  ],
-});
+if (data.value?.settings.site_tracking_script !== null) {
+  const scriptSrcFull = ref(data.value?.settings.site_tracking_script.trim());
+
+  const extractScriptSrc = (scriptString: string) => {
+    const srcMatch = scriptString.match(/src=['"]?([^'"> ]+)['"]?/i);
+    return srcMatch ? srcMatch[1] : '';
+  };
+
+  let scriptSrc = extractScriptSrc(scriptSrcFull.value);
+
+  useHead({
+    script: [
+      {
+        src: scriptSrc,
+        async: true,
+      },
+    ],
+  });
+}
 </script>
 
 <template></template>
diff --git a/components/view-components/KontaktProvider.vue b/components/view-components/KontaktProvider.vue
@@ -5,12 +5,17 @@ const props = defineProps({
     required: false,
     default: null,
   },
+  type: {
+    type: String,
+    required: false,
+    default: '',
+  },
 });
 </script>
 
 <template>
   <div class="contact">
-    <h3 class="contact__title">Kontakt udbyder</h3>
+    <h3 class="contact__title">Kontakt {{ props.type }}</h3>
     <div class="contact__item-container">
       <div
         class="contact__item-section"
@@ -19,25 +24,27 @@ const props = defineProps({
       >
         <div class="contact__heading-wrapper">
           <div class="contact__person-heading">
-            <h4>
-              {{ person?.field_title }} -
+            <h4 v-if="person?.field_title || person?.field_name">
+              {{ person?.field_title ? person?.field_title + ' - ' : '' }}
               {{ person?.field_name }}
             </h4>
-            <div class="contact__contact-hours">
+            <div class="contact__contact-hours" v-if="person?.field_office_availability_text">
               Træffetid:
               {{ person?.field_office_availability_text }}
             </div>
           </div>
 
           <div class="contact__button-wrapper">
             <a
+              v-if="person?.field_email"
               :href="'mailto:' + person?.field_email"
               class="button button--primary contact__button"
             >
               <NuxtIcon class="contact__icon" name="envelope-alt" filled />
               {{ person?.field_email }}
             </a>
             <a
+              v-if="person?.field_phone"
               :href="'tel:' + person?.field_phone"
               class="button button--primary contact__button"
             >

diff --git a/components/view-components/PracticalInformation.vue b/components/view-components/PracticalInformation.vue
@@ -76,29 +76,16 @@ const props = defineProps({
 
         <!-- User Profile element -->
         <div v-else-if="item.type === 'user_profile'">
-          <div class="practical-information__item-container">
-            <div class="practical-information__item-heading">
+          <div class="practical-information__item-container practical-information__item-container--profile">
+            <div class="practical-information__item-heading practical-information__item-heading--profile">
               {{ item.title }}
             </div>
-          </div>
 
-          <div class="practical-information__user-profile-content-wrapper">
-            <slot></slot>
-          </div>
-
-          <div class="practical-information__user-profile-button">
-            <BaseButton
-              v-if="props.userProfilePage?.hasContactsData"
-              :button-data="{
-                title: props.userProfilePage.roles?.includes('corporation')
-                  ? 'Kontakt virksomhed'
-                  : props.userProfilePage.roles?.includes('course_provider')
-                    ? 'Kontakt udbyder'
-                    : '',
-              }"
-              @click="scrollTo('contact__section')"
-              class="button button--secondary button--secondary--ghost"
-            />
+            <div class="practical-information__item-value practical-information__item-value--profile">
+              <div v-for="(content, index) in item.content" :key="index">
+                <div v-if="content" v-html="content"></div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -207,6 +194,20 @@ const props = defineProps({
       </div>
     </div>
     <!-- Practical information data for loop END -->
+    <div class="practical-information__user-profile-button">
+      <BaseButton
+        v-if="props.userProfilePage?.hasContactsData"
+        :button-data="{
+          title: props.userProfilePage.roles?.includes('corporation')
+            ? 'Kontakt virksomhed'
+            : props.userProfilePage.roles?.includes('course_provider')
+              ? 'Kontakt udbyder'
+              : '',
+        }"
+        @click="scrollTo('contact__section')"
+        class="button button--secondary button--secondary--ghost"
+      />
+    </div>
   </div>
 </template>
 
@@ -232,12 +233,21 @@ const props = defineProps({
     width: 50%;
     font-weight: 700;
     font-family: var(--heading-font-family);
+
+    &--profile {
+      width: 100%;
+      margin-bottom: 4px;
+    }
   }
 
   &__item-container {
     padding-top: 12px;
     display: flex;
     justify-content: space-between;
+
+    &--profile {
+      flex-direction: column;
+    }
   }
 
   &__item-value {
@@ -248,6 +258,10 @@ const props = defineProps({
     overflow-wrap: break-word;
     hyphens: auto;
 
+    &--profile {
+      width: 100%;
+    }
+
     &--link {
       color: var(--color-primary);
       border-bottom: 1px solid transparent;
@@ -371,5 +385,14 @@ const props = defineProps({
   &__user-provider-logo {
     margin-bottom: 22px;
   }
+
+  :deep(a:not(.button)) {
+    color: var(--color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 </style>