From bc9ed770ad3760770656334e0548d5953c3313a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Sun, 22 Jan 2023 17:34:10 +0100
Subject: [PATCH] Improved frontend of build page

---
 .../pages/checkbox_multicheck_controller.js   | 39 +++++++++++++++++++
 src/Form/ProjectSystem/ProjectBuildType.php   |  8 +++-
 templates/Projects/build/_form.html.twig      | 18 ++++++++-
 templates/Projects/build/build.html.twig      |  2 +
 translations/messages.en.xlf                  | 18 +++++++++
 5 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 assets/controllers/pages/checkbox_multicheck_controller.js

diff --git a/assets/controllers/pages/checkbox_multicheck_controller.js b/assets/controllers/pages/checkbox_multicheck_controller.js
new file mode 100644
index 00000000..ca77c597
--- /dev/null
+++ b/assets/controllers/pages/checkbox_multicheck_controller.js
@@ -0,0 +1,39 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Controller} from "@hotwired/stimulus";
+
+/*
+ * Define this controller on a checkbox, which should be used as a master to select/deselect all other checkboxes
+ * with the same data-multicheck-name attribute.
+ */
+export default class extends Controller
+{
+    connect() {
+        this.element.addEventListener("change", this.toggleAll.bind(this));
+    }
+
+    toggleAll() {
+        //Retrieve all checkboxes, which have the same data-multicheck-name attribute as the current checkbox
+        const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-multicheck-name="${this.element.dataset.multicheckName}"]`);
+        for (let checkbox of checkboxes) {
+            checkbox.checked = this.element.checked;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Form/ProjectSystem/ProjectBuildType.php b/src/Form/ProjectSystem/ProjectBuildType.php
index dbd717f3..0bcf98ab 100644
--- a/src/Form/ProjectSystem/ProjectBuildType.php
+++ b/src/Form/ProjectSystem/ProjectBuildType.php
@@ -46,7 +46,9 @@ class ProjectBuildType extends AbstractType implements DataMapperInterface
     {
         $builder->setDataMapper($this);
 
-        $builder->add('submit', SubmitType::class, []);
+        $builder->add('submit', SubmitType::class, [
+            'label' => 'project.build.btn_build'
+        ]);
 
         $builder->add('comment', TextType::class, [
             'label' => 'part.info.withdraw_modal.comment',
@@ -91,6 +93,8 @@ class ProjectBuildType extends AbstractType implements DataMapperInterface
             }
         }
 
+        $forms['comment']->setData($data->getComment());
+
     }
 
     public function mapFormsToData(\Traversable $forms, &$data)
@@ -110,5 +114,7 @@ class ProjectBuildType extends AbstractType implements DataMapperInterface
                 $data->setLotWithdrawAmount($lot_id, $form->getData());
             }
         }
+
+        $data->setComment($forms['comment']->getData());
     }
 }
\ No newline at end of file
diff --git a/templates/Projects/build/_form.html.twig b/templates/Projects/build/_form.html.twig
index 827c7474..659a73ff 100644
--- a/templates/Projects/build/_form.html.twig
+++ b/templates/Projects/build/_form.html.twig
@@ -3,13 +3,25 @@
 {{ form_start(form) }}
 
 <table class="table table-sm table-responsive table-hover">
+    <thead>
+    <tr>
+        <th>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" data-multicheck-name="lots_check" {{ stimulus_controller('pages/checkbox_multicheck') }}>
+            </div>
+        </th>
+        <th>{% trans %}part.table.name{% endtrans %}</th>
+        <th>{% trans %}project.bom.mountnames{% endtrans %}</th>
+        <th class="text-end">{% trans %}project.build.required_qty{% endtrans %}</th>
+    </tr>
+    </thead>
     <tbody>
     {% for bom_entry in build_request.bomEntries %}
         {# 1st row basic infos about the BOM entry #}
         <tr class="{% if buildHelper.bOMEntryBuildable(bom_entry, number_of_builds) %}table-primary{% else %}table-danger{% endif %}">
             <td style="width: 20px;">
                 <div class="form-check">
-                    {# <input class="form-check-input" type="checkbox" value="" id="checkbox_{{ loop.index }}" required> #}
+                    <input class="form-check-input" type="checkbox" value="" data-multicheck-name="lots_check" required>
                     {# <label class="form-check-label" for="checkbox_{{ loop.index }}">  #}
                 </div>
             </td>
@@ -19,7 +31,9 @@
                 {% endif %}
             </td>
             <td>
-                {{ bom_entry.mountnames }}
+                {% for tag in bom_entry.mountnames|split(',') %}
+                    <span class="badge bg-secondary badge-secondary" >{{ tag | trim }}</span>
+                {% endfor %}
             </td>
             <td class="text-end">
                 <b>{{ build_request.neededAmountForBOMEntry(bom_entry) | format_amount(bom_entry.part.partUnit ?? null) }}</b> {% trans %}project.builds.needed{% endtrans %}
diff --git a/templates/Projects/build/build.html.twig b/templates/Projects/build/build.html.twig
index effce105..e1c6844a 100644
--- a/templates/Projects/build/build.html.twig
+++ b/templates/Projects/build/build.html.twig
@@ -32,6 +32,8 @@
         {% endif %}
     </div>
 
+    <p class="text-muted">{% trans %}project.build.help{% endtrans %}</p>
+
     {% include 'Projects/build/_form.html.twig' %}
 
 
diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
index 7de39995..180fd282 100644
--- a/translations/messages.en.xlf
+++ b/translations/messages.en.xlf
@@ -10351,5 +10351,23 @@ Element 3</target>
         <target>Can not build project. Check input!</target>
       </segment>
     </unit>
+    <unit id="_sFMgby" name="project.build.required_qty">
+      <segment>
+        <source>project.build.required_qty</source>
+        <target>Required quantity</target>
+      </segment>
+    </unit>
+    <unit id="5gpbL_k" name="project.build.btn_build">
+      <segment>
+        <source>project.build.btn_build</source>
+        <target>Build</target>
+      </segment>
+    </unit>
+    <unit id="AqGFkiA" name="project.build.help">
+      <segment>
+        <source>project.build.help</source>
+        <target>Choose from which part lots the stock to build this project should be taken (and in which amount). Check the checkbox for each BOM Entry, when you are finished withdrawing the parts, or use the top checkbox to check all boxes at once.</target>
+      </segment>
+    </unit>
   </file>
 </xliff>