Skip to content

Commit

Permalink
Update: 酒indexで検索時のページタイトルとヘッダを変更した
Browse files Browse the repository at this point in the history 
今までは検索情報をページタイトルやヘッダにいれていなかった。
検索しているかしないかに関わらず、常に酒量を表示していた。
そのため、ブラウザバックリストが分かりづらかった。
また何を検索しているかや何件ヒットしたかの情報がなく、検索フィードバックがなかった。

このコミットによりヘッダ情報に検索単語を付加した。
ブラウザヒストリに検索単語が表示されるようになる。
ただしTurboの制限により、リロードをしたときのみである。 Issue #629

また、ページタイトルに検索ワードとヒット件数を入れるようにした。
  • Loading branch information
@yonta
yonta committed Dec 24, 2024
1 parent 53a3199 commit da1f967
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 70 deletions.
19 changes: 5 additions & 14 deletions app/helpers/sakes_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,21 +168,12 @@ def either_highlight_or_lowlight(value)
value.blank? || value == "unknown" ? "lowlight-value" : "highlight-value"
end

# ヘッダタイトル用に検索ワードつきのタイトルを生成する
#
# @param search [String, nil] 検索ワード
# @return [String] ヘッダタイトル
def title_with_search(search)
prefix = search.present? ? "#{search} - " : ""
"#{prefix}#{t('sakes.index.title')}"
end

# 酒index用に酒の総量つきのタイトルを生成する
# 酒index用に酒の総量を尺貫法を使って返す
#
# @param include_empty [Boolean] trueなら空き瓶込みでカウントする
# @return [String] 酒の総量つきタイトル
def title_with_stock(include_empty)
stock = to_shakkan(Sake.alcohol_stock(include_empty:))
"#{t('sakes.index.title')} - #{stock}"
# @return [String] 尺貫法による酒の在庫量
def stock(include_empty)
ml = Sake.alcohol_stock(include_empty:)
to_shakkan(ml)
end
end
123 changes: 68 additions & 55 deletions app/views/sakes/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,75 @@
<%= render(partial: "float_button", locals: { sake: @sake }) %>

<div class="row row-cols-1 g-3">
<div class="col">
<h1 class="mb-0" data-testid="total_sake">
<% with_search = title_with_search(params.dig(:q, :all_text_cont)) %>
<% with_stock = title_with_stock(include_empty?(params[:q])) %>
<%# ヘッダタイトルとページタイトル %>
<%= title(with_search, with_stock) %>
</h1>
</div>
<div class="col">
<%= search_form_for(@search, html: { data: { turbo_frame: "sakes" } }) do |f| %>
<div class="row mx-0 align-items-center">
<div class="col ps-0 input-group">
<%= f.label(:all_text_cont, "search word", class: "form-label visually-hidden") %>
<%= f.search_field(:all_text_cont,
class: "form-control",
value: params.dig(:q, :all_text_cont),
data: { testid: "text_search" }) %>
<%= tag.button(tag.i(class: "bi-search"),
type: "submit",
class: "btn btn-primary",
data: { testid: "submit_search" }) %>
</div>
<div class="col-auto">
<div class="form-check form-switch">
<%= f.check_box(:bottle_level_not_eq,
{ class: "form-check-input",
id: "all_bottle_level",
data: { testid: "check_empty_bottle" },
onChange: "this.form.submit()", },
Sake::BOTTOM_BOTTLE,
Sake.bottle_levels["empty"]) %>
<%= f.label(t(".all_bottles"),
class: "form-check-label",
for: "all_bottle_level") %>
<%# raise %>

<%= turbo_frame_tag("sakes", target: "_top", data: { turbo_action: :advance }) do %>
<div class="row row-cols-1 g-3">
<div class="col">
<h1 class="mb-0" data-testid="total_sake">
<% searched_word = params.dig(:q, :all_text_cont) %>
<% if searched_word.present? then %>
<%# 検索中タイトル %>
<% header = t(".header_with_search", search: searched_word) %>
<% hit = @sakes.length.to_s %>
<% h1 = t(".h1_with_search", search: searched_word, hit:) %>
<% else %>
<%# 通常タイトル %>
<% header = t(".header") %>
<% include_empty = include_empty?(params[:q]) %>
<% h1 = t(".h1_with_stock", stock: stock(include_empty)) %>
<% end %>
<%= title(header, h1) %>
</h1>
</div>
<div class="col">
<%= search_form_for(@search, html: { data: { turbo_frame: "sakes" } }) do |f| %>
<div class="row mx-0 align-items-center">
<div class="col ps-0 input-group">
<%= f.label(:all_text_cont, "search word", class: "form-label visually-hidden") %>
<%= f.search_field(:all_text_cont,
class: "form-control",
value: params.dig(:q, :all_text_cont),
data: { testid: "text_search" }) %>
<%= tag.button(tag.i(class: "bi-search"),
type: "submit",
class: "btn btn-primary",
data: { testid: "submit_search" }) %>
</div>
<div class="col-auto">
<div class="form-check form-switch">
<%= f.check_box(:bottle_level_not_eq,
{ class: "form-check-input",
id: "all_bottle_level",
data: { testid: "check_empty_bottle" },
onChange: "this.form.submit()", },
Sake::BOTTOM_BOTTLE,
Sake.bottle_levels["empty"]) %>
<%= f.label(t(".all_bottles"),
class: "form-check-label",
for: "all_bottle_level") %>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block"></div>
</div>
<div class="col-lg-4 d-none d-lg-block"></div>
</div>
<% end %>
</div>
<%= turbo_frame_tag("sakes", target: "_top", data: { turbo_action: :advance }, class: "col") do %>
<div class="row row-cols-1 g-3">
<div class="col">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2" data-controller="simple-lightbox">
<%= render(partial: "sake", collection: @sakes) %>
<% end %>
</div>
<div class="col">
<div class="row row-cols-1 g-3">
<div class="col">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2" data-controller="simple-lightbox">
<%= render(partial: "sake", collection: @sakes) %>
</div>
</div>
<% if include_empty?(params[:q]) %>
<div class="col d-none d-sm-block">
<%= paginate(@sakes) %>
</div>
<div class="col d-sm-none d-block">
<%# 小さい画面 %>
<%= paginate(@sakes, window: 1) %>
</div>
<% end %>
</div>
<% if include_empty?(params[:q]) %>
<div class="col d-none d-sm-block">
<%= paginate(@sakes) %>
</div>
<div class="col d-sm-none d-block">
<%# 小さい画面 %>
<%= paginate(@sakes, window: 1) %>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
5 changes: 4 additions & 1 deletion config/locales/views/sake.ja.yml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
ja:
sakes:
index:
title: 日本酒リスト
header: 日本酒リスト
header_with_search: "検索: %{search}"
h1_with_stock: "日本酒リスト - %{stock}"
h1_with_search: "検索: %{search} - %{hit}件"
all_bottles: 空瓶を表示
sake:
edit: 編集
Expand Down

0 comments on commit da1f967

Please sign in to comment.