対象
- Redmine : 3.3.1
- チケットの作成フォーム
- チケットの編集フォーム
- チケットのフィルタ条件のフォーム
- クライアント : Linux, Firefox 49
問題
セレクトボックスの選択肢が増えてくると、目的の選択肢を選ぶのが大変になる。
解決策
Select2 (https://select2.github.io/) と View Customize Plugin を使ってセレクトボックスを強化する。
プラグインのインストール
Redmine で Select2 を使えるようにしてくれるプラグインをインストールする。
下記の二つがある。
- Redmine base_select2 plugin (https://github.com/jbbarth/redmine_base_select2)
- Redmine Select2 Plugin (https://github.com/Undev/redmine__select2)
Redmine base_select2 plugin の方が同梱の Select2 のバージョンが新しくて 4.0.0 なので、こちらをインストールすることにする。
View Customize Plugin をインストールする。
View Customize Plugin に設定する JavaScript
// /issues(/(\d+|new))?$
// フィルタ条件のフォーム用
(function() {
var field;
$(function() {
$('#add_filter_select').change(function() {
field = $(this).val();
});
});
$(window).load(function() {
$("#values_cf_1_1").select2({ width: '100%' });
$("#values_cf_2_1").select2({ width: '100%' });
$('#add_filter_select').change(function() {
if (field === 'cf_1') {
$("#values_cf_1_1").select2({ width: '100%' });
} else if (field === 'cf_2') {
$("#values_cf_2_1").select2({ width: '100%' });
}
});
$('#filters-table').on('click', '#values_cf_1_1 ~ .toggle-multiselect', function() {
$(this).siblings('select').select2({ width: '100%' });
});
$('#filters-table').on('click', '#values_cf_2_1 ~ .toggle-multiselect', function() {
$(this).siblings('select').select2({ width: '100%' });
});
});
})();
// 作成、編集のフォーム用
$(function() {
$("#issue_custom_field_values_1").select2({ width: '100%' });
$("#issue_custom_field_values_2").select2({ width: '100%' });
});
適用した状態のスクリーンショット
以下はチケットの作成、編集のフォーム。
以下はチケットのフィルタのフォーム。
TODO
- 簡単に確認しただけなので気づいていない問題があるかも。
- チケット一括編集のページが未対応。