[VUE] Issue with the Toolbar overflow menu and custom components in the Gantt

[dominicdolan]

Hi,

I'm having an issue where the overflow menu in the Toolbar widget doesn't seem to behave correctly with custom widgets. I'm not sure if it's a bug or if I'm not doing something correctly.

The following code adds a custom-button widget as the last item in the toolbar:

export default class GanttToolbar extends Toolbar {
    static get type() {
        return "gantttoolbar";
    }

    static get configurable() {
        return {
            items: [
                {
                    type: "buttonGroup",
                    items: [
                        {
                            color: "b-green",
                            ref: "addTaskButton",
                            icon: "b-fa b-fa-plus",
                            text: "Create"
                        }
                    ]
                },
                {
                    type: "datefield",
                    ref: "startDateField",
                    label: "Project start",
                    width: "30em",
                },
                {
                    type: "textfield",
                    ref: "filterByName",
                    width: "30em",
                    label: "Find tasks by name",
                },
                {
                    type: "custom-button"
                }
            ]
        };
    }
}

class CustomButton extends Button {
    static get type() {
        return "custom-button"
    }

    compose() {
        return {
            text: "Some Text"
        }
    }
}

CustomButton.initClass();
GanttToolbar.initClass();

The custom-button component does not render correctly in the overflow menu, it looks like this

Screenshot 2022-06-21 174006.png (16.29 KiB) Viewed 378 times

If I don't override the compose method in CustomButton, then it works fine and it looks like this:

Screenshot 2022-06-21 174545.png (20.58 KiB) Viewed 378 times

So is there a way of overriding the compose method and have it work correctly in the overflow menu?

Thanks

[marcio]

Hey dominicdolan,

The configuration of the GanttToolbar and the CustomButton components look correctly configured. I tried with the latest Gantt version and looks fine, could you share what your configuration file looks like?

[dominicdolan]

Hi Marcio,

I tested this on a version of the Vue advanced example and then I removed some of the features. I upgraded Bryntum to the latest version as well and the issue is still happening.

Here is the project config for it:

/**
 * Application configuration
 */

import '@/lib/GanttToolbar.js';
import '@/lib/StatusColumn.js';

const
    projectConfig = {
        // Let the Project know we want to use our own Task model with custom fields / methods
        transport : {
            load : {
                url : 'data/launch-saas.json'
            }
        },
        autoLoad  : true,
    },

    ganttConfig   = {
        dependencyIdField : 'wbsCode',

        startDate               : '2019-01-12',
        endDate                 : '2019-03-24',
        resourceImageFolderPath : 'users/',
        columns                 : [
            { type : 'wbs' },
            { type : 'name', width : 250 },
            { type : 'startdate' },
            { type : 'duration' },
            {
                type        : 'resourceassignment',
                width       : 120,
                showAvatars : true
            },
            { type : 'percentdone', showCircle : true, width : 70 },
            {
                type  : 'predecessor',
                width : 112
            },
            {
                type  : 'successor',
                width : 112
            },
            { type : 'schedulingmodecolumn' },
            { type : 'calendar' },
            { type : 'constrainttype' },
            { type : 'constraintdate' },
            { type : 'statuscolumn' },
            {
                type  : 'date',
                text  : 'Deadline',
                field : 'deadline'
            },
            { type : 'addnew' }
        ],
        columnLines : false,

        dependencyEditFeature : true,

        timeRangesFeature : {
            showCurrentTimeLine : true
        },

        tbar : {
            type : 'gantttoolbar'
        },
    };

export { projectConfig, ganttConfig };

[tasnim]

Hi,
It works fine here. I've attached the app below you can check and compare it with your app. Btw, what version are you using?

[dominicdolan]

Hi,

I am using version 5.0.6. I see that your example uses 5.0.7 but when I try to run npm install on that, it says that version doesn't exist.

Screenshot 2022-06-22 114228.png (45.5 KiB) Viewed 354 times

[tasnim]

Sorry, my bad. Go inside of package.json and change these

    "@bryntum/gantt": "5.0.7",
    "@bryntum/gantt-vue": "5.0.7",

To these

    "@bryntum/gantt": "5.0.6",
    "@bryntum/gantt-vue": "5.0.6",

Then try npm i

[dominicdolan]

Hi,

So the code you shared isn't quite right to recreate the bug. It is related to the toolbar overflow menu described here https://www.bryntum.com/docs/gantt/api/Core/widget/Toolbar#config-overflow.

In your code, you have this in the GanttToolbar configurable field:

{
    type: "textfield",
    ref: "filterByName",
    width: "30em",
    label: "Find tasks by name",
},
{
    type       : 'button',
    ref        : 'featuresButton',
    icon       : 'b-fa b-fa-tasks',
    text       : 'Settings',
    tooltip    : 'Toggle features',
    toggleable : true,
    menu       : {
        onItem       : 'up.onFeaturesClick',
        onBeforeShow : 'up.onFeaturesShow',
        // "checked" is set to a boolean value to display a checkbox for menu items. No matter if it is true or false.
        // The real value is set dynamically depending on the "disabled" config of the feature it is bound to.
        items        : [
            {
                type: "custom-button"
            }
        ]
    }
}

Instead, that part should be like this:

{
    type: "textfield",
    ref: "filterByName",
    width: "30em",
    label: "Find tasks by name",
},
{
    type: "custom-button"
}

The custom button is in the Toolbar, it's not inside a menu in the Toolbar.

Then when you make the window narrower until it's too narrow for everything to fit into it, the overflow menu appears and the custom button does not show up inside the overflow menu.

Sorry I didn't describe the repro steps very well before.

Thanks,
Dominic

[tasnim]

Thanks for your clarification.
I've reproduced it. We'll investigate it. Here is the ticket: https://github.com/bryntum/support/issues/4844

[johan.isaksson]

Hi,

Your custom compose overrides the inner structure of the Button, which breaks the overflow handling. If you want to change the text of your custom button, a better option would be to just override the text config:

class CustomButton extends Button {
    static type = 'custom-button';

   static configurable = {
     text : 'Some Text'
   }
}

If you really need to override the compose fn, try returning a DOM structure matching the buttons original structure (with text in a label tag).

Hope that helps!

[dominicdolan]

Okay thanks Johan,

The actual use case is like this:

class MarkLiveButton extends Button {
    compose() {
        if (this.metadata?.status === "Template") {
            return {
                style: "display: none"
            };
        } else if (this.metadata?.status != null) {
            const text = this.metadata?.status === "Draft" ? "Mark Live" : "Mark Draft";
            return { text };
        }
    }

    static get type() {
        return "mark-live-button";
    }

    static get configurable() {
        return {
            color: "b-blue",
            style: "margin-left: 10px; font-weight: bold;",
            width: "110px"
        };
    }
}

The button's text has to change based on the status.

So what do I need to do here? Should it return HTML instead?