見た目を整える

[super-appy]

共通部分（ヘッダー、フッター、フラッシュメッセージ）

• [x] アイコンが変わるように
• [x] リンクしてないところリンクを入れる
• [x] 文言を見直す

フラッシュメッセージ

• [x] 幅を調整

ログイン画面

• [x] 文言修正

レシピ生成

• [x] ボタン変える
• [x] もう少し説明を加える

レシピ一覧

• [x] 各タイルのデザインを要検討

レシピ投稿

• [x] ボタン見直す
• [x] 手順番号が一回更新しないと入らないの直すJSかな
• [x] もう少し説明をわかりやすく

お弁当の一覧

• [x] 説明書きを修正
• [x] AIのレシピとオリジナルがわかるようにしたい（logのshowのように）

お弁当の記録

• [x] 説明書きとボタンの修正
• [x] プルダウンと入力欄で縦が揃わないのが気持ち悪い
• [x] 作ったレシピがデフォルトになっているので選択できるようにする
• [x] 編集時にその日の日付になっちゃうので直す

マイページ、プロフィール

• [x] 文言の修正
• [x] 表示位置を調整
• [ ] 作ったレシピと作りたいレシピの一覧に遷移させたい

[super-appy]

もしヘッダー整えるなら https://qiita.com/gugen_sakai/items/f65494ef2b2d29cb6285

[super-appy]

デザイン https://www.happyhues.co/palettes/5

[super-appy]

Rails7のJSでDOMContentLoadedが使えない時の対処法

原因は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 イベントを使用することが一般的です。

[super-appy]

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"} %>

[super-appy]

編集時にその日の日付になっちゃうので直す

newアクションで指定する

    @lunchbox_log = LunchboxLog.new(cooked_date: Date.today)

[super-appy]

実現したいこと 調理時間、テイスト、食材での検索に加えて、ユーザーがログインしている場合はユーザーがブックマークしていたらそれを検索条件に入れたい

やったこと 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 %>

[super-appy]

RecipeとBookmarkedRecipeの両方があったので、recipeの方は関連付けに変更してみたが変化なし

出ているエラー

NoMethodError at /recipes
undefined method `recipes_time_required_eq' for Ransack::Search<class: BookmarkedRecipe, base: Grouping <combinator: and>>:Ransack::Search

[super-appy]

変更した内容

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" %>

[super-appy]

無事に全ての選択肢が表示されたが、bookmarked_recipeのindexのビューに遷移するようになってしまった！！！

いっそ、ビューを分けるか？ユーザビリティを考えるとこの方がよいのだけど...

[super-appy]

お気に入り一覧を作ってその中でステータスで検索できるようにしよう！

[super-appy]

別のissueにすることにするのでこちらは閉じる