tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

show spinner when loading booked days

Browse Source
This commit is contained in:
Thomas Ruoff
2020-12-25 00:22:27 +01:00
parent 85e4c5349b
commit b43e9be604
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/calendar.tsx
View File

@@ -11,6 +11,7 @@ import Calendar from 'react-calendar'
import useBookedDays from '../helpers/useDaysBooked' import useBookedDays from '../helpers/useDaysBooked'
import { dateFormatBackend } from '../helpers/date' import { dateFormatBackend } from '../helpers/date'
import { getNextBigger, getNextSmaller } from '../helpers/array' import { getNextBigger, getNextSmaller } from '../helpers/array'
import Loading from './loading'
export default function PlainCalendar({ export default function PlainCalendar({
start, start,
@@ -93,43 +94,48 @@ export default function PlainCalendar({
return ( return (
<div className={className}> <div className={className}>
<h2 className="text-xl">Belegungsplan</h2> <h2 className="text-xl">Belegungsplan</h2>
<Calendar <Loading loading={daysBookedLoading}>
activeStartDate={startDate} <Calendar
minDate={new Date()} activeStartDate={startDate}
// @ts-ignore minDate={new Date()}
onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => { // @ts-ignore
if (!onChange) { onClickDay={(
return date: Date,
} event: React.MouseEvent<HTMLInputElement>
) => {
if (!onChange) {
return
}
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
const targetClassList = event.currentTarget.classList const targetClassList = event.currentTarget.classList
if ( if (
targetClassList.contains('react-calendar__tile--past') || targetClassList.contains('react-calendar__tile--past') ||
targetClassList.contains('react-calendar__tile--booked') || targetClassList.contains('react-calendar__tile--booked') ||
targetClassList.contains('react-calendar__tile--unselectable') targetClassList.contains('react-calendar__tile--unselectable')
) { ) {
return return
} }
if (!startDate || !!endDate) { if (!startDate || !!endDate) {
onChange({ startDate: dateFormatBackend(date), endDate: null }) onChange({ startDate: dateFormatBackend(date), endDate: null })
return return
} }
// when startDate set, but end missing // when startDate set, but end missing
if (isAfter(date, startDate)) { if (isAfter(date, startDate)) {
onChange({ endDate: dateFormatBackend(date) }) onChange({ endDate: dateFormatBackend(date) })
} else { } else {
onChange({ startDate: dateFormatBackend(date), endDate: start }) onChange({ startDate: dateFormatBackend(date), endDate: start })
} }
}} }}
tileClassName={tileClassName} tileClassName={tileClassName}
value={null} value={null}
/> />
</Loading>
<div className="mt-3 flex justify-center"> <div className="mt-3 flex justify-center">
<div> <div>
<div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div> <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>