* task #7660, improve UI for cmmigantt block.
This commit is contained in:
@@ -1118,7 +1118,7 @@ class block extends control
|
||||
$productID = isset($this->session->product) ? 0 : $this->session->product;
|
||||
if($productID && !array_key_exists($productID, $products)) $productID = 0;
|
||||
|
||||
$this->view->plans = $this->loadModel('programplan')->getDataForGantt($this->session->program, $productID, 0, 'task');
|
||||
$this->view->plans = $this->loadModel('programplan')->getDataForGantt($this->session->program, $productID, 0, 'task', false);
|
||||
$this->view->products = $products;
|
||||
$this->view->productID = $productID;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Delete block.
|
||||
*
|
||||
* @param int $index
|
||||
*
|
||||
* @param int $index
|
||||
* @access public
|
||||
* @return void
|
||||
*/
|
||||
@@ -26,8 +26,8 @@ function deleteBlock(index)
|
||||
|
||||
/**
|
||||
* Sort blocks.
|
||||
*
|
||||
* @param array $orders format is {'blockid' : 1, 'block1' : 2}
|
||||
*
|
||||
* @param array $orders format is {'blockid' : 1, 'block1' : 2}
|
||||
* @param function $callback
|
||||
* @access public
|
||||
* @return void
|
||||
@@ -65,7 +65,7 @@ function refreshBlock($panel, afterRefresh)
|
||||
else
|
||||
{
|
||||
$panel.children('.panel-move-handler,style,script').remove();
|
||||
$panel.find('.panel-body,.empty-tip').replaceWith($data);
|
||||
$panel.find('.panel-body,.empty-tip').first().replaceWith($data);
|
||||
}
|
||||
$panel.find('.progress-pie').progressPie();
|
||||
if($.isFunction(afterRefresh))
|
||||
@@ -78,6 +78,7 @@ function refreshBlock($panel, afterRefresh)
|
||||
});
|
||||
}
|
||||
$panel.find('.tablesorter').sortTable();
|
||||
$panel.find('.chosen').chosen();
|
||||
initTableHeader($panel);
|
||||
$(".sparkline").sparkline();
|
||||
}).fail(function()
|
||||
@@ -121,7 +122,7 @@ function initTableHeader($wrapper)
|
||||
|
||||
if(!$table.length || !$table.children('thead').length || ($panel.find('#assigntomeBlock').length && $panel.find('#assigntomeBlock > div').length > 1)) return;
|
||||
var isFixed = $panel.find('.panel-body').height() < $table.outerHeight();
|
||||
|
||||
|
||||
$panel.toggleClass('with-fixed-header', isFixed);
|
||||
var $header = $panel.children('.table-header-fixed').toggle(isFixed);
|
||||
if(!isFixed)
|
||||
@@ -194,7 +195,7 @@ function checkRefreshProgress($dashboard, doneCallback)
|
||||
* @param index $index
|
||||
* @access public
|
||||
* @return void
|
||||
*/
|
||||
*/
|
||||
function hiddenBlock(index)
|
||||
{
|
||||
$.getJSON(createLink('block', 'delete', 'index=' + index + '&module=' + module + '&type=hidden'), function(data)
|
||||
@@ -240,7 +241,7 @@ $(function()
|
||||
{
|
||||
resizeBlock(e.element.data('id'), isSideCol ? 4 : 8);
|
||||
});
|
||||
|
||||
|
||||
e.element.toggleClass('block-sm', isSideCol);
|
||||
}
|
||||
}).on('click', '.refresh-panel', function()
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<div class="panel-body">
|
||||
<div id='cmmiGantt'>
|
||||
<?php echo html::select('cmmiGanttProductID', $products, $productID, "class='form-control chosen'"); ?>
|
||||
<?php if(empty($plans['data'])): ?>
|
||||
<div class='empty-tip'><?php echo $lang->programplan->noData;?></div>
|
||||
<?php else:?>
|
||||
<div class='gantt clearfix'>
|
||||
<div class='gantt-plans pull-left'></div>
|
||||
<div class='gantt-container scrollbar-hover'>
|
||||
@@ -9,6 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
</div>
|
||||
<style>
|
||||
.block-cmmigantt > .panel-body {overflow: visible!important}
|
||||
@@ -27,13 +31,24 @@
|
||||
.gantt-col {position: absolute; z-index: 0; top: 0; border-right: 1px dotted #dddee4}
|
||||
.gantt-col-time {position: absolute; top: -18px; left: 0}
|
||||
.gantt-today {position: absolute; top: -16px; left: 0; bottom: 0; border-left: #00da88 dotted 1px;}
|
||||
.gantt-today > div {position: absolute; top: 0; left: 0; font-size: 12px; line-height: 16px; padding: 0 5px; background: #00da88; color: #fff; white-space: nowrap; z-index: 10;}
|
||||
.gantt-today > div {position: absolute; top: 0; left: 0; font-size: 12px; line-height: 14px; padding: 0 3px; background: #00da88; color: #fff; white-space: nowrap; z-index: 10;}
|
||||
</style>
|
||||
<script>
|
||||
function initCmmiGanttBlock()
|
||||
{
|
||||
var ganttData = <?php echo $plans; ?>;
|
||||
if(!ganttData.data) ganttData = {data: []};
|
||||
/* Init product select control */
|
||||
var $cmmiGanttProductID = $('#cmmiGanttProductID');
|
||||
$cmmiGanttProductID.on('change', function()
|
||||
{
|
||||
$.get(createLink('product', 'ajaxSetState', 'productID=' + $cmmiGanttProductID.val()), function()
|
||||
{
|
||||
refreshBlock($cmmiGanttProductID.closest('.panel'));
|
||||
});
|
||||
});
|
||||
|
||||
<?php if(!empty($plans['data'])): ?>
|
||||
var ganttData = <?php echo json_encode($plans['data']); ?>;
|
||||
if(!ganttData) return;
|
||||
|
||||
var plans = [];
|
||||
var tasks = [];
|
||||
@@ -46,7 +61,7 @@
|
||||
var TIME_GAP_STEP = 7;
|
||||
var MIN_COL_WIDTH = 60;
|
||||
|
||||
$.each(ganttData.data, function(index, item)
|
||||
$.each(ganttData, function(index, item)
|
||||
{
|
||||
plansMap[item.id] = item;
|
||||
if(item.type === 'plan' && item.parent === '0')
|
||||
@@ -110,16 +125,6 @@
|
||||
$ganttContainer.css('left', $plans.width() + 15);
|
||||
$ganttCanvas.css('height', canvasHeight);
|
||||
|
||||
var $cmmiGanttProductID = $('#cmmiGanttProductID');
|
||||
if(!$cmmiGanttProductID.data('chosen')) $cmmiGanttProductID.chosen();
|
||||
$cmmiGanttProductID.on('change', function()
|
||||
{
|
||||
$.get(createLink('product', 'ajaxSetState', 'productID=' + $cmmiGanttProductID.val()), function()
|
||||
{
|
||||
refreshBlock($cmmiGanttProductID.closest('.panel'));
|
||||
});
|
||||
});
|
||||
|
||||
/* Layout gantt */
|
||||
layoutGantt();
|
||||
$(window).on('resize', layoutGantt);
|
||||
@@ -186,7 +191,10 @@
|
||||
var day = Number.parseInt(dateStr[2].length > 3 ? dateStr[0] : dateStr[2], 10);
|
||||
return new Date(year, month - 1, day).getTime();
|
||||
}
|
||||
|
||||
<?php endif;?>
|
||||
}
|
||||
|
||||
initCmmiGanttBlock();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
@@ -8,13 +8,12 @@ $maxConsumed = 0;
|
||||
<div class='panel-body'>
|
||||
<div class='table-row'>
|
||||
<div class='table-col chart-titles'>
|
||||
|
||||
<?php foreach($programs as $program):?>
|
||||
<?php
|
||||
$maxTeamCount = max($program->teamCount, $maxTeamCount);
|
||||
$maxConsumed = max($program->consumed, $maxConsumed);
|
||||
?>
|
||||
<div class='chart-title text-ellipsis'><strong><?php echo $program->name;?></strong></div>
|
||||
<div class='chart-title text-ellipsis'><span><?php echo $program->name;?></span></div>
|
||||
<?php endforeach;?>
|
||||
</div>
|
||||
<div class='table-col chart-rows'>
|
||||
@@ -47,26 +46,26 @@ $maxConsumed = 0;
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.block-programteam .panel-body {margin-top: -10px;}
|
||||
.chart-titles {width: 110px; padding-right: 10px; padding-top: 30px; position: relative; z-index: 1;}
|
||||
.chart-rows {position: relative; z-index: 0;}
|
||||
.chart-title {width: 100px; line-height: 20px; padding: 5px 0; height: 30px;}
|
||||
.chart-title > strong {background: #fff;}
|
||||
.chart-col-title {line-height: 20px; margin-bottom: 10px; padding: 0 10px;}
|
||||
.program-team, .program-consumed {padding: 0;}
|
||||
.program-team {border-right: 1px solid #e5e8ec;}
|
||||
.program-team > .chart-col-title {text-align: right;}
|
||||
.chart-col-item {height: 30px; padding: 5px 0; position: relative;}
|
||||
.chart-col-text {width: 50px; position: absolute; top: 5px; line-height: 20px; left: 0;}
|
||||
.program-team .chart-col-item {padding-left: 50px; position: relative;}
|
||||
.program-team .chart-col-item:before {position: absolute; content: ' '; z-index: 0; left: -100px; top: 14px; right: 0; border-top: 1px dotted #e5e8ec;}
|
||||
.program-consumed .chart-col-item {padding-right: 50px;}
|
||||
.chart-col-item .progress {background: none; border-radius: 0; overflow: visible; margin: 6px 0 0 0; position: relative; z-index: 1;}
|
||||
.chart-col-item .progress > .progress-bar {border-radius: 0; position: relative; min-width: 1px;}
|
||||
.program-team .chart-col-item .progress > .progress-bar {float: right; background-color: #39cfff;}
|
||||
.chart-col-item .progress .progress-text {position: absolute; top: -6px; color: #333; width: 50px; line-height: 20px; white-space: nowrap; overflow: visible;}
|
||||
.program-team .progress .progress-text {text-align: right; left: -50px; padding-right: 5px;}
|
||||
.program-consumed .progress .progress-text {text-align: left; right: -50px; padding-left: 5px;}
|
||||
.block-programteam .panel-body {margin-top: -10px}
|
||||
.chart-titles {width: 110px; padding-right: 10px; padding-top: 30px; position: relative; z-index: 1}
|
||||
.chart-rows {position: relative; z-index: 0}
|
||||
.chart-title {width: 100px; line-height: 20px; padding: 5px 0; height: 30px}
|
||||
.chart-title > span {background: #fff}
|
||||
.chart-col-title {line-height: 20px; margin-bottom: 10px; padding: 0 10px}
|
||||
.program-team, .program-consumed {padding: 0}
|
||||
.program-team {border-right: 1px solid #e5e8ec}
|
||||
.program-team > .chart-col-title {text-align: right}
|
||||
.chart-col-item {height: 30px; padding: 5px 0; position: relative}
|
||||
.chart-col-text {width: 50px; position: absolute; top: 5px; line-height: 20px; left: 0}
|
||||
.program-team .chart-col-item {padding-left: 50px; position: relative}
|
||||
.program-team .chart-col-item:before {position: absolute; content: ' '; z-index: 0; left: -100px; top: 14px; right: 0; border-top: 1px dotted #e5e8ec}
|
||||
.program-consumed .chart-col-item {padding-right: 50px}
|
||||
.chart-col-item .progress {background: none; border-radius: 0; overflow: visible; margin: 6px 0 0 0; position: relative; z-index: 1}
|
||||
.chart-col-item .progress > .progress-bar {border-radius: 0; position: relative; min-width: 1px}
|
||||
.program-team .chart-col-item .progress > .progress-bar {float: right; background-color: #39cfff}
|
||||
.chart-col-item .progress .progress-text {position: absolute; top: -6px; color: #333; width: 50px; line-height: 20px; white-space: nowrap; overflow: visible}
|
||||
.program-team .progress .progress-text {text-align: right; left: -50px; padding-right: 5px}
|
||||
.program-consumed .progress .progress-text {text-align: left; right: -50px; padding-left: 5px}
|
||||
</style>
|
||||
</div>
|
||||
<?php endif;?>
|
||||
|
||||
@@ -106,10 +106,11 @@ class programplanModel extends model
|
||||
* @param int $productID
|
||||
* @param int $baselineID
|
||||
* @param string $selectCustom
|
||||
* @param bool $returnJson
|
||||
* @access public
|
||||
* @return string
|
||||
*/
|
||||
public function getDataForGantt($programID, $productID, $baselineID = 0, $selectCustom = '')
|
||||
public function getDataForGantt($programID, $productID, $baselineID = 0, $selectCustom = '', $returnJson = true)
|
||||
{
|
||||
$this->loadModel('stage');
|
||||
|
||||
@@ -240,7 +241,7 @@ class programplanModel extends model
|
||||
$datas['data'][$index]->taskProgress = $progress;
|
||||
}
|
||||
|
||||
return json_encode($datas);
|
||||
return $returnJson ? json_encode($datas) : $datas;
|
||||
}
|
||||
|
||||
public function getTotalPercent($plan)
|
||||
|
||||
Reference in New Issue
Block a user