73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
|
|
import type {
|
|
LearningContentDocumentList,
|
|
MediaLibraryContentBlockValue,
|
|
} from "@/types";
|
|
import LearningContentSimpleLayout from "../layouts/LearningContentSimpleLayout.vue";
|
|
import { onMounted, ref } from "vue";
|
|
import log from "loglevel";
|
|
import { itGetCached } from "@/fetchHelpers";
|
|
|
|
const props = defineProps<{
|
|
content: LearningContentDocumentList;
|
|
}>();
|
|
|
|
type BlockDocument = {
|
|
id: string;
|
|
value: MediaLibraryContentBlockValue;
|
|
};
|
|
|
|
const documents = ref<BlockDocument[]>([]);
|
|
|
|
onMounted(async () => {
|
|
log.debug("DocumentListBlock mounted");
|
|
const response = await itGetCached(`/api/course/page/${props.content.slug}/`);
|
|
documents.value = response.documents;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<LearningContentSimpleLayout :title="content.title" :learning-content="props.content">
|
|
<div class="container-medium">
|
|
<div class="lg:mt-8">
|
|
<div class="my-4">
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<p v-if="content.description" v-html="content.description"></p>
|
|
|
|
<div>
|
|
<ul class="border-t">
|
|
<li
|
|
v-for="item in documents"
|
|
:key="item.id"
|
|
class="flex items-center justify-between border-b py-4"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<!-- div v-if="item.value.icon_url">
|
|
<img class="mr-6 max-h-[70px]" :src="item.value.icon_url" />
|
|
</div-->
|
|
<div>
|
|
<h4 class="text-bold">{{ item.value.title }}</h4>
|
|
<p v-if="item.value.description" class="mb-2">
|
|
{{ item.value.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<MediaLink
|
|
:to="item.value.url"
|
|
:blank="item.value.open_window"
|
|
class="link"
|
|
>
|
|
{{ item.value.link_display_text }}
|
|
</MediaLink>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LearningContentSimpleLayout>
|
|
</template>
|