Fixing #5773: Refactoring the "clearing" of select2 lists (#5839)

* adds select2 placeholders to select lists

To allow us to clear the selection on „select2“ selects, we need a placeholder attribute

See: https://select2.org/placeholders

* Removes empty option from multiple select

select2 requires an empty option value on singular selects, but not on multiple selects.

When selecting multiple options, this empty option would be shown as selectable otherwise, not clearing the selection.

* Adds the option to clear select2 instances

Sets the correct options to allow clearing of out select2 instances. The empty placeholder is required, since clearing only works when a placeholder ist set (event an empty one).

See: https://select2.org/placeholders

* Removes the „Clear selection“ option from select lists

Since we can clear the select2 lists with their native clearing method, we can remove this hack

* Updates generated assets (css/js)
This commit is contained in:
Till Deeke 2018-07-16 23:10:54 +02:00 committed by snipe
parent 3f334406d1
commit 07a92d20d7
20 changed files with 27 additions and 24 deletions

View file

@ -32,12 +32,6 @@ class SelectlistTransformer
}
// This is weird and awful, but the only way I can find to allow the user to
// clear the selection - @snipe
if (count($items_array) > 0) {
array_unshift($items_array, ['id' =>'', 'text'=> trans('general.clear_selection')]);
}
$results = [
'items' => $items_array,
'pagination' =>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
public/js/dist/all.js vendored

Binary file not shown.

View file

@ -1,14 +1,14 @@
{
"/js/build/vue.js": "/js/build/vue.js?id=5eab4676dde73dbab3ca",
"/js/build/vue.js": "/js/build/vue.js?id=832c22cb5b66ac81ed06",
"/css/AdminLTE.css": "/css/AdminLTE.css?id=5e72463a66acbcc740d5",
"/css/app.css": "/css/app.css?id=407edb63cc6b6dc62405",
"/css/overrides.css": "/css/overrides.css?id=2d81c3704393bac77011",
"/js/build/vue.js.map": "/js/build/vue.js.map?id=525260f84ea83d4b55cd",
"/css/AdminLTE.css.map": "/css/AdminLTE.css.map?id=99f5a5a03c4155cf69f6",
"/css/app.css.map": "/css/app.css.map?id=bdbe05e6ecd70ccfac72",
"/css/overrides.css.map": "/css/overrides.css.map?id=898c91d4a425b01b589b",
"/js/build/vue.js.map": "/js/build/vue.js.map?id=66ce10b11abd9159c4f7",
"/css/AdminLTE.css.map": "/css/AdminLTE.css.map?id=0be7790b84909dca6a0a",
"/css/app.css.map": "/css/app.css.map?id=96b5c985e860716e6a16",
"/css/overrides.css.map": "/css/overrides.css.map?id=f7ce9ca49027594ac402",
"/css/dist/all.css": "/css/dist/all.css?id=98db4e9b7650453c8b00",
"/js/dist/all.js": "/js/dist/all.js?id=85c7dab4c75f53c45b91",
"/js/dist/all.js": "/js/dist/all.js?id=8b3cca34ec5a6828bcee",
"/css/build/all.css": "/css/build/all.css?id=98db4e9b7650453c8b00",
"/js/build/all.js": "/js/build/all.js?id=85c7dab4c75f53c45b91"
"/js/build/all.js": "/js/build/all.js?id=8b3cca34ec5a6828bcee"
}

View file

@ -193,6 +193,13 @@ $(document).ready(function () {
link.select2({
/**
* Adds an empty placeholder, allowing every select2 instance to be cleared.
* This placeholder can be overridden with the "data-placeholder" attribute.
*/
placeholder: '',
allowClear: true,
ajax: {
// the baseUrl includes a trailing slash

View file

@ -2,14 +2,16 @@
<div id="assigned_asset" class="form-group{{ $errors->has($fieldname) ? ' has-error' : '' }}"{!! (isset($style)) ? ' style="'.e($style).'"' : '' !!}>
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required) && ($required =='true'))) ? ' required' : '' }}">
<select class="js-data-ajax select2" data-endpoint="hardware" name="{{ $fieldname }}" style="width: 100%" id="assigned_asset_select"{{ (isset($multiple)) ? ' multiple' : '' }}{!! (!empty($asset_status_type)) ? ' data-asset-status-type="' . $asset_status_type . '"' : '' !!}>
<select class="js-data-ajax select2" data-endpoint="hardware" data-placeholder="{{ trans('general.select_asset') }}" name="{{ $fieldname }}" style="width: 100%" id="assigned_asset_select"{{ (isset($multiple)) ? ' multiple' : '' }}{!! (!empty($asset_status_type)) ? ' data-asset-status-type="' . $asset_status_type . '"' : '' !!}>
@if ((!isset($unselect)) && ($asset_id = Input::old($fieldname, (isset($asset) ? $asset->id : (isset($item) ? $item->{$fieldname} : '')))))
<option value="{{ $asset_id }}" selected="selected">
{{ (\App\Models\Asset::find($asset_id)) ? \App\Models\Asset::find($asset_id)->present()->fullName : '' }}
</option>
@else
<option value="">{{ trans('general.select_asset') }}</option>
@if(!isset($multiple))
<option value="">{{ trans('general.select_asset') }}</option>
@endif
@endif
</select>
</div>

View file

@ -4,7 +4,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required)) && ($required=='true')) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="categories/{{ (isset($category_type)) ? $category_type : 'assets' }}" name="{{ $fieldname }}" style="width: 100%" id="category_select_id">
<select class="js-data-ajax" data-endpoint="categories/{{ (isset($category_type)) ? $category_type : 'assets' }}" data-placeholder="{{ trans('general.select_category') }}" name="{{ $fieldname }}" style="width: 100%" id="category_select_id">
@if ($category_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $category_id }}" selected="selected">
{{ (\App\Models\Category::find($category_id)) ? \App\Models\Category::find($category_id)->name : '' }}

View file

@ -2,7 +2,7 @@
<div id="{{ $fieldname }}" class="form-group{{ $errors->has($fieldname) ? ' has-error' : '' }}">
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7">
<select class="js-data-ajax" data-endpoint="companies" name="{{ $fieldname }}" style="width: 100%" id="company_select">
<select class="js-data-ajax" data-endpoint="companies" data-placeholder="{{ trans('general.select_company') }}" name="{{ $fieldname }}" style="width: 100%" id="company_select">
@if ($company_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $company_id }}" selected="selected">
{{ (\App\Models\Company::find($company_id)) ? \App\Models\Company::find($company_id)->name : '' }}

View file

@ -3,7 +3,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7">
<select class="js-data-ajax" data-endpoint="departments" name="{{ $fieldname }}" style="width: 100%" id="department_select">
<select class="js-data-ajax" data-endpoint="departments" data-placeholder="{{ trans('general.select_department') }}" name="{{ $fieldname }}" style="width: 100%" id="department_select">
@if ($department_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $department_id }}" selected="selected">
{{ (\App\Models\Department::find($department_id)) ? \App\Models\Department::find($department_id)->name : '' }}

View file

@ -3,7 +3,7 @@
{{ Form::label('location_id', $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7">
<select class="js-data-ajax" data-endpoint="locations" name="location_id" style="width: 100%" id="location_id_location_select">
<select class="js-data-ajax" data-endpoint="locations" data-placeholder="{{ trans('general.select_location') }}" name="location_id" style="width: 100%" id="location_id_location_select">
@if ($location_id = Input::old('location_id', (isset($user)) ? $user->location_id : ''))
<option value="{{ $location_id }}" selected="selected">
{{ (\App\Models\Location::find($location_id)) ? \App\Models\Location::find($location_id)->name : '' }}

View file

@ -3,7 +3,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required) && ($required =='true'))) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="locations" name="{{ $fieldname }}" style="width: 100%" id="{{ $fieldname }}_location_select">
<select class="js-data-ajax" data-endpoint="locations" data-placeholder="{{ trans('general.select_location') }}" name="{{ $fieldname }}" style="width: 100%" id="{{ $fieldname }}_location_select">
@if ($location_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $location_id }}" selected="selected">
{{ (\App\Models\Location::find($location_id)) ? \App\Models\Location::find($location_id)->name : '' }}

View file

@ -4,7 +4,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required)) && ($required=='true')) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="manufacturers" name="{{ $fieldname }}" style="width: 100%" id="manufacturer_select_id">
<select class="js-data-ajax" data-endpoint="manufacturers" data-placeholder="{{ trans('general.select_manufacturer') }}" name="{{ $fieldname }}" style="width: 100%" id="manufacturer_select_id">
@if ($manufacturer_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $manufacturer_id }}" selected="selected">
{{ (\App\Models\Manufacturer::find($manufacturer_id)) ? \App\Models\Manufacturer::find($manufacturer_id)->name : '' }}

View file

@ -4,7 +4,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required) && ($required =='true'))) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="models" name="{{ $fieldname }}" style="width: 100%" id="model_select_id">
<select class="js-data-ajax" data-endpoint="models" data-placeholder="{{ trans('general.select_model') }}" name="{{ $fieldname }}" style="width: 100%" id="model_select_id">
@if ($model_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $model_id }}" selected="selected">
{{ (\App\Models\AssetModel::find($model_id)) ? \App\Models\AssetModel::find($model_id)->name : '' }}

View file

@ -3,7 +3,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required)) && ($required=='true')) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="suppliers" name="{{ $fieldname }}" style="width: 100%" id="supplier_select">
<select class="js-data-ajax" data-endpoint="suppliers" data-placeholder="{{ trans('general.select_supplier') }}" name="{{ $fieldname }}" style="width: 100%" id="supplier_select">
@if ($supplier_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $supplier_id }}" selected="selected">
{{ (\App\Models\Supplier::find($supplier_id)) ? \App\Models\Supplier::find($supplier_id)->name : '' }}

View file

@ -3,7 +3,7 @@
{{ Form::label($fieldname, $translated_name, array('class' => 'col-md-3 control-label')) }}
<div class="col-md-7{{ ((isset($required)) && ($required=='true')) ? ' required' : '' }}">
<select class="js-data-ajax" data-endpoint="users" name="{{ $fieldname }}" style="width: 100%" id="assigned_user_select">
<select class="js-data-ajax" data-endpoint="users" data-placeholder="{{ trans('general.select_user') }}" name="{{ $fieldname }}" style="width: 100%" id="assigned_user_select">
@if ($user_id = Input::old($fieldname, (isset($item)) ? $item->{$fieldname} : ''))
<option value="{{ $user_id }}" selected="selected">
{{ (\App\Models\User::find($user_id)) ? \App\Models\User::find($user_id)->present()->fullName : '' }}