Fix the popover behavior in the calendar page

This commit is contained in:
Alex Tselegidis 2022-10-03 17:02:07 +03:00
parent cc05380f2d
commit 436c49319c
2 changed files with 20 additions and 16 deletions

View file

@ -27,10 +27,12 @@ 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';
const moment = window.moment;
let $popoverTarget;
let fullCalendar = null; let fullCalendar = null;
let lastFocusedEventData; // Contains event data for later use. let lastFocusedEventData; // Contains event data for later use.
@ -1209,17 +1211,17 @@ App.Utils.CalendarDefaultView = (function () {
} }
// Add unavailability period before work starts. // Add unavailability period before work starts.
viewStart = moment(calendarView.currentStart.format('YYYY-MM-DD') + ' 00:00:00'); viewStart = moment(calendarView.currentStart).format('YYYY-MM-DD') + ' 00:00:00';
startHour = sortedWorkingPlan[weekdayName].start.split(':'); startHour = sortedWorkingPlan[weekdayName].start.split(':');
workDateStart = viewStart.clone(); workDateStart = moment(viewStart).clone();
workDateStart.hour(parseInt(startHour[0])); workDateStart.hour(parseInt(startHour[0]));
workDateStart.minute(parseInt(startHour[1])); workDateStart.minute(parseInt(startHour[1]));
if (viewStart < workDateStart) { if (moment(viewStart).isBefore(workDateStart)) {
const unavailabilityPeriodBeforeWorkStarts = { const unavailabilityPeriodBeforeWorkStarts = {
title: lang('not_working'), title: lang('not_working'),
start: viewStart, start: moment(viewStart).toDate(),
end: workDateStart, end: workDateStart.toDate(),
allDay: false, allDay: false,
color: '#BEBEBE', color: '#BEBEBE',
editable: false, editable: false,
@ -1230,17 +1232,17 @@ App.Utils.CalendarDefaultView = (function () {
} }
// Add unavailability period after work ends. // Add unavailability period after work ends.
viewEnd = moment(calendarView.currentEnd.format('YYYY-MM-DD') + ' 00:00:00'); viewEnd = moment(calendarView.currentEnd).format('YYYY-MM-DD') + ' 00:00:00';
endHour = sortedWorkingPlan[weekdayName].end.split(':'); endHour = sortedWorkingPlan[weekdayName].end.split(':');
workDateEnd = viewStart.clone(); workDateEnd = moment(viewStart).clone();
workDateEnd.hour(parseInt(endHour[0])); workDateEnd.hour(parseInt(endHour[0]));
workDateEnd.minute(parseInt(endHour[1])); workDateEnd.minute(parseInt(endHour[1]));
if (viewEnd > workDateEnd) { if (moment(viewEnd).isAfter(workDateEnd)) {
const unavailabilityPeriodAfterWorkEnds = { const unavailabilityPeriodAfterWorkEnds = {
title: lang('not_working'), title: lang('not_working'),
start: workDateEnd, start: workDateEnd.toDate(),
end: viewEnd, end: moment(viewEnd).toDate(),
allDay: false, allDay: false,
color: '#BEBEBE', color: '#BEBEBE',
editable: false, editable: false,
@ -1253,19 +1255,19 @@ App.Utils.CalendarDefaultView = (function () {
// Add unavailability periods for breaks. // Add unavailability periods for breaks.
sortedWorkingPlan[weekdayName].breaks.forEach((breakPeriod) => { sortedWorkingPlan[weekdayName].breaks.forEach((breakPeriod) => {
const breakStartString = breakPeriod.start.split(':'); const breakStartString = breakPeriod.start.split(':');
breakStart = viewStart.clone(); breakStart = moment(viewStart).clone();
breakStart.hour(parseInt(breakStartString[0])); breakStart.hour(parseInt(breakStartString[0]));
breakStart.minute(parseInt(breakStartString[1])); breakStart.minute(parseInt(breakStartString[1]));
const breakEndString = breakPeriod.end.split(':'); const breakEndString = breakPeriod.end.split(':');
breakEnd = viewStart.clone(); breakEnd = moment(viewStart).clone();
breakEnd.hour(parseInt(breakEndString[0])); breakEnd.hour(parseInt(breakEndString[0]));
breakEnd.minute(parseInt(breakEndString[1])); breakEnd.minute(parseInt(breakEndString[1]));
const unavailabilityPeriod = { const unavailabilityPeriod = {
title: lang('break'), title: lang('break'),
start: breakStart, start: breakStart.toDate(),
end: breakEnd, end: breakEnd.toDate(),
allDay: false, allDay: false,
color: '#BEBEBE', color: '#BEBEBE',
editable: false, editable: false,

View file

@ -1478,6 +1478,8 @@ App.Utils.CalendarTableView = (function () {
$target.popover('show'); $target.popover('show');
$popoverTarget = $target;
// Fix popover position. // Fix popover position.
const $newPopover = $calendar.find('.popover'); const $newPopover = $calendar.find('.popover');