Replaced all occurances of bootstrap-select with tomSelect

All choice fields should now use tomselect by default to improve user UX

assets/controllers/elements/select_controller.js

@@ -0,0 +1,80 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2022 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";
+import "tom-select/dist/css/tom-select.bootstrap5.css";
+import '../../css/components/tom-select_extensions.css';
+import TomSelect from "tom-select";
+
+export default class extends Controller {
+
+    _tomSelect;
+
+    _emptyMessage;
+
+    connect() {
+
+        this._emptyMessage = this.element.getAttribute("data-empty-message") ?? "";
+        if (this._emptyMessage === "" && this.element.hasAttribute('title')) {
+            this._emptyMessage = this.element.getAttribute('title');
+        }
+
+
+        let settings = {
+            allowEmptyOption: true,
+            selectOnTab: true,
+            maxOptions: null,
+
+            render: {
+                item: this.renderItem.bind(this),
+                option: this.renderOption.bind(this),
+            }
+        };
+
+        this._tomSelect = new TomSelect(this.element, settings);
+    }
+
+    renderItem(data, escape) {
+        //The empty option is rendered muted
+        if (data.value === "") {
+            let text = data.text;
+            //If no text was defined on the option, we use the empty message
+            if (!text) {
+                text = this._emptyMessage;
+            }
+            //And if that is not defined, we use a space to make the option visible
+            if (!text) {
+                text = " ";
+            }
+            return '<div class="text-muted">' + escape(text) + '</div>';
+
+        }
+
+        return '<div>' + escape(data.text) + '</div>';
+    }
+
+    renderOption(data, escape) {
+        //The empty option is rendered muted
+        if (data.value === "" && data.text === "") {
+            return '<div>&nbsp;</div>';
+        }
+
+        return '<div>' + escape(data.text) + '</div>';
+    }
+}

assets/controllers/elements/selectpicker_controller.js

@@ -1,34 +0,0 @@
-/*
- * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
- *
- *  Copyright (C) 2019 - 2022 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/>.
- */
-
-const bootstrap = window.bootstrap = require('bootstrap'); // without this bootstrap-select crashes with `undefined bootstrap`
-require('bootstrap-select/js/bootstrap-select'); // we have to manually require the working js file
-
-import {Controller} from "@hotwired/stimulus";
-import "../../css/lib/boostrap-select.css";
-import "../../css/components/selectpicker_extensions.css";
-
-export default class extends Controller {
-    connect() {
-        $(this.element).selectpicker({
-            dropdownAlignRight: 'auto',
-            container: '#content',
-        });
-    }
-}

package.json

@@ -62,7 +62,6 @@
         "@ckeditor/ckeditor5-word-count": "^36.0.0",
         "@jbtronics/bs-treeview": "^1.0.1",
         "bootbox": "^6.0.0",
-        "bootstrap-select": "v1.14.0-beta3",
         "bootswatch": "^5.1.3",
         "bs-custom-file-input": "^1.3.4",
         "clipboard": "^2.0.4",

src/Form/AdminPages/CurrencyAdminForm.php

@@ -47,11 +47,6 @@ class CurrencyAdminForm extends BaseEntityAdminForm
             'required' => false,
             'label' => 'currency.edit.iso_code',
             'preferred_choices' => ['EUR', 'USD', 'GBP', 'JPY', 'CNY'],
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'title' => 'selectpicker.nothing_selected',
-                'data-live-search' => true,
-            ],
             'disabled' => !$this->security->isGranted($is_new ? 'create' : 'edit', $entity),
         ]);
 

src/Form/Filters/Constraints/UserEntityConstraintType.php

@@ -54,11 +54,6 @@ class UserEntityConstraintType extends AbstractType
         $builder->add('value', EntityType::class, [
             'class' => User::class,
             'required' => false,
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'data-live-search' => true,
-                'title' => 'selectpicker.nothing_selected',
-            ]
         ]);
 
 

src/Form/LabelOptionsType.php

@@ -111,11 +111,6 @@ class LabelOptionsType extends AbstractType
 
                 return null;
             },
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'title' => 'selectpicker.nothing_selected',
-                'data-live-search' => true,
-            ],
         ]);
 
         $builder->add('lines', RichTextEditorType::class, [

src/Form/Type/MasterPictureAttachmentType.php

@@ -42,10 +42,6 @@ class MasterPictureAttachmentType extends AbstractType
         $resolver->setDefaults([
             'filter' => 'picture',
             'choice_translation_domain' => false,
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'title' => 'selectpicker.nothing_selected',
-            ],
             'choice_attr' => static function (Options $options) {
                 return  static function ($choice, $key, $value) use ($options) {
                     /** @var Attachment $choice */

src/Form/Type/PartLotSelectType.php

@@ -47,10 +47,6 @@ class PartLotSelectType extends AbstractType
                 return ($part_lot->getStorageLocation() ? $part_lot->getStorageLocation()->getFullPath() : '')
                     . ' (' . $part_lot->getName() . '): ' . $part_lot->getAmount();
             }),
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'data-live-search' => true,
-            ],
             'query_builder' => function (Options $options) {
                 return function (EntityRepository $er) use ($options) {
                     return $er->createQueryBuilder('l')

src/Form/Type/ThemeChoiceType.php

@@ -46,10 +46,6 @@ class ThemeChoiceType extends AbstractType
             'choice_label' => static function ($entity, $key, $value) {
                 return $value;
             },
-            'attr' => [
-                'data-controller' => 'elements--selectpicker',
-                'title' => 'selectpicker.nothing_selected',
-            ],
             'choice_translation_domain' => false,
             'placeholder' => 'user_settings.theme.placeholder'
         ]);

src/Form/UserAdminForm.php

@@ -130,11 +130,6 @@ class UserAdminForm extends AbstractType
             //Config section
             ->add('language', LanguageType::class, [
                 'required' => false,
-                'attr' => [
-                    'data-controller' => 'elements--selectpicker',
-                    'title' => 'selectpicker.nothing_selected',
-                    'data-live-search' => true,
-                ],
                 'placeholder' => 'user_settings.language.placeholder',
                 'label' => 'user.language_select',
                 'preferred_choices' => ['en', 'de'],
@@ -142,11 +137,6 @@ class UserAdminForm extends AbstractType
             ])
             ->add('timezone', TimezoneType::class, [
                 'required' => false,
-                'attr' => [
-                    'data-controller' => 'elements--selectpicker',
-                    'title' => 'selectpicker.nothing_selected',
-                    'data-live-search' => true,
-                ],
                 'placeholder' => 'user_settings.timezone.placeholder',
                 'label' => 'user.timezone.label',
                 'preferred_choices' => ['Europe/Berlin'],

src/Form/UserSettingsType.php

@@ -96,10 +96,6 @@ class UserSettingsType extends AbstractType
             ->add('language', LanguageType::class, [
                 'disabled' => $this->demo_mode,
                 'required' => false,
-                'attr' => [
-                    'data-controller' => 'elements--selectpicker',
-                    'data-live-search' => true,
-                ],
                 'placeholder' => 'user_settings.language.placeholder',
                 'label' => 'user.language_select',
                 'preferred_choices' => ['en', 'de'],
@@ -107,10 +103,6 @@ class UserSettingsType extends AbstractType
             ->add('timezone', TimezoneType::class, [
                 'disabled' => $this->demo_mode,
                 'required' => false,
-                'attr' => [
-                    'data-controller' => 'elements--selectpicker',
-                    'data-live-search' => true,
-                ],
                 'placeholder' => 'user_settings.timezone.placeholder',
                 'label' => 'user.timezone.label',
                 'preferred_choices' => ['Europe/Berlin'],

templates/Form/extendedBootstrap4_layout.html.twig

@@ -23,12 +23,12 @@
 {% block si_unit_widget %}
     <div class="input-group {% if sm %}input-group-sm{% endif %}">
         {{ form_widget(form.value) }}
-            {% if form.prefix is defined %}
+        {% if form.prefix is defined %}
-                {{ form_widget(form.prefix, {'attr': {'class': '', 'style': 'max-width: 40px;'}}) }}
+            {{ form_widget(form.prefix, {'attr': {'class': '', 'style': 'max-width: 40px;'}}) }}
-            {% endif %}
+        {% endif %}
-            {% if unit is not empty %}
+        {% if unit is not empty %}
-                <label class="input-group-text">{{ unit }}</label>
+            <label class="input-group-text">{{ unit }}</label>
-            {% endif %}
+        {% endif %}
     </div>
     {{ form_errors(form.value) }}
 {% endblock %}
@@ -98,12 +98,24 @@
 
 {%- block choice_widget_collapsed -%}
     {# Only add the BS5 form-select class if we dont use bootstrap-selectpicker  #}
-    {% if attr["data-controller"] is defined and attr["data-controller"] not in ["elements--selectpicker"] %}
+    {# {% if attr["data-controller"] is defined and attr["data-controller"] not in ["elements--selectpicker"] %}
         {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-select')|trim}) -%}
     {% else %}
-        {# If it is an selectpicker add form-control class to fill whole width #}
+        {# If it is an selectpicker add form-control class to fill whole width
         {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
     {% endif %}
+    #}
+
+    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-select')|trim}) -%}
+
+    {# If no data-controller was explictly defined add data-controller=elements--select #}
+    {% if attr["data-controller"] is not defined %}
+        {%- set attr = attr|merge({"data-controller": "elements--select"}) -%}
+
+        {% if attr["data-empty-message"] is not defined %}
+            {%- set attr = attr|merge({"data-empty-message": ("selectpicker.nothing_selected"|trans)}) -%}
+        {% endif %}
+    {% endif %}
 
     {{- block("choice_widget_collapsed", "bootstrap_base_layout.html.twig") -}}
 {%- endblock choice_widget_collapsed -%}

yarn.lock

@@ -2241,11 +2241,6 @@ bootbox@^6.0.0:
   resolved "https://registry.yarnpkg.com/bootbox/-/bootbox-6.0.0.tgz#a5f1074faab38b881e79e009ea4d625c7e8c536d"
   integrity sha512-+Calbj1v5UvxAXXDAHfoBlsx63Hcz1JqHaZdJ5EjIcOlkyAbZLCreVScx0Em6ZUvsMCqynuz/3nGDyd9FtFrNQ==
 
-bootstrap-select@v1.14.0-beta3:
-  version "1.14.0-beta3"
-  resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.14.0-beta3.tgz#dc15083fe51d0ac7b38a3b99dfd492dcc0a783b0"
-  integrity sha512-wYUDY4NAYBcNydXybE7wh3+ucyf+AcUOhZ+e0TFIoZ38A+k/3BVT1RPl5f0CiPxAexP1IQuqALKMqI8wtZS71A==
-
 bootstrap@^5.1.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"