avo-coder

Avo コーダー

Avo を使用して Rails の管理画面を構築します。リソースを作成する前に、必ず最新のドキュメントを取得してください。

まず、最新のドキュメントを取得する

Avo コンポーネントを作成する前に、現在のドキュメントを取得してください。

WebFetch: https://docs.avohq.io/3.0/llms-full.txt

これにより、最新の Avo 3.x のパターンと API を使用できます。

リソースの生成

bin/rails generate avo:resource User

基本的なリソース構造

# app/avo/resources/user_resource.rb
class Avo::Resources::User < Avo::BaseResource
  self.title = :email
  self.includes = [:posts, :profile]
  self.search = {
    query: -> { query.ransack(email_cont: params[:q]).result }
  }

  def fields
    field :id, as: :id
    field :email, as: :text, required: true
    field :name, as: :text
    field :avatar, as: :file, is_image: true
    field :created_at, as: :date_time, readonly: true

    # Associations
    field :posts, as: :has_many
    field :profile, as: :has_one
  end
end

フィールドの種類

def fields
  # Basic fields
  field :title, as: :text
  field :body, as: :trix          # Rich text
  field :bio, as: :textarea
  field :count, as: :number
  field :price, as: :currency
  field :published, as: :boolean
  field :status, as: :select, options: { draft: "Draft", published: "Published" }
  field :tags, as: :tags

  # Date/Time
  field :published_at, as: :date_time
  field :birth_date, as: :date

  # Files
  field :document, as: :file
  field :avatar, as: :file, is_image: true
  field :photos, as: :files

  # Associations
  field :author, as: :belongs_to
  field :comments, as: :has_many
  field :tags, as: :has_and_belongs_to_many

  # Computed
  field :full_name, as: :text do
    "#{record.first_name} #{record.last_name}"
  end
end

フィールドの表示設定

field :email, as: :text,
  show_on: :index,              # Show on index
  hide_on: :forms,              # Hide on new/edit
  readonly: true                 # Can't edit

# Conditional visibility
field :admin_notes, as: :textarea,
  visible: -> { current_user.admin? }

アクション

bin/rails generate avo:action ArchiveUser

# app/avo/actions/archive_user.rb
class Avo::Actions::ArchiveUser < Avo::BaseAction
  self.name = "Archive User"
  self.message = "Are you sure you want to archive this user?"
  self.confirm_button_label = "Archive"
  self.cancel_button_label = "Cancel"

  def fields
    field :reason, as: :textarea, required: true
  end

  def handle(query:, fields:, current_user:, resource:, **args)
    query.each do |record|
      record.update!(archived: true, archive_reason: fields[:reason])
    end

    succeed "Archived #{query.count} users"
  end
end

リソースに登録します。

def actions
  action Avo::Actions::ArchiveUser
end

フィルター

bin/rails generate avo:filter ActiveUsers

# app/avo/filters/active_users.rb
class Avo::Filters::ActiveUsers < Avo::Filters::BooleanFilter
  self.name = "Active Status"

  def options
    {
      active: "Active",
      inactive: "Inactive"
    }
  end

  def apply(request, query, values)
    return query if values.blank?

    if values["active"]
      query = query.where(active: true)
    end

    if values["inactive"]
      query = query.where(active: false)
    end

    query
  end
end

リソースに登録します。

def filters
  filter Avo::Filters::ActiveUsers
end

スコープ

# In resource
def scopes
  scope Avo::Scopes::Active
  scope Avo::Scopes::Archived
end

# app/avo/scopes/active.rb
class Avo::Scopes::Active < Avo::Advanced::Scopes::BaseScope
  self.name = "Active"
  self.description = "Active users only"
  self.scope = -> { query.where(active: true) }
end

カード（ダッシュボード）

# app/avo/cards/users_count.rb
class Avo::Cards::UsersCount < Avo::Cards::MetricCard
  self.id = "users_count"
  self.label = "Total Users"

  def query
    result User.count
  end
end

認可

Avo は Pundit と統合されています。

# app/policies/user_policy.rb
class UserPolicy < ApplicationPolicy
  def index?
    user.admin?
  end

  def show?
    user.admin? || record == user
  end

  def create?
    user.admin?
  end

  def update?
    user.admin?
  end

  def destroy?
    user.admin? && record != user
  end
end

よくあるパターン

サイドバーのカスタマイズ：

# config/initializers/avo.rb
Avo.configure do |config|
  config.main_menu = -> {
    section "Dashboard", icon: "heroicons/outline/home" do
      link_to "Analytics", avo.analytics_path
    end

    section "Content", icon: "heroicons/outline/document-text" do
      resource :post
      resource :category
    end

    section "Users", icon: "heroicons/outline/users" do
      resource :user
      resource :role
    end
  }
end

出力形式

Avo コンポーネントの構築後：

1. 作成したファイル - リソース、アクション、フィルター
2. 登録先 - コンポーネントの登録場所
3. 権限 - 必要なポリシーメソッド
4. 使用方法 - 管理画面 UI でのアクセス方法