Closed super-appy closed 8 months ago
原因はTurboでした!!!!!カリキュラムでやったっけ... :melting:
変更前:これだと読み込まれない(consoleに表示されない)
document.addEventListener('DOMContentLoaded', function() {
// ここにページ表示時に実行したいコードを記述
console.log('読み込まれないよ!');
});
. 変更後:
document.addEventListener("turbo:load", function() {
// ここにページ遷移時の処理を記述
console.log('無事に読み込まれるよ!');
});
以下、GPTの説明
Turboを使用している場合、DOMContentLoaded イベントはページが最初にロードされた時に一度だけ発火します。これは、Webページがブラウザで初めて開かれた時、つまりページ全体が最初に読み込まれた時に起こります。 Turboはページのナビゲーションを最適化するために、通常のフルページリロードを行わずに、ページの一部分だけを非同期的に更新します。これにより、ページ遷移が非常に高速になりますが、DOMContentLoaded イベントは新しいページ遷移のたびには発火しません。これは、実際にはページ全体のリロードが行われていないためです。 その代わりに、Turboでは turbo:load イベントがあり、これはページの部分的な更新や新しいページへのナビゲーションのたびに発火します。したがって、Turboを使っている場合は DOMContentLoaded の代わりに turbo:load イベントを使用することが一般的です。
form_withのプルダウン(select)でデフォルト値を未選択にする方法
<%= form.select :cooked_recipe_ids, @cooked_recipes, { include_blank: "未選択" },
{ class: "w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none py-2 px-3 leading-6 transition-colors duration-200 ease-in-out"} %>
編集時にその日の日付になっちゃうので直す
newアクションで指定する
@lunchbox_log = LunchboxLog.new(cooked_date: Date.today)
実現したいこと 調理時間、テイスト、食材での検索に加えて、ユーザーがログインしている場合はユーザーがブックマークしていたらそれを検索条件に入れたい
やったこと recipesコントローラのindexアクションでログインしているかどうかで条件を分岐
def index
if logged_in?
# ログインしているユーザーのbookmarked_recipesを取得し、検索パラメータが存在する場合はそれを使用
@q = current_user.bookmarked_recipes.joins(:recipe).ransack(params[:q])
@bookmarked_recipes = @q.result.includes(:recipe)
if @bookmarked_recipes.exists?
# bookmarked_recipesに基づいてレシピを取得
@recipes = @bookmarked_recipes.map(&:recipe)
else
# ユーザーがbookmarked_recipesを持っていない場合、または検索パラメータがない場合は全レシピを表示
@q = Recipe.ransack(params[:q])
@recipes = @q.result
end
else
# ログインしていない場合、全レシピを表示
@q = Recipe.ransack(params[:q])
@recipes = @q.result
end
end
bookmarked_recipe.rbにRansackの関連付けを記述
def self.ransackable_attributes(*)
["user_id", "status"]
end
def self.ransackable_associations(*)
["recipe", "user"]
end
indexのビューを変更
<% if logged_in? %>
<%= search_form_for @q, class: "flex flex-wrap w-full items-end justify-center sm:mb-0 mb-5 sm:px-0 px-5" do |f| %>
<div class="flex flex-col mb-3 sm:mb-0 w-full sm:w-auto sm:mx-4">
<%= f.label :time_required %>
<%= f.select :recipes_time_required_eq, Recipe.time_requireds_i18n.invert.map { |key, value| [key, Recipe.time_requireds[value]] },
{ include_blank: "未選択" },
class: "border border-line-200 rounded-lg py-3 pl-6 w-full sm:w-52 h-12" %>
</div>
<div class="flex flex-col mb-3 sm:mb-0 w-full sm:w-auto sm:mx-4">
<%= f.label :taste %>
<%= f.select :recipes_taste_eq, Recipe.tastes_i18n.invert.map { |key, value| [key, Recipe.tastes[value]] },
{ include_blank: "未選択" },
class: "border border-line-200 rounded-lg py-3 pl-6 w-full sm:w-52 h-12" %>
</div>
<div class="flex flex-col mb-3 sm:mb-0 w-full sm:w-auto sm:mx-4">
<%= f.label :tag %>
<%= f.select :tags_id_in, @tags.map { |tag| [tag.name, tag.id] },
{ include_blank: '未選択' },
class: "border border-line-200 rounded-lg py-3 pl-6 w-full sm:w-52 h-12" %>
</div>
<div class="flex flex-col mb-3 sm:mb-0 w-full sm:w-auto sm:mx-4">
<%= f.select :status_eq, BookmarkedRecipe.statuses.keys.map { |k| [k.humanize, k] }, include_blank: true %>
</div>
<div class="flex space-x-2">
<%= f.button type: 'submit', class: "inline-block text-white bg-gray-400 border-0 py-2 px-5 focus:outline-none hover:bg-blue-400 rounded-full text-lg mx-2" do %>
<i class="fa-solid fa-magnifying-glass mx-1"></i>検索
<% end %>
<%= link_to recipes_path, class: "inline-block text-white bg-gray-400 border-0 py-2 px-5 focus:outline-none hover:bg-blue-400 rounded-full text-lg mx-2" do %>
<i class="fa-solid fa-rotate-left mx-1"></i>リセット
<% end %>
</div>
<% end %>
<% end %>
RecipeとBookmarkedRecipeの両方があったので、recipeの方は関連付けに変更してみたが変化なし
出ているエラー
NoMethodError at /recipes
undefined method `recipes_time_required_eq' for Ransack::Search<class: BookmarkedRecipe, base: Grouping <combinator: and>>:Ransack::Search
変更した内容
recipeコントローラ
def index
if logged_in?
# ログインしているユーザーのbookmarked_recipesを取得し、検索パラメータが存在する場合はそれを使用
@q = current_user.bookmarked_recipes.joins(:recipe).ransack(params[:q])
- @bookmarked_recipes = @q.result.includes(:recipe)
+ @bookmarked_recipes = @q.result
if @bookmarked_recipes.exists?
# bookmarked_recipesに基づいてレシピを取得
@recipes = @bookmarked_recipes.map(&:recipe)
else
# ユーザーがbookmarked_recipesを持っていない場合、または検索パラメータがない場合は全レシピを表示
@q = Recipe.ransack(params[:q])
@recipes = @q.result
end
else
# ログインしていない場合、全レシピを表示
@q = Recipe.ransack(params[:q])
@recipes = @q.result
end
end
indexアクション
recipes_required_time_eq
から recipe_required_time_eq
<%= f.label :time_required %>
<%= f.select :recipe_time_required_eq, Recipe.time_requireds_i18n.invert.map { |key, value| [key, Recipe.time_requireds[value]] },
{ include_blank: "未選択" },
class: "border border-line-200 rounded-lg py-3 pl-6 w-full sm:w-52 h-12" %>
無事に全ての選択肢が表示されたが、bookmarked_recipeのindexのビューに遷移するようになってしまった!!!
いっそ、ビューを分けるか?ユーザビリティを考えるとこの方がよいのだけど...
お気に入り一覧を作ってその中でステータスで検索できるようにしよう!
別のissueにすることにするのでこちらは閉じる
共通部分(ヘッダー、フッター、フラッシュメッセージ)
フラッシュメッセージ
ログイン画面
レシピ生成
レシピ一覧
レシピ投稿
お弁当の一覧
お弁当の記録
マイページ、プロフィール