[ANGULAR] Gantt Crud Manager | Custom Edit Dialog | Change Dates | Strange POST request data

[tsvetelin.saykov]

I have customised task edit dialog as follow

Screenshot 2020-01-09 at 10.09.17.png (23.77 KiB) Viewed 894 times

When I change start/end dates, the GRUD Manager submits very strange JSON for property "effort" - see below attached image

Screenshot 2020-01-09 at 10.05.07.png (372.24 KiB) Viewed 894 times

{"type":"sync","requestId":"15785568680343","tasks":{"updated":[{"constraintType":"startnoearlierthan","constraintDate":"2019-11-01T22:00:00.000Z","startDate":"2019-11-01T22:00:00.000Z","endDate":"2019-11-06T22:00:00.000Z","effort":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude":{"unit":"hour","magnitude" ..................... }}}}}}},"duration":5,"id":45}, {"effort":"NaNundefinedundefinedNaN","id":100000000}]}

My server side endpoint throw an error "JSON::NestingError - nesting of 101 is too deep:"

When I change only task name, JSON is ok - example in below image

Screenshot 2020-01-09 at 10.05.57.png (30.84 KiB) Viewed 894 times

When I use drag&drop to move task to new start date, the JSON request is ok

{"type"=>"sync", "requestId"=>"15785584816862", "tasks"=>{"updated"=>[{"constraintType"=>"startnoearlierthan", "constraintDate"=>"2019-10-25T21:00:00.000Z", "startDate"=>"2019-10-25T21:00:00.000Z", "endDate"=>"2019-10-29T21:00:00.000Z", "id"=>45}]}, "event_id"=>"1062", "bryntum_activity"=>{"type"=>"sync", "requestId"=>"15785584816862", "tasks"=>{"updated"=>[{"constraintType"=>"startnoearlierthan", "constraintDate"=>"2019-10-25T21:00:00.000Z", "startDate"=>"2019-10-25T21:00:00.000Z", "endDate"=>"2019-10-29T21:00:00.000Z", "id"=>45}]}}}

It seem UI controls / calendars for date fields create strange tree like structure for "effort" property.

Please could you let me know how to fix the issue with strange "effort" part of JSON

Thank you in advance

Tsvetelin

[sergey.maltsev]

Hi, Tsvetelin!

I've checked our examples/php demo for Gantt v.2.0.0 and effort data looks correct on synchyng with server.
So this might be your data/configuration issue but it is hard to say exactly without working testcase.
Could you please attach sample app here which shows this behavior?

[tsvetelin.saykov]

Hi Sergey

I've created a simple test application which is based on my data structure & API and everything works fine.

Then I realise that I am using Angular 8 with Bootstrap & ngx-bootstrap.

So I've just added to the test application, in app.module.ts the import of BsDatepickerModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
[b]import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';[/b]

import { AppComponent } from './app.component';
import { GanttEventsComponent }   from './gantt-events.component';

@NgModule({
  declarations: [
    AppComponent, GanttEventsComponent
  ],
  imports: [
    BrowserModule,
    [b]BsDatepickerModule.forRoot(),[/b]
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json contains following dependencies

    "bootstrap": "^4.3.1",
    "ngx-bootstrap": "^5.2.0",
    "bryntum-gantt": "file:vendor/bryntum-gantt",

And I got issue with strange JSON

Processing by BryntumActivitiesController#create as */*
  Parameters: {"type"=>"sync", "requestId"=>"15786633666462", "tasks"=>{"updated"=>[{"constraintType"=>"startnoearlierthan", "constraintDate"=>"2019-10-26T21:00:00.000Z", "startDate"=>"2019-10-26T21:00:00.000Z", "endDate"=>"2019-11-12T21:00:00.000Z", "effort"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour"}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, "id"=>44}, {"startDate"=>"2019-10-26T21:00:00.000Z", "duration"=>36, "effort"=>"0undefinedundefinedundefinedNaN", "id"=>100000000}]}, "event_id"=>"1062", "bryntum_activity"=>{"type"=>"sync", "requestId"=>"15786633666462", "tasks"=>{"updated"=>[{"constraintType"=>"startnoearlierthan", "constraintDate"=>"2019-10-26T21:00:00.000Z", "startDate"=>"2019-10-26T21:00:00.000Z", "endDate"=>"2019-11-12T21:00:00.000Z", "effort"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour", "magnitude"=>{"unit"=>"hour"}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, "id"=>44}, {"startDate"=>"2019-10-26T21:00:00.000Z", "duration"=>36, "effort"=>"0undefinedundefinedundefinedNaN", "id"=>100000000}]}}}
  

I think the issue caused by using in combination ngx-bootstrap & Bryntum!

Do you need demo or you can import ngx-bootstrap into existing Angular test app to test it locally in your side?

Thank you very much for your support to resolve the issue

Tsvetelin