Add flashes with StumulusJS

This commit is contained in:
Eugene Burmakin 2024-01-03 12:13:00 +01:00
parent ffa21a5e49
commit 887b84bb65
12 changed files with 84 additions and 28 deletions

View file

@ -1,2 +1,10 @@
module ApplicationHelper
def classes_for_flash(flash_type)
case flash_type.to_sym
when :error
'bg-red-100 text-red-700 border-red-300'
else
'bg-blue-100 text-blue-700 border-blue-300'
end
end
end

View file

@ -1,4 +1,5 @@
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@rails/actioncable"
import "controllers"
import "@hotwired/turbo-rails"

View file

@ -0,0 +1,9 @@
import { Application } from "@hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }

View file

@ -0,0 +1,5 @@
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

View file

@ -0,0 +1,7 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
remove() {
this.element.remove()
}
}

View file

@ -1,5 +1,5 @@
<div class="hero min-h-content bg-base-200">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Edit your account!</h1>
<p class="py-6">And change this text!</p>

View file

@ -1,5 +1,5 @@
<div class="hero min-h-content bg-base-200">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Register now!</h1>
<p class="py-6">And change this text!</p>

View file

@ -1,5 +1,5 @@
<div class="hero min-h-content bg-base-200">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl font-bold">Login now!</h1>
<p class="py-6">And change this text!</p>

View file

@ -1,25 +1,37 @@
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
<% end %>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
<div class='my-5'>
<%- if controller_name != 'sessions' %>
<div class='my-2'>
<%= link_to "Log in", new_session_path(resource_name) %>
</div>
<% end %>
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<div class='my-2'>
<%= link_to "Sign up", new_registration_path(resource_name) %>
</div>
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<div class='my-2'>
<%= link_to "Forgot your password?", new_password_path(resource_name) %>
</div>
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<div class='my-2'>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
</div>
<% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<div class='my-2'>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
</div>
<% end %>
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
<% end %>
<% end %>
</div>

View file

@ -44,6 +44,7 @@
<body class='min-h-screen'>
<div class='container mx-auto'>
<%= render 'shared/navbar' %>
<%= render 'shared/flash' %>
<%= yield %>
</div>
</body>

View file

@ -0,0 +1,11 @@
<% flash.each do |key, value| %>
<div data-controller="removals" class="flex items-center fixed top-5 right-5 <%= classes_for_flash(key) %> py-3 px-5 rounded-lg">
<div class="mr-4"><%= value %></div>
<button type="button" data-action="click->removals#remove">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<% end %>

View file

@ -5,4 +5,6 @@ pin_all_from "app/javascript/channels", under: "channels"
pin "application", preload: true
pin "@rails/actioncable", to: "actioncable.esm.js"
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"