From e75872adaae595d3ef3f97eee4115583d5550832 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 7 Oct 2024 14:49:02 +0200
Subject: [PATCH] lets the user change the view of the calendar in the header
 with a select and highlights the date fields to change the view of the
 current calendar

---
 public/css/components/calendar.css          | 11 ++++++
 public/js/components/Calendar/Abstract.js   |  2 +-
 public/js/components/Calendar/Calendar.js   |  6 ++--
 public/js/components/Calendar/Header.js     | 38 ++++++++++++++++-----
 public/js/components/Calendar/Month.js      |  4 +--
 public/js/components/Calendar/Month/Page.js |  4 +--
 public/js/components/Calendar/Months.js     |  4 +--
 public/js/components/Calendar/Week.js       |  4 +--
 public/js/components/Calendar/Week/Page.js  |  8 ++---
 public/js/components/Calendar/Weeks.js      |  4 +--
 public/js/components/Calendar/Years.js      |  4 +--
 public/js/components/Calendar/Years/Page.js |  4 +--
 12 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 3bd0b1f15..fed873a31 100755
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -2,6 +2,10 @@
   background-color: #e9ecef;
 }
 
+.fhc-calendar-week-page-header > div:hover{
+	background-color: #dddfe2;
+}
+
 .fhc-calendar-months .col-4,
 .fhc-calendar-years .col-4 {
   padding: 0.1875em 0;
@@ -117,6 +121,13 @@
   align-items: center;
   justify-content: end;
 }
+
+.fhc-calendar-month-page-weekday:hover {
+	background-color:#37789c;
+	color:white;
+	
+}
+
 .fhc-calendar-sm .fhc-calendar-month-page-day,
 .fhc-calendar-xs .fhc-calendar-month-page-day {
   position: relative;
diff --git a/public/js/components/Calendar/Abstract.js b/public/js/components/Calendar/Abstract.js
index 94af02091..54b0304c7 100755
--- a/public/js/components/Calendar/Abstract.js
+++ b/public/js/components/Calendar/Abstract.js
@@ -10,7 +10,7 @@ export default {
 		'size'
 	],
 	emits: [
-		'update:mode',
+		'updateMode',
 		'change:range',
 		'input'
 	]
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index 3cbed11ca..ff6afe4b2 100755
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -6,6 +6,7 @@ import CalendarWeeks from './Weeks.js';
 import CalendarMinimized from './Minimized.js';
 import CalendarDate from '../../composables/CalendarDate.js';
 
+
 // TODO(chris): week/month toggle
 
 export default {
@@ -28,7 +29,8 @@ export default {
 			noMonthView: this.noMonthView,
 			noWeekView: this.noWeekView,
 			eventsAreNull: Vue.computed(() => this.events === null),
-			classHeader: this.classHeader
+			classHeader: this.classHeader,
+			mode: Vue.computed(()=>this.mode),
 		};
 	},
 	props: {
@@ -135,7 +137,7 @@ export default {
 	},
 	template: /*html*/`
 	<div ref="container" class="fhc-calendar card" :class="sizeClass">
-		<component v-slot="{event,day}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
+		<component v-slot="{event,day}" :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
 			<!--Week Page layout-->
 			<slot :event="event" :day="day"></slot>
 		</component>
diff --git a/public/js/components/Calendar/Header.js b/public/js/components/Calendar/Header.js
index 17882aa81..127a2619a 100755
--- a/public/js/components/Calendar/Header.js
+++ b/public/js/components/Calendar/Header.js
@@ -1,13 +1,28 @@
 export default {
+	data(){
+		return{
+			selected: this.mode,
+			modes:{
+				week:"Woche", 
+				weeks:"Kalendarwochen", 
+				month:"Monat", 
+				months:"Monate", 
+				years:"Jahre",
+			},
+		}
+	},
 	inject: [
 		'eventsAreNull',
 		'size',
-		'classHeader'
+		'classHeader',
+		'mode',
+		'updateMode',
 	],
 	props: {
 		title: String
 	},
 	emits: [
+		'updateMode',
 		'prev',
 		'next',
 		'click'
@@ -30,12 +45,19 @@ export default {
 		}
 	},
 	template: `
-	<div class="calendar-header card-header btn-group w-100" :class="classHeader">
-		<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
-		<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
-			{{ title }}
-			<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
-		</button>
-		<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
+	<div class="calendar-header card-header row w-100" :class="classHeader">
+		<button class="btn btn-outline-secondary border-0 col-auto" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
+		<div class="col text-center">
+			<div class="d-flex justify-content-center align-items-center">
+				<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
+					{{ title }}
+					<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
+				</button>
+				<select class="form-select w-auto" aria-label="Default select example">
+					<option :selected="mode_kurzbz == mode" @click="$emit('updateMode',mode_kurzbz)" v-for="(mode_bezeichnung,mode_kurzbz) in modes">{{mode_bezeichnung}}</option>
+				</select>
+			</div>
+		</div>
+		<button class="col-auto btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
 	</div>`
 }
diff --git a/public/js/components/Calendar/Month.js b/public/js/components/Calendar/Month.js
index a86ce10b6..9d612eeaf 100755
--- a/public/js/components/Calendar/Month.js
+++ b/public/js/components/Calendar/Month.js
@@ -61,9 +61,9 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-month">
-		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode', 'months')" />
+		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'months')" />
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
-			<calendar-month-page :year="focusDate.y" :month="focusDate.m+slot.offset" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" />
+			<calendar-month-page :year="focusDate.y" :month="focusDate.m+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" />
 		</calendar-pane>
 	</div>`
 }
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index a535546fd..f257c442c 100755
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -14,7 +14,7 @@ export default {
 		month: Number
 	},
 	emits: [
-		'update:mode',
+		'updateMode',
 		'page:back',
 		'page:forward',
 		'input'
@@ -50,7 +50,7 @@ export default {
 			if (!this.noWeekView) {
 				if (!this.focusDate.isInWeek(week.no, week.y))
 					this.focusDate.set(week.days[0]);
-				this.$emit('update:mode', 'week');
+				this.$emit('updateMode', 'week');
 			}
 		}
 	},
diff --git a/public/js/components/Calendar/Months.js b/public/js/components/Calendar/Months.js
index 7dcb96d87..ec61d6de5 100755
--- a/public/js/components/Calendar/Months.js
+++ b/public/js/components/Calendar/Months.js
@@ -22,10 +22,10 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-months">
-		<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('update:mode', 'years')" />
+		<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(month, key) in months" :key="key" class="d-grid col-4">
-				<button @click="focusDate.m = key; $emit('update:mode', 'month')" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
+				<button @click="focusDate.m = key; $emit('updateMode', 'month')" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
 					{{month}}
 				</button>
 			</div>
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
index a6389fe52..f00625a25 100755
--- a/public/js/components/Calendar/Week.js
+++ b/public/js/components/Calendar/Week.js
@@ -40,9 +40,9 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-week">
-		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode', 'weeks')" />
+		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'weeks')"/>
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
-			<calendar-week-page v-slot="{event,day}" :year="focusDate.y" :week="focusDate.w+slot.offset" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
+			<calendar-week-page v-slot="{event,day}" :year="focusDate.y" :week="focusDate.w+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
 				<slot :event="event" :day="day" ></slot>
 			</calendar-week-page>
 		</calendar-pane>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index d3059cddf..f2742d1ed 100755
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -16,7 +16,7 @@ export default {
 		week: Number
 	},
 	emits: [
-		'update:mode',
+		'updateMode',
 		'page:back',
 		'page:forward',
 		'input'
@@ -82,7 +82,7 @@ export default {
 			if (!this.noMonthView) {
 				this.date.set(day);
 				this.focusDate.set(day);
-				this.$emit('update:mode', 'month');
+				this.$emit('updateMode', 'month');
 			}
 		},
 		dateToMinutesOfDay(day) {
@@ -97,9 +97,9 @@ export default {
 	
 		<div class="d-flex flex-column border-top">
 			<div class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex" style="position:sticky; top:0; " >
-				<div v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})">
+				<div type="button" v-for="day in days" :key="day" class="test flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
 					<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
-					<a href="#" class="small text-secondary text-decoration-none" @click.prevent="changeToMonth(day)">{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
+					<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
 				</div>
 			</div>
 			<div ref="eventcontainer" class="flex-grow-1">
diff --git a/public/js/components/Calendar/Weeks.js b/public/js/components/Calendar/Weeks.js
index 1ec8545bc..6a7c32a58 100755
--- a/public/js/components/Calendar/Weeks.js
+++ b/public/js/components/Calendar/Weeks.js
@@ -22,12 +22,12 @@ export default {
 		setWeek(week) {
 			// TODO(chris): test is there a week jump on year select? => yes there is if the same month/day are in different weeks ... should we prevent that?
 			this.focusDate.w = week;
-			this.$emit('update:mode', 'week');
+			this.$emit('updateMode', 'week');
 		}
 	},
 	template: `
 	<div class="fhc-calendar-weeks">
-		<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('update:mode', 'years')" />
+		<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
 				<button @click="setWeek(week)" class="btn btn-outline-secondary" :class="{'border-0': week != focusDate.w}">
diff --git a/public/js/components/Calendar/Years.js b/public/js/components/Calendar/Years.js
index a372f748d..3edd533c2 100755
--- a/public/js/components/Calendar/Years.js
+++ b/public/js/components/Calendar/Years.js
@@ -51,9 +51,9 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-years">
-		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode')" />
+		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('updateMode')" @updateMode="$emit('updateMode')" />
 		<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
-			<calendar-years-page :data-test="slot.index" :start="start+range*slot.offset" :end="start+range*slot.offset+range" @update:mode="$emit('update:mode')"/>
+			<calendar-years-page :data-test="slot.index" :start="start+range*slot.offset" :end="start+range*slot.offset+range" @updateMode="$emit('updateMode')"/>
 		</calendar-pane>
 	</div>`
 }
diff --git a/public/js/components/Calendar/Years/Page.js b/public/js/components/Calendar/Years/Page.js
index b65471f82..c6efe0ffc 100755
--- a/public/js/components/Calendar/Years/Page.js
+++ b/public/js/components/Calendar/Years/Page.js
@@ -7,7 +7,7 @@ export default {
 		end: Number
 	},
 	emits: [
-		'update:mode'
+		'updateMode'
 	],
 	data() {
 		return {
@@ -21,7 +21,7 @@ export default {
 	template: `
 	<div class="fhc-calendar-years-page d-flex flex-wrap">
 		<div v-for="year in years" :key="year" class="d-grid col-4">
-			<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('update:mode')">
+			<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
 				{{year}}
 			</button>
 		</div>