プログラマーをダメにした管理画面を改良していく その２

前回がこちら：https://qiita.com/motty93/items/743710210580f6c1080a

作ったものが綺麗に仕上がっていくのっていいですよね。特に目に見えればもっと満足度があがります。
ということで、今回はバリデーションとUIをちょっとだけ改良していきます。

bookモデルにバリデーションを書いていきます。 carrierwaveのファイルサイズバリデーションも一緒に入れていきます。

バリデーションの追加

通常のバリデーションは簡単ですよね。

app/models/book.rb

class Book < ApplicationRecord
  validates :title, :presence => true
  validates :content, :presence => true

  mount_uploader :image, ImageUploader
end

一旦タイトルと内容だけバリデーションを入れました。

次はimageに関するバリデーションです。

今回はこちらから拝借しました。 感謝感激雨嵐。

URL(http://blog.otsukasatoshi.com/entry/2016/05/12/112900)

こちらのfile_size_validator.rbをlibディレクトリ配下に作成して、config/application.rbに設定します。

config/application.rb

require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Admin
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.1
    config.i18n.default_locale = :ja

    # carrierwaveのファイルサイズのバリデーション
    config.autoload_paths += %W(#{config.root}/lib)

    # Settings in config/environments/ take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
  end
end

エラーメッセージも設定しておきましょう。

config/locale/ja.yml

---
ja:
  activerecord:
    errors:
      messages:
        wrong_size: "のサイズは%{file_size}に設定してください。"
        size_too_small: "のサイズが小さすぎます。(%{file_size}以上に設定してください)"
        size_too_big: "のサイズが大きすぎます。(%{file_size}以下に設定してください)"
        ・
        ・
        ・

wrong_size, size_too_small, size_too_bigを追加ですね！

bookモデルに今追加した設定のバリデーションを追加します。

app/models/book.rb

class Book < ApplicationRecord
  validates :title, :presence => true
  validates :text, :presence => true
  validates :image, file_size: {maximum: 5.megabytes.to_i}, :presence => false

  mount_uploader :image, ImageUploader
end

今回はファイルサイズが最大5MBまで入るように設定しました。それ以上だとバリデーションエラーになります。
ある程度形が出来たので、次はbook本体を少し変えていきたいと思います。

アクションとformの追加

app/admin/book.rbを見たらわかるのですが、作成したとき何もない状態です。
前回追加したpermit_params :title, :content, :imageがあるだけですね。それ以外は全てコメントアウトされてる状態です。
なので、アクションを追加してform、sidebarも一緒に制御してみたいと思います。

app/admin/book.rb

ActiveAdmin.register Book do
  permit_params :title, :content, :image

  index do
    selectable_column
    id_column
    column :title, :sortable => true
    column :image, :sortable => true do |image|
      unless image.image.blank?
        image_tag image.image_url(:thumb)
      end
    end
    column :content, :sortable => true
    column :updated_at
    actions
  end

  form(:html => { :multipart => true }) do |f|
    f.inputs "Book Details" do
      f.input :title
      f.input :image
      f.input :content
    end
    f.actions
  end

  show do |item|
    attributes_table do
      row :id
      row :title
      row :image, option: {width: '75', height: '75'}, :sortable => true do |image|
        image_tag image.image_url(:thumb)
      end
      row :content
      row :created_at
      row :updated_at
    end
  end

  sidebar "Book Details", only: :show do
    attributes_table_for book do
      row :title
      row :image, option: {width: '75', height: '75'}
      row :content
      row :created_at
      row :updated_at
    end
  end
end

formで実際に描画するフォームを制御します。
sidebarでページの左右どちらかにコンテンツを配置できます。今回は試しに登録データと同じものをそのまま右に表示してみます。
オプションが所々についてますが、今回説明は省略します。
気になる方は調べてみてください。

まとめ

CarrierWave用のコードを書くのに少々戸惑ってしまいました。。。

通常のRailsと違ってviewとcontrollerが一緒になっているので戸惑いますよね。
まだまだ慣れないですが、少しずつ頑張っていきます。

ではでは。