From 9890f6aade4a6d3c7dadf068653362ef82a2baba Mon Sep 17 00:00:00 2001
From: adisposkofh <ma1434@technikum-wien.at>
Date: Mon, 20 Apr 2026 16:58:43 +0200
Subject: [PATCH] fixed issue: context menu appearing on vue datepicker single
 click in mobile

---
 public/js/apps/Cis.js                         | 12 +++++
 public/js/apps/Dashboard/Fhc.js               |  9 +---
 .../js/components/Cis/Raumsuche/Raumsuche.js  | 50 ++++++++++---------
 3 files changed, 39 insertions(+), 32 deletions(-)

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/Raumsuche/Raumsuche.js b/public/js/components/Cis/Raumsuche/Raumsuche.js
index 365da4911..bb8bf1e85 100644
--- a/public/js/components/Cis/Raumsuche/Raumsuche.js
+++ b/public/js/components/Cis/Raumsuche/Raumsuche.js
@@ -3,14 +3,12 @@ import VueDatePicker from '../../vueDatepicker.js.php';
 import ApiOrt from '../../../api/factory/ort.js'
 export const Raumsuche =  {
 	name: "Raumsuche",
-	props: {
-		
-	},
 	components: {
 		VueDatePicker,
 		CoreFilterCmpt,
 		InputNumber: primevue.inputnumber,
 	},
+	inject: ["isMobile"],
 	data() {
 		return {
 			phrasenPromise: null,
@@ -73,6 +71,11 @@ export const Raumsuche =  {
 			}
 			]};
 	},
+	computed: {
+		isDarkMode(){
+			return this.$theme.theme_name.value == 'dark';
+		}
+	},
 	methods: {
 		tableResolve(resolve) {
 			this.tableBuiltResolve = resolve
@@ -178,11 +181,6 @@ export const Raumsuche =  {
 			
 		}
 	},
-	computed: {
-		isDarkMode(){
-			return this.$theme.theme_name.value == 'dark';
-		}
-	},
 	created() {
 		this.phrasenPromise = this.$p.loadCategory(['rauminfo', 'global'])
 		this.phrasenPromise.then(()=> {this.phrasenResolved = true})
@@ -196,39 +194,43 @@ export const Raumsuche =  {
 	<div class="row">
 		<div class="col-12 col-lg-2">
 			<VueDatePicker
-				:dark="isDarkMode"
+				@contextmenu="(e) => {if (isMobile) {e.preventDefault();}}"
 				v-model="datum"
+				:dark="isDarkMode"
 				:clearable="false"
-				date-picker
 				:enable-time-picker="false"
 				:format="dateFormat"
 				:text-input="datepickerTextInputOptions"
 				:min-date="new Date()"
-				auto-apply>
-			</VueDatePicker>
-		</div>
-		<div class="col-12 col-lg-1">
-			<VueDatePicker
-				:dark="isDarkMode"
-				v-model="von"
-				:clearable="false"
-				time-picker
-				:format="timeFormat"
-				:text-input="timepickerTextInputOptions"
-				:is-24="true"
+				date-picker
 				auto-apply
 				>
 			</VueDatePicker>
 		</div>
 		<div class="col-12 col-lg-1">
 			<VueDatePicker
+				@contextmenu="(e) => {if (isMobile) {e.preventDefault();}}"
+				v-model="von"
 				:dark="isDarkMode"
-				v-model="bis"
 				:clearable="false"
-				time-picker
 				:format="timeFormat"
 				:text-input="timepickerTextInputOptions"
 				:is-24="true"
+				time-picker
+				auto-apply
+				>
+			</VueDatePicker>
+		</div>
+		<div class="col-12 col-lg-1">
+			<VueDatePicker
+				@contextmenu="(e) => {if (isMobile) {e.preventDefault();}}"
+				v-model="bis"
+				:dark="isDarkMode"
+				:clearable="false"
+				:format="timeFormat"
+				:text-input="timepickerTextInputOptions"
+				:is-24="true"
+				time-picker
 				auto-apply>
 			</VueDatePicker>
 		</div>