add typing

This commit is contained in:
Julie Lenaerts 2023-11-09 20:22:31 +01:00
parent 32a103d86a
commit eb8dc441b9
2 changed files with 19 additions and 12 deletions

View File

@ -160,3 +160,11 @@ export interface LocationType {
contactData: "optional" | "required"; contactData: "optional" | "required";
title: TranslatableString; title: TranslatableString;
} }
export interface NewsItem {
id: number;
title: string;
content: string;
startdate: { date: DateTime };
enddate: { date: DateTime | null}
}

View File

@ -27,18 +27,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import {makeFetch} from "ChillMainAssets/lib/api/apiMethods"; import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import Modal from '../../_components/Modal.vue'; // Adjust the import path import Modal from '../../_components/Modal.vue'; // Adjust the import path
import { marked } from 'marked'; import { marked } from 'marked';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { NewsItem } from "ChillMainAssets/types";
const newsItems = ref<NewsItem[]>([])
const selectedArticle = ref<NewsItem | null>(null);
const newsItems = ref([])
const selectedArticle = ref(null);
const showModal = ref(false); const showModal = ref(false);
const openModal = (item) => { const openModal = (item: NewsItem) => {
selectedArticle.value = item; selectedArticle.value = item;
showModal.value = true; showModal.value = true;
}; };
@ -48,11 +47,11 @@ const closeModal = () => {
showModal.value = false; showModal.value = false;
};; };;
const shouldTruncate = (content, maxLength = 100) => { const shouldTruncate = (content: string, maxLength = 100): boolean => {
return content.length > maxLength; return content.length > maxLength;
}; };
const truncateContent = (content, maxLength = 100) => { const truncateContent = (content: string, maxLength = 100): string => {
if (shouldTruncate(content, maxLength)) { if (shouldTruncate(content, maxLength)) {
return content.slice(0, maxLength) + '...'; return content.slice(0, maxLength) + '...';
} else { } else {
@ -60,23 +59,23 @@ const truncateContent = (content, maxLength = 100) => {
} }
}; };
const convertMarkdownToHtml = (markdown) => { const convertMarkdownToHtml = (markdown: string): string => {
const rawHtml = marked(markdown); const rawHtml = marked(markdown);
return DOMPurify.sanitize(rawHtml) return DOMPurify.sanitize(rawHtml)
}; };
const truncateMarkdownContent = (content, maxLength = 100) => { const truncateMarkdownContent = (content: string, maxLength = 100): string => {
const htmlContent = convertMarkdownToHtml(content); const htmlContent = convertMarkdownToHtml(content);
return truncateContent(htmlContent, maxLength); return truncateContent(htmlContent, maxLength);
}; };
const formatDate = (datetime) => { const formatDate = (datetime: { date: string }): string => {
return new Date(datetime.date).toDateString() return new Date(datetime.date).toDateString()
} }
onMounted(() => { onMounted(() => {
makeFetch('GET', '/api/1.0/main/news.json') makeFetch('GET', '/api/1.0/main/news.json')
.then((response) => { .then((response: {results: NewsItem[]}) => {
newsItems.value = response.results newsItems.value = response.results
}) })
.catch((error) => { .catch((error) => {