Todo

I feel like you can't have a component demo page without a random todo app included... So here it is!

You haven't created any todos!

0 items left

app/components/todos_component.rb

# frozen_string_literal: true

class TodosComponent < ViewComponentReflex::Component
  def initialize
    @filter = 'All'
  end

  def filtered_todos
    case @filter
    when 'Active'
      active_todos
    when 'Completed'
      completed_todos
    else
      todos
    end
  end

  def completed_todos
    todos.where(completed: true)
  end

  def active_todos
    todos.where(completed: false)
  end

  def todos
    Todo.where(session_id: request.session.id.to_s).order(:created_at)
  end

  def filter_class(filter)
    if @filter == filter
      'is-primary'
    else
      'is-light'
    end
  end

  def tags
    buttons = %w[All Active Completed]
    tag.div class: 'tags has-addons' do
      buttons.each do |button|
        opts = {
          id: "#{button}-tag",
          class: "tag #{filter_class(button)}",
          data: {
            reflex: 'click->TodosComponentReflex#filter', filter: button, key: key
          }
        }
        concat tag.a(button, opts)
      end
    end
  end

  def no_todos_text
    case @filter
    when 'Completed'
      "You haven't completed any of your todos!"
    when 'Active'
      "You've completed all your todos!"
    else
      "You haven't created any todos!"
    end
  end

  # reflexes

  def filter
    @filter = element.dataset[:filter]
  end

  def clear
    completed_todos.destroy_all
  end
end