From c8bd800b9f03462bd11cc5112d7252c8de8debe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Thu, 16 Nov 2023 22:33:31 +0100
Subject: [PATCH] Hide the custom type input field if not needed to improve the
 UX

---
 ...association_edit_type_select_controller.js | 44 +++++++++++++++++++
 src/Form/Part/PartAssociationType.php         |  7 +++
 .../parts/edit/edit_form_styles.html.twig     |  4 +-
 translations/messages.en.xlf                  |  6 +++
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 assets/controllers/pages/association_edit_type_select_controller.js

diff --git a/assets/controllers/pages/association_edit_type_select_controller.js b/assets/controllers/pages/association_edit_type_select_controller.js
new file mode 100644
index 00000000..10badf9c
--- /dev/null
+++ b/assets/controllers/pages/association_edit_type_select_controller.js
@@ -0,0 +1,44 @@
+/*
+ * 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";
+
+export default class extends Controller {
+
+    static targets = [ "display", "select" ]
+
+    connect()
+    {
+        this.update();
+        this.selectTarget.addEventListener('change', this.update.bind(this));
+    }
+
+    update()
+    {
+        //If the select value is 0, then we show the input field
+        if( this.selectTarget.value === '0')
+        {
+            this.displayTarget.classList.remove('d-none');
+        }
+        else
+        {
+            this.displayTarget.classList.add('d-none');
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Form/Part/PartAssociationType.php b/src/Form/Part/PartAssociationType.php
index cb5b526f..f640d38a 100644
--- a/src/Form/Part/PartAssociationType.php
+++ b/src/Form/Part/PartAssociationType.php
@@ -45,9 +45,16 @@ class PartAssociationType extends AbstractType
                 'label' => 'part_association.edit.type',
                 'choice_label' => fn(AssociationType $type) => $type->getTranslationKey(),
                 'help' => 'part_association.edit.type.help',
+                'attr' => [
+                    'data-pages--association-edit-type-select-target' => 'select'
+                ]
             ])
             ->add('other_type', TextType::class, [
                 'required' => false,
+                'label' => 'part_association.edit.other_type',
+                'row_attr' => [
+                    'data-pages--association-edit-type-select-target' => 'display'
+                ]
             ])
             ->add('comment', TextType::class, [
                 'required' => false,
diff --git a/templates/parts/edit/edit_form_styles.html.twig b/templates/parts/edit/edit_form_styles.html.twig
index 0f46a2ad..2d60afa8 100644
--- a/templates/parts/edit/edit_form_styles.html.twig
+++ b/templates/parts/edit/edit_form_styles.html.twig
@@ -189,7 +189,9 @@
     {% import 'components/collection_type.macro.html.twig' as collection %}
     <tr>
         <td>
-            {{ form_widget(form) }}
+            <div {{ stimulus_controller('pages/association_edit_type_select') }}>
+                {{ form_widget(form) }}
+            </div>
         </td>
         <td>
             <button type="button" class="btn btn-danger lot_btn_delete" {{ collection.delete_btn() }}>
diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
index a901d597..3a8863dc 100644
--- a/translations/messages.en.xlf
+++ b/translations/messages.en.xlf
@@ -11915,5 +11915,11 @@ Please note, that you can not impersonate a disabled user. If you try you will g
         <target>Supersedes</target>
       </segment>
     </unit>
+    <unit id="bpmECSR" name="part_association.edit.other_type">
+      <segment>
+        <source>part_association.edit.other_type</source>
+        <target>Custom type</target>
+      </segment>
+    </unit>
   </file>
 </xliff>