学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.0 | 動画学習サイトを作成| 23 | プロジェクト管理

[22]アクションテキスト(ActionText) << [ホームに戻る] >> [24]タスク管理


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


プロジェクトの登録が出来るようになりました。

プロジェクトの新規登録
プロジェクトの新規登録



リッチテキストが使用できます。

リッチテキスト使用可能
リッチテキスト使用可能



複数画像もアップロードできます。

複数画像アップロード
複数画像アップロード



↓↓クリックして頂けると励みになります。


[22]アクションテキスト(ActionText) << [ホームに戻る] >> [24]タスク管理