Attachment #169581 for bug #34440

View | Details | Raw Unified | Return to bug 34440
Collapse All | Expand All




    &.trailRangeEnd {
        border-radius: 0 50px 50px 0;
    }

    &.leadDisable {
        color: #aaa !important;  /* Gray out the text */
        background: #f5f5f5 !important;  /* Light background */
        cursor: not-allowed !important;
    }

    &.trailDisable {
        color: #aaa !important;  /* Gray out the text */
        background: #f5f5f5 !important;  /* Light background */
        cursor: not-allowed !important;
    }
}

.input-warning {




                    periodPicker.config.disable.push(function dateDisable(
                        date
                    ) {

                        // set local copy of selectedDates
                        let selectedDates = periodPicker.selectedDates;


                        instance,
                        dayElem
                    ) {
                        const date = dayElem.dateObj
                        const currentDate = dayElem.dateObj
                            .toISOString()
                            .split("T")[0];

                            );
                            const startDate = periodPicker.selectedDates[0]
                                ? dayjs(periodPicker.selectedDates[0]).startOf(
                                    "day"
                                )
                                : null;

                            const leadStart = startDate

                            const trailStart = hoverDate;
                            const trailEnd = hoverDate.add(trailDays, "day");

                            let leadDisable = false;
                            let trailDisable = false;
                            periodPicker.calendarContainer
                                .querySelectorAll(".flatpickr-day")
                                .forEach(function (dayElem) {

                                    dayElem.classList.toggle(
                                        "leadRange",
                                        elemDate.isSameOrAfter(leadStart) &&
                                        elemDate.isBefore(leadEnd)
                                    );
                                    dayElem.classList.toggle(
                                        "leadRangeEnd",

                                    dayElem.classList.toggle(
                                        "trailRange",
                                        elemDate.isAfter(trailStart) &&
                                        elemDate.isSameOrBefore(trailEnd)
                                    );
                                    dayElem.classList.toggle(
                                        "trailRangeEnd",
                                        elemDate.isSame(trailEnd)
                                    );
                                    // If we're overlapping a disabled date, disable our hoverDate
                                    if (dayElem.classList.contains("flatpickr-disabled")) {
                                        if (elemDate.isSameOrAfter(leadStart) && elemDate.isBefore(leadEnd)) {
                                            leadDisable = true;
                                        }
                                        if (elemDate.isAfter(trailStart) &&
                                            elemDate.isSameOrBefore(trailEnd)) {
                                            trailDisable = true;
                                        }
                                    }
                                    dayElem.classList.remove("leadDisable");
                                    dayElem.classList.remove("trailDisable");
                                    dayElem.removeEventListener('click', disableClick, true);
                                });

                            if (leadDisable) {
                                target.classList.add("leadDisable");
                            }
                            if (trailDisable) {
                                target.classList.add("trailDisable");
                            }
                            if (trailDisable || leadDisable) {
                                target.addEventListener('click', disableClick, true);
                            }
                        }
                    }
                );

                function disableClick(e) {
                    e.stopImmediatePropagation();
                }

                // Enable flatpickr now we have date function populated
                periodPicker.redraw();

- 

Return to bug 34440

Lines 871-876 $dayTrailBackground: #fcdcb3 !default; Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss (+12 lines)
871	&.trailRangeEnd {	871	&.trailRangeEnd {
872	border-radius: 0 50px 50px 0;	872	border-radius: 0 50px 50px 0;
873	}	873	}
		874
		875	&.leadDisable {
		876	color: #aaa !important; /* Gray out the text */
		877	background: #f5f5f5 !important; /* Light background */
		878	cursor: not-allowed !important;
		879	}
		880
		881	&.trailDisable {
		882	color: #aaa !important; /* Gray out the text */
		883	background: #f5f5f5 !important; /* Light background */
		884	cursor: not-allowed !important;
		885	}
874	}	886	}
875		887
876	.input-warning {	888	.input-warning {

Lines 389-394 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js (-5 / +35 lines)
389	periodPicker.config.disable.push(function dateDisable(	389	periodPicker.config.disable.push(function dateDisable(
390	date	390	date
391	) {	391	) {
		392
392	// set local copy of selectedDates	393	// set local copy of selectedDates
393	let selectedDates = periodPicker.selectedDates;	394	let selectedDates = periodPicker.selectedDates;
394		395
Lines 785-790 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here
785	instance,	786	instance,
786	dayElem	787	dayElem
787	) {	788	) {
		789	const date = dayElem.dateObj
788	const currentDate = dayElem.dateObj	790	const currentDate = dayElem.dateObj
789	.toISOString()	791	.toISOString()
790	.split("T")[0];	792	.split("T")[0];
Lines 813-820 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here
813	);	815	);
814	const startDate = periodPicker.selectedDates[0]	816	const startDate = periodPicker.selectedDates[0]
815	? dayjs(periodPicker.selectedDates[0]).startOf(	817	? dayjs(periodPicker.selectedDates[0]).startOf(
816	"day"	818	"day"
817	)	819	)
818	: null;	820	: null;
819		821
820	const leadStart = startDate	822	const leadStart = startDate
Lines 824-829 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here
824	const trailStart = hoverDate;	826	const trailStart = hoverDate;
825	const trailEnd = hoverDate.add(trailDays, "day");	827	const trailEnd = hoverDate.add(trailDays, "day");
826		828
		829	let leadDisable = false;
		830	let trailDisable = false;
827	periodPicker.calendarContainer	831	periodPicker.calendarContainer
828	.querySelectorAll(".flatpickr-day")	832	.querySelectorAll(".flatpickr-day")
829	.forEach(function (dayElem) {	833	.forEach(function (dayElem) {
Lines 838-844 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here
838	dayElem.classList.toggle(	842	dayElem.classList.toggle(
839	"leadRange",	843	"leadRange",
840	elemDate.isSameOrAfter(leadStart) &&	844	elemDate.isSameOrAfter(leadStart) &&
841	elemDate.isBefore(leadEnd)	845	elemDate.isBefore(leadEnd)
842	);	846	);
843	dayElem.classList.toggle(	847	dayElem.classList.toggle(
844	"leadRangeEnd",	848	"leadRangeEnd",
Lines 851-867 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here
851	dayElem.classList.toggle(	855	dayElem.classList.toggle(
852	"trailRange",	856	"trailRange",
853	elemDate.isAfter(trailStart) &&	857	elemDate.isAfter(trailStart) &&
854	elemDate.isSameOrBefore(trailEnd)	858	elemDate.isSameOrBefore(trailEnd)
855	);	859	);
856	dayElem.classList.toggle(	860	dayElem.classList.toggle(
857	"trailRangeEnd",	861	"trailRangeEnd",
858	elemDate.isSame(trailEnd)	862	elemDate.isSame(trailEnd)
859	);	863	);
		864	// If we're overlapping a disabled date, disable our hoverDate
		865	if (dayElem.classList.contains("flatpickr-disabled")) {
		866	if (elemDate.isSameOrAfter(leadStart) && elemDate.isBefore(leadEnd)) {
		867	leadDisable = true;
		868	}
		869	if (elemDate.isAfter(trailStart) &&
		870	elemDate.isSameOrBefore(trailEnd)) {
		871	trailDisable = true;
		872	}
		873	}
		874	dayElem.classList.remove("leadDisable");
		875	dayElem.classList.remove("trailDisable");
		876	dayElem.removeEventListener('click', disableClick, true);
860	});	877	});
		878
		879	if (leadDisable) {
		880	target.classList.add("leadDisable");
		881	}
		882	if (trailDisable) {
		883	target.classList.add("trailDisable");
		884	}
		885	if (trailDisable \|\| leadDisable) {
		886	target.addEventListener('click', disableClick, true);
		887	}
861	}	888	}
862	}	889	}
863	);	890	);
864		891
		892	function disableClick(e) {
		893	e.stopImmediatePropagation();
		894	}
		895
865	// Enable flatpickr now we have date function populated	896	// Enable flatpickr now we have date function populated
866	periodPicker.redraw();	897	periodPicker.redraw();
867		898
868	-