-
Notifications
You must be signed in to change notification settings - Fork 314
Tasks
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
ortask
-
style {object}
- optional, you can look at CSS page of this wiki and grab some styles
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.
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
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;
});
}