Event popup inside calendar component

public/js/components/Calendar/Base.js

@@ -1,6 +1,7 @@
 import BaseDraganddrop from './Base/DragAndDrop.js';
 import BaseHeader from './Base/Header.js';
 import BaseSlider from './Base/Slider.js';
+import BsModal from '../Bootstrap/Modal.js';
 
 import CalClick from '../../directives/Calendar/Click.js';
 
@@ -16,7 +17,8 @@ export default {
 	components: {
 		BaseDraganddrop,
 		BaseHeader,
-		BaseSlider
+		BaseSlider,
+		BsModal
 	},
 	directives: {
 		CalClick
@@ -119,7 +121,8 @@ export default {
 	data() {
 		return {
 			internalView: null,
-			internalDate: null
+			internalDate: null,
+			modalEvent: null
 		};
 	},
 	computed: {
@@ -231,6 +234,20 @@ export default {
 		},
 		onDropItem(evt, start, end) {
 			this.$emit('drop', evt, start, end);
+		},
+		showEventModal(eventObj) {
+			this.modalEvent = eventObj;
+			this.$refs.modal.show();
+		},
+		hideEventModal() {
+			if (this.modalEvent)
+				this.modalEvent.closeFn = undefined;
+			this.$refs.modal.hide();
+			this.modalEvent = null;
+		},
+		onModalHidden() {
+			if (this.modalEvent.closeFn)
+				this.modalEvent.closeFn();
 		}
 	},
 	template: /* html */`
@@ -262,11 +279,21 @@ export default {
 				ref="mode"
 				v-model:current-date="cDate"
 				@update:range="$emit('update:range', $event)"
+				@request-modal-open="showEventModal"
+				@request-modal-close="hideEventModal"
 				v-bind="modeOptions ? modeOptions[cMode] : null || {}"
 			>
 				<template v-slot="slot"><slot v-bind="slot" /></template>
 			</component>
 		</base-draganddrop>
+		<bs-modal ref="modal" dialog-class="modal-lg" body-class="" @hidden-bs-modal="onModalHidden">
+			<template #title>
+				<slot v-if="modalEvent" v-bind="{mode: 'eventheader', event: modalEvent.event}" />
+			</template>
+			<template #default>
+				<slot v-if="modalEvent" v-bind="{mode: 'event', event: modalEvent.event}" />
+			</template>
+		</bs-modal>
 	</div>
 	`
 }

public/js/components/Calendar/Mode/Day.js

@@ -16,7 +16,9 @@ export default {
 	emits: [
 		"update:currentDate",
 		"update:range",
-		"click"
+		"click",
+		"requestModalOpen",
+		"requestModalClose"
 	],
 	data() {
 		return {
@@ -80,7 +82,11 @@ export default {
 		class="fhc-calendar-mode-day flex-grow-1 position-relative"
 	>
 		<base-slider ref="slider" v-slot="slot">
-			<day-view v-bind="viewAttrs(slot.offset)">
+			<day-view
+				v-bind="viewAttrs(slot.offset)"
+				@request-modal-open="$emit('requestModalOpen', $event)"
+				@request-modal-close="$emit('requestModalClose', $event)"
+			>
 				<template v-slot="slot"><slot v-bind="slot" /></template>
 			</day-view>
 		</base-slider>

public/js/components/Calendar/Mode/Day/View.js

@@ -21,8 +21,13 @@ export default {
 			required: true
 		},
 		emptyMessage: String,
-		emptyMessageDetails: String
+		emptyMessageDetails: String,
+		compact: Boolean
 	},
+	emits: [
+		"requestModalOpen",
+		"requestModalClose"
+	],
 	data() {
 		return {
 			chosenEvent: null,
@@ -63,10 +68,30 @@ export default {
 			return null; // null => loading
 		}
 	},
+	watch: {
+		compact() {
+			if (this.compact) {
+				if (this.chosenEvent) {
+					this.$emit('requestModalOpen', {
+						event: this.chosenEvent,
+						closeFn: () => { this.chosenEvent = null; }
+					});
+				}
+			} else {
+				this.$emit('requestModalClose');
+			}
+		}
+	},
 	methods: {
 		handleClickDefaults(evt) {
 			if (evt.detail.source == 'event') {
 				this.chosenEvent = evt.detail.value;
+				if (this.compact) {
+					this.$emit('requestModalOpen', {
+						event: this.chosenEvent,
+						closeFn: () => { this.chosenEvent = null; }
+					});
+				}
 			}
 		}
 	},
@@ -110,7 +135,7 @@ export default {
 				{{ emptyMessage }}
 			</div>
 		</Teleport>
-		<div class="event-details">
+		<div class="event-details" v-if="!compact">
 			<div
 				v-if="currentEvent === null"
 				class="p-4 d-flex w-100 justify-content-center align-items-center"

public/js/components/Calendar/Mode/Month.js

@@ -16,7 +16,8 @@ export default {
 	emits: [
 		"update:currentDate",
 		"update:range",
-		"click"
+		"click",
+		"requestModalOpen"
 	],
 	data() {
 		return {
@@ -101,8 +102,8 @@ export default {
 				this.$emit('update:currentDate', evt.detail.value);
 				break;
 			case 'event':
-				// TODO(chris): IMPLEMENT!
-				// default: ???
+				// default: Request Modal
+				this.$emit('requestModalOpen', { event: evt.detail.value });
 				break;
 			}
 		}

public/js/components/Calendar/Mode/Week.js

@@ -16,7 +16,8 @@ export default {
 	emits: [
 		"update:currentDate",
 		"update:range",
-		"click"
+		"click",
+		"requestModalOpen"
 	],
 	data() {
 		return {
@@ -84,8 +85,8 @@ export default {
 				this.$emit('update:currentDate', evt.detail.value);
 				break;
 			case 'event':
-				// TODO(chris): IMPLEMENT!
-				// default: ???
+				// default: Request Modal
+				this.$emit('requestModalOpen', { event: evt.detail.value });
 				break;
 			}
 		}