Hi, can you help me please?
I am using Bryntum Scheduler for displaying events with CRUD manager. Also, I have unassigned events in a Grid with Drag-n-drop functionality. So I can move assigned event to unassigned grid and back.
Now I try to add Undo/redo functionality and it works good except one moment: when I move assigned event to unassigned grid or unassigned event from Grid to Scheduler, it creates 2 transactions:
1. first transaction is correct (it removed event in one place and add it in another, sync by CRUD with backend)
2. second transaction is incorrect and looks like nothing is happening, "oldData" is the same as "newData" in "transaction.queue[0]" (only difference is that "newData" contains "$PhantomId") and this data contains only inner fields, like:
crew.categoryId: "d1dc0cff-b8b5-4906-b709-9b2aeb6f57e8"
crew.id: "43e8f095-778e-4e84-b9a4-f07edda57354"
crew.name: "New crew"
crew.slug: "new-crew"
installation.id: "f09f71f2-17d6-498a-943f-5a069f09cbc6"
installation.name: "US"
location.id: "861809db-cd7a-437f-aa72-0239c6bbce68"
location.installationId: "f09f71f2-17d6-498a-943f-5a069f09cbc6"
location.name: "New Jersey"
The project is written on React and next.js
Scheduler config:
export const schedulerConfig = {
crudManager,
startDate,
endDate,
enableUndoRedoKeys: true,
eventDragSelectFeature: true,
eventDragFeature: {
constrainDragToTimeline: false,
validatorFn() {
return true;
},
externalDropTargetSelector: '.b-unassignedgrid',
},
columns: [
{
type: 'resourceInfo',
text: 'Installations',
width: 200,
},
],
project: {
stm: {
autoRecord: true,
},
autoLoad: true,
listeners: {
dataReady(props) {
if (!isSchedulerLoaded) {
const stm = props.source.stm;
const storeToRemove = stm.stores.filter(
(store) => !(store instanceof EventStore),
);
storeToRemove.forEach((store) => stm.removeStore(store));
props.source.stm.addStore(unassignedEventStore);
props.source.stm.enable();
isSchedulerLoaded = true;
}
},
},
},
tbar: [
{
type: 'undoredo',
items: { transactionsCombo: null },
},
],
listeners: {
// We listen for the `eventDrop` event and take action if dropped on the external grid
eventDrop({eventRecords, externalDropTarget}) {
if (externalDropTarget) {
eventRecords.forEach((eventRecord) => {
eventRecord.type = 'unassigned';
});
eventStore.remove(eventRecords);
unassignedEventStore.add(eventRecords);
}
},
},
};
Crud manager works perfect. It syncs all data with backend (except second transaction, because it does not change anything).
export const crudManager = new CrudManager({
eventStore,
resourceStore,
stores: [ unassignedEventStore ],
autoLoad: true,
autoSync: true,
transport: {
load: { url: `${API_URL}/api/load` },
sync: { url: `${API_URL}/api/sync` },
},
listeners: {
loadFail: processCRUDManagerError,
syncFail: processCRUDManagerError,
},
});
Here I added additional store "unassignedEventStore" and it syncs the same as the EventStore:
export const unassignedEventStore = new Store({
id: 'unassignedEvents',
syncDataOnLoad: true,
});
For drag-n-drop I used your example, so it is very ordinary ("class Drag extends DragHelper") and works good.
I have only the problem with double transactions when I move event from EventStore to Store or in reverse. Can you give me some hint or the direction where I can look how to prevent it or what I did wrong or missed to added? On forum I found a code to remove all other stores from stm and added it, but it does not help.