diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js index c88a47a35..39fde01a2 100644 --- a/public/js/apps/Cis.js +++ b/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)); diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js index 140c76402..c9c81cddb 100644 --- a/public/js/apps/Dashboard/Fhc.js +++ b/public/js/apps/Dashboard/Fhc.js @@ -233,18 +233,11 @@ const app = Vue.createApp({ renderers: null, }), components: {}, - computed: { - isMobile() { - const smallScreen = window.matchMedia("(max-width: 767px)").matches; - const touchCapable = ("ontouchstart" in window) || navigator.maxTouchPoints > 0; - return smallScreen;// && touchCapable; - } - }, + inject: ["isMobile"], provide() { return { // provide injectable & watchable language property language: Vue.computed(() => this.$p.user_language), renderers: Vue.computed(() => this.renderers), - isMobile: this.isMobile } }, methods: { diff --git a/public/js/components/Cis/Cms/News.js b/public/js/components/Cis/Cms/News.js index bf17666a2..bc800094a 100644 --- a/public/js/components/Cis/Cms/News.js +++ b/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*/ ` -

News

-
- - -
-
-
-
-
-
- + }, + template: /*html*/ ` +
+

News

+
+ +
+
+
+
+
+
+ +
+
- - `, }; diff --git a/public/js/components/Pagination/Pagination.js b/public/js/components/Pagination/Pagination.js index 1a2b6fe0f..8198f3e64 100644 --- a/public/js/components/Pagination/Pagination.js +++ b/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*/ ` - + 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*/ ` +
- - +
- - +
`, };