trestleでリッチテキストが使えるようにします。
記述追加 GemFile(86行目)
gem 'trestle-tinymce', '~> 0.3.0'
GemFile
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.6' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3', '>= 6.0.3.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.2', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Bulma gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' #デバイス gem 'devise' # 日本語化 gem 'rails-i18n' # google認証 gem 'omniauth' gem 'omniauth-google-oauth2' # アマゾンS3 gem "aws-sdk" #管理ダッシュボード gem 'trestle', '~> 0.9.3' gem 'trestle-auth', '~> 0.4.0' # trestle検索 gem 'trestle-search', '~> 0.3.0' # trestle画像アップロードと表示 gem 'trestle-active_storage', '~> 2.2', '>= 2.2.1' gem "mini_magick" gem 'image_processing', '~> 1.2' # trestleリッチテキスト gem 'trestle-tinymce', '~> 0.3.0'
コマンド
bundle
コマンド
rails g trestle:resource Project
プロジェクトテーブルに「有効化」「無効化」を格納するカラムを作成します。
コマンド
rails g migration AddActiveColumToProject active:boolean
記述追加 db\migrate\20200802102348_add_active_colum_to_project.rb
3行目に「, default: true」の記述を追加しています。
class AddActiveColumToProject < ActiveRecord::Migration[6.0] def change add_column :projects, :active, :boolean, default: true end end
コマンド マイグレーション適用
rails db:migrate
「app\admin\projects_admin.rb」ファイルを以下のように編集します。
記述編集 app\admin\projects_admin.rb
Trestle.resource(:projects) do menu do item :プロジェクト, icon: "fa fa-address-card" end table do column :name column :active column :user, -> (obj) { obj.user.full_name } column :price column :created_at, align: :center actions do |toolbar, instance, admin| toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success' toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger' end end controller do def activate project = admin.find_instance(params) project.update(active: true) flash[:message] = "プロジェクトが有効化されました" redirect_to admin.path(:show, id: project) end def deactivate project = admin.find_instance(params) project.update(active: false) flash[:message] = "プロジェクトが無効化されました" redirect_to admin.path(:show, id: project) end end routes do post :activate, on: :member post :deactivate, on: :member end form do |project| select :user_id, User.where(active: true) text_field :name editor :description text_field :price active_storage_field :images end search do |query| if query Project.where("name ILIKE ?", "%#{query}%") else Project.all end end active_storage_fields do [:images] end end
ブラウザ確認
http://localhost:3000/admin/projects
プロジェクトの登録が出来るようになりました。
リッチテキストが使用できます。
複数画像もアップロードできます。