minor fix

public/js/apps/Cis.js

@@ -136,6 +136,18 @@ const app = Vue.createApp({
             }
         };
     },
+	computed: {
+		isMobile() {
+			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
+			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
+			return smallScreen;// && touchCapable;
+		},
+	},
+	provide() {
+		return {
+			isMobile: this.isMobile
+		}
+	},
     methods: {
         searchfunction: function(searchsettings) {
         	return this.$api.call(ApiSearchbar.searchCis(searchsettings));

public/js/apps/Dashboard/Fhc.js

@@ -238,13 +238,13 @@ const app = Vue.createApp({
 			const smallScreen = window.matchMedia("(max-width: 767px)").matches;
 			const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
 			return smallScreen;// && touchCapable;
-		}	
+		},
 	},
 	provide() {
 		return { // provide injectable & watchable language property
 			language: Vue.computed(() => this.$p.user_language),
 			renderers: Vue.computed(() => this.renderers),
-			isMobile: this.isMobile
+			isMobile: this.isMobile,
 		}	
 	},
 	methods: {

public/js/components/Cis/Cms/News.js

@@ -2,115 +2,137 @@ import Pagination from "../../Pagination/Pagination.js";
 import StudiengangInformation from "./StudiengangInformation/StudiengangInformation.js";
 import BsConfirm from "../../Bootstrap/Confirm.js";
 
-import ApiCms from '../../../api/factory/cms.js';
+import ApiCms from "../../../api/factory/cms.js";
 
 export default {
 	name: "NewsComponent",
-  components: {
-    Pagination,
-	StudiengangInformation,
-  },
-  data() {
-    return {
-      content: null,
-      maxPageCount: 0,
-      page_size: 10,
-	  page:1,
-    };
-  },
-  watch:{
-	'$p.user_language.value':function(sprache){
-		this.fetchNews();
-	}
-  },
-  computed:{
-	sprache: function(){
-		return this.$p.user_language.value;
+	components: {
+		Pagination,
+		StudiengangInformation,
 	},
-  },
-  methods: {
-		fetchNews() {
-			return this.$api
-				.call(ApiCms.getNews(this.page, this.page_size, this.sprache))
-				.then(res => res.data)
-				.then(result => {
-					this.content = result;
+	inject: ["isMobile"],
+	data() {
+		return {
+			content: null,
+			maxPageCount: 0,
+			page_size: 10,
+			page: 1,
+		};
+	},
+	watch: {
+		"$p.user_language.value": function (sprache) {
+			this.fetchNews();
+		},
+	},
+	computed: {
+		sprache: function () {
+			return this.$p.user_language.value;
+		},
+	},
+	methods: {
+		async fetchNews() {
+			let newsResponse = await this.$api.call(
+				ApiCms.getNews(this.page, this.page_size, this.sprache),
+			);
+			this.content = newsResponse.data;
 
-					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));
+			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(() => {
-								});
-						});
-					});
-					document.querySelectorAll("#cms [data-href]").forEach((el) => {
-						el.href = el.dataset.href.replace(
-							/^ROOT\//,
-							FHC_JS_DATA_STORAGE_OBJECT.app_root
-						);
-					});
-					Vue.nextTick(()=>{
-						document.querySelectorAll(".card-header").forEach((el) => {
-							el.classList.add("fhc-primary");
-						});
-						document.querySelectorAll(".row").forEach((el) => {
-							el.classList.add("w-100");
-							el.classList.add("align-items-center");
-							
-						});
-						document.querySelectorAll(".row h2").forEach((el) => {
-							el.classList.add("mb-0");
-						});
+								.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,
+				);
+			});
 
-					})
+			await this.$nextTick();
+			this.formatExternalHtml();
+		},
+		async loadNewPageContent(data) {
+			let newsResponse = await this.$api.call(
+				ApiCms.getNews(data.page, data.rows),
+			);
+			this.content = newsResponse.data;
+
+			await this.$nextTick();
+
+			this.formatExternalHtml();
+		},
+		formatExternalHtml() {
+			document
+				.querySelectorAll(".news-list-item .card-header")
+				.forEach((el) => {
+					el.classList.add("fhc-primary");
+				});
+			document.querySelectorAll(".news-list-item .row").forEach((el) => {
+				el.classList.add("w-100");
+				el.classList.add("align-items-center");
+			});
+			document
+				.querySelectorAll(".news-list-item .row h2")
+				.forEach((el) => {
+					el.classList.add("mb-0");
 				});
 		},
-		loadNewPageContent(data) {
-			this.$api
-				.call(ApiCms.getNews(data.page, data.rows))
-				.then(res => res.data)
-				.then(result => {
-					this.content = result;
-					
-				});
-		}
-  },
-  created() {
-    this.fetchNews();
+		afterPageUpdated(event) {
+			this.page = event.page;
+			this.page_size = event.rows;
+			this.$refs.newsPageHeading.scrollIntoView({block: 'end'});
+			this.loadNewPageContent(event);
+		},
+	},
+	created() {
+		this.fetchNews();
 
 		this.$api
 			.call(ApiCms.getNewsRowCount())
-			.then(res => res.data)
-			.then(result => {
+			.then((res) => res.data)
+			.then((result) => {
 				this.maxPageCount = result;
 			});
-  },
-  template: /*html*/ `
-  	<h2 class="fhc-primary-color">News</h2>
-	<hr/>
-	<pagination v-show="content?true:false" :page_size="page_size"  @page="page=$event.page; loadNewPageContent($event)" :maxPageCount="maxPageCount">
-	</pagination>
-	<div class="container-fluid mt-4">
-		<div class="row">
-			<div class="col" v-html="content">
-			</div>
-			<div class="col-auto">
-				<div style="width:15rem">
-					<studiengang-information></studiengang-information>
+	},
+	template: /*html*/ `
+	<div :class="{'pb-3': isMobile}" class="overflow-x-hidden">
+  		<h2 ref="newsPageHeading" class="fhc-primary-color">News</h2>
+		<hr/>
+		<pagination
+			v-show="content?true:false"
+			:page="page"
+			:page_size="page_size"
+			@pageUpdated="afterPageUpdated($event)"
+			:maxPageCount="maxPageCount"
+		></pagination>
+		<div class="container-fluid mt-4">
+			<div class="row">
+				<div class="col" v-html="content">
+				</div>
+				<div class="col-auto">
+					<div style="width:15rem">
+						<studiengang-information></studiengang-information>
+					</div>
 				</div>
 			</div>
 		</div>
+		<pagination
+			v-show="content?true:false"
+			:page="page"
+			:page_size="page_size"
+			@pageUpdated="afterPageUpdated($event)"
+			:maxPageCount="maxPageCount"
+		></pagination>
 	</div>
-	<pagination v-show="content?true:false" :page_size="page_size"  @page="loadNewPageContent" :maxPageCount="maxPageCount">
-	</pagination>
     `,
 };

public/js/components/Pagination/Pagination.js

@@ -1,37 +1,60 @@
 export default {
-  components: {
-    paginator: primevue.paginator,
-  },
-  emits: ["update:rows"],
-  props: {
-    maxPageCount: {
-      type: Number,
-      default: 0,
-    },
-    page_size: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    newPageEvent: function (data) {
-      
-    },
-  },
-  mounted() {},
-  template: /*html*/ `
- 	<!-- Desktop -->
+	components: {
+		paginator: primevue.paginator,
+	},
+	emits: ["pageUpdated"],
+	props: {
+		maxPageCount: {
+			type: Number,
+			default: 0,
+		},
+		page_size: {
+			type: Number,
+			required: true,
+		},
+		page: {
+			type: Number | null,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			first: 0,
+			rowsPerPageOptions: [10, 20, 30],
+		};
+	},
+	watch: {
+		page(newValue) {
+			this.first = (newValue - 1) * this.$props.page_size;
+		},
+	},
+	methods: {
+		afterPageUpdated(data) {
+			this.$emit("pageUpdated", { ...data, page: data.page + 1 });
+			this.first = data.page * this.$props.page_size;
+		},
+	},
+	template: /*html*/ `
+	<!-- Desktop -->
 	<div class="d-none d-md-block">
-		<paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" >
-		</paginator>
+        <paginator 
+			v-model:rows="page_size"
+			v-model:first="first"
+			@page="afterPageUpdated($event)"
+			:totalRecords="maxPageCount"
+			:rowsPerPageOptions="rowsPerPageOptions"
+		></paginator>
 	</div>
 	<!-- Mobile -->
 	<div class="d-block d-md-none">
-		<paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown">
-		</paginator>
+		<paginator
+			v-model:rows="page_size"
+			v-model:first="first"
+			@page="afterPageUpdated($event)"
+			:totalRecords="maxPageCount"
+			:rowsPerPageOptions="rowsPerPageOptions"
+			template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+		></paginator>
 	</div>
   `,
 };