From d816e93c7eb40731124ac8727db94cd304e6c5a5 Mon Sep 17 00:00:00 2001
From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com>
Date: Thu, 14 Dec 2023 20:46:32 +0100
Subject: [PATCH] JE-400: Added choices.js to dropdowns with many options

---
 CHANGELOG.md                                     |  2 ++
 assets/controllers/choices_controller.js         | 16 ++++++++++++++++
 src/Controller/InvoiceController.php             |  7 ++++++-
 src/Controller/InvoiceEntryWorklogController.php |  5 ++++-
 templates/invoice_entry/worklogs.html.twig       |  2 +-
 templates/invoices/edit.html.twig                |  2 +-
 templates/invoices/new.html.twig                 |  2 +-
 7 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 assets/controllers/choices_controller.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2eeec9e..2a183e12 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* Added choices.js to dropdowns with many options.
+
 ## [1.1.0] - 2023-12-14
 
 * Updated api source to use Leantime
diff --git a/assets/controllers/choices_controller.js b/assets/controllers/choices_controller.js
new file mode 100644
index 00000000..ba216904
--- /dev/null
+++ b/assets/controllers/choices_controller.js
@@ -0,0 +1,16 @@
+import {Controller} from '@hotwired/stimulus';
+import Choices from "choices.js";
+import 'choices.js/src/styles/choices.scss';
+
+/**
+ * Activates choices.js for each element with choices target.
+ */
+export default class extends Controller {
+    static targets = ['choices'];
+
+    connect() {
+        this.choicesTargets.forEach((target) => {
+            new Choices(target, {allowHTML: true, itemSelectText: ''});
+        })
+    }
+}
diff --git a/src/Controller/InvoiceController.php b/src/Controller/InvoiceController.php
index 1c9d8f01..9db2543c 100644
--- a/src/Controller/InvoiceController.php
+++ b/src/Controller/InvoiceController.php
@@ -102,6 +102,7 @@ public function edit(Request $request, Invoice $invoice, InvoiceRepository $invo
             'row_attr' => ['class' => 'form-row form-choices'],
             'attr' => [
                 'class' => 'form-element',
+                'data-choices-target' => 'choices',
                 'data-account-selector-target' => 'field',
             ],
             'choices' => $paidByAccountChoices,
@@ -115,6 +116,7 @@ public function edit(Request $request, Invoice $invoice, InvoiceRepository $invo
             'row_attr' => ['class' => 'form-row form-choices'],
             'attr' => [
                 'class' => 'form-element',
+                'data-choices-target' => 'choices',
                 'data-account-selector-target' => 'field',
             ],
             'choices' => $defaultReceiverAccountChoices,
@@ -130,7 +132,10 @@ public function edit(Request $request, Invoice $invoice, InvoiceRepository $invo
                 'label' => 'invoices.client',
                 'label_attr' => ['class' => 'label'],
                 'row_attr' => ['class' => 'form-row'],
-                'attr' => ['class' => 'form-element'],
+                'attr' => [
+                    'class' => 'form-element',
+                    'data-choices-target' => 'choices',
+                ],
                 'help' => 'invoices.client_helptext',
                 'choices' => $clients,
             ]);
diff --git a/src/Controller/InvoiceEntryWorklogController.php b/src/Controller/InvoiceEntryWorklogController.php
index 89e4dbea..eff03662 100644
--- a/src/Controller/InvoiceEntryWorklogController.php
+++ b/src/Controller/InvoiceEntryWorklogController.php
@@ -46,7 +46,10 @@ public function worklogs(Request $request, Invoice $invoice, InvoiceEntry $invoi
             'label' => 'worklog.version',
             'label_attr' => ['class' => 'label'],
             'row_attr' => ['class' => 'form-row'],
-            'attr' => ['class' => 'form-element'],
+            'attr' => [
+                'class' => 'form-element',
+                'data-choices-target' => 'choices',
+            ],
             'help' => 'worklog.version_helptext',
             'choices' => $project->getVersions(),
         ]);
diff --git a/templates/invoice_entry/worklogs.html.twig b/templates/invoice_entry/worklogs.html.twig
index e4f6e805..4b2db1fa 100644
--- a/templates/invoice_entry/worklogs.html.twig
+++ b/templates/invoice_entry/worklogs.html.twig
@@ -6,7 +6,7 @@
     <h1 class="page-title">{{ 'worklog.title'|trans }}</h1>
 
     {{ form_start(form) }}
-    <div class="worklogs-filter-form">
+    <div class="worklogs-filter-form selections" {{ stimulus_controller('choices') }}>
         {{ form_rest(form) }}
         <button class="button m-5">{{ 'invoices.search'|trans }}</button>
     </div>
diff --git a/templates/invoices/edit.html.twig b/templates/invoices/edit.html.twig
index f8518eee..9b27c0ae 100644
--- a/templates/invoices/edit.html.twig
+++ b/templates/invoices/edit.html.twig
@@ -6,7 +6,7 @@
     <h1 class="page-title">{{ invoice.name }}</h1>
 
     {{ form_start(form) }}
-    <div class="grid-split">
+    <div class="grid-split selections" {{ stimulus_controller('choices') }}>
         <div>
             {{ form_row(form.name) }}
             {{ form_row(form.description) }}
diff --git a/templates/invoices/new.html.twig b/templates/invoices/new.html.twig
index bb8ce28a..e2c27715 100644
--- a/templates/invoices/new.html.twig
+++ b/templates/invoices/new.html.twig
@@ -6,7 +6,7 @@
     <h1 class="page-title">{{ 'invoices.create_new'|trans }}</h1>
 
     {{ form_start(form) }}
-    <div>
+    <div class="selections" {{ stimulus_controller('choices') }}>
         {{ form_row(form.name) }}
         {{ form_row(form.description) }}
         {{ form_row(form.project) }}