diff --git a/README.md b/README.md index 5195f34d4..0359413c9 100644 --- a/README.md +++ b/README.md @@ -60,8 +60,8 @@ let tasks = [ let gantt = new Gantt("#gantt", tasks); ``` -### Configuration -Frappe Gantt offers a wide range of options to customize your chart. +### Gantt configuration +Frappe Gantt offers a wide range of options to customize your chart. Those affect the full Gantt chart: | **Option** | **Description** | **Possible Values** | **Default** | @@ -93,6 +93,34 @@ Frappe Gantt offers a wide range of options to customize your chart. | `view_mode` | The initial view mode of the Gantt chart. | `Day`, `Week`, `Month`, `Year`. | `Day` | | `view_mode_select` | Allows selecting the view mode from a dropdown. | `true`, `false` | `false` | +### Task bar configuration + +Those settings can be applied per bar separately: + +| **Option** | **Description** | **Possible Values** | **Default** | +|---------------------------|---------------------------------------------------------------------------------|----------------------------------------------------|------------------------------------| +| `readonly_progress` | Disables editing task progress. | `true`, `false` | `false` | +| `readonly_dates` | Disables editing task dates. | `true`, `false` | `false` | +| `readonly` | Disables all editing features. | `true`, `false` | `false` | + +You can set those on the task object: + +```js +let tasks = [ +{ +id: '1', +name: 'Redesign website', +start: '2016-12-28', +end: '2016-12-31', +progress: 20, +readonly_progress: false, +readonly_dates: false, +readonly: false, +}, +... +] +``` + Apart from these ones, two options - `popup` and `view_modes` (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately. #### View Mode Configuration diff --git a/index.html b/index.html index 419d47ccd..fb167008a 100644 --- a/index.html +++ b/index.html @@ -365,6 +365,30 @@

Frappe Gantt - for you.

id: 'Task 3', progress: random(), }, + { + start: daysSince(6), + duration: '6d', + name: 'Not mutable general', + id: 'Task 6', + progress: random(), + readonly: true, + }, + { + start: daysSince(4), + duration: '6d', + name: 'Not mutable date', + id: 'Task 4', + progress: random(), + readonly_dates: true, + }, + { + start: daysSince(5), + duration: '6d', + name: 'Not mutable progress', + id: 'Task 5', + progress: 10, // Done because the handle sometimes conflicts with the name on the bar which is a separate issue + readonly_progress: true, + }, ]; const tasksSpread = [ diff --git a/src/bar.js b/src/bar.js index 1315200ca..dd3db3aad 100644 --- a/src/bar.js +++ b/src/bar.js @@ -274,12 +274,12 @@ export default class Bar { } draw_resize_handles() { - if (this.invalid || this.gantt.options.readonly) return; + if (this.invalid || this.gantt.options.readonly || this.task.readonly) return; const bar = this.$bar; const handle_width = 3; this.handles = []; - if (!this.gantt.options.readonly_dates) { + if (!this.gantt.options.readonly_dates && !this.task.readonly_dates) { this.handles.push( createSVG('rect', { x: bar.getEndX() - handle_width / 2, @@ -306,7 +306,7 @@ export default class Bar { }), ); } - if (!this.gantt.options.readonly_progress) { + if (!this.gantt.options.readonly_progress && !this.task.readonly_progress) { const bar_progress = this.$bar_progress; this.$handle_progress = createSVG('circle', { cx: bar_progress.getEndX(),