Improved frontend of build page

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;
+        }
+    }
+}

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());
     }
 }

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 %}

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' %}
 
 

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>