[VUE 3] Disable change and stm tracking when adding events programatically

[nickolay]

Can you please modify one of our examples (for example SchedulerPro/examples/frameworks/vue-3/javascript/non-working-time/) and zip the whole folder? Not really familiar with vue environment.

[david-molnar-oculai]

Here is an JS example.

[nickolay]

Thank you.

It turns out that in the scheduler pro event store is a flat store (in gantt its a tree store). So when an event is added/removed the methods for flat stores are activated in stm. You will need to override the following: onStoreModelAdd, onStoreModelInsert, onStoreModelRemove, onStoreRemoveAll

[david-molnar-oculai]

Thank you.

I'm sorry, but this still doesn't work. Look at my example.

If you just load the page, it undo's nothing. If you click after page load (within 3 seconds) on the event, it adds a new event and undoes it. Even though I overload the mentioned functions and do nothing in them. You can see they are called in the console.

What am I doing wrong?

[nickolay]

Need to also override the shouldRecordFieldChange in the event model. The event addition was not actually undo-ed (you can check the event store count property to verify that), its just that event's dates were reverted to nulls and it was hidden from the screen.

Overall it may look like:

import { Scheduler,StateTrackingManager, ProjectModel, EventModel } from '../../build/schedulerpro.module.js';
import shared from '../_shared/shared.module.js';

class PlannerEventModel extends EventModel {
    shouldRecordFieldChange(fieldName, oldValue, newValue) {
        return false
    }
}

class PlannerStateTrackingManager extends StateTrackingManager {
    onStoreModelAdd() {
        console.log("store add")
        return;
    }

    onStoreModelInsert() {
        console.log("store insert")
        return;
    }

    onStoreModelRemove() {
        console.log("store remove")
        return;
    }

    onStoreRemoveAll() {
        console.log("remove all")
        return;
    }
}

const project = new ProjectModel({
    eventModelClass : PlannerEventModel,
    resources: [{ id: "res1", name: "test" }],
    events: [{ resourceId: "res1", startDate: new Date(2022, 2, 1), endDate: new Date() }],
    stm: new PlannerStateTrackingManager({autoRecord: true, disabled: true}),
})

const scheduler = new Scheduler({
    appendTo         : 'container',
    project,
    listeners: {
        eventClick(event) {
            event.source.project.stm.enable();
            event.source.eventStore.add({
                resourceId: "res1",
                startDate: new Date(2021, 2, 1),
                endDate: new Date(),
            });
        },
},
});

setTimeout(() => {
    console.log('canundo', scheduler.project.stm.canUndo)
    if (scheduler.project.stm.canUndo) {
        scheduler.project.stm.undo();
    }
}, 3000)

[david-molnar-oculai]

Alright, thank you. I'll test it soon.

[david-molnar-oculai]

Thank you very much, this solution works!

I ended up using this (slightly modified for this example here):

export class ProcessPlannerEventModel extends PlannerEventModel {
  shouldRecordFieldChange() {
    return false;
  }
}

....

import { Model, Store } from "@bryntum/core-thin";
import { ResourceTimeRangeStore, TimeRangeStore } from "@bryntum/scheduler-thin";
import { AssignmentModel, AssignmentStore, StateTrackingManager } from "@bryntum/schedulerpro-thin";

const filterRecords = (store: Store, records: Model[]) => {
  if (
    (store as TimeRangeStore).isTimeRangeStore ||
    (store as ResourceTimeRangeStore).isResourceTimeRangeStore
  ) {
    // for us, never a change
    return [];
  }
  return records.filter((record) => {
    const id = (store as AssignmentStore).isAssignmentStore
      ? (record as AssignmentModel).eventId
      : record.id;
    // We use _disableStmTracking in the ID of the event so it's easy to filter them out here
    // Normally you could look for the event, but in the AssignmentStore changes, the events' data is not always available, but the ID is
    return typeof id !== "string" || !id.endsWith("_disableStmTracking");
  });
};

export class PlannerStateTrackingManager extends StateTrackingManager {
  onStoreModelAdd(store: Store, records: Model[], ...restArgs: unknown[]) {
    const filteredRecords = filterRecords(store, records);
    if (filteredRecords.length === 0) {
      return;
    }
    return super.onStoreModelAdd(store, filteredRecords, ...restArgs);
  }

  onStoreModelRemove(store: Store, records: Model[], ...restArgs: unknown[]) {
    const filteredRecords = filterRecords(store, records);
    if (filteredRecords.length === 0) {
      return;
    }
    return super.onStoreModelRemove(store, filteredRecords, ...restArgs);
  }
}

[nickolay]

Cool-cool, yw!

[david-molnar-oculai]

Solved, ticket can be closed.

[nickolay]

Ok, thank you for the update.