Fix the event popover behavior after updating to the latest bootstrap.

This commit is contained in:
Alex Tselegidis 2022-09-14 10:14:47 +02:00
parent b6cc72cd06
commit f92d43b407
2 changed files with 36 additions and 22 deletions

View file

@ -27,6 +27,7 @@ App.Utils.CalendarDefaultView = (function () {
const $footer = $('#footer'); const $footer = $('#footer');
const $notification = $('#notification'); const $notification = $('#notification');
const $calendarToolbar = $('#calendar-toolbar'); const $calendarToolbar = $('#calendar-toolbar');
let $popoverTarget;
const FILTER_TYPE_ALL = 'all'; const FILTER_TYPE_ALL = 'all';
const FILTER_TYPE_PROVIDER = 'provider'; const FILTER_TYPE_PROVIDER = 'provider';
const FILTER_TYPE_SERVICE = 'service'; const FILTER_TYPE_SERVICE = 'service';
@ -45,10 +46,8 @@ App.Utils.CalendarDefaultView = (function () {
$reloadAppointments.on('click', () => { $reloadAppointments.on('click', () => {
const calendarView = fullCalendar.view; const calendarView = fullCalendar.view;
const $popovers = $('.popover'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
if ($popovers.length) {
$popovers.popover('dispose');
} }
refreshCalendarAppointments( refreshCalendarAppointments(
@ -65,8 +64,10 @@ App.Utils.CalendarDefaultView = (function () {
* *
* Hides the open popover element. * Hides the open popover element.
*/ */
$calendarPage.on('click', '.close-popover', (event) => { $calendarPage.on('click', '.close-popover', () => {
$(event.target).parents('.popover').popover('dispose'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
}); });
/** /**
@ -77,9 +78,9 @@ App.Utils.CalendarDefaultView = (function () {
* @param {jQuery.Event} event * @param {jQuery.Event} event
*/ */
$calendarPage.on('click', '.edit-popover', (event) => { $calendarPage.on('click', '.edit-popover', (event) => {
const $target = $(event.target); if ($popoverTarget) {
$popoverTarget.popover('dispose');
$target.closest('.popover').popover('dispose'); }
let startMoment; let startMoment;
let endMoment; let endMoment;
@ -190,9 +191,9 @@ App.Utils.CalendarDefaultView = (function () {
* @param {jQuery.Event} event * @param {jQuery.Event} event
*/ */
$calendarPage.on('click', '.delete-popover', (event) => { $calendarPage.on('click', '.delete-popover', (event) => {
const $target = $(event.target); if ($popoverTarget) {
$popoverTarget.popover('dispose');
$target.parents('.popover').popover('dispose'); }
if (lastFocusedEventData.extendedProps.data.workingPlanException) { if (lastFocusedEventData.extendedProps.data.workingPlanException) {
const providerId = $selectFilterItem.val(); const providerId = $selectFilterItem.val();
@ -360,7 +361,9 @@ App.Utils.CalendarDefaultView = (function () {
function onEventClick(info) { function onEventClick(info) {
const $target = $(info.el); const $target = $(info.el);
$calendarPage.find('.popover').popover('dispose'); // Close all open popovers. if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
let $html; let $html;
let displayEdit; let displayEdit;
@ -721,7 +724,9 @@ App.Utils.CalendarDefaultView = (function () {
lastFocusedEventData = info.event; lastFocusedEventData = info.event;
$target.popover('toggle'); $target.popover('show');
$popoverTarget = $target;
// Fix popover position. // Fix popover position.
const $popover = $calendarPage.find('.popover'); const $popover = $calendarPage.find('.popover');
@ -1022,7 +1027,9 @@ App.Utils.CalendarDefaultView = (function () {
// Remove all open popovers. // Remove all open popovers.
$('.close-popover').each((index, closePopoverButton) => { $('.close-popover').each((index, closePopoverButton) => {
$(closePopoverButton).parents('.popover').popover('dispose'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
}); });
// Add new popovers. // Add new popovers.

View file

@ -32,6 +32,7 @@ App.Utils.CalendarTableView = (function () {
let $filterProvider; let $filterProvider;
let $filterService; let $filterService;
let $selectDate; let $selectDate;
let $popoverTarget;
const moment = window.moment; const moment = window.moment;
let lastFocusedEventData; let lastFocusedEventData;
@ -145,7 +146,9 @@ App.Utils.CalendarTableView = (function () {
* Hides the open popover element. * Hides the open popover element.
*/ */
$calendar.on('click', '.close-popover', (event) => { $calendar.on('click', '.close-popover', (event) => {
$(event.target).parents('.popover').popover('dispose'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
}); });
/** /**
@ -154,7 +157,9 @@ App.Utils.CalendarTableView = (function () {
* Enables the edit dialog of the selected table event. * Enables the edit dialog of the selected table event.
*/ */
$calendar.on('click', '.edit-popover', (event) => { $calendar.on('click', '.edit-popover', (event) => {
$(event.target).parents('.popover').popover('dispose'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
let startMoment; let startMoment;
let endMoment; let endMoment;
@ -263,7 +268,9 @@ App.Utils.CalendarTableView = (function () {
* deletion then an ajax call is made to the server and deletes the appointment from the database. * deletion then an ajax call is made to the server and deletes the appointment from the database.
*/ */
$calendar.on('click', '.delete-popover', (event) => { $calendar.on('click', '.delete-popover', (event) => {
$(event.target).parents('.popover').popover('dispose'); // Hide the popover. if ($popoverTarget) {
$popoverTarget.popover('dispose');
}
// If id_role parameter exists the popover is an working plan exception. // If id_role parameter exists the popover is an working plan exception.
if (lastFocusedEventData.extendedProps.data.hasOwnProperty('id_roles')) { if (lastFocusedEventData.extendedProps.data.hasOwnProperty('id_roles')) {
@ -1119,9 +1126,9 @@ App.Utils.CalendarTableView = (function () {
* @param {Object} info * @param {Object} info
*/ */
function onEventClick(info) { function onEventClick(info) {
const $popover = $('.popover'); if ($popoverTarget) {
$popoverTarget.popover('dispose');
$popover.popover('dispose'); // Close all open popovers. }
let $html; let $html;
let displayEdit; let displayEdit;
@ -1469,7 +1476,7 @@ App.Utils.CalendarTableView = (function () {
lastFocusedEventData = info.event; lastFocusedEventData = info.event;
$target.popover('toggle'); $target.popover('show');
// Fix popover position. // Fix popover position.
const $newPopover = $calendar.find('.popover'); const $newPopover = $calendar.find('.popover');