Vào code dự án cũ để xem lại.

Các bước cần làm

1. Tìm hiểu bài toán
2. Cấu trúc database
3. Khởi tạo model
4. Xây dựng form checkbox
5. Lưu trữ dữ liệu
6. Lấy giá trị

Khởi tạo model

  
    # frozen_string_literal: true
    class User < ApplicationRecord
      has_many :users_categories, foreign_key: :user_id, dependent: :destroy
    end
	

    # frozen_string_literal: true
    class Category < ApplicationRecord
      has_many :users_categories, foreign_key: :category_id,
        dependent: :destroy
    end
	

    # frozen_string_literal: true
    class UsersCategory < ApplicationRecord
      belongs_to :user, foreign_key: :user_id
      belongs_to :category, class_name: Category.name
    end
	

Xây dựng form checkbox

1. Generate form checkbox với dữ liệu category

    def new
      @user = User.new
      @category_options =
        Category.all.map do |category|
          UsersCategory.new category: category, user: @user
        end
    end
    

Xây dựng form checkbox

1. Generate form checkbox với dữ liệu category

<%= form_for @user do |f| %>
  <%= f.object.errors.full_messages %>
  username: <%= f.text_field :name %>
  categories:
    <%= f.fields_for :users_categories, @category_options do |ff| %>
      <% category_option = ff.object %>
      <%= ff.check_box :_destroy, {}, checked_value: "0", unchecked_value: "1" %>
      <%= ff.hidden_field :category_id %>
      <%= category_option.content %>
    <% end %>
  <%= f.submit %>
<% end %>
    

Xây dựng form checkbox

2. Khi lựa chọn vào "other content" sẽ xuất hiện input để nhập dữ liệu

- Ý tưởng: Đối với category có key_name = "other_content" sẽ generate ra input và ẩn đi, khi người dùng click vào `other_content` sẽ show và hide

<%= form_for @user do |f| %>
  <%= f.object.errors.full_messages %>
  username: <%= f.text_field :name %>
  categories:
    <%= f.fields_for :users_categories, @category_options do |ff| %>
      <% users_categories = f.object.users_categories %>
      <% category_option = ff.object %>
        <%= ff.check_box :_destroy, {}, 0, 1 %>
        <%= ff.hidden_field :category_id %>
        <%= category_option.content %>

        # Thêm đoạn
        <% if category_option.key_name == "other_content" %>
          <%= ff.text_field :other_content, value: other_content,class: "js-other_content-field hidden" %>
        <% end %>

    <% end %>
  <%= f.submit %>
<% end %>
    

Xây dựng form checkbox

2. Khi lựa chọn vào "other content" sẽ xuất hiện input để nhập dữ liệu

- Xử lý một chút JS đơn giản:

  $(function() {
    # Xử lý với trường hợp người dùng click vào `other_category`
    $('.js-select-other_content').change(function () {
      var self = $(this),
          otherContent = $('.js-other_content-field');
      if (self.is(':checked')) {
        otherContent.removeClass('hidden');
      } else {
        otherContent.addClass('hidden');
      }
    });
  });
    

Lưu trữ dữ liệu

1.Permit data

  def user_params
    params.require(:user).permit(
      :name,
      users_categories_attributes: [:id, :category_id, :other_content, :_destroy]
    )
  end
    

Lưu trữ dữ liệu

2. Validate

Lưu trữ dữ liệu

2. Validate

    # user.rb
MIN_SIZE = 1
# Validate số lượng tối thiểu categories
validates :users_categories, length: {minimum: MIN_SIZE}
  

      # user.rb
### Validate số lượng tối thiểu categories
MIN_SIZE = 1
validate :validate_users_categories

private
def validate_users_categories
  errors.add(:users_categories, :minsize) if(users_categories.size < MIN_SIZE)
end
  

Lưu trữ dữ liệu

2. Validate

    # users_category.rb
# Validate nội dung khi chọn "other_content"
validates :other_content, presence: true, if: lambda { key_name == "other_content"}
  

    # users_category.rb
    # Validate nội dung khi chọn "other_content"
    validate :validate_other_content
    private
    def validate_other_content
      errors.add(:other_content, :blank) if(key_name == OTHER_CONTENT && other_content.blank?)
    end
  

Lưu trữ dữ liệu

3. Điền giá trị cũ vào form nếu validate sai

    # new.html.rb
    <%= form_for @user do |f| %>
      <%= f.object.errors.full_messages %>
      username: <%= f.text_field :name %>
      categories:
        <%= f.fields_for :users_categories, @category_options do |ff| %>
          <% users_categories = f.object.users_categories %>
          <% category_option = ff.object %>
          # Tìm kiếm users_categories có chứa category_option hiện tại hay không
          <% is_selected = users_categories.map{|c| c.key_name}.include?(category_option.key_name) %>
          # Lấy giá trị của "Other content"
          <% other_content = users_categories.select{|c| c.key_name == "other_content"}.first&.other_content %>
            <%= ff.check_box :_destroy, {checked: is_selected, class: "#{'js-select-other_content' if category_option.key_name == 'other_content'}"}, 0, 1 %>
            <%= ff.hidden_field :category_id %>
            <%= category_option.content %>
            <% if category_option.key_name == "other_content" %>
              <%= ff.text_field :other_content, value: other_content,class: "js-other_content-field hidden" %>
            <% end %>
        <% end %>
      <%= f.submit %>
    <% end %>
  

Lấy giá trị

  # users_category.rb
  def category_name
    key_name == OTHER_CONTENT ? other_content : content
  end
  

  # user.rb
  def show
    @user = User.find params[:id]
    @categories = @user.users_categories.map{|c| c.category_name}.join(" ,")
  end