feat: api to update task; fix: couple bugs
This commit is contained in:
Safwan Samsudeen
parent
d5ee5a4e45
commit
8be3b02a9e
54
src/bar.js
54
src/bar.js
@ -4,7 +4,27 @@ import { $, createSVG, animateSVG } from './svg_utils';
|
||||
export default class Bar {
|
||||
constructor(gantt, task) {
|
||||
this.set_defaults(gantt, task);
|
||||
this.prepare();
|
||||
this.prepare_wrappers();
|
||||
this.prepare_helpers();
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.bar_group.innerHTML = '';
|
||||
this.handle_group.innerHTML = '';
|
||||
if (this.task.custom_class) {
|
||||
this.group.classList.add(this.task.custom_class);
|
||||
} else {
|
||||
this.group.classList = ['bar-wrapper'];
|
||||
}
|
||||
|
||||
if (this.task.important) {
|
||||
this.group.classList.add('important');
|
||||
} else {
|
||||
this.group.classList.remove('important');
|
||||
}
|
||||
|
||||
this.prepare_values();
|
||||
this.draw();
|
||||
this.bind();
|
||||
}
|
||||
@ -16,21 +36,7 @@ export default class Bar {
|
||||
this.name = this.name || '';
|
||||
}
|
||||
|
||||
prepare() {
|
||||
this.prepare_values();
|
||||
this.prepare_helpers();
|
||||
}
|
||||
|
||||
prepare_values() {
|
||||
this.invalid = this.task.invalid;
|
||||
this.height = this.gantt.options.bar_height;
|
||||
this.image_size = this.height - 5;
|
||||
this.compute_x();
|
||||
this.compute_y();
|
||||
this.compute_duration();
|
||||
this.corner_radius = this.gantt.options.bar_corner_radius;
|
||||
this.width = this.gantt.config.column_width * this.duration;
|
||||
|
||||
prepare_wrappers() {
|
||||
this.group = createSVG('g', {
|
||||
class:
|
||||
'bar-wrapper' +
|
||||
@ -46,7 +52,18 @@ export default class Bar {
|
||||
class: 'handle-group',
|
||||
append_to: this.group,
|
||||
});
|
||||
}
|
||||
|
||||
prepare_values() {
|
||||
this.invalid = this.task.invalid;
|
||||
this.height = this.gantt.options.bar_height;
|
||||
this.image_size = this.height - 5;
|
||||
this.compute_x();
|
||||
this.compute_y();
|
||||
this.compute_duration();
|
||||
this.corner_radius = this.gantt.options.bar_corner_radius;
|
||||
this.width = this.gantt.config.column_width * this.duration;
|
||||
this.task.progress = Math.floor(this.task.progress * 100) / 100;
|
||||
if (this.task.progress < 0) this.task.progress = 0;
|
||||
if (this.task.progress > 100) this.task.progress = 100;
|
||||
}
|
||||
@ -330,6 +347,10 @@ export default class Bar {
|
||||
this.gantt.$container
|
||||
.querySelector(`.highlight-${task_id}`)
|
||||
.classList.toggle('hide');
|
||||
console.log(
|
||||
this.gantt.$container.querySelector(`.highlight-${task_id}`)
|
||||
.classList,
|
||||
);
|
||||
});
|
||||
} else {
|
||||
let timeout;
|
||||
@ -485,7 +506,6 @@ export default class Bar {
|
||||
x_in_units * this.gantt.config.step,
|
||||
this.gantt.config.unit,
|
||||
);
|
||||
console.log(date_utils.diff(new_start_date, this.gantt.gantt_start));
|
||||
|
||||
const width_in_units = bar.getWidth() / this.gantt.config.column_width;
|
||||
const new_end_date = date_utils.add(
|
||||
|
||||
@ -145,25 +145,16 @@ const DEFAULT_OPTIONS = {
|
||||
if (!ctx.chart.options.readonly) {
|
||||
ctx.add_action('Toggle Priority', (task, chart) => {
|
||||
task.important = !task.important;
|
||||
chart.refresh(
|
||||
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
|
||||
);
|
||||
chart.update_task(task);
|
||||
});
|
||||
if (!ctx.chart.options.readonly_progress) {
|
||||
ctx.add_action('+', (task, chart) => {
|
||||
task.progress +=
|
||||
Math.floor((1 / task.actual_duration) * 10000) / 100;
|
||||
chart.refresh(
|
||||
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
|
||||
);
|
||||
task.progress += (1 / task.actual_duration) * 100;
|
||||
chart.update_task(task);
|
||||
});
|
||||
ctx.add_action('-', (task, chart) => {
|
||||
task.progress -=
|
||||
Math.floor((1 / task.actual_duration) * 10000) / 100;
|
||||
console.log(task.progress);
|
||||
chart.refresh(
|
||||
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
|
||||
);
|
||||
task.progress -= (1 / task.actual_duration) * 100;
|
||||
chart.update_task(task);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
41
src/index.js
41
src/index.js
@ -217,6 +217,11 @@ export default class Gantt {
|
||||
this.change_view_mode();
|
||||
}
|
||||
|
||||
update_task(task) {
|
||||
let bar = this.bars[task._index];
|
||||
bar.refresh();
|
||||
}
|
||||
|
||||
change_view_mode(mode = this.options.view_mode) {
|
||||
if (typeof mode === 'string') {
|
||||
mode = this.options.view_modes.find((d) => d.name === mode);
|
||||
@ -607,7 +612,7 @@ export default class Gantt {
|
||||
(this.options.bar_height + this.options.padding) *
|
||||
this.tasks.length;
|
||||
const d_formatted = date_utils
|
||||
.format(d, 'YYYY-MM-DD')
|
||||
.format(d, 'YYYY-MM-DD', this.options.language)
|
||||
.replace(' ', '_');
|
||||
|
||||
if (labels[d]) {
|
||||
@ -797,7 +802,11 @@ export default class Gantt {
|
||||
return {
|
||||
date,
|
||||
formatted_date: sanitize(
|
||||
date_utils.format(date, this.config.format_string),
|
||||
date_utils.format(
|
||||
date,
|
||||
this.config.format_string,
|
||||
this.options.language,
|
||||
),
|
||||
),
|
||||
column_width: this.config.column_width,
|
||||
x,
|
||||
@ -900,10 +909,15 @@ export default class Gantt {
|
||||
this.config.unit,
|
||||
);
|
||||
|
||||
let current_upper = this.config.view_mode.upper_text(this.current_date);
|
||||
let current_upper = this.config.view_mode.upper_text(
|
||||
this.current_date,
|
||||
null,
|
||||
this.options.language,
|
||||
);
|
||||
let $el = this.upperTexts.find(
|
||||
(el) => el.textContent === current_upper,
|
||||
);
|
||||
console.log(current_upper, $el);
|
||||
|
||||
// Recalculate
|
||||
this.current_date = date_utils.add(
|
||||
@ -912,7 +926,11 @@ export default class Gantt {
|
||||
this.config.column_width,
|
||||
this.config.unit,
|
||||
);
|
||||
current_upper = this.config.view_mode.upper_text(this.current_date);
|
||||
current_upper = this.config.view_mode.upper_text(
|
||||
this.current_date,
|
||||
null,
|
||||
this.options.language,
|
||||
);
|
||||
$el = this.upperTexts.find((el) => el.textContent === current_upper);
|
||||
$el.classList.add('current-upper');
|
||||
this.$current = $el;
|
||||
@ -992,8 +1010,8 @@ export default class Gantt {
|
||||
h.onmouseenter = (e) => {
|
||||
timeout = setTimeout(() => {
|
||||
label.classList.add('show');
|
||||
label.style.left = e.offsetX + 'px';
|
||||
label.style.top = e.offsetY + 'px';
|
||||
label.style.left = (e.offsetX || e.layerX) + 'px';
|
||||
label.style.top = (e.offsetY || e.layerY) + 'px';
|
||||
}, 300);
|
||||
};
|
||||
|
||||
@ -1126,6 +1144,8 @@ export default class Gantt {
|
||||
|
||||
let current_upper = this.config.view_mode.upper_text(
|
||||
this.current_date,
|
||||
null,
|
||||
this.options.language,
|
||||
);
|
||||
let $el = this.upperTexts.find(
|
||||
(el) => el.textContent === current_upper,
|
||||
@ -1139,7 +1159,11 @@ export default class Gantt {
|
||||
this.config.step,
|
||||
this.config.unit,
|
||||
);
|
||||
current_upper = this.config.view_mode.upper_text(this.current_date);
|
||||
current_upper = this.config.view_mode.upper_text(
|
||||
this.current_date,
|
||||
null,
|
||||
this.options.language,
|
||||
);
|
||||
$el = this.upperTexts.find(
|
||||
(el) => el.textContent === current_upper,
|
||||
);
|
||||
@ -1412,6 +1436,9 @@ export default class Gantt {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
if (this.popup) this.popup.parent.classList.add('hide');
|
||||
this.$container
|
||||
.querySelectorAll('.date-range-highlight')
|
||||
.forEach((k) => k.classList.add('hide'));
|
||||
}
|
||||
|
||||
view_is(modes) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user