Our pure JavaScript Scheduler component


Post by Globox21126 »

Hey,

splitting a task doesn't work as it should. The function doesnt work since being connected to a database. After sync is fired, I have the following information in the header:

{
  "type": "sync",
  "requestId": 16342112641422,
  "revision": 0,
  "events": {
    "updated": [
      {
        "duration": 2,
        "endDate": "2021-10-15T08:30:00+02:00",
        "Id": 180
      }
    ]
  }
}

As It says, duration of one task has changed. Which is not true because task should be splited.
State Tracking Manager prints UpdateAction.

Second case:
Sometimes on split I got AddAction in State Tracking Manager and nothing is being synchronised with database.

I have attatched two gif's to show this behaviour, what is more, It's totally random (add action or update action).


Project manager config:

	    project: new ProjectModel({
      transport: {
        load: {
          url: `${environment.baseDevUrl}schedulercrud/load`,
          // url : './assets/data/dataTest.json',
          paramName: 'q',
          requestConfig: {
            fetchOptions: {
              credentials: 'omit'
            }
          }
        },
        sync: {
          url: `${environment.baseDevUrl}schedulercrud/sync`,
          // url : './assets/data/dataTest.json',
          requestConfig: {
            fetchOptions: {
              credentials: 'omit',
              headers: {
                'Content-Type': 'application/json'
              },
            }
          }
        }
      },
      listeners: {
        load: (x) => {
          this.sessionService.events.next(x.response.events.rows.map(
            x => {
              x.id = x.Id;
              return x;
            }
          ).filter(x => x.planed === false))
        }
      },
      validateResponse: true,
      autoLoad: true,
      autoSync: true,
      stm:{
        autoRecord : true,
        getTransactionTitle(transaction) {
          const lastAction = transaction.queue[transaction.queue.length - 1];

      let { type, model } = lastAction;

      if (lastAction.modelList && lastAction.modelList.length) {
          model = lastAction.modelList[0];
      }

      let title = 'Transaction ' + this.position;

      if (type === 'UpdateAction' && model instanceof EventModel) {
          title = 'UpdateAction event ' + model.name;
      }
      else if (type === 'UpdateAction' && model instanceof ResourceModel) {
          title = 'UpdateAction resource ' + model.name;
      }
      else if (type === 'RemoveAction' && model instanceof EventModel) {
          title = 'RemoveAction event ' + model.name;
      }
      else if (type === 'RemoveAction' && model instanceof ResourceModel) {
          title = 'RemoveAction resource ' + model.name;
      }
      else if (type === 'AddAction' && model instanceof EventModel) {
          title = 'AddAction event ' + model.name;
      }
      else if (type === 'AddAction' && model instanceof DependencyModel) {
          title = 'AddAction dependency';
      }
    return console.log(title);
  }
  },
  resourceStore: {
    fields: [
      { name: 'id', dataSource: 'Id' },
      { name: 'name', dataSource: 'name' }
    ]
  },
  eventStore: {
    fields: [
      { name: 'id', dataSource: 'Id' },
      { name: 'name', dataSource: 'name' },
      { name: 'startDate', dataSource: 'startDate', type: 'date' },
      { name: 'endDate', dataSource: 'endDate', type: 'date' },
      { name: 'cls', dataSource: 'cls' },
      { name: 'draggable', dataSource: 'draggable' },
      { name: 'resizable', dataSource: 'resizable' },
      { name: 'planed', dataSource: 'planed' }
    ]
  },
  assignmentStore: {
    fields: [
      { name: 'resource', dataSource: 'resourceId' },
      { name: 'event', dataSource: 'event' },
      { name: 'id', dataSource: 'Id' }
    ]
  }
})
  }

Event split service:

	export class RightClickSplit {

  constructor(public sessionService: SessionService) {
        
} public getSplitConfig() { return this.splitEvent; } private splitEvent = { text: 'Split', icon: 'b-fa b-fa-cut', onItem: ({ eventRecord }) => { const popup = new Popup({ header: 'Split options', autoShow: false, centered: true, closable: true, closeAction: 'destroy', width: '35em', minHeight: '25em',
bbar: [ { text: 'Cancel', minWidth: 100, onAction: 'up.close' }, { text: 'Split', minWidth: 300, cls: 'b-raised b-blue', onAction: () => this.onSplit(eventRecord, popup) } ], items: [ this.CreateNumberField(eventRecord) ] }); popup.show(); } } private CreateNumberField(eventRecord: EventModel) { let numberFiled = this.CreateNumber(eventRecord) return numberFiled; } private CreateNumber(eventRecord: EventModel): NumberField { return new NumberField({ min: 0, max: (eventRecord.durationMS / (1000 * 60 * 60)), label: 'How many hours to cut?', style: 'font-size: 1.4rem;', step: 0.5, ref: 'splitNumberField', }); } private onSplit(eventRecord: EventModel, popup){ let numberValue = popup.widgetMap.splitNumberField.value; if(numberValue === undefined || numberValue === 0) { Toast.show('Wrong data'); popup.close(); return; } // convert ms to hours let hours = (eventRecord.durationMS / (1000 * 60 * 60)); // let hours = eventRecord.duration; let splitData = 1 - (numberValue/(hours)) eventRecord.split(splitData); Toast.show('Succes'); popup.close(); } }

I wonder if some "fields" in Project Manager config are missing?

Attachments
UpdateAction.gif
UpdateAction.gif (21.04 KiB) Viewed 1622 times
AddAction.gif
AddAction.gif (32.47 KiB) Viewed 1622 times

Post by mats »

So, you mean the sent data does not include info about the newly created part?


Post by Globox21126 »

Yes, and split doesnt divide task but only changes duration


Post by mats »

Hard to see what's wrong just based on that snippet, could you please put this code in one of our standard samples and upload it here so we have something we can run + debug?


Post by Globox21126 »

Attatched, simply 'npm i' and 'npm start' in terminal. To split task: mouse right click on event.

Thank you Mats

Attachments
Scheduler-testcase.zip
(22.81 MiB) Downloaded 94 times

Post by alex.l »

I see a blank screen when I open your app. Same for /scheduler path. Could to take a look?

All the best,
Alex


Post by Globox21126 »

Are there any js errors in devtools? Which browser do You use?


Post by alex.l »

No errors, just the blank screen.
I did npm i and npm start.
Chrome v93.

All the best,
Alex


Post by Globox21126 »

Would you mind trying again?

I have attatched new test case, perhaps something went wrong with src files during zip compression.

Remember to npm install on right path (node modules must to be installed on main folder)

Screenshot_2.png
Screenshot_2.png (10.81 KiB) Viewed 1568 times
Attachments
test-case.zip
(196.95 KiB) Downloaded 96 times

Post by saki »

I have managed to make the application working but it is very complicated so to sort out if it is a problem in our component or elsewhere I have modified our scheduler pro resource-histogram demo and I have added the split menu item. It works as on the screencast:

event-split.gif
event-split.gif (1.22 MiB) Viewed 1563 times

Note: We get the error in server access because the method is POST so the file is not found. However, we can inspect the payload as you can see on the screencast. The payload contains the expected data.

I am attaching the modified code so you can use it yourself.

Attachments
resource-histogram.zip
(603.62 KiB) Downloaded 109 times

Post Reply