[RUBY] [Enum_help] Use enum_help to create a select box displayed in Japanese!

Overview

Use the enum_help gem to record the process of creating the select box displayed in Japanese as a memorandum.

environment

・ Ruby '2.5.7' ・ Rails '5.2.3' ・ Enum_help '0.0.17'

process

1. Preparation

Add enum_help to your Gemfile.

gem 'enum_help'

"Bundle install" in the terminal.

bundle install

2. Add enum column to table

Add the target column.

db/migrate/20xxxxxxxxx_add_place_to_datespots.rb

class AddPlaceToDatespots < ActiveRecord::Migration[5.2]
  def change
    add_column :datespots, :place, :integer
  end
end

In the terminal, do "rails db: migrate".

rails db:migrate

3. Model definition

After preparing the enum column in the table, the next step is to associate multiple constants with the enum column.

app/models/datespot.rb

class Datespot < ApplicationRecord
(abridgement)
  enum place: {
    Ginza: 0, Yurakucho: 1, Shinbashi: 2, Hamamatsucho: 3, Tamachi: 4, Shinjuku: 5,
    Yoyogi: 6, Okubo: 7, Shibuya: 8, Omotesando: 9, Aoyama: 10, Harajuku: 11,
    Akasaka: 12, Roppongi: 13, Azabu: 14, Marunouchi: 15, Nihonbashi: 16, Kanda: 17,
    Ningyocho: 18, Ikebukuro: 19, Jiyugaoka: 20, Sangenjaya: 21, Futakotamagawa: 22, Shinagawa: 23,
    Gotanda: 24, Osaki: 25, Odaiba: 26, Toyosu: 27, ebisu: 28, Hiroo: 29,
    Shirogane: 30, Daikanyama: 31, Nakameguro: 32, Meguro: 33, Iidabashi: 34, Yotsuya: 35,
    Kagurazaka: 36, Ueno: 37, Asakusa: 38, Nakano: 39, Kichijoji: 40, Tachikawa: 41, Others: 42
  }
end

4. Definition of enum_help

Add a Japanese translation to config / locales / ja.yml.

config/locales/ja.yml

ja:
  enums:
    datespot:
      place:
        Ginza:Ginza
        Yurakucho:Yurakucho
        Shinbashi:Shimbashi
        Hamamatsucho:Hamamatsucho
        Tamachi:Tamachi
        Shinjuku:Shinjuku
        Yoyogi:Yoyogi
        Okubo:Okubo
        Shibuya:Shibuya
        Omotesando:Omotesando
        Aoyama:Aoyama
        Harajuku:Harajuku
        Akasaka:Akasaka
        Roppongi:Roppongi
        Azabu:Azabu
        Marunouchi:Marunouchi
        Nihonbashi:Nihonbashi
        Kanda:Kanda
        Ningyocho:Ningyocho
        Ikebukuro:Ikebukuro
        Jiyugaoka:Jiyugaoka
        Sangenjaya:Sangenjaya
        Futakotamagawa:Futakotamagawa
        Shinagawa:Shinagawa
        Gotanda:Gotanda
        Osaki:Osaki
        Odaiba:Odaiba
        Toyosu:Toyosu
        ebisu:Ebisu
        Hiroo:Hiroo
        Shirogane:platinum
        Daikanyama:Daikanyama
        Nakameguro:Nakameguro
        Meguro:Meguro
        Iidabashi:Iidabashi
        Yotsuya:Yotsuya
        Kagurazaka:Kagurazaka
        Ueno:Ueno
        Asakusa:Asakusa
        Nakano:Nakano
        Kichijoji:Kichijoji
        Tachikawa:Tachikawa
        Others:Other

5. Create select box

Create a select box using the convenience method of enum_help.

app/views/datespots/_datespot_form.html.erb

<%= form_with model: @datespot, local: true do |f| %>
(abridgement)
  <div class = 'form-group'>
    <%= f.label :place %> <span class="input-need">* Required</span>
    <%= f.select :place, options_for_select(Datespot.places_i18n.invert, selected: f.object.place), { include_blank: true }, { class: 'form-control', id: 'datespot_place' } %>
  </div>
<% end %>

I am making Japanese and English hashes with "Datespot.places_i18n.invert".

irb(main):001:0> Datespot.places_i18n.invert
=> {"Ginza"=>"Ginza", "Yurakucho"=>"Yurakucho", "Shimbashi"=>"Shinbashi", "Hamamatsucho"=>"Hamamatsucho", "Tamachi"=>"Tamachi", "Shinjuku"=>"Shinjuku", "Yoyogi"=>"Yoyogi
", "Okubo"=>"Okubo", "Shibuya"=>"Shibuya", "Omotesando"=>"Omotesando", "Aoyama"=>"Aoyama", "Harajuku"=>"Harajuku", "Akasaka"=>"Akasaka", "Roppongi"=>"Roppongi", "hemp
cloth"=>"Azabu", "Marunouchi"=>"Marunouchi", "Nihonbashi"=>"Nihonbashi", "Kanda"=>"Kanda", "Ningyocho"=>"Ningyocho", "Ikebukuro"=>"Ikebukuro", "Jiyugaoka"=>"Jiyugaoka",
 "Sangenjaya"=>"Sangenjaya", "Futakotamagawa"=>"Futakotamagawa", "Shinagawa"=>"Shinagawa", "Gotanda"=>"Gotanda", "Osaki"=>"Osaki", "Odaiba"=>"Odaiba", "Toyosu"=>"To
yosu", "Ebisu"=>"ebisu", "Hiroo"=>"Hiroo", "platinum"=>"Shirogane", "Daikanyama"=>"Daikanyama", "Nakameguro"=>"Nakameguro", "Meguro"=>"Meguro", "Iidabashi"=>"Iidaba
shi", "Yotsuya"=>"Yotsuya", "Kagurazaka"=>"Kagurazaka", "Ueno"=>"Ueno", "Asakusa"=>"Asakusa", "Nakano"=>"Nakano", "Kichijoji"=>"Kichijoji", "Tachikawa"=>"Tachikawa",
 "Other"=>"Others"}

Holds the value selected in "selected: f.object.place".

An empty element is added at the beginning with "include_blank: true".

Now you have the following select box!

6. Receive the value in the view

By the way, when receiving a value in the view, if you add "_i18n", it will be displayed in Japanese.

app/views/datespots/_datespot.html.erb

(abridgement)
<%= datespot.place_i18n %>

reference

EnumHelp [Rails] enum tutorial