From 8be3b02a9ec90998e261cb13df540b9f6311be2d Mon Sep 17 00:00:00 2001 From: Safwan Samsudeen Date: Thu, 19 Dec 2024 11:59:34 +0530 Subject: [PATCH] feat: api to update task; fix: couple bugs --- src/bar.js | 54 +++++++++++++++++++++++++++++++++---------------- src/defaults.js | 19 +++++------------ src/index.js | 41 ++++++++++++++++++++++++++++++------- 3 files changed, 76 insertions(+), 38 deletions(-) diff --git a/src/bar.js b/src/bar.js index d198f3c..c619066 100644 --- a/src/bar.js +++ b/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( diff --git a/src/defaults.js b/src/defaults.js index 5de01b6..ddc4904 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -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); }); } } diff --git a/src/index.js b/src/index.js index ab323d3..fe0f22c 100644 --- a/src/index.js +++ b/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) {