implementing frontend pagination for components

application/controllers/CisHtml/Cms.php

@@ -60,14 +60,19 @@ class Cms extends FHC_Controller
 	 * @return void
 	 */
 	public function news($infoscreen = false, $studiengang_kz = null, $semester = null, $mischen = true, $titel = '', $edit = false, $sichtbar = true)
+	{
+		$this->load->view('CisHtml/Cms/Content', ['infoscreen' => $infoscreen, 'studiengang_kz' => $studiengang_kz, 'semester' => $semester, 'mischen' => $mischen, 'titel' => $titel, 'edit' => $edit, 'sichtbar' => $sichtbar]);
+	}
+
+	public function getNews($infoscreen = false, $studiengang_kz = null, $semester = null, $mischen = true, $titel = '', $edit = false, $sichtbar = true)
 	{
 		$page = intval($this->input->get('page', true));
 		$pagination_size = 10;
 		$news = $this->cmslib->getNews($infoscreen, $studiengang_kz, $semester, $mischen, $titel, $edit, $sichtbar, $page, $pagination_size);
 
-		if (isError($news))
-			return $this->load->view('CisHtml/Error', ['error' => getError($news)]);
-
-		$this->load->view('CisHtml/Cms/Content', ['content' => getData($news)]);
+		if (isError($news)) {
+			echo json_encode(getError($news));
+		}
+		echo json_encode(getData($news));
 	}
 }

application/models/content/News_model.php

@@ -55,15 +55,15 @@ class News_model extends DB_Model
 	 */
 	public function getNewsWithContent($sprache, $studiengang_kz, $semester, $fachbereich_kurzbz = null, $sichtbar = true, $maxalter = 0, $page = 1, $page_size = 10, $all = false, $mischen = true)
 	{
-		if (isset($page) && is_numeric($page) && isset($page_size) && is_numeric($page_size)) {
-			if ($page > 0 && $page_size > 0) {
-				$maxPageCount = $this->getMaxPageCount($page_size);
-				if ($maxPageCount) {
-					$page = $page % $maxPageCount;
-				}
-				$offset = $page * $page_size;
-				$this->addLimit($page_size, $offset);
+		if (isset($page) && is_numeric($page) && isset($page_size) && is_numeric($page_size) && $page > 0 && $page_size > 0) {
+
+			$maxPageCount = $this->getMaxPageCount($page_size);
+			if ($maxPageCount) {
+				$page = $page % $maxPageCount;
 			}
+			$offset = $page * $page_size;
+			$this->addLimit($page_size, $offset);
+
 		} else {
 			$this->addLimit($page_size);
 		}

application/views/CisHtml/Cms/Content.php

@@ -1,5 +1,6 @@
 <?php
 $includesArray = array(
+	'primevue3' => true,
 	'customJSModules' => ['public/js/apps/Cis/Cms.js'],
 	'customCSSs' => [
 		'public/css/Cis4/Cms.css',
@@ -11,8 +12,8 @@ $this->load->view('templates/CISHTML-Header', $includesArray);
 ?>
 
 <div id="cms">
-	<?= $content; ?>
+	<content />
+
 </div>
 
-<?php $this->load->view('templates/CISHTML-Footer', $includesArray); ?>
-
+<?php $this->load->view('templates/CISHTML-Footer', $includesArray); ?>

public/js/apps/Cis/Cms.js

@@ -1,20 +1,38 @@
 import BsConfirm from "../../components/Bootstrap/Confirm.js";
+//import Pagination from "../../components/Pagination/Pagination.js";
+import Content from "../../components/Cis/Cms/Content.js";
+import Fhcapi from "../api/fhcapifactory.js";
 
-Vue.createApp({
-	mounted() {
-		document.querySelectorAll('#cms [data-confirm]').forEach(el => {
-			el.addEventListener('click', evt => {
-				evt.preventDefault();
-				BsConfirm.popup(el.dataset.confirm).then(() => {
-					Axios.get(el.href).then(res => {
-						// TODO(chris): check for success then show message and/or reload
-						location = location;
-					}).catch(err => console.error('ERROR:', err));
-				}).catch(()=>{});
-			});
-		});
-		document.querySelectorAll('#cms [data-href]').forEach(el => {
-			el.href = el.dataset.href.replace(/^ROOT\//, FHC_JS_DATA_STORAGE_OBJECT.app_root);
-		});
-	}
-}).mount('#cms [data-confirm], #cms [data-href]');
+Vue.$fhcapi = Fhcapi;
+
+const app = Vue.createApp({
+  components: {
+    Content,
+  },
+  mounted() {
+    document.querySelectorAll("#cms [data-confirm]").forEach((el) => {
+      el.addEventListener("click", (evt) => {
+        evt.preventDefault();
+        BsConfirm.popup(el.dataset.confirm)
+          .then(() => {
+            Axios.get(el.href)
+              .then((res) => {
+                // TODO(chris): check for success then show message and/or reload
+                location = location;
+              })
+              .catch((err) => console.error("ERROR:", err));
+          })
+          .catch(() => {});
+      });
+    });
+    document.querySelectorAll("#cms [data-href]").forEach((el) => {
+      el.href = el.dataset.href.replace(
+        /^ROOT\//,
+        FHC_JS_DATA_STORAGE_OBJECT.app_root
+      );
+    });
+  },
+});
+app.use(primevue.config.default, { zIndex: { overlay: 9999 } });
+app.mount("#cms");
+//#cms [data-confirm], #cms [data-href]

public/js/apps/api/cms.js

@@ -0,0 +1,14 @@
+export default {
+  getNews: function (page = 1, pageSize = 10) {
+    const url =
+      FHC_JS_DATA_STORAGE_OBJECT.app_root +
+      FHC_JS_DATA_STORAGE_OBJECT.ci_router +
+      "/CisHtml/Cms/getNews";
+    return axios.get(url, {
+      params: {
+        page,
+        pageSize,
+      },
+    });
+  },
+};

public/js/apps/api/fhcapifactory.js

@@ -1,5 +1,7 @@
 import Search from "./search.js";
+import Cms from "./cms.js";
 
 export default {
-    "Search": Search
+    "Search": Search,
+    "Cms": Cms,
 };

public/js/components/Cis/Cms/Content.js

@@ -0,0 +1,28 @@
+import Pagination from "../../Pagination/Pagination.js";
+
+export default {
+  components: {
+    Pagination,
+  },
+  data() {
+    return {
+      content: null,
+    };
+  },
+  methods: {
+    loadNewPageContent: function (data) {
+      Vue.$fhcapi.Cms.getNews(data.page).then((result) => {
+        this.content = result.data;
+      });
+    },
+  },
+  created() {
+    Vue.$fhcapi.Cms.getNews().then((result) => {
+      this.content = result.data;
+    });
+  },
+  template: /*html*/ `
+    <pagination @page="loadNewPageContent">
+    <div v-html="content"></div>
+    </pagination>`,
+};

public/js/components/Pagination/Pagination.js

@@ -0,0 +1,26 @@
+export default {
+  components: {
+    paginator: primevue.paginator,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    newPageEvent: function (data) {
+      //console.log("hier", data.page);
+    },
+  },
+  mounted() {
+    console.log("pagination mounted");
+  },
+  template: /*html*/ `
+    
+  
+    <paginator @page="(page)=>$emit('page',{...page, page:page.page+1})" :rows="1"  :totalRecords="120" ></paginator>
+    <slot>
+    NO CONTENT WAS PROVIDED
+    </slot>
+    <paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></paginator>
+
+  `,
+};