From e0cd53d4cf3c9e5483b294964fb3c06ca6faf0f8 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Wed, 26 Aug 2020 13:52:18 +0800
Subject: [PATCH] * task #7660, improve UI for cmmigantt block.

---
 module/block/control.php                    |  2 +-
 module/block/js/dashboard.js                | 17 ++++----
 module/block/view/cmmiganttblock.html.php   | 36 ++++++++++-------
 module/block/view/programteamblock.html.php | 43 ++++++++++-----------
 module/programplan/model.php                |  5 ++-
 5 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/module/block/control.php b/module/block/control.php
index b63a02e337..c70cfc6292 100644
--- a/module/block/control.php
+++ b/module/block/control.php
@@ -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;
     }
diff --git a/module/block/js/dashboard.js b/module/block/js/dashboard.js
index d18e2fabbb..8eafeb9f3d 100644
--- a/module/block/js/dashboard.js
+++ b/module/block/js/dashboard.js
@@ -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()
diff --git a/module/block/view/cmmiganttblock.html.php b/module/block/view/cmmiganttblock.html.php
index 0bf2235561..d64cbdee89 100644
--- a/module/block/view/cmmiganttblock.html.php
+++ b/module/block/view/cmmiganttblock.html.php
@@ -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>
diff --git a/module/block/view/programteamblock.html.php b/module/block/view/programteamblock.html.php
index da67cfe13f..58feb5de83 100644
--- a/module/block/view/programteamblock.html.php
+++ b/module/block/view/programteamblock.html.php
@@ -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;?>
diff --git a/module/programplan/model.php b/module/programplan/model.php
index 1a66e9cd71..4dd79f4075 100644
--- a/module/programplan/model.php
+++ b/module/programplan/model.php
@@ -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)