ドラッグアンドドロップで登録したタスクの順番を変えられるようにします。
記述追加 GemFile(88行目)
gem "active_admin-sortable_tree", "~> 2.0.0"
GemFile
source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.7', '>= 5.0.7.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 3.0' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # 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.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platform: :mri end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.0.5' # 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 # 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', '~>4.2' # アバター gem 'gravtastic' # toastr gem 'toastr-rails', '~> 1.0' # 日本語化 gem 'rails-i18n' # google認証 gem 'omniauth' gem 'omniauth-google-oauth2' # 管理ダッシュボード gem 'activeadmin' # 管理ダッシュボードのテーマ gem 'active_skin' #画像アップロード gem 'paperclip', '~> 5.1.0' # アマゾンS3 gem 'aws-sdk', '~> 2.8' # タスクの順番を変える gem "active_admin-sortable_tree", "~> 2.0.0"
コマンド
bundle
「app/assets/javascripts/active_admin.js」ファイルに以下の記述を追加します。
記述追加 app/assets/javascripts/active_admin.js(2行目)
//= require active_admin/sortable
app/assets/javascripts/active_admin.js
//= require active_admin/base //= require active_admin/sortable
「app/assets/stylesheets/active_admin.scss」ファイルに以下の記述を追加します。
記述追加 app/assets/stylesheets/active_admin.scss(20行目)
@import "active_admin/sortable";
app/assets/stylesheets/active_admin.scss
// SASS variable overrides must be declared before loading up Active Admin's styles. // // To view the variables that Active Admin provides, take a look at // `app/assets/stylesheets/active_admin/mixins/_variables.scss` in the // Active Admin source. // // For example, to change the sidebar width: // $sidebar-width: 242px; // Active Admin's got SASS! @import "active_admin/mixins"; @import "active_admin/base"; $skinActiveColor: #08c0a1; $skinHeaderBck: #273585; $panelHeaderBck: #273585; $skinLogo: none; @import "active_skin"; @import "active_admin/sortable"; // Overriding any non-variable SASS must be done after the fact. // For example, to change the default status-tag color: // // .status_tag { background: #6090DB; }
記述更新 app\admin\tasks.rb
ActiveAdmin.register Task do permit_params :title, :note, :video, :header, :tag, :project_id sortable tree: false, sorting_attribute: :tag index :as => :sortable do label :title actions end index do selectable_column column :header column :title column :tag column :project actions end end
ブラウザ確認
http://localhost:3000/admin/tasks
ドラッグアンドドロップでタスクの順番を変えることができるようになりました。
タグのカラムに並び替えた順番の数字が入るようになっています。
Tagカラムのデータ型を変更しておきます。
コマンド
rails g migration ChangeTagInTask
記述追加 db\migrate\20200715043622_change_tag_in_task.rb
3行目に「change_column :tasks, :tag, 'bigint USING CAST(tag AS bigint)'」の記述を追加しています。
class ChangeTagInTask < ActiveRecord::Migration[5.0] def change change_column :tasks, :tag, 'bigint USING CAST(tag AS bigint)' end end
コマンド マイグレーション適用
rails db:migrate
「app\models\task.rb」ファイルのバリデーションの記述を削除します。
記述削除 app\models\task.rb
6行目の記述を削除しています。
class Task < ApplicationRecord belongs_to :project validates :title, presence: true, length: { maximum: 50 } validates :video, presence: true #validates :tag, presence: true validates :project, presence: true end
「app\admin\tasks.rb」ファイルに以下の記述を追加します。
記述追加 app\admin\tasks.rb(24行目)
form do |f| f.inputs do input :project, label: "Project" input :title, label: "Title" input :note, label: "Note" input :video, label: "video" input :header, label: "Header" end actions end
app\admin\tasks.rb
ActiveAdmin.register Task do permit_params :title, :note, :video, :header, :tag, :project_id sortable tree: false, sorting_attribute: :tag index :as => :sortable do label :title actions end index do selectable_column column :header column :title column :tag column :project actions end form do |f| f.inputs do input :project, label: "Project" input :title, label: "Title" input :note, label: "Note" input :video, label: "video" input :header, label: "Header" end actions end end
これでタスクを作成するとtagカラムが「null」で作成されます。
ドラックアンドドロップして位置を入れ替えると数字が格納されます。
最後に「app\assets\stylesheets\active_admin.scss」ファイルのフォルダの位置を変更します。
これは管理ダッシュボード用のCSSがアプリケーション全体で読み込まれてしまってデザインが崩れてしまう問題があるためです。
移動するフォルダは「vendor\assets\stylesheets」フォルダです。
「active_admin.scss」ファイルの最終的なパスは「vendor\assets\stylesheets\active_admin.scss」となります。