[VUE 3] Issue with creating task in gantt and editing in taskboard

[produto]

Hello, I'm having a problem creating a task in the gantt and trying to move it in the kanban.

This error only occurs in the unified view, like your example, separated by a splitter.

Below is the error and also a playable sample. In this sample, you need:

sample-bug.zip

sample

(645.5 KiB) Downloaded 19 times

Obs.: Run NPM RUN DEV after unzip

1. The tasks must be in the mocked.json file format. Project and calendar settings are irrelevant.
2. After loading the tasks, click the button in the top left corner to create a new task in a customized way.
3. After creating and appearing in the gantt and kanban, try to drag it to another column, this is where the error will appear.

The question would be whether something is being done wrong in the custom editing modal when creating a task and adding the store.

video:

bug2.mp4

bug-video

(3.81 MiB) Downloaded 23 times

[marcio]

Hey produto,

Thanks for reaching out and sharing the demo. I tried to reproduce the error that you shared in the video, but when using the custom modal and following the instructions that you provided, I was able to see only an error regarding the backend (which is understandable as I don't have the server running here).

I'm sharing a video with you, could you please confirm that I tried that correctly?

[produto]

I guess you must have, at least, a backend up and running. Does not require to necessarily have to persist it. Can you connect to a custom backend you guys have? Just to send it the request, like a json server

Here is a video with a sync url running

bug with connection.mp4

connected to a backend

(1 MiB) Downloaded 22 times

[marcio]

Hey produto,

Could you please provide what's the expected output from the backend? You can mock that using our AjaxHelper function here https://bryntum.com/products/gantt/docs/api/Core/helper/AjaxHelper#function-mockUrl-static

Also, I couldn't see in the video, could you please share what message are you getting in the console?

[produto]

Where can I call this mockUrl? I mean, to mock the sync response, what method should I call in the projectModel to actually put the sync data into the store?

it is right? Tried but the response returns undefined

 const r = {
    success: true,
    tasks: {
      rows: [
        {
          id: "1",
          name: "New Task",
          startDate: new Date(),
          endDate: new Date(new Date().setDate(new Date().getDate() + 1)),
          duration: 2,
          parentId: "1",
          step: "1"
        }
      ]
    }
  }
  const response = AjaxHelper.mockUrl(`http://localhost:3000/sync`, {
    responseText: JSON.stringify(r),
    synchronous: true
  })

This is the error showed

errorbryntum.png (418.42 KiB) Viewed 157 times

[marcio]

Hey produto,

Regarding mockUrl, you need to just add the mock into some part of the code, like this

const r = {
    success: true,
    tasks: {
      rows: [
        {
          id: "1",
          name: "New Task",
          startDate: new Date(),
          endDate: new Date(new Date().setDate(new Date().getDate() + 1)),
          duration: 2,
          parentId: null,
          step: "1"
        }
      ]
    }
  }

 AjaxHelper.mockUrl(`http://localhost:4000/company/id/projects/ids/schedule/bryntum`, {
    responseText: JSON.stringify(r),
    synchronous: true
  })

I added that part to the project that you mentioned, at MultiSchedule.vue

<script setup lang="ts">
import { BryntumGantt } from "@bryntum/gantt-vue-3-thin";
import { BryntumSplitter } from "@bryntum/core-vue-3-thin";
import { BryntumTaskBoard } from "@bryntum/taskboard-vue-3-thin";
import {AjaxHelper} from '@bryntum/core-thin';
import GanttConfiguration from "@/config/GanttConfiguration";
import TaskBoardConfiguration from "@/config/TaskBoardConfiguration";
import type { PropType } from "vue";
import type Schedule from "@/domain/Schedule";

const r = {
    success: true,
    tasks: {
      rows: [
        {
          id: "1",
          name: "New Task",
          startDate: new Date(),
          endDate: new Date(new Date().setDate(new Date().getDate() + 1)),
          duration: 2,
          parentId: null,
          step: "1"
        }
      ]
    }
  }

 AjaxHelper.mockUrl(`http://localhost:4000/company/id/projects/ids/schedule/bryntum`, {
    responseText: JSON.stringify(r),
    synchronous: true
  })


const props = defineProps({
  schedule: {
    type: Object as PropType<Schedule>,
    required: true
  }
});
let ganttConfig: any = undefined;
let taskboardConfig: any = undefined;

ganttConfig = new GanttConfiguration().buildConfig();
taskboardConfig = new TaskBoardConfiguration().buildConfig();

function onBeforeTaskEdit(e: any) {
  console.log(e)
}

</script>

I added a new record of that working here.

[produto]

I was able to solve this bug by changing the way we create a Task and added to the store. We have a Task model, witch extends from TaskModel from gantt and we use it for the gantt and the taskboard, as we have multiple products combined.

When we open our custom modal, right before the user save it, we create a new Task(), added to the store and commited async. But, for some internal reason from the library, it doesn't recognize some methods, like buildIndexKey, instanceMeta and etc, because they are added into the class in another moment.

To solve this, instead we make a new Task(), we use the projectModel.taskStore.createRecord(), passing a simple object with the data to be created. After that, we add and commit in the store.

I think to reproduce this bug you'll need to:

1. Create a custom model to the original ModelClass
2. Add some custom fields
3. Create a custom form to create a task
4. Instantiate the custom model you created
5. Added to the store and commit
6. After that, try to move the same task in the kanban to another column

Obs.: Use the taskboard and gantt together, in the same page with the same project info.

This solution also applies to this card viewtopic.php?p=140117#p140117

[ghulam.ghous]

Hi there,

Thanks for sharing the detailed steps to reproduce this issue. I have tried the exact same steps but I was not able to reproduce this issue. Probably there's something else on your end that is causing the issue. Can you share the full runnable test case? Probably you can use the above sample-bug project and add your backend there and provide us instructions to run the backend. Because I am afraid the issue is in the returned data from the backend. We have tried here https://bryntum.com/products/gantt/examples/gantt-taskboard/. Can you also try this example and see if you can reproduce the issue without the backend?

Regards,
Ghous