##■やりたいこと
・redmine4.2でリスト表示した時に、プロジェクトを親プロジェクトで一旦グルーピングしてトグルSWで表示／非表示を制御したい。
（親プロジェクトの単位で、表示／非表示を決めたい）
・従来の画面
プロジェクトは階層表示されているが、オプションにプロジェクトが設定できないため階層が全て表示されてしまう。
##■環境：
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・・・）を以下（変更前→変更後に）に修正。
※プロジェクトの最初だけグルーピング処理を入れる。
＜変更前＞
`
<% @query.inline_columns.each do |column| %>
<%= content_tag('td', column_content(column, entry), :class => column.css_classes) %>
<% end %> `
↓
＜変更後＞
<% if level == 0 then %> <% reset_cycle %> <tr class="group2 open2"> <td> <span class="expander icon icon-expended" onclick="toggleRowGroup2(this);"> </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;
}
##■確認結果
以上です、お疲れ様です。