Last active
October 19, 2020 21:42
-
-
Save jmarsh24/18e344f26801f7a51a9714ae0128edbd to your computer and use it in GitHub Desktop.
Choices.js only applying to a single select table when called multiple times.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%= "#{@videos_filtered.count} Results" %> | |
<div data-controller="toggle"> | |
<button type='submit' data-action="toggle#toggle" class="filter_button"> | |
<i class="fas fa-filter fa-lg" aria-hidden="true"></i> | |
</button> | |
<div class="hidden" data-target="toggle.toggleable"> | |
<%= form_for :video do |f| %> | |
<div data-controller="choices"> | |
<datalist data-choices-target="options"></datalist> | |
<% byebug %> | |
<%= f.collection_select :videotype, @videotypes, :id, :name, {include_blank: true}, {data: {"choices-target": "select"}} %> | |
</div> | |
<% end %> | |
<% | |
=begin%> | |
<div class="filter_container" data-controller="filter"> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Type</label> | |
<div data-choices-target="options"> | |
<%= select_tag :videotype, | |
options_for_select([["Select All #{@videotypes.count} Types", "all"]] + @videotypes, | |
params[:videotype].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
</div> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Genre</label> | |
<%= select_tag :genre, | |
options_for_select([["Select All #{@genres.count} Genres", "all"]] + @genres, | |
params[:genre].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Leader</label> | |
<%= select_tag :leader, | |
options_for_select([["Select All #{@leaders.count} Leaders", "all"]]+ @leaders, | |
params[:leader].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Follower</label> | |
<%= select_tag :follower, | |
options_for_select( [["Select All #{@followers.count} Followers", "all"]] + @followers, | |
params[:follower].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Event</label> | |
<%= select_tag :event, | |
options_for_select( [["Select All #{@events.count} Events", "all"]] + @events, | |
params[:event].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
<div data-controller="choices"> | |
<div class="filter_item"> | |
<label>Channel</label> | |
<%= select_tag :channel, | |
options_for_select( [["Select All #{@channels.count} Channels", "all"]]+ @channels, | |
params[:channel].presence || "all" | |
), | |
data: {target: "choices.select"} %> | |
</div> | |
</div> | |
</div> | |
<% | |
=end%> | |
</div> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "choices.js/public/assets/styles/choices.css"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This file is automatically compiled by Webpack, along with any other files | |
// present in this directory. You're encouraged to place your actual application logic in | |
// a relevant structure within app/javascript and only use these pack files to reference | |
// that code so it'll be compiled. | |
//= require select2 | |
require("@rails/ujs").start() | |
require("turbolinks").start() | |
require("@rails/activestorage").start() | |
require("channels") | |
require("select2") | |
import "@fortawesome/fontawesome-free/js/all"; | |
import "controllers"; | |
import $ from 'jquery' | |
import "select2"; | |
import "select2/dist/css/select2.css"; | |
// Import css from js for webpack to process it correctly | |
import '../css/application.css' | |
// Add Choices Dropdown | |
const Choices = require('choices.js') | |
document.addEventListener("turbolinks:load", function() { | |
var dropDownSelects = new Choices('#dropdown-choice-select') | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// filters_controller.js | |
import { Controller } from "stimulus"; | |
export default class extends Controller { | |
static targets = ["filter"]; | |
connect() { | |
console.log('Filter-Controller ON') | |
} | |
filter() { | |
const url = `${window.location.pathname}?${this.params}`; | |
Turbolinks.clearCache(); | |
Turbolinks.visit(url); | |
} | |
get params() { | |
// return this.filterTargets.map((t) => `${t.name}=${t.value}`).join("&"); | |
return this.filterTargets.filter(t => t.value !== "all").map((t) => `${t.name}=${t.value}`).join("&"); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class VideosController < ApplicationController | |
# before_action :authenticate_user! | |
NUMBER_OF_VIDEOS_PER_PAGE = 10.freeze | |
HERO_YOUTUBE_ID = 's6iptZdCcG0'.freeze | |
helper_method :sort_column, :sort_direction | |
def index | |
@videos_sorted = Video.search(params[:q]) | |
.includes(:song, :leader, :follower, :videotype, :event) | |
.references(:song, :leader, :follower, :videotype, :event) | |
.order(sort_column + " " + sort_direction) | |
.where.not(leader_id: [nil, false], follower_id: [nil, false] ) | |
@videos_filtered = @videos_sorted | |
filtering_params(params).each do |key, value| | |
@videos_filtered = @videos_filtered.public_send(key, value) if value.present? | |
end | |
@videos_paginated = @videos_filtered.paginate( page, NUMBER_OF_VIDEOS_PER_PAGE ) | |
first_youtube_id ||= if @videos_filtered.empty? | |
HERO_YOUTUBE_ID | |
else | |
@videos_filtered.first.youtube_id | |
end | |
@active_youtube_id ||= params[:youtube_id] || first_youtube_id | |
@active_video = Video.find_by(youtube_id: @active_youtube_id) | |
# Populate Filters | |
@videotypes = Videotype.all | |
@leaders = @videos_filtered.pluck(:"leaders.name").compact.uniq.sort | |
@followers = @videos_filtered.pluck(:"followers.name").compact.uniq.sort | |
@events = @videos_filtered.pluck(:"events.name").compact.uniq.sort | |
@channels = @videos_filtered.pluck(:channel).compact.uniq.sort | |
@genres = @videos_filtered.pluck(:"songs.genre").compact.uniq.sort | |
end | |
private | |
def sort_column | |
acceptable_cols = [ "songs.title", | |
"songs.artist", | |
"songs.genre", | |
"leaders.name", | |
"followers.name", | |
"channel", | |
"upload_date", | |
"view_count", | |
"videotypes.name", | |
"events.name"] | |
acceptable_cols.include?(params[:sort]) ? params[:sort] : "upload_date" | |
end | |
def sort_direction | |
%w[asc desc].include?(params[:direction]) ? params[:direction] : "desc" | |
end | |
def page | |
@page ||= params.permit(:page).fetch(:page, 0).to_i | |
end | |
def filtering_params(params) | |
params.slice(:genre, :videotype, :leader, :follower, :event, :channel) | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment