From 1d91f136872c6134611ed746e6b3eb0e890888d6 Mon Sep 17 00:00:00 2001
From: tianshujie <tianshujie@easycorp.ltd>
Date: Thu, 31 Mar 2022 14:22:35 +0800
Subject: [PATCH] * Fix bug #17551.

---
 module/project/css/create.css       |  2 ++
 module/project/js/create.js         | 49 +++++++++++++++++++----------
 module/project/view/create.html.php | 14 ++++++---
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/module/project/css/create.css b/module/project/css/create.css
index 92825f4fa9..20acbd1503 100644
--- a/module/project/css/create.css
+++ b/module/project/css/create.css
@@ -13,3 +13,5 @@
 #budgetUnit {border-left: 0px;}
 #projectName {display: inline-block; width: 32%;}
 #productsBox a {border-radius: 2px !important;}
+#productsBox .addProduct {padding-left: 0px !important;}
+#productsBox > .required:after{right: -6px !important;}
diff --git a/module/project/js/create.js b/module/project/js/create.js
index db8045c3a5..cf21ccf145 100644
--- a/module/project/js/create.js
+++ b/module/project/js/create.js
@@ -102,19 +102,32 @@ function addNewProduct(obj)
 {
     if($(obj).attr('checked'))
     {
-        $('#productName').removeAttr('disabled', true);
-        $('#productName').closest('tr').removeClass('hidden');
-        $('#plansBox .col-sm-4').find('select').attr('disabled', true).trigger("chosen:updated");
+        /* Hide product and plan dropdown controls. */
+        $('#productsBox .row .col-sm-4').addClass('hidden');
+        $('#productsBox .row .col-sm-4 .input-group').find('select').attr('disabled', true).trigger("chosen:updated");
         $('#plansBox').closest('tr').addClass('hidden');
-        $('#productsBox .col-sm-4 .input-group').find('select').attr('disabled', true).trigger("chosen:updated");
+        $('#plansBox .col-sm-4').find('select').attr('disabled', true).trigger("chosen:updated");
+
+        /* Displays the input box for creating a product. */
+        $("[name^='newProduct']").prop('checked', true);
+        $('#productName').removeAttr('disabled', true);
+        $('#productsBox .addProduct').removeClass('hidden');
+        $('#productTitle').html(productName);
     }
     else
     {
-        $('#productName').attr('disabled', true);
-        $('#productName').closest('tr').addClass('hidden');
-        $('#plansBox .col-sm-4').find('select').removeAttr('disabled', true).trigger("chosen:updated");
+        /* Show product and product dropdown controls. */
+        $('#productsBox .row .col-sm-4').removeClass('hidden');
+        $('#productsBox .row .col-sm-4 .input-group').find('select').removeAttr('disabled').trigger("chosen:updated");
         $('#plansBox').closest('tr').removeClass('hidden');
-        $('#productsBox .col-sm-4 .input-group').find('select').removeAttr('disabled').trigger("chosen:updated");
+        $('#plansBox .col-sm-4').find('select').removeAttr('disabled', true).trigger("chosen:updated");
+
+        /* Hide the input box for creating a product. */
+        $("[name^='newProduct']").prop('checked', false);
+        $('#productName').attr('disabled', true);
+        $('#productsBox .addProduct').addClass('hidden');
+
+        $('#productTitle').html(manageProducts);
     }
 }
 
@@ -159,16 +172,16 @@ function loadBranches(product, branchID)
         }
     });
 
-    if($('#productsBox .input-group:last select:first').val() != 0)
+    if($('#productsBox .row .input-group:last select:first').val() != 0)
     {
-        var length = $('#productsBox .input-group').size();
-        var $html  = $('#productsBox .col-sm-4:last').html();
-        $('#productsBox .col-sm-4:last').find('.input-group-addon').remove();
+        var length = $('#productsBox .row .input-group').size();
+        var $html  = $('#productsBox .row .col-sm-4:last').html();
+        $('#productsBox .row .col-sm-4:last').find('.input-group-addon').remove();
         $('#productsBox .row').append('<div class="col-sm-4">' + $html + '</div>');
-        if($('#productsBox .input-group:last select').size() >= 2) $('#productsBox .input-group:last select:last').remove();
-        $('#productsBox .input-group:last .chosen-container').remove();
-        $('#productsBox .input-group:last select:first').attr('name', 'products[' + length + ']').attr('id', 'products' + length);
-        $('#productsBox .input-group:last .chosen').chosen();
+        if($('#productsBox .row .input-group:last select').size() >= 2) $('#productsBox .row .input-group:last select:last').remove();
+        $('#productsBox .row .input-group:last .chosen-container').remove();
+        $('#productsBox .row .input-group:last select:first').attr('name', 'products[' + length + ']').attr('id', 'products' + length);
+        $('#productsBox .row .input-group:last .chosen').chosen();
 
         adjustProductBoxMargin();
     }
@@ -235,7 +248,8 @@ function adjustProductBoxMargin()
     {
         for(i = 1; i <= productRows - 1; i++)
         {
-            $('#productsBox .col-sm-4:lt(' + (i * 3) + ')').css('margin-bottom', '10px');
+            $('#productsBox .row .col-sm-4:lt(' + (i * 3) + ')').css('margin-bottom', '10px');
+            $('#productsBox .row .col-sm-4').eq(i * 3).css('padding-right', '6px');
         }
     }
 }
@@ -254,6 +268,7 @@ function adjustPlanBoxMargin()
         for(j = 1; j <= planRows - 1; j++)
         {
             $('#plansBox .col-sm-4:lt(' + (j * 3) + ')').css('margin-bottom', '10px');
+            $('#plansBox .col-sm-4').eq(j * 3).css('padding-right', '6px');
         }
     }
 }
diff --git a/module/project/view/create.html.php b/module/project/view/create.html.php
index bae762bbb3..30337c8243 100644
--- a/module/project/view/create.html.php
+++ b/module/project/view/create.html.php
@@ -24,6 +24,8 @@
 <?php js::set('multiBranchProducts', $multiBranchProducts);?>
 <?php js::set('selectedProductID', $productID);?>
 <?php js::set('selectedBranchID', $branchID);?>
+<?php js::set('productName', $lang->product->name);?>
+<?php js::set('manageProducts', $lang->project->manageProducts);?>
 <?php $requiredFields = $config->project->create->requiredFields;?>
 <div id='mainContent' class='main-content'>
   <div class='center-block'>
@@ -101,7 +103,7 @@
           </td><td></td><td></td>
         </tr>
         <tr>
-          <th><?php echo $lang->project->manageProducts;?></th>
+          <th id='productTitle'><?php echo $lang->project->manageProducts;?></th>
           <td class='text-left' id='productsBox' colspan="3">
             <div class='row'>
               <?php $i = 0;?>
@@ -125,12 +127,14 @@
                 </div>
               </div>
             </div>
+            <div class="col-sm-4 addProduct hidden <?php if($programID) echo 'required';?>">
+              <div class='input-group'>
+                <?php echo html::input('productName', '', "class='form-control'");?>
+                <span class='input-group-addon'><?php echo html::checkBox('newProduct', $lang->project->addProduct, '', "onchange=addNewProduct(this);");?></span>
+              </div>
+            </div>
           </td>
         </tr>
-        <tr class='hidden'>
-          <th><?php echo $lang->product->name;?></th>
-          <td><?php echo html::input('productName', '', "class='form-control' required");?></td><td></td><td></td>
-        </tr>
         <tr>
           <th><?php echo $lang->execution->linkPlan;?></th>
           <td colspan="3" id="plansBox">