rails 4 foundation 5 slim-lang flash messages helper with devise - ruby-on-rails

Question

I was not able to find many sources that matched my needs out there so I wanted to post this for fellow hackers to chop up and make a bit better. The goal of this helper, was to allow both a list of messages or a single message to be passed to it. This gave me the ability to add all active record failures when saving to the model, or just a generic message any where in my application. I also use rwz/nestive for multiple layouts, and slim-lang for my templates.
Let's start with my flash message partial that allows me to pass a column count to it:
- if flash.present?
div[class="row"]
div[class="large-#{column_count} columns"]
= display_flash_messages(flash)
Which can be called like so:
= render partial: 'partials/flash_message', locals: { column_count: '12'}
The helper code is as follows. Note, I also embed a fontawesome icon before the messages:
module FlashHelper
DEFAULT_KEY_MATCHING = {
alert: {
type: 'alert',
i_class: 'fa fa-exclamation-triangle'
},
notice: {
type: 'success',
i_class: 'fa fa-check'
},
info: {
type: 'standard',
i_class: 'fa fa-check'
},
secondary: {
type: 'secondary',
i_class: 'fa fa-check'
},
success: {
type: 'success',
i_class: 'fa fa-ban'
},
error: {
type: 'alert',
i_class: 'fa fa-exclamation-triangle'
}
}
def display_flash_messages(flash)
html_output = ''
flash.each do |type, message|
key = DEFAULT_KEY_MATCHING[type.to_sym]
alert_wrapper_class = ('alert-box-multiple-wrapper' if message.is_a? Array) || 'alert-box-single-wrapper'
html_output +=
content_tag(:div, class: "alert-box #{key[:type]}", data: { alert: '' } ) do
if message.is_a? Array
html_output_nested =
content_tag(:ul, class: 'alert-box-list') do
message.to_a.map do |list_message|
content_tag(:li, list_message.humanize + '.', class: 'alert-box-li-item')
end.reduce(:<<)
end
else
html_output_nested = content_tag(:span, message.humanize + '.', class: 'alert-box-span-item')
end
html_output_nested = content_tag( :div, html_output_nested, class: "#{alert_wrapper_class}" )
html_output_nested = content_tag(:i, nil, class: "#{key[:i_class]}") + html_output_nested
html_output_nested += link_to('×'.html_safe, '#', class: 'close')
html_output_nested
end
end
raw(html_output)
end
end
The associated SASS:
div.alert-box {
.close {
color: $app-color-code-5;
#include opacity();
}
i {
font-size: 1.3em;
padding: 9px 6px 4px;
line-height: 0;
position: absolute;
top: 50%;
left: 0.5rem;
color: $app-color-code-5;
margin-top: -0.6875rem;
}
div.alert-box-single-wrapper {
margin-left: 25px;
.alert-box-span-item {
font-size: 1em;
}
}
div.alert-box-multiple-wrapper {
ul {
margin-left: 3.7rem;
list-style-type: disc;
margin-bottom: 0;
}
.alert-box-li-item {
font-size: 1em;
}
}
}
In my devise setup, I am now able to use the following. Yes I override the default devise configuration:
if resource_saved
....
else
# merge the ar errors together with devise
if resource.errors.messages.values.flatten.length > 0
flash[:error] = resource.errors.messages.values.flatten
end
# remove passwords from the view layer
clean_up_passwords resource
respond_with resource
end
At the end of the day, this setup builds 2 different sets of html:
<div class="alert-box alert data-alert">
<i class="fa fa-exclamation-triangle"></i>
<div class="alert-box-multiple-wrapper">
<ul class="alert-box-list">
<li class="alert-box-item">The error message.</li>
</ul>
</div>
<a class="close" href="#">×</a>
</div>
<div class="alert-box alert data-alert">
<i class="fa fa-exclamation-triangle"></i>
<div class="alert-box-single-wrapper">
<span class="alert-box-span-item">The error message.</span>
</div>
<a class="close" href="#">×</a>
</div>
Now, all of this works, but I am wondering how others have tackled this problem.