From f4176ebcdabea93dcd05f32a32ddc281d60e3092 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 25 Jun 2024 14:18:11 +0200
Subject: [PATCH] adds the content of the news to the dashboard items and makes
 them scrollable through css classes

---
 .../controllers/api/frontend/v1/Cms.php       |  1 +
 public/css/components/dashboard.css           |  2 ++
 public/css/components/dashboard/news.css      | 24 +++++++++++++
 public/js/components/DashboardWidget/News.js  | 36 +++++++++++++++----
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 public/css/components/dashboard/news.css

diff --git a/application/controllers/api/frontend/v1/Cms.php b/application/controllers/api/frontend/v1/Cms.php
index 07a705e49..7aad344d6 100644
--- a/application/controllers/api/frontend/v1/Cms.php
+++ b/application/controllers/api/frontend/v1/Cms.php
@@ -118,6 +118,7 @@ class Cms extends FHCAPI_Controller
         $this->load->model('content/news_model', 'NewsModel');
         
 		$news_content_ids = $this->NewsModel->getNewsContentIDs($limit);
+		$this->addMeta("content_ids",$news_content_ids);
         $news_content = array();
 
 		if(isError($news_content_ids))
diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index 9da199442..67dd9cf3f 100755
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -1,4 +1,6 @@
 @import './calendar.css';
+@import './dashboard/news.css';
+
 .empty-tile-hover {
 	height: 100%;
 	width: 100%;
diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
new file mode 100644
index 000000000..93718b819
--- /dev/null
+++ b/public/css/components/dashboard/news.css
@@ -0,0 +1,24 @@
+/* .widgets-news .card-header {
+    flex-direction: column;
+    align-items: flex-start !important;
+    
+} */
+
+:root{
+    --news-widget-height: 1;
+}
+
+.widgets-news .news-content > div,
+.widgets-news .news-content .row:nth-child(1),
+.widgets-news .news-content .news-list,
+.widgets-news .news-content .news-list-item,
+.widgets-news .news-content .card-body
+{
+    height: 100%;
+}
+
+.widgets-news .card-body{
+
+    /*max-height: calc(var(--news-widget-height)*var(--fhc-dg-row-height));  */
+    overflow:scroll;
+} 
\ No newline at end of file
diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js
index 8cdacd66f..f597fea10 100755
--- a/public/js/components/DashboardWidget/News.js
+++ b/public/js/components/DashboardWidget/News.js
@@ -36,6 +36,23 @@ export default {
     
 		this.$emit('setConfig', false);
 	},
+  mounted(){
+    
+    this.$nextTick(() =>{
+
+      console.log(this.$refs.htmlContent,"this is the html content");
+      /* //console.log(this.$refs.htmlContent,"this is the refs content");
+      let newsItems = document.getElementsByClassName("news-list");
+      console.log(newsItems,"i am printing something");
+      for(let item of newsItems){
+        //console.log(item,"this is the item");
+        item.style.maxHeight = "100px";
+        item.style.overflow = "scroll";
+      } */
+    });
+    
+     
+  },
 	methods: {
 		setSingleNews(singleNews){
 			this.singleNews = singleNews;
@@ -43,6 +60,7 @@ export default {
 		}
 	},
 	template: /*html*/`<div class="widgets-news w-100 h-100">
+  
       <div class="d-flex flex-column h-100">
       <div class="d-flex">
         <header><b>Top News</b></header>
@@ -60,31 +78,37 @@ export default {
         </div>
       </div>
       <div v-else-if="width > 1 && height === 1" class="h-100" :class="'row row-cols-' + width">
-        <div v-for="news in newsList" :key="news.id">
+        <div class="h-100" v-for="news in newsList" :key="news.id">
             <div class="card h-100">
-				<div class="card-body">
+            <div class="news-content h-100" :style="'--news-widget-height: '+height" ref="htmlContent" ><div v-html="news.content"></div></div>
+            <!--<div class="card-body">
 				  <a href="#newsModal" class="card-title h5 stretched-link" @click="setSingleNews(news)">{{ news.betreff }}</a><br>
 				  <span class="small text-muted">{{ formatDateTime(news.insertamum) }} </span>
 				  <p class="card-text pt-3" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">{{ news.text }}</p>
-				</div>       
+				</div>-->       
             </div>
           </div>
  		</div>
        <div v-else class="h-100" :class="'row row-cols-' + width">
-        <div v-for="news in newsList" :key="news.id">
+        <div class="h-100" v-for="news in newsList" :key="news.id">
             <div class="card h-100">
-                <img :src="placeHolderImgURL" class="card-img-top">
+            <!-- alte variante um die News anzuzeigen
+            <img :src="placeHolderImgURL" class="card-img-top">
                 <div class="card-footer"><span class="card-subtitle small text-muted">{{ formatDateTime(news.insertamum) }}</span></div>
                 <div class="card-body">
-                  <a href="#newsModal" class="card-title h5 stretched-link" @click="setSingleNews(news)">{{ news.betreff }}</a><br>
+                <p>this is a test</p>  
+                <a href="#newsModal" class="card-title h5 stretched-link" @click="setSingleNews(news)">{{ news.betreff }}</a><br>
                   <p class="card-text pt-3">{{ news.text }}</p>
                 </div>
+            -->
+                <div class="news-content h-100" :style="'--news-widget-height: '+height" ref="htmlContent" v-html="news.content"></div>
             </div>
           </div>
       </div>
 </div>
 </div>
 
+
   <!-- News Modal -->
   <BsModal ref="newsModal" id="newsModal" dialog-class="modal-lg">
     <template #title>