Skip to content

Allow Tasks to Be Editable - per task/bar - fixes #323 #531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allow Tasks to Be Editable - per task/bar - fixes #323 #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
Expand Down Expand Up @@ -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
Expand Down
24 changes: 24 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,30 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
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 = [
Expand Down
6 changes: 3 additions & 3 deletions src/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(),
Expand Down