Add global Gantt chart for all projects

This commit is contained in:
Frederic Guillot 2015-08-22 16:20:53 -04:00
parent 18fd39e6d6
commit fd60964c23
39 changed files with 506 additions and 78 deletions

View File

@ -3,8 +3,9 @@ Version 1.0.18 (unreleased)
New features:
* Add users and categories filters on the board
* Add hide/show columns
* Add Gantt chart for projects
* Add Gantt chart for projects and tasks
* Add new role "Project Administrator"
* Add login bruteforce protection with captcha and account lockdown
* Add new api procedures: getDefaultTaskColor(), getDefaultTaskColors() and getColorList()

View File

@ -13,7 +13,46 @@ use Model\Task as TaskModel;
class Gantt extends Base
{
/**
* Show Gantt chart for projects
* Show Gantt chart for all projects
*/
public function projects()
{
if ($this->userSession->isAdmin()) {
$project_ids = $this->project->getAllIds();
}
else {
$project_ids = $this->projectPermission->getMemberProjectIds($this->userSession->getId());
}
$this->response->html($this->template->layout('gantt/projects', array(
'projects' => $this->project->getGanttBars($project_ids),
'title' => t('Gantt chart for all projects'),
'board_selector' => $this->projectPermission->getAllowedProjects($this->userSession->getId()),
)));
}
/**
* Save new project start date and end date
*/
public function saveProjectDate()
{
$values = $this->request->getJson();
$result = $this->project->update(array(
'id' => $values['id'],
'start_date' => $this->dateParser->getIsoDate(strtotime($values['start'])),
'end_date' => $this->dateParser->getIsoDate(strtotime($values['end'])),
));
if (! $result) {
$this->response->json(array('message' => 'Unable to save project'), 400);
}
$this->response->json(array('message' => 'OK'), 201);
}
/**
* Show Gantt chart for one project
*/
public function project()
{
@ -40,7 +79,7 @@ class Gantt extends Base
/**
* Save new task start date and due date
*/
public function saveDate()
public function saveTaskDate()
{
$this->getProject();
$values = $this->request->getJson();

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
'Shared project' => 'Proyecto compartido',
'Project managers' => 'Administradores de proyecto',
'Project members' => 'Miembros de proyecto',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1042,4 +1042,13 @@ return array(
'Shared project' => 'Projet partagé',
'Project managers' => 'Gestionnaires de projet',
'Project members' => 'Membres de projet',
'Gantt chart for all projects' => 'Diagramme de Gantt pour tous les projets',
'Projects list' => 'List des projets',
'Gantt chart for this project' => 'Diagramme de Gantt pour ce projet',
'Project board' => 'Tableau du projet',
'End date:' => 'Date de fin :',
'There is no start date or end date for this project.' => 'Il n\'y a pas de date de début ou de date de fin pour ce projet.',
'Projects Gantt chart' => 'Diagramme de Gantt des projets',
'Start date: %s' => 'Date de début : %s',
'End date: %s' => 'Date de fin : %s',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -1040,4 +1040,13 @@ return array(
// 'Shared project' => '',
// 'Project managers' => '',
// 'Project members' => '',
// 'Gantt chart for all projects' => '',
// 'Projects list' => '',
// 'Gantt chart for this project' => '',
// 'Project board' => '',
// 'End date:' => '',
// 'There is no start date or end date for this project.' => '',
// 'Projects Gantt chart' => '',
// 'Start date: %s' => '',
// 'End date: %s' => '',
);

View File

@ -65,7 +65,7 @@ class Acl extends Base
'project' => array('edit', 'update', 'share', 'integration', 'users', 'alloweverybody', 'allow', 'setowner', 'revoke', 'duplicate', 'disable', 'enable'),
'swimlane' => '*',
'budget' => '*',
'gantt' => '*',
'gantt' => array('project', 'savetaskdate', 'task', 'savetask'),
);
/**
@ -77,6 +77,7 @@ class Acl extends Base
private $project_admin_acl = array(
'project' => array('remove'),
'projectuser' => '*',
'gantt' => array('projects', 'saveprojectdate'),
);
/**

View File

@ -77,7 +77,7 @@ class DateParser extends Base
}
/**
* Parse a date ad return a unix timestamp, try different date formats
* Parse a date and return a unix timestamp, try different date formats
*
* @access public
* @param string $value Date to parse
@ -96,6 +96,18 @@ class DateParser extends Base
return 0;
}
/**
* Get ISO8601 date from user input
*
* @access public
* @param string $value Date to parse
* @return string
*/
public function getIsoDate($value)
{
return date('Y-m-d', ctype_digit($value) ? $value : $this->getTimestamp($value));
}
/**
* Get all combinations of date/time formats
*

View File

@ -114,6 +114,54 @@ class Project extends Base
return $this->db->table(self::TABLE)->eq('id', $project_id)->eq('is_private', 1)->exists();
}
/**
* Get all projects to generate the Gantt chart
*
* @access public
* @param array $project_ids
* @return array
*/
public function getGanttBars(array $project_ids)
{
if (empty($project_ids)) {
return array();
}
$colors = $this->color->getDefaultColors();
$projects = $this->db->table(self::TABLE)->asc('start_date')->in('id', $project_ids)->eq('is_active', self::ACTIVE)->eq('is_private', 0)->findAll();
$bars = array();
foreach ($projects as $project) {
$start = empty($project['start_date']) ? time() : strtotime($project['start_date']);
$end = empty($project['end_date']) ? $start : strtotime($project['end_date']);
$color = next($colors) ?: reset($colors);
$bars[] = array(
'type' => 'project',
'id' => $project['id'],
'title' => $project['name'],
'start' => array(
(int) date('Y', $start),
(int) date('n', $start),
(int) date('j', $start),
),
'end' => array(
(int) date('Y', $end),
(int) date('n', $end),
(int) date('j', $end),
),
'link' => $this->helper->url->href('project', 'show', array('project_id' => $project['id'])),
'board_link' => $this->helper->url->href('board', 'show', array('project_id' => $project['id'])),
'gantt_link' => $this->helper->url->href('gantt', 'project', array('project_id' => $project['id'])),
'color' => $color,
'not_defined' => empty($project['start_date']) || empty($project['end_date']),
'users' => $this->projectPermission->getProjectUsers($project['id']),
);
}
return $bars;
}
/**
* Get all projects
*
@ -271,8 +319,7 @@ class Project extends Base
{
foreach ($projects as &$project) {
$this->getColumnStats($project);
$project['managers'] = $this->projectPermission->getManagers($project['id']);
$project['members'] = $this->projectPermission->getOnlyMembers($project['id']);
$project = array_merge($project, $this->projectPermission->getProjectUsers($project['id']));
}
return $projects;

View File

@ -49,6 +49,36 @@ class ProjectPermission extends Base
return $allowed_users;
}
/**
* Get a list of members and managers with a single SQL query
*
* @access public
* @param integer $project_id Project id
* @return array
*/
public function getProjectUsers($project_id)
{
$result = array(
'managers' => array(),
'members' => array(),
);
$users = $this->db
->table(self::TABLE)
->join(User::TABLE, 'id', 'user_id')
->eq('project_id', $project_id)
->asc('username')
->columns(User::TABLE.'.id', User::TABLE.'.username', User::TABLE.'.name', self::TABLE.'.is_owner')
->findAll();
foreach ($users as $user) {
$key = $user['is_owner'] == 1 ? 'managers' : 'members';
$result[$key][$user['id']] = $user['name'] ?: $user['username'];
}
return $result;
}
/**
* Get a list of allowed people for a project
*
@ -65,27 +95,6 @@ class ProjectPermission extends Base
return $this->getAssociatedUsers($project_id);
}
/**
* Get a list of standard user members for a project
*
* @access public
* @param integer $project_id Project id
* @return array
*/
public function getOnlyMembers($project_id)
{
$users = $this->db
->table(self::TABLE)
->join(User::TABLE, 'id', 'user_id')
->eq('project_id', $project_id)
->eq('is_owner', 0)
->asc('username')
->columns(User::TABLE.'.id', User::TABLE.'.username', User::TABLE.'.name')
->findAll();
return $this->user->prepareList($users);
}
/**
* Get a list of owners for a project
*

View File

@ -726,6 +726,7 @@ class TaskFilter extends Base
$end = $task['date_due'] ?: $start;
$bars[] = array(
'type' => 'task',
'id' => $task['id'],
'title' => $task['title'],
'start' => array(

View File

@ -35,8 +35,8 @@
<?php if (! empty($tasks)): ?>
<div
id="gantt-chart"
data-tasks='<?= json_encode($tasks, JSON_HEX_APOS) ?>'
data-save-url="<?= $this->url->href('gantt', 'saveDate', array('project_id' => $project['id'])) ?>"
data-records='<?= json_encode($tasks, JSON_HEX_APOS) ?>'
data-save-url="<?= $this->url->href('gantt', 'saveTaskDate', array('project_id' => $project['id'])) ?>"
data-label-start-date="<?= t('Start date:') ?>"
data-label-end-date="<?= t('Due date:') ?>"
data-label-assignee="<?= t('Assignee:') ?>"

View File

@ -0,0 +1,36 @@
<section id="main">
<div class="page-header">
<ul>
<?php if ($this->user->isProjectAdmin() || $this->user->isAdmin()): ?>
<li><i class="fa fa-plus fa-fw"></i><?= $this->url->link(t('New project'), 'project', 'create') ?></li>
<?php endif ?>
<li>
<i class="fa fa-lock fa-fw"></i><?= $this->url->link(t('New private project'), 'project', 'create', array('private' => 1)) ?>
</li>
<li>
<i class="fa fa-folder fa-fw"></i><?= $this->url->link(t('Projects list'), 'project', 'index') ?>
</li>
<?php if ($this->user->isProjectAdmin() || $this->user->isAdmin()): ?>
<li><i class="fa fa-user fa-fw"></i><?= $this->url->link(t('Users overview'), 'projectuser', 'managers') ?></li>
<?php endif ?>
</ul>
</div>
<section>
<?php if (empty($projects)): ?>
<p class="alert"><?= t('No project') ?></p>
<?php else: ?>
<div
id="gantt-chart"
data-records='<?= json_encode($projects, JSON_HEX_APOS) ?>'
data-save-url="<?= $this->url->href('gantt', 'saveProjectDate') ?>"
data-label-managers="<?= t('Project managers') ?>"
data-label-members="<?= t('Project members') ?>"
data-label-gantt-link="<?= t('Gantt chart for this project') ?>"
data-label-board-link="<?= t('Project board') ?>"
data-label-start-date="<?= t('Start date:') ?>"
data-label-end-date="<?= t('End date:') ?>"
data-label-not-defined="<?= t('There is no start date or end date for this project.') ?>"
></div>
<?php endif ?>
</section>
</section>

View File

@ -6,7 +6,8 @@
<?php endif ?>
<li><i class="fa fa-lock fa-fw"></i><?= $this->url->link(t('New private project'), 'project', 'create', array('private' => 1)) ?></li>
<?php if ($this->user->isProjectAdmin() || $this->user->isAdmin()): ?>
<li><i class="fa fa-users fa-fw"></i><?= $this->url->link(t('Users overview'), 'projectuser', 'managers') ?></li>
<li><i class="fa fa-user fa-fw"></i><?= $this->url->link(t('Users overview'), 'projectuser', 'managers') ?></li>
<li><i class="fa fa-sliders fa-fw"></i><?= $this->url->link(t('Projects Gantt chart'), 'gantt', 'projects') ?></li>
<?php endif ?>
</ul>
</div>

View File

@ -20,6 +20,14 @@
<li><?= dt('Last modified on %B %e, %Y at %k:%M %p', $project['last_modified']) ?></li>
<?php endif ?>
<?php if ($project['start_date']): ?>
<li><?= t('Start date: %s', $project['start_date']) ?></li>
<?php endif ?>
<?php if ($project['end_date']): ?>
<li><?= t('End date: %s', $project['end_date']) ?></li>
<?php endif ?>
<?php if ($stats['nb_tasks'] > 0): ?>
<?php if ($stats['nb_active_tasks'] > 0): ?>

View File

@ -10,8 +10,14 @@
</li>
<li>
<i class="fa fa-folder fa-fw"></i>
<?= $this->url->link(t('All projects'), 'project', 'index') ?>
<?= $this->url->link(t('Projects list'), 'project', 'index') ?>
</li>
<?php if ($this->user->isProjectAdmin() || $this->user->isAdmin()): ?>
<li>
<i class="fa fa-sliders fa-fw"></i>
<?= $this->url->link(t('Projects Gantt chart'), 'gantt', 'projects') ?>
</li>
<?php endif ?>
</ul>
</div>
<section class="sidebar-container">

File diff suppressed because one or more lines are too long

View File

@ -71,9 +71,18 @@ div.ganttview-vtheader-series-name a {
}
div.ganttview-vtheader-series-name a:hover {
color: #333;
text-decoration: underline;
}
div.ganttview-vtheader-series-name a i {
color: #000;
}
div.ganttview-vtheader-series-name a:hover i {
color: #666;
}
/* Slider */
div.ganttview-slide-container {
overflow: auto;
@ -108,6 +117,9 @@ div.ganttview-block {
background-color: #E5ECF9;
border: 1px solid #c0c0c0;
border-radius: 3px;
}
.ganttview-block-movable {
cursor: move;
}

File diff suppressed because one or more lines are too long

View File

@ -6,6 +6,8 @@ function Gantt(app) {
this.options = {
container: "#gantt-chart",
showWeekends: true,
allowMoves: true,
allowResizes: true,
cellWidth: 21,
cellHeight: 31,
slideWidth: 1000,
@ -13,8 +15,8 @@ function Gantt(app) {
};
}
// Save task after a resize or move
Gantt.prototype.saveTask = function(task) {
// Save record after a resize or move
Gantt.prototype.saveRecord = function(record) {
this.app.showLoadingIcon();
$.ajax({
@ -23,14 +25,14 @@ Gantt.prototype.saveTask = function(task) {
contentType: "application/json",
type: "POST",
processData: false,
data: JSON.stringify(task),
data: JSON.stringify(record),
complete: this.app.hideLoadingIcon.bind(this)
});
};
// Build the Gantt chart
Gantt.prototype.execute = function() {
this.data = this.prepareData($(this.options.container).data('tasks'));
this.data = this.prepareData($(this.options.container).data('records'));
var minDays = Math.floor((this.options.slideWidth / this.options.cellWidth) + 5);
var range = this.getDateRange(minDays);
@ -47,21 +49,40 @@ Gantt.prototype.execute = function() {
jQuery("div.ganttview-hzheader-days div.ganttview-hzheader-day:last-child", container).addClass("last");
jQuery("div.ganttview-hzheader-months div.ganttview-hzheader-month:last-child", container).addClass("last");
this.listenForBlockResize(startDate);
this.listenForBlockDrag(startDate);
if (! $(this.options.container).data('readonly')) {
this.listenForBlockResize(startDate);
this.listenForBlockMove(startDate);
}
else {
this.options.allowResizes = false;
this.options.allowMoves = false;
}
};
// Render task list on the left
// Render record list on the left
Gantt.prototype.renderVerticalHeader = function() {
var headerDiv = jQuery("<div>", { "class": "ganttview-vtheader" });
var itemDiv = jQuery("<div>", { "class": "ganttview-vtheader-item" });
var seriesDiv = jQuery("<div>", { "class": "ganttview-vtheader-series" });
for (var i = 0; i < this.data.length; i++) {
seriesDiv.append(jQuery("<div>", {
"class": "ganttview-vtheader-series-name tooltip",
"title": "<strong>" + this.data[i].column_title + "</strong> (" + this.data[i].progress + ")<br/>" + this.data[i].title
}).append(jQuery("<a>", {"href": this.data[i].link, "target": "_blank"}).append(this.data[i].title)));
var content = jQuery("<span>")
.append(jQuery("<i>", {"class": "fa fa-info-circle tooltip", "title": this.getVerticalHeaderTooltip(this.data[i])}))
.append("&nbsp;");
if (this.data[i].type == "task") {
content.append(jQuery("<a>", {"href": this.data[i].link, "target": "_blank"}).append(this.data[i].title));
}
else {
content
.append(jQuery("<a>", {"href": this.data[i].board_link, "target": "_blank", "title": $(this.options.container).data("label-board-link")}).append('<i class="fa fa-th"></i>'))
.append("&nbsp;")
.append(jQuery("<a>", {"href": this.data[i].gantt_link, "target": "_blank", "title": $(this.options.container).data("label-gantt-link")}).append('<i class="fa fa-sliders"></i>'))
.append("&nbsp;")
.append(jQuery("<a>", {"href": this.data[i].link, "target": "_blank"}).append(this.data[i].title));
}
seriesDiv.append(jQuery("<div>", {"class": "ganttview-vtheader-series-name"}).append(content));
}
itemDiv.append(seriesDiv);
@ -163,7 +184,7 @@ Gantt.prototype.addBlocks = function(slider, start) {
var text = jQuery("<div>", {"class": "ganttview-block-text"});
var block = jQuery("<div>", {
"class": "ganttview-block tooltip",
"class": "ganttview-block tooltip" + (this.options.allowMoves ? " ganttview-block-movable" : ""),
"title": this.getBarTooltip(this.data[i]),
"css": {
"width": ((size * this.options.cellWidth) - 9) + "px",
@ -175,34 +196,68 @@ Gantt.prototype.addBlocks = function(slider, start) {
text.append(this.data[i].progress);
}
block.data("task", this.data[i]);
this.setTaskColor(block, this.data[i]);
block.data("record", this.data[i]);
this.setBarColor(block, this.data[i]);
jQuery(rows[rowIdx]).append(block);
rowIdx = rowIdx + 1;
}
};
// Get tooltip for task bars
Gantt.prototype.getBarTooltip = function(task) {
// Get tooltip for vertical header
Gantt.prototype.getVerticalHeaderTooltip = function(record) {
var tooltip = "";
if (task.not_defined) {
return $(this.options.container).data("label-not-defined");
if (record.type == "task") {
tooltip = "<strong>" + record.column_title + "</strong> (" + record.progress + ")<br/>" + record.title;
}
else {
var types = ["managers", "members"];
for (var index in types) {
var type = types[index];
if (! jQuery.isEmptyObject(record.users[type])) {
var list = jQuery("<ul>");
for (var user_id in record.users[type]) {
list.append(jQuery("<li>").append(record.users[type][user_id]));
}
tooltip += "<p><strong>" + $(this.options.container).data("label-" + type) + "</strong></p>" + list[0].outerHTML;
}
}
}
return "<strong>" + task.progress + "</strong><br/>" +
$(this.options.container).data("label-assignee") + " " + (task.assignee ? task.assignee : '') + "<br/>" +
$(this.options.container).data("label-start-date") + " " + $.datepicker.formatDate('yy-mm-dd', task.start) + "<br/>" +
$(this.options.container).data("label-end-date") + " " + $.datepicker.formatDate('yy-mm-dd', task.end);
return tooltip;
};
// Set task color
Gantt.prototype.setTaskColor = function(block, task) {
if (task.not_defined) {
// Get tooltip for bars
Gantt.prototype.getBarTooltip = function(record) {
var tooltip = "";
if (record.not_defined) {
tooltip = $(this.options.container).data("label-not-defined");
}
else {
if (record.type == "task") {
tooltip = "<strong>" + record.progress + "</strong><br/>" +
$(this.options.container).data("label-assignee") + " " + (record.assignee ? record.assignee : '') + "<br/>";
}
tooltip += $(this.options.container).data("label-start-date") + " " + $.datepicker.formatDate('yy-mm-dd', record.start) + "<br/>";
tooltip += $(this.options.container).data("label-end-date") + " " + $.datepicker.formatDate('yy-mm-dd', record.end);
}
return tooltip;
};
// Set bar color
Gantt.prototype.setBarColor = function(block, record) {
if (record.not_defined) {
block.addClass("ganttview-block-not-defined");
}
else {
block.css("background-color", task.color.background);
block.css("border-color", task.color.border);
block.css("background-color", record.color.background);
block.css("border-color", record.color.border);
}
};
@ -216,13 +271,13 @@ Gantt.prototype.listenForBlockResize = function(startDate) {
stop: function() {
var block = jQuery(this);
self.updateDataAndPosition(block, startDate);
self.saveTask(block.data("task"));
self.saveRecord(block.data("record"));
}
});
};
// Setup jquery-ui drag and drop
Gantt.prototype.listenForBlockDrag = function(startDate) {
Gantt.prototype.listenForBlockMove = function(startDate) {
var self = this;
jQuery("div.ganttview-block", this.options.container).draggable({
@ -231,40 +286,40 @@ Gantt.prototype.listenForBlockDrag = function(startDate) {
stop: function() {
var block = jQuery(this);
self.updateDataAndPosition(block, startDate);
self.saveTask(block.data("task"));
self.saveRecord(block.data("record"));
}
});
};
// Update the task data and the position on the chart
// Update the record data and the position on the chart
Gantt.prototype.updateDataAndPosition = function(block, startDate) {
var container = jQuery("div.ganttview-slide-container", this.options.container);
var scroll = container.scrollLeft();
var offset = block.offset().left - container.offset().left - 1 + scroll;
var task = block.data("task");
var record = block.data("record");
// Restore color for defined block
task.not_defined = false;
this.setTaskColor(block, task);
record.not_defined = false;
this.setBarColor(block, record);
// Set new start date
var daysFromStart = Math.round(offset / this.options.cellWidth);
var newStart = this.addDays(this.cloneDate(startDate), daysFromStart);
task.start = newStart;
record.start = newStart;
// Set new end date
var width = block.outerWidth();
var numberOfDays = Math.round(width / this.options.cellWidth) - 1;
task.end = this.addDays(this.cloneDate(newStart), numberOfDays);
record.end = this.addDays(this.cloneDate(newStart), numberOfDays);
if (numberOfDays > 0) {
jQuery("div.ganttview-block-text", block).text(task.progress);
if (record.type === "task" && numberOfDays > 0) {
jQuery("div.ganttview-block-text", block).text(record.progress);
}
// Update tooltip
block.attr("title", this.getBarTooltip(task));
block.attr("title", this.getBarTooltip(record));
block.data("task", task);
block.data("record", record);
// Remove top and left properties to avoid incorrect block positioning,
// set position to relative to keep blocks relative to scrollbar when scrolling

View File

@ -0,0 +1,16 @@
Gantt chart for all projects
============================
The goal of this Gantt chart is to display an overview of all projects based on the start and end dates.
- This Gantt chart is available in the project management section
- Only project administrators and administrators can access to this section
- Project administrators will see only projects where they are members
![Gantt Chart for all projects](http://kanboard.net/screenshots/documentation/gantt-chart-all-projects.png)
- The **start date** and the **end date** of projects are used to draw the chart
- Horizontal bars can be resized and moved horizontally with your mouse
- There is no vertical drag and drop
- Project bars are displayed in black when there is no start or end date defined
- The information tooltip show the list of project managers and standard members

View File

@ -1,7 +1,10 @@
Gantt chart for projects
========================
Gantt chart for tasks
======================
The Gantt chart is available from the the action menu by project managers.
The goal of this Gantt chart is to display a time based overview of the tasks for a given project.
- The Gantt chart is available from the the action menu
- Only project managers can access to this section
![Gantt Chart](http://kanboard.net/screenshots/documentation/gantt-chart-project.png)

View File

@ -28,7 +28,8 @@ Using Kanboard
- [Calendar](calendar.markdown)
- [Budget](budget.markdown)
- [Analytics](analytics.markdown)
- [Gantt chart](gantt-chart.markdown)
- [Gantt chart for tasks](gantt-chart-tasks.markdown)
- [Gantt chart for projects](gantt-chart-projects.markdown)
### Working with tasks