Повідомлення flash у Rails 8 - javascript.org.ua

Повідомлення flash є важливими для зворотного зв'язку з користувачем у веб-додатках.

Ось чиста реалізація за допомогою Rails, Turbo Streams і Stimulus.js з плавними анімаціями.

Попередні вимоги

Щоб слідувати за цим посібником, ви повинні мати:

Встановлений Ruby on Rails (версія 8 або пізніша)
Базове розуміння моделей Rails, контролерів і представлень
Ознайомленість з Hotwire (Turbo)

Особливості

Повідомлення, які автоматично зникають
Плавні анімації зникнення
Іконки для різних типів повідомлень
Опція ручного закриття
Чистий, центрований дизайн

Реалізація

Макет програми

Спочатку налаштуйте макет вашого додатку у файлі app/views/layouts/application.html.erb:








 <%= csrf_meta_tags %>  
 <%= csp_meta_tag %>  
<%= yield :head %>

<%# Увімкніть PWA маніфест для встановлюваних додатків (не забудьте увімкнути в config/routes.rb також!) %>  
 <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>  



 <%# Включає всі файли стилів з app/assets/stylesheets %>  
 <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>  
 <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>  
 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>  


 <%= render "shared/flash" %>  
 <%= yield %>

Частковий файл для повідомлення

Створіть частковий файл у app/views/shared/_flash.html.erb:


    <% flash.each do |type, message| %>  

<% if type == 'notice' %>                <% else %>                <% end %>    

 <%= message %>  

×  


 <% end %>

Контролер

Налаштуйте демонстраційний контролер в app/controllers/demo_controller.rb:

class DemoController < ApplicationController  
 def index  
 end  

 def create_notice  
 respond_to do |format|  
 format.turbo_stream {  
 flash.now[:notice] = "Це повідомлення про успіх!"  
 render turbo_stream: turbo_stream.replace("flash",  
 partial: "shared/flash")  
 }  
 end  
 end  

 def create_alert  
 respond_to do |format|  
 format.turbo_stream {  
 flash.now[:alert] = "Це повідомлення про попередження!"  
 render turbo_stream: turbo_stream.replace("flash",  
 partial: "shared/flash")  
 }  
 end  
 end  
end

Stimulus Controller

Створіть контролер у app/javascript/controllers/flash_controller.js:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

remove() {
this.element.remove();
}
}
```

Примітка:

Запустіть цю команду, якщо ви створюєте контролер вручну.

./bin/rails stimulus:manifest:update

Анімації

.flash-message {  
 animation: flashMessage 6s forwards;  
}  
@keyframes flashMessage {  
 0% {  
 opacity: 0;  
 transform: translateX(-50%) translateY(-100%);  
 }  
 8% {  
 opacity: 1;  
 transform: translateX(-50%) translateY(0);  
 }  
 92% {  
 opacity: 1;  
 transform: translateX(-50%) translateY(0);  
 }  
 100% {  
 opacity: 0;  
 transform: translateX(-50%) translateY(-100%);  
 }  
}

Коли спрацьовує дія, відправляється запит Turbo Stream  
2. Контролер оновлює повідомлення flash  
3. Повідомлення з’являється з анімацією поступового появи  
4. Після 6 секунд воно зникає і видаляється  
5. Користувачі також можуть вручну закрити повідомлення

## Налаштування

1. Клонуйте репозиторій: [https://github.com/memicelis/flash_messages_demo](https://github.com/memicelis/flash_messages_demo)
2. Запустіть `bundle install`
3. Запустіть сервер командою `bin/dev`
4. Відвідайте `localhost:3000`, щоб побачити його в дії  




Перекладено з: [Flash Messages in Rails 8](https://medium.com/@elismemic5/modern-flash-messages-in-rails-8-c71421254fff?source=rss------ruby-5)