redmine  プロジェクトのリスト表示で、プロジェクト単位のグルーピングをする。

##■やりたいこと
　・redmine4.2でリスト表示した時に、プロジェクトを親プロジェクトで一旦グルーピングしてトグルSWで表示／非表示を制御したい。
　　（親プロジェクトの単位で、表示／非表示を決めたい）

・従来の画面
　プロジェクトは階層表示されているが、オプションにプロジェクトが設定できないため階層が全て表示されてしまう。
<img width="800" alt="02303db6-0e6a-7fa6-1cdc-ba2659475449.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651745/02303db6-0e6a-7fa6-1cdc-ba2659475449.png">

##■環境：
Environment:
  Redmine version                4.2.2.stable
  Ruby version                   2.6.8-p205 (2021-07-07) [x64-mingw32]
  Rails version                  5.2.6
  Environment                    production
  Database adapter               Mysql2
  Mailer queue                   ActiveJob::QueueAdapters::AsyncAdapter
  Mailer delivery                smtp
SCM:
  Git                            2.32.0
  Filesystem                     
Redmine plugins:
  no plugin installed

##■実装1（ruby）
・htdocs\app\views\projects\_list.html.erb
　grouped_project_list関数で、tr作成箇所（tr id="project・・・）を以下（変更前→変更後に）に修正。
　※プロジェクトの最初だけグルーピング処理を入れる。

＜変更前＞
`  <tr id="project-<%= entry.id %>" class="<%= cycle('odd', 'even') %> <%= entry.css_classes %> <%= level > 0 ? "idnt idnt-#{level}" : nil %>">
    <% @query.inline_columns.each do |column| %>
    <%= content_tag('td', column_content(column, entry), :class => column.css_classes) %>
    <% end %>
  </tr>`

↓

＜変更後＞
`<% if level == 0 then %>
    <% reset_cycle %>
    <tr class="group2 open2">
      <td>
        <span class="expander icon icon-expended" onclick="toggleRowGroup2(this);">&nbsp;</span>
        <span class="name"><%= entry.name %></span>
      </td>
    </tr>
  <% else %>
      <tr id="project-<%= entry.id %>" class="<%= cycle('odd', 'even') %> <%= entry.css_classes %> <%= "idnt idnt-#{level}" %>">
        <% @query.inline_columns.each do |column| %>
        <%= content_tag('td', column_content(column, entry), :class => column.css_classes) %>
        <% end %>
      </tr>
  <% end %>`

##■実装2（Javasccript）
 ・\htdocs\public\javascripts\application.js
　　以下の関数を追加

`function toggleRowGroup2(el) {`
`  var tr = $(el).parents('tr').first();`
`  var n = tr.next();`

`  tr.toggleClass('open2');`
`  $(el).toggleClass('icon-expended icon-collapsed');`
`  while (n.length && !n.hasClass('group') && !n.hasClass('group2')) {`
`    n.toggle();`
`    n = n.next('tr');`
`  }
}`

##■実装3（css）
以下CSSデータを追加（２か所）
※以下場所は参考例です。

①application.css
　htdocs\public\stylesheets\application.css

`tr.group2 td { padding: 0.8em 0 0.5em 0.3em; border-bottom: 1px solid #ccc; text-align:left; background-color: #fff;}
tr.group2 span.count {top:-1px;}
tr.group2 span.name {font-weight:bold;}
tr.group2 span.totals {color: #aaa; font-size: 80%;}
tr.group2 span.totals .value {font-weight:bold; color:#777;}
tr.group2 a.toggle-all { color: #aaa; font-size: 80%; display:none; float:right; margin-right:4px;}
tr.group2:hover a2.toggle-all { display:inline;}
a2.toggle-all:hover {text-decoration:none;}`

②rdoc.css
　C:\Bitnami\redmine-******\ruby\share\doc\ruby\html\css\rdoc.css
　※上記はbitnamiの参考例

.table-of-contents li .toc-toggle.open2 {
  background: url(images/delete.png) no-repeat;
}

##■確認結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651745/3f2a9f7e-d3a6-6353-9014-6d35495c5ab4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651745/af59cccc-2f34-5c67-adef-e99927d844cd.png)



以上です、お疲れ様です。