further improved user interaction, added disable weekend interactions to show case

Author: marcus-wishes

library/src/components/timetable/LPTimeTable.tsx

@@ -42,7 +42,7 @@ export interface TimeTableGroup {
 
 export interface TimeTableEntry<
 	G extends TimeTableGroup,
-	I extends TimeSlotBooking
+	I extends TimeSlotBooking,
 > {
 	group: G
 	items: I[]
@@ -57,7 +57,7 @@ export interface SelectedTimeSlot<G extends TimeTableGroup> {
 
 export interface LPTimeTableProps<
 	G extends TimeTableGroup,
-	I extends TimeSlotBooking
+	I extends TimeSlotBooking,
 > {
 	/* The start date also defines the time the time slots starts in the morning */
 	startDate: Dayjs
@@ -80,7 +80,7 @@ export interface LPTimeTableProps<
 
 	/* this function gets called when a selection was made, i.g. to create a booking. the return value states if the selection should be cleared or not */
 	onTimeRangeSelected?: (
-		s: { group: G; startDate: Dayjs; endDate: Dayjs } | undefined
+		s: { group: G; startDate: Dayjs; endDate: Dayjs } | undefined,
 	) => boolean | void
 
 	/* The selected time range context sets this callback to be able for a time table parent component to clear the selected time range from outside */
@@ -137,11 +137,11 @@ const nowbarUpdateIntervall = 1000 * 60 // 1 minute
 
 export default function LPTimeTable<
 	G extends TimeTableGroup,
-	I extends TimeSlotBooking
+	I extends TimeSlotBooking,
 >({ timeTableMessages, ...props }: LPTimeTableProps<G, I>) {
 	if (!getCurrentTheme()) {
 		console.warn(
-			"LPTimeTable - no theme set, LPTable required Atlassian.design token to have the color scheme set correctly"
+			"LPTimeTable - no theme set, LPTable required Atlassian.design token to have the color scheme set correctly",
 		)
 	}
 
@@ -205,13 +205,13 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 				endDate,
 				timeStepsMinutes,
 				rounding ?? "round",
-				setMessage
+				setMessage,
 			)
 		const slotsArray = calculateTimeSlots(
 			timeSlotsPerDay,
 			daysDifference,
 			timeSteps,
-			startDate
+			startDate,
 		)
 		return { slotsArray, timeSteps, timeSlotsPerDay }
 	}, [startDate, endDate, timeStepsMinutes, rounding, setMessage])
@@ -227,7 +227,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 			const itemsOutside = itemsOutsideOfDayRange(
 				entry.items,
 				slotsArray,
-				timeSteps
+				timeSteps,
 			)
 			foundItemsOutsideOfDayRange += itemsOutside.length
 		}
@@ -300,6 +300,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 					timeSteps={timeSteps}
 					onTimeRangeSelected={onTimeRangeSelected}
 					setClearSelectedTimeRangeCB={setClearSelectedTimeRangeCB}
+					disableWeekendInteractions={disableWeekendInteractions}
 				>
 					<div
 						style={{
@@ -383,7 +384,7 @@ function TimeSlotBarRow({
 			// when the debugging overwrite is active, we still want to move the bar to test it
 			nowRef.current = nowRef.current.add(
 				nowbarUpdateIntervall,
-				"milliseconds"
+				"milliseconds",
 			)
 		} else {
 			nowRef.current = dayjs()
@@ -396,7 +397,7 @@ function TimeSlotBarRow({
 			nowBarRef,
 			tableHeaderRef,
 			tableBodyRef,
-			setMessage
+			setMessage,
 		)
 	}, [
 		slotsArray,
@@ -431,7 +432,7 @@ function TimeSlotBarRow({
 					messageKey: "timetable.timeSlotColumnsNotFound",
 				})
 				console.log(
-					"LPTimeTable - unable to find time slot columns for the time slot bars"
+					"LPTimeTable - unable to find time slot columns for the time slot bars",
 				)
 				return
 			}
@@ -499,7 +500,7 @@ function calculateTimeSlotProperties(
 	endDate: Dayjs,
 	timeStepsMinute: number,
 	rounding: "ceil" | "floor" | "round",
-	setMessage: (message: TimeTableMessage) => void
+	setMessage: (message: TimeTableMessage) => void,
 ) {
 	let timeSlotsPerDay = 0
 	let timeSteps = timeStepsMinute
@@ -542,7 +543,7 @@ function calculateTimeSlotProperties(
 				.startOf("day")
 				.add(startDate.hour(), "hours")
 				.add(startDate.minute(), "minutes"),
-			"minutes"
+			"minutes",
 		)
 
 	if (timeDiff === 0) {
@@ -574,22 +575,22 @@ function calculateTimeSlots(
 	timeSlotsPerDay: number,
 	daysDifference: number,
 	timeSteps: number,
-	startDate: Dayjs
+	startDate: Dayjs,
 ) {
 	if (!isFinite(timeSlotsPerDay)) {
 		return null
 	}
 	const daysArray = Array.from({ length: daysDifference }, (x, i) => i).map(
 		(day) => {
 			return dayjs(startDate).add(day, "days")
-		}
+		},
 	)
 
 	const slotsArray = daysArray.flatMap((date) => {
 		console.log("LPTimeTable - timeSlotsPerDay", timeSlotsPerDay)
 		return Array.from(
 			{ length: timeSlotsPerDay },
-			(_, i) => i * timeSteps
+			(_, i) => i * timeSteps,
 		).map((minutes) => {
 			return dayjs(date).add(minutes, "minutes")
 		})
@@ -616,7 +617,7 @@ function moveNowBar(
 	nowBarRef: MutableRefObject<HTMLDivElement | undefined>,
 	tableHeaderRef: MutableRefObject<HTMLTableSectionElement | null>,
 	tableBodyRef: MutableRefObject<HTMLTableSectionElement | null>,
-	setMessage: (message: TimeTableMessage) => void
+	setMessage: (message: TimeTableMessage) => void,
 ) {
 	if (!tableHeaderRef.current || !tableBodyRef.current) {
 		console.log("LPTimeTable - time table header or body ref not yet set")
@@ -667,7 +668,7 @@ function moveNowBar(
 	if (!slotBar) {
 		console.log(
 			"LPTimeTable - unable to find time slot column for the now bar: ",
-			startSlot
+			startSlot,
 		)
 		return
 	}

library/src/components/timetable/Messages.tsx

@@ -70,13 +70,6 @@ export const DeselectFromOuterBorder = () => (
 	/>
 )
 
-export const OnlySuccessiveTimeSlots = () => (
-	<FormattedMessage
-		defaultMessage={"Please select only successive time slots."}
-		id="timetable.onlySuccessiveTimeSlots"
-	/>
-)
-
 export const WeekendsDeactivated = () => (
 	<FormattedMessage
 		defaultMessage={"Weekends are deactivated."}

library/src/components/timetable/SelectedTimeSlotsContext.tsx

@@ -39,6 +39,7 @@ type InteractionType = "click" | "drag" | "remove"
 export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 	slotsArray,
 	timeSteps,
+	disableWeekendInteractions,
 	onTimeRangeSelected,
 	setClearSelectedTimeRangeCB,
 	children,
@@ -50,6 +51,7 @@ export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 	) => boolean | void // if return is true, clear selection
 	// this is a callback that can be used to clear the selected time slots... maybe there is a better way to do this?
 	setClearSelectedTimeRangeCB?: (cb: () => void) => void
+	disableWeekendInteractions?: boolean
 	children: JSX.Element
 }) {
 	const { setMessage } = useTimeTableMessage()
@@ -69,10 +71,10 @@ export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 	// remove any selection in case fundamental time table properties change
 	useEffect(() => {
 		console.log(
-			"LPTimeTable - clearing selection because the slotsArray or timeSteps changed",
+			"LPTimeTable - clearing selection because the slotsArray, timeSteps or weekend interactions changed",
 		)
 		setSelectedTimeSlotsG(undefined)
-	}, [slotsArray, timeSteps])
+	}, [slotsArray, timeSteps, disableWeekendInteractions])
 
 	// maybe there is a better way to clear the selection from the parent component, then returning a callback from this component
 	const clearSelectionCB = useCallback(
@@ -98,14 +100,6 @@ export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 				return
 			}
 
-			if (selectedTimeSlots.group !== group && interaction === "click") {
-				setSelectedTimeSlotsG({
-					timeSlots: [timeSlot],
-					group,
-				})
-				return
-			}
-
 			const timeSlotBefore = selectedTimeSlots.timeSlots.find(
 				(it) => timeSlot - 1 === it,
 			)
@@ -115,12 +109,18 @@ export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 			const alreadySelected =
 				selectedTimeSlots.timeSlots.includes(timeSlot)
 
-			console.log(
-				"timeSlotBefore",
-				timeSlotBefore,
-				timeSlotAfter,
-				alreadySelected,
-			)
+			if (interaction === "click") {
+				if (
+					selectedTimeSlots.group !== group ||
+					(!alreadySelected && !timeSlotAfter && !timeSlotBefore)
+				) {
+					setSelectedTimeSlotsG({
+						timeSlots: [timeSlot],
+						group,
+					})
+					return
+				}
+			}
 
 			if (alreadySelected) {
 				if (interaction === "drag") {
@@ -159,23 +159,42 @@ export function SelectedTimeSlotsProvider<G extends TimeTableGroup>({
 				return
 			}
 
-			// not selected yet
-			if (timeSlotBefore !== undefined || timeSlotAfter !== undefined) {
+			if (interaction === "drag" && multiselectionMode) {
+				// selectedTimeSlots.timeSlots is already sorted
+				let min = selectedTimeSlots.timeSlots[0]
+				let max =
+					selectedTimeSlots.timeSlots[
+						selectedTimeSlots.timeSlots.length - 1
+					]
+				if (timeSlot < min) {
+					min = timeSlot
+				} else if (timeSlot > max) {
+					max = timeSlot
+				}
+				const newTimeSlots = []
+				for (let i = min; i <= max; i++) {
+					newTimeSlots.push(i)
+				}
+				setSelectedTimeSlotsG({
+					timeSlots: newTimeSlots,
+					group: selectedTimeSlots.group,
+				})
+			} else if (
+				timeSlotAfter !== undefined ||
+				timeSlotBefore !== undefined
+			) {
 				setSelectedTimeSlotsG({
 					timeSlots: [...selectedTimeSlots.timeSlots, timeSlot],
 					group: selectedTimeSlots.group,
 				})
-				return
+			} else {
+				setSelectedTimeSlotsG({
+					timeSlots: [timeSlot],
+					group: selectedTimeSlots.group,
+				})
 			}
-
-			// that means this is not selected, but there are other selected time slots of this group, but not directly before of after
-			setMessage({
-				urgency: "information",
-				messageKey: "timetable.onlySuccessiveTimeSlots",
-				timeOut: 3,
-			})
 		},
-		[selectedTimeSlots, setMessage],
+		[multiselectionMode, selectedTimeSlots, setMessage],
 	)
 
 	useEffect(() => {

library/src/components/timetable/TimeTableMessageContext.tsx

@@ -53,10 +53,6 @@ export function TimeTableMessageProvider({
 }) {
 	const [message, setMessage] = useState<TimeTableMessage>()
 
-	useEffect(() => {
-		console.log("messagesTranslations", messagesTranslations)
-	}, [messagesTranslations])
-
 	return (
 		<timeTableMessageContext.Provider
 			value={{ message, setMessage, messagesTranslations }}

library/src/localization/translations-compiled/de.json

@@ -4,7 +4,6 @@
   "timetable.endDateAfterStartDate": "Das Enddatum muss nach dem Startdatum liegen.",
   "timetable.itemsOutsideTimeFrame": "Es sind {outsideItemCount} Einträge außerhalb des Zeitbereichs eines Tages.",
   "timetable.noHeaderTimeSlotRow": "Keine Kopfzeile für Zeitslots gefunden.",
-  "timetable.onlySuccessiveTimeSlots": "Bitte wählen Sie nur aufeinanderfolgende Zeitslots aus.",
   "timetable.timeSlotColumnsNotFound": "Keine Spalten für die Zeitslots gefunden.",
   "timetable.timeSlotSizeGreaterZero": "Die Zeitslotgröße muss größer als 0 Minuten sein.",
   "timetable.unableToFindEarliestTS": "Der früheste Zeitslot konnte nicht gefunden werden.",

library/src/localization/translations-compiled/en.json

@@ -4,7 +4,6 @@
   "timetable.endDateAfterStartDate": "The end date must be after start date.",
   "timetable.itemsOutsideTimeFrame": "Found {outsideItemCount} outside of the valid time frame of each day.",
   "timetable.noHeaderTimeSlotRow": "No header time slot row found.",
-  "timetable.onlySuccessiveTimeSlots": "Please select only successive time slots.",
   "timetable.timeSlotColumnsNotFound": "Unable to find time slot columns for the time slot bars.",
   "timetable.timeSlotSizeGreaterZero": "Time slot size must be greater than zero.",
   "timetable.unableToFindEarliestTS": "Unable to find the earliest time slot.",

library/src/localization/translations/de.json

@@ -14,9 +14,6 @@
 	"timetable.noHeaderTimeSlotRow": {
 		"defaultMessage": "Keine Kopfzeile für Zeitslots gefunden."
 	},
-	"timetable.onlySuccessiveTimeSlots": {
-		"defaultMessage": "Bitte wählen Sie nur aufeinanderfolgende Zeitslots aus."
-	},
 	"timetable.timeSlotColumnsNotFound": {
 		"defaultMessage": "Keine Spalten für die Zeitslots gefunden."
 	},

library/src/localization/translations/en.json

@@ -14,9 +14,6 @@
 	"timetable.noHeaderTimeSlotRow": {
 		"defaultMessage": "No header time slot row found."
 	},
-	"timetable.onlySuccessiveTimeSlots": {
-		"defaultMessage": "Please select only successive time slots."
-	},
 	"timetable.timeSlotColumnsNotFound": {
 		"defaultMessage": "Unable to find time slot columns for the time slot bars."
 	},