↓↓クリックして頂けると励みになります。
【27 | 仕事公開】 << 【ホーム】 >> 【29 | Application Helper】
TrestleはRuby on Railsプロジェクトで管理画面を迅速に構築し、カスタマイズしやすくするための強力なツールです。
これにより、開発者はアプリケーションのコア機能に専念し、時間と労力を節約できます。
trestleは、Ruby on Railsアプリケーションに簡単に管理画面を追加することができます。
コードの繰り返しを減らし、管理画面の作成を迅速化します。
これにより、時間とリソースを節約できます。
プロジェクトのGemfileにTrestleを追加します。
最新バージョンのTrestleを使用する場合、以下の行を追加します。
記述追加 GemFile
gem 'trestle', '~> 0.9.3' gem 'trestle-auth', '~> 0.4.0'
コマンド
bundle
コマンド(2つ)
rails g trestle:install
rails g trestle:auth:install
コマンド マイグレーション適用
rails db:migrate
管理ユーザを登録します。
コマンド
rails c
以下のようにコマンド待機状態になります。
コマンドで管理ユーザを登録します。
メールアドレス、パスワード、氏名はご自分のものを入れて下さい。
Administrator.create(email:"win.rails.learn@gmail.com",password:"123456",first_name:"testsite",last_name:"administrator")
exit
でコマンド待機状態を抜けて下さい。
もし、以下のようなエラーが出て登録できない場合、Springを無効にすると解決できます
エラー
objc[873]: +[__NSCFConstantString initialize] may have been in progress in another thread when fork() was called. objc[873]: +[__NSCFConstantString initialize] may have been in progress in another thread when fork() was called. We cannot safely call it or ignore it in the fork() child process. Crashing instead. Set a breakpoint on objc_initializeAfterForkError to debug.
解決策
コマンド
export DISABLE_SPRING=true
「app\assets\config\manifest.js」ファイルに以下の記述を追加します。
記述追加 app\assets\config\manifest.js(5行目)
//= link trestle/auth/userbox.css
app\assets\config\manifest.js
//= link_tree ../images //= link_directory ../stylesheets .css //= link_tree ../../javascript .js //= link_tree ../../../vendor/javascript .js //= link trestle/auth/userbox.css
ブラウザ確認
http://localhost:3000/admin/
コマンドで追加した管理ユーザでログインします。
ログインできました。
trestle管理画面にダッシュボードを作成します。
「app\admin」フォルダに「dashboard_admin.rb」ファイルを新規作成して下さい。
app\admin\dashboard_admin.rb(新規作成したファイル)
Trestle.admin(:dashboard) do menu do item :dashboard, icon: "fa fa-tachometer" end controller do def index @user_count = User.count() @gig_count = Gig.count() @categories_count = Category.count() end end end
「app\views」フォルダに「admin」フォルダを新規作成して下さい。
作成した「admin」フォルダに「dashboard」フォルダを新規作成します。
作成した「admin\dashboard」フォルダに「index.html.erb」ファイルを新規作成します。
app\views\admin\dashboard\index.html.erb(新規作成したファイル)
<div class="main-content-area"> <div class="main-content-container"> <div class="main-content"> <div class="row"> <div class="col-md-3 bg-primary"> <div class="card text-white text-center"> <h1><%= @user_count %></h1> <p>ユーザー</p> </div> </div> <div class="col-md-3 bg-warning"> <div class="card text-white text-center"> <h1><%= @gig_count %></h1> <p>仕事</p> </div> </div> <div class="col-md-3 bg-info"> <div class="card text-white text-center"> <h1><%= @categories_count %></h1> <p>カテゴリー</p> </div> </div> </div> </div> </div> </div>
ブラウザ確認
http://localhost:3000/admin/
カテゴリー管理
管理カテゴリを作成します。
カテゴリーテーブルにboolean型のactiveカラムを追加します。
コマンド
rails g migration AddActiveToCategory active:boolean
「db\migrate\20200712031237_add_active_to_category.rb」ファイルを編集します。
記述編集 db\migrate\20200712031237_add_active_to_category.rb
3行目に「, default: true」の記述を追加しています。
class AddActiveToCategory < ActiveRecord::Migration[7.1] def change add_column :categories, :active, :boolean, default: true end end
コマンド マイグレーション適用
rails db:migrate
カテゴリーの管理ビューファイルを作成します。
コマンド
rails g trestle:resource Category
「app\admin\categories_admin.rb」ファイルを以下のように編集します。
記述更新 app\admin\categories_admin.rb
Trestle.resource(:categories) do menu do item :カテゴリー, icon: "fa fa-star" end # インデックスビューに表示されるテーブルの列をカスタマイズします。 table do column :name column :active 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 cat = admin.find_instance(params) cat.update(active: true) flash[:message] = "カテゴリーが有効化されました" redirect_to admin.path(:show, id: cat) end def deactivate cat = admin.find_instance(params) cat.update(active: false) flash[:message] = "カテゴリーが無効化されました" redirect_to admin.path(:show, id: cat) end end routes do post :activate, on: :member post :deactivate, on: :member end form do |category| text_field :name end end
ブラウザ確認
http://localhost:3000/admin/dashboard
ダッシュボードにカテゴリーが追加されました。
有効化と無効化を選択できるようになりました。
名前の変更や削除もできます。
ユーザー管理
ユーザ管理が出来るようにします。
「GemFile」に以下の記述を追加します。
「trestle-active_storage」はRails7.1で動作しなくなりましたので外しています。
GemFile
gem 'trestle-search', '~> 0.4.2'
インストールします。
コマンド
bundle
ユーザーテーブルにboolean型のactiveカラムを追加します。
コマンド
rails g migration AddActiveToUser active:boolean
「db\migrate\20200712035153_add_active_to_user.rb」ファイルを以下のように編集します。
記述追加 db\migrate\20200712035153_add_active_to_user.rb
3行目に「, default: true」の記述を追加しています。
class AddActiveToUser < ActiveRecord::Migration[7.1] def change add_column :users, :active, :boolean, default: true end end
コマンド マイグレーション適用
rails db:migrate
ユーザー管理ビューを作成します。
コマンド
rails g trestle:resource User
「app\admin\users_admin.rb」ファイルを以下のように更新します。
記述更新 app\admin\users_admin.rb
Trestle.resource(:users) do menu do item :登録ユーザー, icon: "fa fa-user" end table do column :full_name column :email column :active 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 user = admin.find_instance(params) user.update(active: true) flash[:message] = "ユーザが有効化されました" redirect_to admin.path(:show, id: user) end def deactivate user = admin.find_instance(params) user.update(active: false) flash[:message] = "ユーザが無効化されました" redirect_to admin.path(:show, id: user) end end routes do post :activate, on: :member post :deactivate, on: :member end form do |user| text_field :full_name text_field :email end search do |query| if query User.where("email ILIKE ? OR full_name ILIKE ?", "%#{query}%", "%#{query}%") else User.all end end end
ブラウザ確認
http://localhost:3000/admin/users
登録ユーザの管理、検索ができるようになりました。
仕事管理
仕事の管理を行えるようにします。
コマンド
rails g trestle:resource Gig
「app\admin\gigs_admin.rb」ファイルを以下のように編集します。
記述編集 app\admin\gigs_admin.rb
Trestle.resource(:gigs) do menu do item :仕事, icon: "fa fa-address-card" end table do column :title column :active column :user, -> (obj) { obj.user.full_name } 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 gig = admin.find_instance(params) gig.update(active: true) flash[:message] = "お仕事を有効化しました" redirect_to admin.path(:show, id: gig) end def deactivate gig = admin.find_instance(params) gig.update(active: false) flash[:message] = "お仕事を無効化しました" redirect_to admin.path(:show, id: gig) end end routes do post :activate, on: :member post :deactivate, on: :member end end
ブラウザ確認
http://localhost:3000/admin/gigs
登録された仕事の管理ができるようになりました。
【27 | 仕事公開】 << 【ホーム】 >> 【29 | Application Helper】
↓↓クリックして頂けると励みになります。