mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-20 17:15:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replaced all occurances of bootstrap-select with tomSelect

Browse source 
All choice fields should now use tomselect by default to improve user UX
This commit is contained in:
Jan Böhmer 2023-02-02 00:36:42 +01:00
parent 3c3a03a179
commit 2e18065d5a
13 changed files with 100 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

80
assets/controllers/elements/select_controller.js Normal file
View file

@ -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>';
}
}

34
assets/controllers/elements/selectpicker_controller.js
View file

@ -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',
});
}
}

1
package.json
View file

@ -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",

5
src/Form/AdminPages/CurrencyAdminForm.php
View file

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

5
src/Form/Filters/Constraints/UserEntityConstraintType.php
View file

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

5
src/Form/LabelOptionsType.php
View file

@ -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, [

4
src/Form/Type/MasterPictureAttachmentType.php
View file

@ -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 */

4
src/Form/Type/PartLotSelectType.php
View file

@ -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')

4
src/Form/Type/ThemeChoiceType.php
View file

@ -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'
]);

10
src/Form/UserAdminForm.php
View file

@ -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'],

8
src/Form/UserSettingsType.php
View file

@ -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'],

28
templates/Form/extendedBootstrap4_layout.html.twig
View file

@ -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 %}
{{ form_widget(form.prefix, {'attr': {'class': '', 'style': 'max-width: 40px;'}}) }}
{% endif %}
{% if unit is not empty %}
<label class="input-group-text">{{ unit }}</label>
{% endif %}
{% if form.prefix is defined %}
{{ form_widget(form.prefix, {'attr': {'class': '', 'style': 'max-width: 40px;'}}) }}
{% endif %}
{% if unit is not empty %}
<label class="input-group-text">{{ unit }}</label>
{% 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 -%}

5
yarn.lock
View file

@ -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"