Premium support for our pure JavaScript UI components


Post by dominicdolan »

Hi,

There seems to be a bug that causes the whole page to freeze.

I attached the code that causes it. To reproduce it run npm install then npm run dev. The app should be just the Bryntum gantt with a single task, if you move the task the page freezes.

I have found that it's caused by calling the ProjectModel instead of just the configuration. Inside the GanttEditor.vue file there is the following:

data() {
    return {
        project: new ProjectModel({
            tasks: [
                {
                    id: 1,
                    startDate: new Date(),
                    duration: 7,
                    durationUnit: "day",
                    name: "Design",
                }
            ]
        })
    }
}

If that is instead changed to this, then it seems to work:

data() {
    return {
        project: {
            tasks: [
                {
                    id: 1,
                    startDate: new Date(),
                    duration: 7,
                    durationUnit: "day",
                    name: "Design",
                }
            ]
        }
    }
}

It also seems to work fine if the gantt is placed in the App.vue file instead of the GanttEditor.vue file.

I tried this with version 5.1.3, and I also tried this with the new alpha version, 5.2.0-alpha-1, and it still seems to be happening.

Is there a workaround for this? I want to be able to use the ProjectModel syntax instead of the configuration object because I want to be able to extend from ProjectModel.

Thanks

Attachments
my-vue-app.zip
(4.28 KiB) Downloaded 23 times

Post by alex.l »

Please check this guide how to import ProjectModel class https://bryntum.com/docs/gantt/guide/Gantt/integration/vue/data-binding#binding-existing-data-to-the-project
You can import your extended ProjectModel:

<template>
    <div>
        <bryntum-project-model
            ref = "project"
            :assignments = "assignments"
            :calendars = "calendars"
            :dependencies = "dependencies"
            :resources = "resources"
            :tasks = "tasks"
        />
        <bryntum-gantt
            :project = "project"
            v-bind = "ganttConfig"
        />
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

// here you will need to specify your sources for ProjectModel.
import { BryntumProjectModel, BryntumGantt } from '@bryntum/gantt-vue-3';

import { useGanttConfig } from '@/AppConfig';
import * as appData from '@/AppData';

export default {
    name : 'App',

components : {
    BryntumProjectModel,
    BryntumGantt
},

setup() {
    const project = ref(null);

    const ganttConfig = reactive(useGanttConfig());

    const assignments = ref(appData.assignments);
    const calendars = ref(appData.calendars);
    const dependencies = ref(appData.dependencies);
    const resources = ref(appData.resources);
    const tasks = ref(appData.tasks);

    return {
        project,
        ganttConfig,
        assignments,
        dependencies,
        calendars,
        tasks,
        resources
    };
}
};
</script>

<style lang = "scss">
@import './App.scss';
</style>

All the best,
Alex


Post by dominicdolan »

Okay, but if I want to extend from the default ProjectModel, how do I do that using this method.

For example, if I have a class like this:

class MyProjectModel extends ProjectModel {

    static get fields() {
        return [
            { name: "name", type: "string" },
            { name: "created", type: "string" },
            { name: "createdBy", type: "object" }
        ]
    }


    static get configurable() {
        return {
            stm : {
                autoRecord : true
            },
        }
    }
}

Also in the future I might want to override some of the methods as well.

Is there any way of using this class as the project model or is that not supported?

Thanks


Post by alex.l »

Hi dominicdolan,

I checked it deeper and have better option for you.

In BryntumProjectModel we have this code

    function createWidget(context) {
        const
            { instanceClass } = context.data,
            config            = createConfig(context);
        return instanceClass.$name === 'Widget' ? WidgetHelper.createWidget(config) : new instanceClass(config);
    }

So the easiest way to not extend React wrapper but only ProjectModel class.
Try this:

<template>
    <div>
        <bryntum-project-model
            ref = "project"
            :instanceClass=MyProjectModel
        />
        <bryntum-gantt
            :project = "project"
            v-bind = "ganttConfig"
        />
    </div>
</template>

All the best,
Alex


Post by dominicdolan »

This isn't working for me. The instanceClass property is part of the data attribute inside BryntumProjectModel component, I can only change the props of that component.

I tried doing this as well, but it caused errors. I assume I'm not supposed to be extending Bryntum components

<template>
    
</template>

<script>
import {BryntumProjectModel} from "@bryntum/gantt-vue-3"
import {MyProjectModel} from "@/my-project-model";
export default {
    extends: BryntumProjectModel,
    data() {
        return {
            instanceClass: MyProjectModel
        }
    }
}
</script>

<style scoped>

</style>

Post by dominicdolan »

Hi,

I think I found a workaround for this
I found that instead of the above, this works:

import { BryntumProjectModel } from "@bryntum/gantt-vue-3"
import {MyProjectModel} from "../my-project-model";

export default {
    ...BryntumProjectModel,
    data() {
        return {
            ...BryntumProjectModel.data(),
            instanceClass: MyProjectModel
        }
    }
}

And then use that as a component instead of the BryntumProjectModel component


Post Reply