@t-kurokawa0posted at 2025-01-14

Redmine担当者フィールドのグループ表示について

Q&A

解決したいこと

Redmine（Bitnami版）を運用しており、担当者フィールドの表示項目について
ご教示いただきたく思っております。

導入しているプラグインについて

当環境では、担当者フィールド内でユーザが所属するグループが表示されるプラグインを導入しています。
プラグイン名：Redmine Assign Grouping plugin
https://github.com/akira-kuriyama/redmine_assign_grouping

プラグインの動作イメージです↓
　※太字部分がグループ名（選択不可）となっています。

導入している表示カスタマイズ

担当者およびグループ増加にともない
キーワードフィルタ機能(Select2)を表示カスタマイズ機能から導入しました。
導入したコードは下記です。
※業務環境からコピペが不可能のため、写真を撮影してGoogoleドキュメントでテキスト変換したものを
記載しております。微細な記述ミスがあるかも知れませんが。
実環境では問題なく動作しております。

挿入位置全ページのヘッダ
種別：HTML

<!-- Select2のライブラリを読み込む --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</script>

$(document).ready(function () { //readyDOM読み込み後に実行 
    // select2を適用する関数 
    function apply select2(){ 
        var $select = $('#issue_assigned_to_id'); 
        //デバッグ用 console.log($select); 
    
        if($select.length > 0){ //$selectに引数があるかどうか 
            $select.select2({ //select2を適用する 
                width: "100%", 
                placeholder: "担当者を検索... ",
                allowClear: true //クリアボタンを配置 
            });
       } else { //引数が何もないとき 
    } 
    デバッグ用 console.log("担当者フィールドが見つかりません"); 
    } 
    //初期化時にselect2を適用 
    applySelect2(); 
    トラッカー変更時にフォームが再描画されるため、 再度 select2を適用 
    $(document).on('ajaxSuccess', function(){//on・・・イベントが発生したら実行 CajaxSuccessが発生したら) 
    applySelect2(); //ajax (非同期処理)でのフォームリフレッシュ後に select2を再適用 
    }); 
}); 
</script>

起こっている問題

　担当者フィールドでキーワードを入力した際、Redmine Assign Grouping pluginで
表示しているグループ名（選択不可）もフィルタされて表示されます。
それらは選択不可のため、選択可能なグループはフィールド下部にあり
下までスクロールする必要があり非常に手間となっています。

（例）　キーワードに「kb」と入力
　　kbから始まるグループ名がフィルタされるが、これらはプラグインによって表示されている大項目なので選択できない。
※KB07を設定したい場合は下にスクロールして表示されるグループを選択する必要がある。

期待される解決策

　【前提】ユーザ-グループ関係は必要情報のため、プラグインの機能は残したい。

　①選択できないグループがフィルタされてしまうことによるユーザビリティの悪さが問題のためプラグインによって表示されるグループを選択可能とする。

②プラグインを削除し、ユーザ-グループ関係性は別項目で表示するなど代替策を検討する。

③表示カスタマイズで、選択可能なグループ名をフィールド上部に表示させる。

私の方で3案を検討していますが、有識者による妙案をいただけないでしょうか。
よろしくお願いいたします。

@heoquay posted at 2025-01-16

選択できない「グループ名の見出し」：検索でヒットしないようにする
選択できる「アイテムとしてのユーザー名」および「アイテムとしてのグループ名」：検索でヒットするようにする
＊ヒットしたアイテムの親グループ名は表示されます
＊大文字小文字を区別せずに検索が行われています

この理解が正しいとすれば、表示カスタマイズを以下のようにすれば実現できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function() {
        function applySelect2() {
            var $select = $('#issue_assigned_to_id');

            if ($select.length > 0) {
                $select.select2({
                    width: "100%",
                    placeholder: "担当者を検索...",
                    allowClear: true,
                    matcher: function(params, data) {
                        // 検索条件が空の場合はデータをそのまま返す
                        if (!params.term || $.trim(params.term) === '') {
                            return data;
                        }

                        // optgroup（childrenが存在する要素）を無視
                        if (data.children && data.children.length > 0) {
                            // 子要素を再帰的にチェックし、マッチするものがあればそれを含むデータを返す
                            var filteredChildren = $.grep(data.children, function(child) {
                                return child.text.toLowerCase().includes(params.term.toLowerCase());
                            });

                            if (filteredChildren.length > 0) {
                                return $.extend({}, data, {
                                    children: filteredChildren // マッチした子要素のみを返す
                                });
                            }
                            return null; // 子要素にマッチしない場合はnull
                        }

                        // 通常の要素のマッチング処理
                        var decodedText = $('<div>').html(data.text).text().toLowerCase().trim();
                        var searchTerm = params.term.toLowerCase().trim();

                        if (decodedText.indexOf(searchTerm) > -1) {
                            return data; // 親要素がマッチする場合
                        }

                        return null; // マッチしない場合
                    }
                });
            } else {
                console.log("担当者フィールドが見つかりません");
            }
        }

        // 初期化時にselect2を適用
        applySelect2();

        // トラッカー変更時にフォーム再描画後にselect2を再適用
        $(document).on('ajaxSuccess', function() {
            applySelect2();
        });
    });
</script>

1Like

Are you sure you want to delete the question?