Grouping assign user selectbox (Redmine view customize plugin)

.js

// Path pattern: /issues
// Type        : JavaScript
$(function() {

  if ($('#issue_assigned_to_id').length == 0) {
    return;
  }

  function rebuildUserSelectbox(selectbox) {

    var optionMap = {};
    var groupNames = [];

    // 現在の選択項目を退避
    var selected = selectbox.val();

    // optionをgroup毎にまとめる
    selectbox.children().each(function() {
      var option = $(this);

      var userName = option.text();
      var groupName = takeGroupName(userName);

      if (groupNames.indexOf(groupName) != -1) {
        optionMap[groupName].push(option);
      } else {
        optionMap[groupName] = [option];
        groupNames.push(groupName);
      }
    });

    selectbox.children().remove();

    // group毎にoptgroupにまとめてselectboxを生成
    groupNames.sort();
    for (var i = 0; i < groupNames.length; i++) {
      selectbox.append(
        craeteOptionGroup(groupNames[i], optionMap[groupNames[i]]));
    }

    selectbox.val(selected);
  }

  function craeteOptionGroup(groupName, options) {

    if (!groupName) {
      // group名が無いものは、optgroupを作らず
      // そのままselectbox直下にoptionを配置
      return options;
    }

    var optionGroup = $('<optgroup>');
    optionGroup.attr('label', groupName);
    optionGroup.append(options);

    return optionGroup;
  }

  function takeGroupName(target) {

    // 括弧で囲まれた部分をgroup名とみなす
    var match = target.match(/.+\((.+)\)/);

    if (!match) {
      return ''
    }

    return match[1];
  }

  // 初回
  rebuildUserSelectbox($('#issue_assigned_to_id'));

  // ステータス変更時などにDOMが差し替えられるので
  // フォームの内容が書き変わるたびに作り直す
  var _replaceIssueFormWith = replaceIssueFormWith;
  replaceIssueFormWith = function(html){

    _replaceIssueFormWith(html);

    rebuildUserSelectbox($('#issue_assigned_to_id'));
  };

});