We're running into a consistent crashing mode here when clicking on a weekend in resourceView when weekends are disabled. It's clearly a bug but I've not got enough to pinpoint or document it as yet. I've got a big demo early next week and need a workaround.
The proposed workaround is to force the view to show all 7 days and disable/hide the weekdays button so it cannot be switched back to only working days.
Is this feasible in resource View ?
We've tried to switch it off but it ignores our setting or am putting it in the wrong place - includeWeekendsButton
A view of the infinite loop when selecting weekends attached. It's a race condition somehwere in the Brytum lib (5.2.4 ...calednar.umd.js)
Here's the code. All I'm doing to initiate the race condition is click on a Saturday or Sunday. So the race condition is called in the calendar code ... if I can disable or hide the weekends (and force 7 days) then I'll live through the demo ....
I could also do with a way to remove the native eventRecord remnants after a customer event editor is called - at the moment I'm reloading the data - I'm sure there's a much easier way to clear these
Thanks
J
Here's the code...
<script>
const { Toast, ArrayHelper, DateHelper, StringHelper, Calendar, Splitter } = bryntum.calendar;
$(document).ready(function () {
const calendar = new Calendar({
// Start life looking at this date
date : new Date(),
includeWeekendsButton: false,
// Features named by the properties are included.
features : {
loadOnDemand: true,
creatable: false,
resizable: false,
draggable: false,
includeWeekendsButton: false,
drag: {
creatable: false,
resizable: false,
draggable: false
},
calendarDrag: false,
eventTooltip : {
// Override the default which is to show on click.
//showOn : 'hover',
deleteEvent : null,
// We want the tooltip's left edge aligned to the right edge of the event if possible.
align : 'l-r',
// Mustn't shrink because of large, graphical content
minWidth : null,
renderer : data => `<dl>
<dt>Assigned to:</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.resource.name)}
</dd>
<dt>Time:</dt>
<dd>
${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
</dd>
<dt>Note:</dt>
${data.eventRecord.get('notes') ? `<dd>${StringHelper.encodeHtml(data.eventRecord.notes)}</dd>` : '<dd>n/a</dd>'}
</dl>
`,
},
},
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager: {
transport: {
load: {
url: '/api/practice/calendar/resource_events'
}
},
autoLoad: false,
},
// Render to a DIV with this id
appendTo : 'container',
// Resource avatar images are loaded from this path
resourceImagePath : '../_shared/images/users/',
modes : {
// Mode name can be anything if it contains a "type" property.
dayResources: {
type: 'resource',
title: 'Day',
resourceWidth: '30em',
hideNonWorkingDays: false,
view: {
type: 'dayview',
dayStartTime: 8,
dayEndTime: 20,
tools: {
close: {
cls: 'b-fa b-fa-times',
tooltip: 'Remove chair',
handler() {
const
calendar = this.up('calendar'),
resourceFilter = calendar.widgetMap.resourceFilter,
resource = this.resource;
resourceFilter.selected.remove(resource);
}
}
}
},
meta: resource => resource.title
},
// Mode name can be anything if it contains a "type" property.
weekResources : {
// Type has the final say over which view type is created
type : 'resource',
title : 'Week',
// Specify how wide each resource panel should be
resourceWidth : '30em',
hideNonWorkingDays : false,
// This is a config object for the subviews
view : {
dayStartTime : 8,
// Dock an additional widget at the end of the header
// Show a close icon to filter out the resource
tools : {
close : {
cls : 'b-fa b-fa-times',
tooltip : 'Filter out this resource',
handler() {
const
calendar = this.up('calendar'),
resourceFilter = calendar.widgetMap.resourceFilter,
resource = this.resource;
resourceFilter.selected.remove(resource);
}
}
}
},
// Info to display below a resource name
meta : resource => resource.title
},
// Let's not show the default views
day : null,
week : null,
month : null,
year : null,
agenda : null,
},
listeners: {
beforeEventDelete({ eventRecords, context }) {
// creating new event or editing
console.log(context);
console.log(eventRecords);
if (eventRecords[0].resource.isVirtualChair) {
alert('Event summaries cannot be cancelled - cancel the appointment in the chair');
} else {
_setAppointmentID(eventRecords[0].id);
dmx.parse('modal_cancel_booking.show()');
}
return false;
},
beforeEventEdit({ eventRecord }) {
// creating new event or editing
console.log(eventRecord);
if (eventRecord.resource.isUnavailable || eventRecord.resource.isVirtualChair) {
_alertNOResource();
} else {
if (eventRecord.meta.isCreating)
_setAppointmentID('')
else
_setAppointmentID(eventRecord.id);
dmx.parse('modal_event_editor.show()');
}
return false;
}
},
// A block of configs which is applied to all modes.
modeDefaults: {
view: {
hourHeight: 120
},
},
});
calendar.crudManager.load();
window.calendar = calendar;
});
// init our data
function _setAppointmentID(id) {
dmx.parse("var_editing_appointment_id.setValue('" + id + "')");
}
// clear up any native leftovers
function _reloadData() {
calendar.crudManager.load();
}
function _alertNOResource() {
dmx.parse("run({'bootbox.alert':{buttons:{ok:{label:'Cancel',className:'btn-info'}},message:'No resource available on selected date',title:'NO APPOINTMENTS'}})");
calendar.crudManager.load();
}
</script>
The issue is that when you change some to not show weekends, some views require a different date range, and each one requests its own, and each request cancels the other.
Because that's how CrudManager works - it won't tolerate concurrent load requests. I think that is a CrudManager bug, but I will have to discuss that with the team.
Hopefully, I'll have that ticket in a review state today.
I could also do with a way to remove the eventRecord remnant after a custom eventeditor is called - at the moment I'm reloading the dataset - I'm sure there's a much easier way to clear these
In the attached image, the Brytnum event record is showing. With the custom editor, if I cancel the update, I end up have to call a db.refresh() to remove the event recod remnant. I'm sure there's a simple way to remove it but I can't find it amongst all the documentation.
That's the event that got created by dblclick of drag. You detected that is was being created using eventRecord.meta.isCreating
I mea you can just remove it. But then what are you doing?
Create the event, then you can edit it using your custom editor. If you are not editing that newly created event in your custom editor, then what are you doing?
I'm trying to set up a test case with ResourceView and loadOnDemand.
But there's a bit of a chicken and egg. ResourceView needs resources to be loaded from the event store to create its child views.
But there are no views present which request any events to cause a load. So I'm not sure how your app is working.