Добавление html в helper_methods для пользовательских флеш-сообщений в рельсах

Question

Так что я использую rails 6 с TailwindCss 1.0+ и сейчас пытаюсь создать собственное окно флеш-сообщения.

У меня есть вспомогательный модуль с тремя инструкциями case.

Оператор №1 класса flash

  def flash_class(level)
    case level
      when :notice then 'alert-info'
      when :success then 'alert-success'
      when :error then 'alert-error'
      when :alert then 'alert-error'
    end
  end

Оператор #2 flash_icon (я хочу добавить иконку .svg во флэш-коробку на основе флэш-памяти) класс

  def flash_icon(img)
    case img
      when :notice then content_tag :div class: "py-1" end  :svg class: "fill-current h-6 w-6 text-white mr-2"  xmlns: "http://www.w3.org/2000/svg" viewBox: "0 0 20 20" end :path d: "M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" end
    end
  end

Именно поэтому я считаю, что большинство моих проблем возникло.Здесь есть несколько различных типов тегов, таких как div, svg, d, и я действительно не слишком уверен, как обращаться с ними в вспомогательном методе.

Заявление № 3 Текст заголовка предупреждения (это можно выяснить, как только я выясню, как обрабатывать теги содержимого в вспомогательных методах) [! [Введите описание изображения здесь] [1]][1]

  def flash_status_text(status)
    case status
      when :notice then content_tag :p class: "text-sm" Some Status Here end
    end
  end
end

Это ошибки, которые я получаю при попытке перейти на мой сайт:

/Users/shawnwilson/Desktop/Development/Fuze Group/LoadzeWeb/app/helpers/flash_helper.rb:13: syntax error, unexpected class, expecting end ...ice then content_tag :div class: "py-1" end :svg class: "fi... ... ^~~~~ /Users/shawnwilson/Desktop/Development/Fuze Group/LoadzeWeb/app/helpers/flash_helper.rb:13: syntax error, unexpected ':', expecting end ...t_tag :div class: "py-1" end :svg class: "fill-current h-6 ... ... ^ /Users/shawnwilson/Desktop/Development/Fuze Group/LoadzeWeb/app/helpers/flash_helper.rb:13: syntax error, unexpected tIDENTIFIER, expecting end ...h-6 w-6 text-white mr-2" xmlns: "http://www.w3.org/2000/svg... ... ^~~~~ /Users/shawnwilson/Desktop/Development/Fuze Group/LoadzeWeb/app/helpers/flash_helper.rb:13: syntax error, unexpected tIDENTIFIER, expecting end ...://www.w3.org/2000/svg" viewBox: "0 0 20 20" end :path d: "M... ... ^~~~~~~ /Users/shawnwilson/Desktop/Development/Fuze Group/LoadzeWeb/app/helpers/flash_helper.rb:13: syntax error, unexpected ':', expecting end-of-input ...svg" viewBox: "0 0 20 20" end :path d: "M2.93 17.07A10 10 0 ... ... ^

РЕДАКТИРОВАТЬ: ДОБАВЛЯЕТ ОРИГИНАЛHtml окна предупреждения TailwindCSS и что я пытаюсь достичь

Оригинал:

<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
    <div>
      <p class="font-bold">Our privacy policy has changed</p>
      <p class="text-sm">Make sure you know how these changes affect you.</p>
    </div>
  </div>
</div>

Что я хочу:

<div class="<%= flash_class(level) %> border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1"><%= flash_icon(img) %></div>
    <div>
      <%= flash_status_text(status) %>
      <p class="text-sm"><%= message %></p>
    </div>
  </div>
</div>

Answer 1

Это возможно и не должно быть так сложно.

Я бы хотел использовать более ООП подход, чем использование case операторов:

# helpers/<model_name>/flash/flash.rb
# frozen_string_literal: true

module Users
  module Flash
    class Flash
      ALERT_PREFIX = 'alert-'
      XMLNS = 'http://www.w3.org/2000/svg'

      include ActionView::Helpers::TagHelper
      include ActionView::Context

      def class_attr; end

      def status_text; end

      def icon; end
    end
  end
end

Этот класс определяетобщий метод для каждого унаследованного объекта (успех, информация, ошибка, предупреждение), константы и включаемые внешние модули.

# helpers/<model_name>/flash/notice.rb
# frozen_string_literal: true

module Users
  module Flash
    class Notice < Flash
      def class_attr
        "#{ALERT_PREFIX}info"
      end

      def status_text
        content_tag(:p, 'Some Status', class: 'text-sm')
      end

      def icon
        content_tag(
          :svg,
          class: 'fill-current h-6 w-6 text-teal-500 mr-4',
          xmlns: XMLNS,
          viewBox: '0 0 20 20') do
            content_tag(
              :path,
              nil,
              d: 'M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z'
            )
          end
      end
    end
  end
end

Файлы, наследуемые от Flash, переопределяют методы по своей собственной логике.На этот раз без условий.

Когда метод не определен в дочернем классе Flash, он возвращает nil, поскольку вызывает метод в своем родительском классе, который не имеет тела, поэтомувозвращает просто nil.

# helpers/<model_name>/flash/error.rb
# frozen_string_literal: true

module Users
  module Flash
    class Error < Flash
      def class_attr
        "#{ALERT_PREFIX}error"
      end
    end
  end
end

Теперь вы можете просто создать экземпляр класса и вызвать необходимый метод:

<%= <model_name>::Flash::Notice.new.class_attr %>
<%= <model_name>::Flash::Notice.new.status_text %>
<%= <model_name>::Flash::Notice.new.icon %>

---

Уведомление о создании svg и path HTML элементы, я использовал вложенные content_tag s.У svg определен класс, плюс необходимые опции (xmlns, viewbox), которые позволяют открывать блок и помещать внутрь path, который имеет аргумент nil, так как он больше не отображаетсодержимое, чем сам тег.

d просто добавляется в path с использованием аргумента параметров, принимаемого методом content_tag.

def icon
  content_tag(
    :svg,
    class: 'fill-current h-6 w-6 text-teal-500 mr-4',
    xmlns: XMLNS,
    viewBox: '0 0 20 20') do
      content_tag(
        :path,
        nil,
        d: 'M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z'
      )
    end
end