Dynamic select of images by themes

README.md

Описание файлов

Предусловия

• В папке app/assets/images/pictures должны лежать картинки.
• В базе в таблицах images и themes должны быть данные. В поле file таблицы images должны быть названия файлов картинок.
• В файле config/initializers/assets.rb должна быть строчка: Rails.application.config.assets.paths << Rails.root.join('assets', 'images', 'pictures')

works_controller.rb

В в методе index выгружаем все темы, в методе select_images — по полученному id темы (который берётся из выпадающего списка тем во view) выгружаем в json'е все названия файлов картинок.

works/index.html.slim

Создаём выпадающий список, содержащий темы. @themes берётся как раз из метода index контроллера.

В div-е #images будут отбражаться наши картинки по данной теме.

javascripts/works.coffee

Посылаем AJAX-запрос к контроллеру по id — и при успешном завершении возвращаем список файлов картинок (с прописанным путём к ним).

URL works/#{$('select').val()} сначала будет обработан routes.rb.

routes.rb

Добавил строчку get '/works/(:id)' => 'works#select_images', чтобы я мог делать GET-запрос к контроллеру, а он, в свою очередь, перенаправлял его на action select_images. Но можно этого и не делать :)

app-assets-javascripts-works.coffee

$ ->
  change_trigger = (handler) ->
    $.get
      url: "/works/#{$('select').val()}"
      success: (data) ->
        box = $ '#images'
        box.empty()
        data.forEach (file) ->
          box.append "<img src=/assets/pictures/#{file}>"
  $('select').change change_trigger
  change_trigger $('select')

app-controllers-works_controller.rb

class WorksController < ApplicationController
  def index
    @themes = Theme.all
  end

  def select_images
    @images = Theme.find(params[:id]).images.pluck(:file)
    respond_to do |format|
      format.json { render json: @images }
    end
  end
end

app-views-works-index.html.slim

#select_themes
  = select_tag :themes, options_from_collection_for_select(@themes, :id, :name)

#images

config-routes.rb

Rails.application.routes.draw do
  root to: 'works#index'
  get '/works/(:id)' => 'works#select_images'
  resources :themes
  resources :images
end