Merge pull request #124 from motohiro-mm/feature/add_flash_message

flashメッセージの表示を追加

app/controllers/meal_plans_controller.rb

@@ -23,7 +23,7 @@ def create
     @meal_plan.assign_attributes(meal_plan_params)
 
     if @meal_plan.save
-      redirect_to @meal_plan, notice: '献立を作成しました。'
+      redirect_to @meal_plan, notice: '献立を作成しました'
     else
       @meal_plan.meals_build
       render :new, status: :unprocessable_entity
@@ -32,7 +32,7 @@ def create
 
   def update
     if @meal_plan.update_meal_plan(meal_plan_params)
-      redirect_to @meal_plan
+      redirect_to @meal_plan, notice: '更新しました'
     else
       @meal_plan.meals_build
       render :edit, status: :unprocessable_entity
@@ -41,7 +41,7 @@ def update
 
   def destroy
     @meal_plan.meals.each(&:destroy!)
-    redirect_to meal_plans_path(meal_date: @meal_plan.meal_date), status: :see_other
+    redirect_to meal_plans_path(meal_date: @meal_plan.meal_date), notice: '削除しました', status: :see_other
   end
 
   def calendar

app/controllers/remarks_controller.rb

@@ -13,9 +13,8 @@ def create
     @remark = current_user.remarks.build(remark_params)
     if @remark.save
       respond_to do |format|
-        format.html { redirect_to meeting_room_path(@meeting_room), notice: 'Date was successfully created.' }
-        # format.turbo_stream { flash.now[:notice] = "Date was successfully created." }
-        format.turbo_stream
+        format.html { redirect_to meeting_room_path(@meeting_room), notice: '投稿しました' }
+        format.turbo_stream { flash.now[:notice] = '投稿しました' }
       end
     else
       render :new, status: :unprocessable_entity
@@ -25,8 +24,8 @@ def create
   def update
     if @remark.update(remark_params)
       respond_to do |format|
-        format.html { redirect_to meeting_room_path(@meeting_room), notice: 'Item was successfully updated.' }
-        # format.turbo_stream { flash.now[:notice] = "Item was successfully updated." }
+        format.html { redirect_to meeting_room_path(@meeting_room), notice: '更新しました' }
+        format.turbo_stream { flash.now[:notice] = '更新しました' }
       end
     else
       render :edit, status: :unprocessable_entity
@@ -37,9 +36,8 @@ def destroy
     @remark.destroy!
 
     respond_to do |format|
-      format.html { redirect_to meeting_room_path(@meeting_room), notice: 'Item was successfully destroyed.', status: :see_other }
-      # format.turbo_stream { flash.now[:notice] = "Date was successfully destroyed." }
-      format.turbo_stream
+      format.html { redirect_to meeting_room_path(@meeting_room), notice: '削除しました', status: :see_other }
+      format.turbo_stream { flash.now[:notice] = '削除しました' }
     end
   end
 

app/controllers/sessions_controller.rb

@@ -8,7 +8,7 @@ def create
     user.find_or_new_family(request.env['omniauth.params']['invitation_token']) if user.family_id.nil?
     if user.save
       session[:user_id] = user.id
-      redirect_to meal_plans_path, notice: 'ログインに成功しました'
+      redirect_to meal_plans_path, notice: 'ログインしました'
     else
       redirect_to root_path, notice: 'ログインに失敗しました'
     end

app/controllers/users_controller.rb

@@ -6,7 +6,7 @@ def edit; end
 
   def update
     if @user.update(user_params)
-      redirect_to meal_plans_path, notice: 'User was successfully updated.'
+      redirect_to meal_plans_path, notice: '更新しました'
     else
       render :edit, status: :unprocessable_entity
     end
@@ -16,7 +16,7 @@ def destroy
     current_user.destroy!
     current_user.family.destroy_family_having_no_user
     reset_session
-    redirect_to root_path, notice: 'User was successfully deleted.', status: :see_other
+    redirect_to root_path, notice: '削除しました', status: :see_other
   end
 
   private

app/javascript/controllers/dropdown_controller.js

@@ -3,5 +3,3 @@ import { Dropdown } from "tailwindcss-stimulus-components";
 
 const application = Application.start();
 application.register("dropdown", Dropdown);
-
-export default class extends Dropdown {}

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,5 @@
+import { Application } from "@hotwired/stimulus";
+import { Alert } from "tailwindcss-stimulus-components";
+
+const application = Application.start();
+application.register("flash", Alert);

app/views/layouts/_flash.html.erb

@@ -0,0 +1,9 @@
+<% flash.each do |flash_type, message| %>
+  <div data-controller="flash" data-flash-dismiss-after-value="5000" data-transition-enter="ease-in-out duration-500" data-transition-enter-from="translate-x-full opacity-0" data-transition-enter-to="translate-x-0 opacity-100" data-transition-leave="ease-in-out duration-500" data-transition-leave-from="translate-x-0 opacity-100" data-transition-leave-to="translate-x-full opacity-0" class="mb-4 rounded relative bg-orange-300/90 text-white translate-x-0 opacity-100">
+    <div class="flex items-center">
+      <p class="m-2 p-2 text-sm">
+        <%= message %>
+      </p>
+    </div>
+  </div>
+<% end %>

app/views/layouts/application.html.erb

@@ -22,6 +22,9 @@
     <% unless current_page?(root_path) %>
         <%= render 'shared/header' %>
     <% end %>
+    <div id="flash" class="fixed inset-x-0 top-0 max-w-screen-sm mx-auto md:w-2/3 flex items-center justify-end grid grid-flow-row auto-rows-min p-4 z-50 pointer-events-none">
+      <%= render 'layouts/flash' %>
+    </div>
     <main class="flex-1 bg-white text-orange-950">
       <%= yield %>
     </main>

app/views/meal_plans/_header_button.html.erb

@@ -0,0 +1,11 @@
+<div class="flex justify-around">
+  <%= button_to meeting_rooms_path(meal_plan:, meal_date: meal_plan.meal_date), method: :post, class: 'rounded-full py-3 px-4 bg-red-400 inline-block' do %>
+    <i class="fa-regular fa-comments text-xl text-white"></i>
+    <span class="ml-1 text-white">会議へ</span>
+  <% end %>
+  <%= link_to meal_plans_path(start_date: meal_plan.meal_date),
+              class: 'inline-block flex items-center' do %>
+    <i class="fa-regular fa-rectangle-list text-xl"></i>
+    <span class="ml-2">献立表へ</span>
+  <% end %>
+</div>

app/views/meal_plans/_meal_plan.html.erb

@@ -1,18 +1,13 @@
-<%= turbo_frame_tag meal_plan, autoscroll: true, data: { autoscroll_block: 'start' } do %>
-  <div class="my-5">
-    <div class="flex justify-between">
-      <h1 class="font-bold text-2xl"><%= l meal_plan.meal_date, format: :long %></h1>
-      <% if meal_plan.meals.present? %>
-          <div class="flex items-center">
-            <%= link_to '編集', edit_meal_plan_path(meal_plan), class: 'text-l inline-block rounded-full py-2 px-4 flex items-center bg-orange-100/80' %>
-          </div>
-      <% end %>
-    </div>
-    <% meal_plan.meals_sort_by_timing.each do |meal| %>
-      <%= render 'meals/meal', meal: %>
+<div class="my-5">
+  <div class="flex justify-between">
+    <h1 class="font-bold text-2xl"><%= l meal_plan.meal_date, format: :long %></h1>
+    <% if meal_plan.meals.present? %>
+        <div class="flex items-center">
+          <%= link_to '編集', edit_meal_plan_path(meal_plan), class: 'text-l inline-block rounded-full py-2 px-4 flex items-center bg-orange-100/80' %>
+        </div>
     <% end %>
   </div>
-<% end %>
-<div class="text-right">
-  <%= button_to 'この献立を削除する', meal_plan, method: :delete, class: 'text-orange-950/70' %>
+  <% meal_plan.meals_sort_by_timing.each do |meal| %>
+    <%= render 'meals/meal', meal: %>
+  <% end %>
 </div>

app/views/meal_plans/edit.html.erb

@@ -1,10 +1,12 @@
 <div class="mx-auto p-4 w-full">
-  <%= turbo_frame_tag @meal_plan do %>
-    <div class="mt-4">
-      <%= render 'form', meal_plan: @meal_plan %>
-    </div>
-    <div class="text-center">
-      <%= link_to 'キャンセル', @meal_plan, class: 'rounded-full py-3 px-4 text-red-9500/50 bg-stone-100 inline-block' %>
-    </div>
-  <% end %>
+  <%= render 'header_button', meal_plan: @meal_plan %>
+  <div class="mt-4">
+    <%= render 'form', meal_plan: @meal_plan %>
+  </div>
+  <div class="text-center">
+    <%= link_to 'キャンセル', @meal_plan, class: 'rounded-full py-3 px-4 text-red-9500/50 bg-stone-100 inline-block' %>
+  </div>
+  <div class="text-right my-4">
+    <%= button_to 'この献立を削除する', @meal_plan, method: :delete, class: 'text-orange-950/70' %>
+  </div>
 </div>

app/views/meal_plans/new.html.erb

@@ -1,10 +1,5 @@
 <div class="mx-auto p-4 w-full">
-  <div class="flex justify-center">
-    <%= link_to meal_plans_path(start_date: @meal_plan.meal_date), class: 'inline-block flex items-center mr-4' do %>
-      <i class="fa-regular fa-rectangle-list text-xl"></i>
-      <span class="ml-2 text-l">献立表へ</span>
-    <% end %>
-  </div>
+  <%= render 'header_button', meal_plan: @meal_plan %>
   <div>
     <%= render 'form', meal_plan: @meal_plan %>
   </div>

app/views/meal_plans/show.html.erb

@@ -1,16 +1,9 @@
 <div class="mx-auto p-4 w-full">
-  <div class="flex justify-around">
-    <%= button_to meeting_rooms_path(meal_plan: @meal_plan, meal_date: @meal_plan.meal_date), method: :post, data: { turbo_frame: '_top' }, class: 'rounded-full py-3 px-4 bg-red-400 inline-block' do %>
-      <i class="fa-regular fa-comments text-xl text-white"></i>
-      <span class="ml-1 text-white">会議へ</span>
-    <% end %>
-    <%= link_to meal_plans_path(start_date: @meal_plan.meal_date),
-                class: 'inline-block flex items-center' do %>
-      <i class="fa-regular fa-rectangle-list text-xl"></i>
-      <span class="ml-2">献立表へ</span>
-    <% end %>
-  </div>
+  <%= render 'header_button', meal_plan: @meal_plan %>
   <div class="mt-4">
     <%= render @meal_plan %>
   </div>
+  <div class="text-right my-4">
+    <%= button_to 'この献立を削除する', @meal_plan, method: :delete, class: 'text-orange-950/70' %>
+  </div>
 </div>

app/views/remarks/create.turbo_stream.erb

@@ -5,3 +5,4 @@
 <% end %>
 
 <%= turbo_stream.update Remark.new, "" %>
+<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>

app/views/remarks/destroy.turbo_stream.erb

@@ -1 +1,2 @@
 <%= turbo_stream.remove @remark %>
+<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>

app/views/remarks/update.turbo_stream.erb

@@ -0,0 +1,7 @@
+<% if @remark.proposal? %>
+  <%= turbo_stream.replace "proposal", partial: "remarks/proposal", locals: {remark: @remark} %>
+<% else %>
+  <%= turbo_stream.replace "comment", partial: "remarks/comment", locals: {remark: @remark} %>
+<% end %>
+
+<%= turbo_stream.prepend "flash", partial: "layouts/flash" %>