JE-400: Added choices.js to dropdowns with many options

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

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: ''});
+        })
+    }
+}

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,
             ]);

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(),
         ]);

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>

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

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