Premium support for our pure JavaScript UI components


Post by dominicdolan »

Hi,

I need to use the static fields property to do some configuration as explained here but due to webpack/babel configuration or something (which is outside of my control) I can't use static getters or static fields.

Is there an alternative to this?

I saw this post which says that the fields configuation can be passed in to the Store directly but I'm not sure how to do that. We have set up our project similar to the VueJS inline data example and I don't see an obvious way to pass configuration to the various stores.

Thanks,
Dominic


Post by dominicdolan »

Hi,

Just an update on this. I actually got the static fields property working so that's not an issue.
But I'm having other issues.

If I set the taskModelClass and also have a static fields property, there seems to be an error:

Screenshot 2022-05-11 124141.png
Screenshot 2022-05-11 124141.png (40.43 KiB) Viewed 786 times

If I don't set taskModelClass it seems to behave fine. Is there something I'm not doing right?


Post by alex.l »

but due to webpack/babel configuration or something (which is outside of my control) I can't use static getters or static fields.

In case you have babel/webpack, why can't you use modern JavaScript syntax while development?

We have set up our project similar to the VueJS inline data example and I don't see an obvious way to pass configuration to the various stores.

That's pretty easy to do. If your config something like this

    <bryntum-project-model
        ref="project"
        v-bind="projectConfig"
        :calendars="calendars"
        :tasks="tasks"
        :dependencies="dependencies"
        :resources="resources"
        :assignments="assignments"
        :time-ranges="timeRanges"
    />

You can put your settings into projectConfig.

export const useProjectConfig = function () {
    return {
        calendar: 'general',
        startDate: '2022-01-15',
        hoursPerDay: 24,
        daysPerWeek: 5,
        daysPerMonth: 20,
        taskStore  : {
            fields : [ 'extraField', 'extraField2' ]
        },
        resourceStore  : {
            fields : [ 'extraResourceField', 'extraResourceField2' ]
        }
        // and so on
    };
};

All the best,
Alex


Post by alex.l »

Please share your code, we need to have a look at the code you use. Better to see a runnable app, it'll make things much easier.

All the best,
Alex


Post by sergey.maltsev »

Hi, Dominic!

You could try fields config on store as Alex suggested above.
https://www.bryntum.com/docs/gantt/api/Core/data/Store#config-fields

Or use may use something like this to mimic static fields if your loader can not process static for some reason.

Object.defineProperties(MyModel, {
    fields : {
        get() {
            return [
                ...
            ];
        }
    }
});

Post by dominicdolan »

Okay, thanks all.

That's very helpful information. I have gotten this part almost working now, I just have one other issue which I'm struggling with and it's related to setting the taskModelClass and dependencyModelClass and the version of Vue that I'm using. When I try to set those props I get this error:

Screenshot 2022-05-11 140116.png
Screenshot 2022-05-11 140116.png (18.39 KiB) Viewed 782 times

I was able to replicate this error in one of your examples. I took the Vue inline data example and added taskModelClass property to the project like this:

<template>
    <div id="container">
        <bryntum-demo-header
            link="../../../../../#example-frameworks-vue-javascript-inline-data"
        />

        <bryntum-project-model
            ref="project"
            v-bind="projectConfig"
            :calendars="calendars"
            :tasks="tasks"
            :taskModelClass="customModel"
            :dependencies="dependencies"
            :resources="resources"
            :assignments="assignments"
            :time-ranges="timeRanges"
        ></bryntum-project-model>
        <bryntum-gantt ref="gantt" v-bind="ganttConfig"></bryntum-gantt>
    </div>
</template>

<script>
import {
    BryntumGantt,
    BryntumProjectModel,
    BryntumDemoHeader,
    BryntumButton
} from '@bryntum/gantt-vue';
import { DateHelper, TaskModel } from '@bryntum/gantt';

import { ganttConfig, projectConfig } from '@/AppConfig.js';
import * as initialData from '@/initialData.js';

class CustomModel extends TaskModel {
    
}

export default {
    name: 'app',

    // local components
    components: {
        BryntumDemoHeader,
        BryntumProjectModel,
        BryntumGantt,
        BryntumButton
    },

    data() {
        return {
            // initialData spreads as tasks, dependencies, etc.
            ...initialData,
            projectConfig,
            ganttConfig,
            dataSet: 0,
            customModel: CustomModel
        };
    },
    mounted() {
        // assign project to gantt
        const gantt = this.$refs.gantt.instance;
        const project = this.$refs.project.instance;
        gantt.project = project;
    }
};
</script>

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

This works fine but then I changed the version of vue to be the same as what we are using, as follows:

  • vue from "~2.6.14" to "2.6.12"
  • vue-template-compiler from "~2.6.10" to "2.6.12"

I did an npm install and rebuilt and then I got the same error.

So my question is: Is there a workaround for this or do I have change the version of vue that I'm using?

Thanks


Post by saki »

The problem is the combination of type for taskModelClass set in our wrapper and the Vue version. 2.6.12 handles types differently from 2.6.14.

We will discuss the issue tomorrow and will get back to you with a solution or a workaround, at least.


Post by sergey.maltsev »

Hi, Dominic!

Thanks for the details.
It's appeared a bug inside wrappers code.
I've created this issue to fix this
https://github.com/bryntum/support/issues/4607

Meanwhile you may use this workaround with setting modelClass on Project stores.

https://www.bryntum.com/docs/gantt/api/Core/data/Store#config-modelClass

Regarding to our inline-data example you've checked

Remove your changes and replace code of inline-data/src/AppConfig.js with the one below

/**
 * Application configuration
 */
import { DateHelper, TaskModel, DependencyModel } from '@bryntum/gantt';

class CustomTaskModel extends TaskModel {

}

class CustomDependencyModel extends DependencyModel {

}

export const projectConfig = {
    calendar       : 'general',
    startDate      : DateHelper.add(DateHelper.clearTime(new Date()), -7, 'day'),
    hoursPerDay    : 24,
    daysPerWeek    : 5,
    daysPerMonth   : 20,
    taskStore      : {
        modelClass: CustomTaskModel
    },
    dependencyStore: {
        modelClass: CustomDependencyModel
    }
};

export const ganttConfig = {
    timeRangesFeature: {
        showHeaderElements : true,
        showCurrentTimeLine: true
    },
    viewPreset       : 'weekAndDayLetter'
};

I hope this would help.


Post by dominicdolan »

Okay, great.

I have it working now, thanks


Post Reply