Our pure JavaScript Scheduler component


Post by probo »

Hi there,

I have a task editor with some tabs

taskEdit: {
  items: {
    ....
    contentTab: {
     ...
    }
  }	
}

I need an event that is triggered when i change my tab for example from generalTab to contentTab, is this available?

Kind regards,
Probo


Post by mats »


Post by probo »

Thanks Mats for your reply. I'm not really sure where to put this.

I have the following taskEditor setup:

{
  "features": {
    "taskEdit": {
      "items": {
        "predecessorsTab": false,
        "successorsTab": false,
        "advancedTab": false,
        "notesTab": false,
        "generalTab": {
          "items": {}
        },
        "infoTab": {
          "title": "Details",
          "items": {},
          "weight": 200
        },
        "contentTab": {
          "title": "Content",
          "items": {
            "closeButton": {
              "type": "button",
              "text": "Close"
            }
          },
          "weight": 300
        }
      },
      "editorConfig": {
        "bbar": {
          "items": {
            "cancelButton": null,
            "deleteButton": null
          }
        }
      }
    }
  }
}

Where do i need to put this event to keep track of when i click on another tab?

Kind regards,
Probo


Post by tasnim »

Hello,

Here is an example of how you can use it

let i = 0;

gantt.on('beforeTaskEditShow', ({ editor }) => {
    if (i <= 0) {
        editor.widgetMap.tabs.on('tabChange', (event) => {
            console.log(event);
        });
        i++;
    }
});

Post by probo »

Thanks for the help on the tab change. This helped me to solve the problem i actually had. I ended up using another event called "onTabClick" to execute specific actions when the tab is actually clicked.

This is the code i'm currently using

beforeTaskEdit({taskEdit, taskRecord}) {
    const widgetMap = taskEdit.editor.widgetMap;
    widgetMap['b-tab-1'].on({
        click: () => { widgetMap.saveButton.hidden = false }, once: true
    });
}

I might have another question regarding this functionality... because when i switch from event to event the clicks start to build up. So everytime you click on different event it executes the functions depending on the number of clicks. Does anyone know why this even happens? I solved this by using "once: true" in de click handler and using the following piece of code to clear the exisiting event listeners:

afterTaskEdit({editor}) {
    const widgetMap = editor.widgetMap;
    widgetMap['b-tab-1'].listeners.click.splice(1,1);
}

But i couldn't figure out why the clicks started to build up.

Thanks,
Probo


Post by Animal »

The click handlers built up because you add the click listener on every "before task edit" event. You only need to add the listener to b-tab-1 (Bad idea to use ids) once.

Not have it execute once. Only add it once.

But what is the purpose of this listener? You want to always hide the save button?


Post by probo »

Animal wrote: Tue Dec 13, 2022 11:17 am

The click handlers built up because you add the click listener on every "before task edit" event. You only need to add the listener to b-tab-1 (Bad idea to use ids) once.

Not have it execute once. Only add it once.

But what is the purpose of this listener? You want to always hide the save button?

Hey Animal,.

Thanks for your response. Sure, i can add a reference for the button, that's no problem.. this was more a POC. So yeah i agree that it's much cleaner when you don't use id's.

The purpose of the listener is to hide the save button and execute an ajax call. The save button does not have to be hidden for tabs 2 and tabs 3.

Kind regards,
Probo


Post by Animal »

So the save button needs to hide and show depending on which tab the user switches to?

        taskEdit : {
            // Add a tab change listener
            editorConfig : {
                listeners : {
                    show ({ source : editor }) {
                        editor.widgetMap.tabs.on({
                            tabChange({ prevActiveItem, activeItem}) {
                                // handle it
                            }
                        })
                    },
                    once : true
                }
            }

Post by probo »

Animal wrote: Tue Dec 13, 2022 6:13 pm

So the save button needs to hide and show depending on which tab the user switches to?

        taskEdit : {
            // Add a tab change listener
            editorConfig : {
                listeners : {
                    show ({ source : editor }) {
                        editor.widgetMap.tabs.on({
                            tabChange({ prevActiveItem, activeItem}) {
                                // handle it
                            }
                        })
                    },
                    once : true
                }
            }

Yes that's correct! Thanks for the info. My questions i fully resolved. I just want to add that it would be nice if you can have a click or change handler on the tab item in the taskedit. For example:

features: {
	taskEdit: {
		items: {
			customTab: {
				click: () => {
					// Do something
				},
				change: ({prevTab}, {activeTab}) => {
					// Do something
				}
			}	
		}
	}
}

Kind regards,
Probo


Post by tasnim »

Hello, Probo
Thanks for your suggestion. I will discuss with the team about that

Good Luck :)


Post Reply