From cd793d684254a895b2c2b6e9a490034ad331f3fb Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 9 Nov 2023 19:07:35 +0100
Subject: [PATCH] Convert markdown into html + minor style adjustments

---
 .../ChillMainBundle/Entity/NewsItem.php       |  4 +++
 .../HomepageWidget/DashboardWidgets/News.vue  | 36 ++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Entity/NewsItem.php b/src/Bundle/ChillMainBundle/Entity/NewsItem.php
index 4febb9d98..35a08c0ff 100644
--- a/src/Bundle/ChillMainBundle/Entity/NewsItem.php
+++ b/src/Bundle/ChillMainBundle/Entity/NewsItem.php
@@ -59,11 +59,15 @@ class NewsItem implements TrackCreationInterface, TrackUpdateInterface
 
     /**
      * @ORM\Column(type="date_immutable", nullable=false)
+     *
+     * @Groups({"read"})
      */
     private ?\DateTimeImmutable $startDate = null;
 
     /**
      * @ORM\Column(type="date_immutable", nullable=true, options={"default": null})
+     *
+     * @Groups({"read"})
      */
     private ?\DateTimeImmutable $endDate = null;
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
index d6e607810..679eed8b4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
@@ -5,15 +5,20 @@
             <li v-for="item in newsItems" :key="item.id">
                 <h2>{{ item.title }}</h2>
                 <div class="content" v-if="shouldTruncate(item.content)">
-                    {{ truncateContent(item.content) }}
+                    <div v-html="truncateMarkdownContent(item.content)"></div>
                     <span class="read-more" @click="() => openModal(item)">Read more</span>
                 </div>
                 <div class="content" v-else>
-                    {{ item.content }}
+                    <div v-html="convertMarkdownToHtml(item.content)"></div>
                 </div>
                 <modal v-if="showModal" @close="closeModal">
-                    <template #header>{{ item.title }}</template>
-                    <template #body>{{ item.content }}</template>
+                    <template #header>
+                        <p class="news-title">{{ item.title }}</p>
+                    </template>
+                    <template #body>
+                        <p class="news-date">{{ formatDate(item.startdate) }}</p>
+                        <div v-html="convertMarkdownToHtml(item.content)"></div>
+                    </template>
                 </modal>
             </li>
         </ul>
@@ -24,6 +29,7 @@
 import { onMounted, ref } from 'vue'
 import {makeFetch} from "ChillMainAssets/lib/api/apiMethods";
 import Modal from '../../_components/Modal.vue'; // Adjust the import path
+import { marked } from 'marked';
 
 
 const newsItems = ref([])
@@ -52,6 +58,19 @@ const truncateContent = (content, maxLength = 100) => {
     }
 };
 
+const convertMarkdownToHtml = (markdown) => {
+    return marked(markdown);
+};
+
+const truncateMarkdownContent = (content, maxLength = 100) => {
+    const htmlContent = convertMarkdownToHtml(content);
+    return truncateContent(htmlContent, maxLength);
+};
+
+const formatDate = (datetime) => {
+    return new Date(datetime.date).toDateString()
+}
+
 onMounted(() => {
     makeFetch('GET', '/api/1.0/main/news.json')
         .then((response) => {
@@ -103,4 +122,13 @@ button {
     color: #3498db; /* Adjust the color as needed */
     cursor: pointer;
 }
+
+.news-date {
+    font-style: italic;
+}
+
+.news-title {
+    font-weight: bold;
+    text-transform: uppercase;
+}
 </style>