Add checkboxes to select academic years for analyze page. Stimulus controller reads the state of the checkboxes and builds the correct link to route the user

pull/1/head
Nelson Jovel 4 years ago
parent 607b91c795
commit 16569974a6

@ -61,6 +61,30 @@ $ideal: $purple;
background-color: $blue;
}
.bg-color-purple {
background-color: $purple;
}
.bg-color-light-purple {
background-color: $light-purple;
}
.bg-color-gold {
background-color: $gold;
}
.bg-color-light-gold {
background-color: $light-gold;
}
.bg-color-lime {
color: $lime;
}
.bg-color-teal {
color: $teal;
}
.bg-color-white {
background-color: $white;
}

@ -8,6 +8,14 @@ class AnalyzeController < SqmApplicationController
@subcategory ||= Subcategory.find_by_subcategory_id(params[:subcategory])
@subcategory ||= @subcategories.first
@measures = @subcategory.measures.order(:measure_id).includes(%i[scales admin_data_items])
@measures = @subcategory.measures.order(:measure_id).includes(%i[scales admin_data_items subcategory])
@available_academic_years = AcademicYear.order(:range).all
@academic_year_params = params[:academic_years].split(',') if params[:academic_years]
@selected_academic_years = []
@academic_year_params.each do |year|
@selected_academic_years << AcademicYear.find_by_range(year)
end
@selected_academic_years = [@academic_year] if @selected_academic_years.empty?
end
end

@ -4,6 +4,18 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() { }
refresh(event) {
window.location = event.target.value
let location = event.target.value+ "&academic_years=";
let year_checkboxes = document.getElementsByName("year-checkbox");
let selected_years = [];
let ending = "";
year_checkboxes.forEach((item)=>{
if(item.checked) {
selected_years.push(item.id)
}
})
console.log(location)
window.location = location + selected_years.join(",")
}
}

@ -2,7 +2,6 @@
<h1 class="sub-header-2 color-white m-0"> Analysis of <%= @school.name %> </h1>
<% end %>
<div class="graph-content">
<div class="breadcrumbs sub-header-4">
<%= @category.category_id %>:<%= @category.name %> > <%= @subcategory.subcategory_id %>:<%= @subcategory.name %>
@ -24,8 +23,15 @@
<option value="<%= analyze_subcategory_link(district: @district, school: @school, academic_year: @academic_year, category: @category, subcategory: subcategory) %>" <%= @subcategory.subcategory_id == subcategory.subcategory_id ? "selected": "" %> ><%= "#{subcategory.subcategory_id}: #{subcategory.name}" %></option>
<% end %>
</select>
</span>
<h3 class="sub-header-4 mt-5">School Years</h3>
<% @available_academic_years.each do | year | %>
<div class="d-flex justify-content-start align-items-center mt-1" data-controller="analyze">
<input type="checkbox" id="<%= year.range %>" name="year-checkbox" value="<%= analyze_subcategory_link(district: @district, school: @school, academic_year: @academic_year, category: @category, subcategory: @subcategory) %>" <%= @selected_academic_years.include?(year) ? "checked" : "" %> data-action="click->analyze#refresh">
<label class="px-3" for="<%= year.range %>" ><%= year.range %></label><br>
<div class="bg-color-blue" style="width:20px;height:20px;"></div>
</div>
<% end %>
</div>
<div class="bg-color-white flex-grow-1 col-9">

@ -47,6 +47,8 @@ describe 'analyze/index' do
# assign :category_presenters, []
# assign :grouped_bar_column_presenters, grouped_bar_column_presenters
assign :academic_year, academic_year
assign :available_academic_years, [academic_year]
assign :selected_academic_years, [academic_year]
# assign :academic_years, [academic_year]
assign :district, create(:district)
assign :school, create(:school)
@ -96,6 +98,7 @@ describe 'analyze/index' do
expect(subject).to have_text 'Focus Area'
expect(subject).to have_css '#select-category'
expect(subject).to have_css '#select-subcategory'
expect(subject).to have_css "##{academic_year.range}"
end
end
end

Loading…
Cancel
Save