Re: [INFO REQ] lwc scheduler , intercepte drag and drop
Posted: Tue Nov 29, 2022 4:26 pm
Do you have a test case we can inspect? Or is this running live somewhere so we can try it out?
Do you have a test case we can inspect? Or is this running live somewhere so we can try it out?
connect to https://efficiency-app-7908.scratch.lightning.force.com/
login: planvisi@utb.fr
pwd:Angers123#
tab 'planning des visites'
i think i receive a code that i should to give you
i think is better to have a call ?
We can't offer free debugging help I'm afraid. We'll take a look soon.
ok, this is my scheduler :
this.scheduler = new bryntum.scheduler.Scheduler({
features: {
resourceTimeRanges: true,
nonWorkingTime : true,
timeRanges: {
showHeaderElements: true,
showCurrentTimeLine: true
},
eventEdit: {
extraWidgets: [
{
type: 'text',
name: 'WOnumber',
label: 'Number Work Order',
typeAhead: true,
forceSelection: true,
editor: false,
selectOnFocus: true,
readOnly: true,
}
]
},
stripe : true,
timeRanges : true,
eventMenu : {
items : {
unassign : {
text : 'Unassign',
icon : 'b-fa b-fa-user-times',
weight : 200,
onItem : ({ eventRecord, resourceRecord }) => eventRecord.unassign(resourceRecord)
}
}
},
},
insertFirst: this.template.querySelector('.main'),
rowHeight: 50,
barMargin: 8,
columns: [
{
text: 'Salariés',
width: 150,
field: 'name',
}
],
startDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()-7),
endDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()+1),
viewPreset : {
base: 'hourAndDay',
tickWidth: 25,
columnLinesFor: 0,
headers: [
{
unit: 'd',
align: 'center',
dateFormat: 'ddd DD MMM'
},
{
unit: 'h',
align: 'center',
dateFormat: 'HH'
}
]
},
eventRenderer({ eventRecord, resourceRecord, renderData }) {
const bgColor = resourceRecord.bg || '';
renderData.style = `background:${bgColor};border-color:${bgColor};color:${resourceRecord.textColor}`;
renderData.iconCls.add('b-fa', `b-fa-${resourceRecord.icon}`);
return eventRecord.name;
},
resourceStore: new bryntum.scheduler.ResourceStore({
data: this.ListResource
}),
eventStore: new bryntum.scheduler.EventStore({
data: this.ListEvent
}),
assignmentStore: new bryntum.scheduler.AssignmentStore({
data: this.ListEvent
}),
listeners : {
afterEventDrop({ eventRecords }) {
console.log('freddy');
}
},
tbar : [
'',
'->',
{ type : 'viewpresetcombo' },
]
});
for 'console.log('freddy');', it's KO, i don't see 'freddy' in the google console
I applied your changes to our example and I see console logged after drag-n-drop. Please see video attached.
Btw, how do you use same data for assignmentStore and for eventStore?
eventStore: new bryntum.scheduler.EventStore({
data: this.ListEvent
}),
assignmentStore: new bryntum.scheduler.AssignmentStore({
data: this.ListEvent
}),
Maybe the problem in the container you used for your lwc component? Could you please test it in our examples? Do you see that problem?
HI,
what is the difference between eventstore and assignmentStore?
in eventstore, i put the ressource Id, and the event is display on the scheduler, so what is the use of assignmentStore ?
BR
Hi,
this is my scheduler :
this.scheduler = window.scheduler = new bryntum.scheduler.Scheduler({
features: {
resourceTimeRanges: true,
nonWorkingTime : true,
dependencies: false,
timeRanges: {
showHeaderElements: true,
showCurrentTimeLine: true
},
eventEdit: {
extraWidgets: [
{
type: 'text',
name: 'WOnumber',
label: 'Number Work Order',
typeAhead: true,
forceSelection: true,
editor: false,
selectOnFocus: true,
readOnly: true,
}
]
},
stripe : true,
timeRanges : true,
eventEdit : {
editorConfig : {
bbar : {
items : {
deleteButton : null
}
}
}
},
eventMenu : {
items : {
unassign : {
text : 'Unassign',
icon : 'b-fa b-fa-user-times',
weight : 200,
onItem : ({ eventRecord, resourceRecord }) => eventRecord.unassign(resourceRecord)
},
deleteEvent : false,
copyEvent : false,
cutEvent : false
}
},
scheduleMenu : {
items : {
// Remove "Add event" default item
addEvent : false
}
},
},
insertFirst: this.template.querySelector('.main'),
rowHeight: 50,
barMargin: 8,
columns: [
{
text: 'Salariés',
width: 150,
field: 'name',
}
],
startDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()-7),
endDate: new Date(this.currentDate.getFullYear(),this.currentDate.getMonth(),this.currentDate.getDate()+7),
viewPreset : 'weekAndDay',
eventRenderer({ eventRecord, resourceRecord, renderData }) {
const bgColor = resourceRecord.bg || '';
renderData.style = `background:${bgColor};border-color:${bgColor};color:${resourceRecord.textColor}`;
renderData.iconCls.add('b-fa', `b-fa-${resourceRecord.icon}`);
return eventRecord.name;
},
resourceStore: new bryntum.scheduler.ResourceStore({
data: this.ListResource
}),
eventStore: new bryntum.scheduler.EventStore({
data: this.ListEvent,
listeners: {
update: (event) => {
this.onEventUpdate(event);
},
}
}),
tbar : [
'',
'->',
{ type : 'viewpresetcombo' },
],
listeners: {
beforeEventAdd: (event) => {
return false;
},
afterEventDrop({ event }) {
console.log('freddy');
}
}
});
the listener beforeEventAdd works fine, but afterEventDrop doesn't work
BR
HI,
what is the difference between eventstore and assignmentStore?
in eventstore, i put the ressource Id, and the event is display on the scheduler, so what is the use of assignmentStore ?BR
resourceId might be used only for single assignment mode, assignmentStore uses for multi-assignment mode. Should be used first or second approach and not both. AssignmentStore will be created automatically if resourceId approach used.
Here is docs https://bryntum.com/products/scheduler/docs/api/Scheduler/model/mixin/EventModelMixin#field-resourceId
Id of the resource this event is associated with (only usable for single assignments). We recommend using assignments in an AssignmentStore over this approach. Internally any Event using resourceId will have an assignment in AssignmentStore generated.
the listener beforeEventAdd works fine, but afterEventDrop doesn't work
Please try to use one of our examples to test this. Try to apply required changes to it. I tested this and it works fine to me. We should try to find the difference via our solutions, it seems like the problem in not scheduler config itself, but maybe in containers used to render it or versions/browsers... Hard to say what exactly is wrong, because it's not reproducible on my side.