Tasks

Task

Tasks are array of simple objects with some properties.

Every task object should contain this properties:

• id {string|int} - gantt-elastic will track changes in task array by this value
• label {string} - label which will be displayed inside chart or task list
• start {string|int|Date} - start property could be date string (ISO 8601) '2018-10-04T21:00:00', milisecond timestamp (int) or Date
• duration {int} - how long will take to finish task in second - for one day = 24x60x60
• progress {float|int} - value from 0 to 100 (percent)
• type {string} - project, milestone or task
• style {object} - optional, you can look at CSS page of this wiki and grab some styles

Change detection

You can modify task just by changing your input tasks object - gantt-elastic will watch this object and update accordingly. But be careful what you are doing with tasks in other parts of your application because you might accidentally make a mess.

This was the easiest way if you don't need to add or remove tasks.

Adding / removing a task

If you need to add or remove tasks you must listen to gantt-elastic.ready event which will bring you internal gantt instance with state property. state property contains all methods and data used by gantt-elastic. Tasks are placed at ganttElasticInstance.state.tasks array. Just catch gantt-elastic.ready event and save ganttElasticInstance or just ganttElasticInstance.state to global or local variable to be able to modify it.

If you need add task after initialization - just use state.tasks.push({/* your task data */}) where state is state delivered by ready event - gantt-elastic will watch this array and update everything for you.

If you need remove task during execution use state.tasks = state.tasks.filter(...) method.

For full array change detection documentation go to change detection

Example

working example of the code below can be found in examples folder right here

// create instance
    const app = new Vue({
      components: {
        'gantt-elastic': GanttElastic
      },
      data: {
        tasks,
        options
      }
    });

    // gantt state which will be updated in realtime
    let ganttState;

    // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
    // to get the gantt state for realtime modification
    app.$on('gantt-elastic.ready', (ganttElasticInstance) => {
      ganttState = ganttElasticInstance.state;
      console.log('gantt-elastic ready!', ganttState);
    });

    // mount gantt to DOM
    app.$mount('#app');

    function update() {
      const row = document.getElementById('row').value;
      const name = document.getElementById('name').value;
      const value = document.getElementById('value').value;
      ganttState.tasks[row][name] = value;
    }

    function deleteRow() {
      const row = Number(document.getElementById('delrow').value);
      ganttState.tasks = ganttState.tasks.filter((task, index) => {
        if (index === row) {
          console.log('removing task', task, index)
        }
        return index !== row;
      });
    }