Nelson Jovel
1 year ago
parent
22b9b44773
commit
8dc503f454
@ -1,152 +1,25 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
import debounce from "debounce";
|
||||
|
||||
// Connects to data-controller="analyze"
|
||||
export default class extends Controller {
|
||||
connect() { }
|
||||
refresh(event) {
|
||||
let base_url = event.target.value;
|
||||
let target = event.target;
|
||||
console.log(this.selected_slice(target))
|
||||
console.log(target.name)
|
||||
static targets = ["category", "subcategory"]
|
||||
|
||||
let url =
|
||||
base_url +
|
||||
"&academic_years=" +
|
||||
this.selected_years().join(",") +
|
||||
"&source=" +
|
||||
this.selected_source(target) +
|
||||
"&slice=" +
|
||||
this.selected_slice(target) +
|
||||
"&group=" +
|
||||
this.selected_group() +
|
||||
"&graph=" +
|
||||
this.selected_graph(target) +
|
||||
"&races=" +
|
||||
this.selected_items("race").join(",") +
|
||||
"&genders=" +
|
||||
this.selected_items("gender").join(",") +
|
||||
"&incomes=" +
|
||||
this.selected_items("income").join(",") +
|
||||
"&grades=" +
|
||||
this.selected_items("grade").join(",") +
|
||||
"&ells=" +
|
||||
this.selected_items("ell").join(",") +
|
||||
"&speds=" +
|
||||
this.selected_items("sped").join(",");
|
||||
|
||||
this.go_to(url);
|
||||
}
|
||||
|
||||
go_to(location) {
|
||||
window.location = location;
|
||||
}
|
||||
|
||||
selected_years() {
|
||||
let year_checkboxes = [...document.getElementsByName("year-checkbox")];
|
||||
let years = year_checkboxes
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return years;
|
||||
initialize() {
|
||||
this.submit = debounce(this.submit.bind(this), 300)
|
||||
}
|
||||
|
||||
selected_group() {
|
||||
let groups = [...document.getElementsByName("group-option")];
|
||||
let selected_group = groups
|
||||
.filter((item) => {
|
||||
return item.selected;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return selected_group[0];
|
||||
}
|
||||
connect() {
|
||||
const collection = document.getElementsByClassName("popover");
|
||||
|
||||
selected_source(target) {
|
||||
if (target.name === 'source') {
|
||||
return target.id;
|
||||
for (let i = 0; i < collection.length; i++) {
|
||||
collection[i].parentNode.removeChild(collection[i]);
|
||||
}
|
||||
if (target.name === 'slice' || target.name === 'group') {
|
||||
return 'survey-data-only';
|
||||
}
|
||||
|
||||
return window.source;
|
||||
}
|
||||
|
||||
selected_slice(target) {
|
||||
if (target.name === 'source' && target.id === 'all-data') {
|
||||
return 'all-data';
|
||||
}
|
||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
||||
return 'students-and-teachers';
|
||||
}
|
||||
|
||||
if (target.name === 'group') {
|
||||
return 'students-by-group';
|
||||
}
|
||||
|
||||
if (target.name === 'source' || target.name === 'slice') {
|
||||
let slices = [...document.getElementsByName("slice")];
|
||||
let selected_slice = slices
|
||||
.filter((item) => {
|
||||
return item.id != "all-data";
|
||||
})
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return selected_slice[0];
|
||||
}
|
||||
|
||||
return window.slice;
|
||||
}
|
||||
|
||||
selected_graph(target) {
|
||||
if (target.name === 'source' && target.id === 'all-data') {
|
||||
return 'all-data'
|
||||
}
|
||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
||||
return 'students-and-teachers'
|
||||
}
|
||||
|
||||
let graphs = [...document.getElementsByName("slice")];
|
||||
let selected_slice = graphs
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
})[0];
|
||||
|
||||
if (target.name === 'slice' || target.name === 'group') {
|
||||
if (selected_slice === 'students-and-teachers') {
|
||||
return 'students-and-teachers';
|
||||
}
|
||||
return `students-by-${this.selected_group()}`;
|
||||
}
|
||||
|
||||
return window.graph;
|
||||
|
||||
}
|
||||
|
||||
selected_items(type) {
|
||||
let checkboxes = [...document.getElementsByName(`${type}-checkbox`)]
|
||||
let items = checkboxes
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id.replace(`${type}-`, '');
|
||||
});
|
||||
submit() {
|
||||
console.log("Submitting form");
|
||||
|
||||
return items;
|
||||
this.element.requestSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<div class="d-flex align-items-center mx-5">
|
||||
<input
|
||||
id="<%= id %>"
|
||||
class="m-3 <%= name %>-checkbox form-check-input"
|
||||
class="m-3 form-check-input"
|
||||
type="checkbox"
|
||||
name="<%= name %>-checkbox"
|
||||
value="<%= base_url %>"
|
||||
data-action="click->analyze#refresh"
|
||||
name="<%= "#{name}#{index}" %>-checkbox"
|
||||
value="<%= item %>"
|
||||
<%= selected_items.include?(item) ? "checked" : "" %>
|
||||
<%= @presenter.graph.slug == 'students-and-teachers' || @presenter.source.slug == 'all-data' ? "disabled" : "" %>
|
||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
||||
|
||||
<label for="<%= id %>"
|
||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
||||
>
|
||||
<label for="<%= id %>" >
|
||||
<%= label_text %>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -1,41 +1,61 @@
|
||||
<h3 class="sub-header-4 mt-5">Data Filters</h3>
|
||||
<div class="bg-gray p-3" data-controller="analyze">
|
||||
<div class="bg-gray p-3">
|
||||
|
||||
<% @presenter.sources.each do |source| %>
|
||||
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key == "graph"}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
<input type="radio"
|
||||
id="<%= source.slug %>"
|
||||
class="form-check-input"
|
||||
name="source"
|
||||
value="<%= base_url %>"
|
||||
data-action="click->analyze#refresh"
|
||||
name="graph"
|
||||
value="<%= source.graph.slug %>"
|
||||
<%= source.slug == @presenter.source.slug ? "checked" : "" %>>
|
||||
<label for="<%= source.slug %>"><%= source.to_s %></label>
|
||||
|
||||
<% source.slices.each do | slice | %>
|
||||
<div class="mx-3">
|
||||
<input type="radio"
|
||||
id="<%= slice.slug %>"
|
||||
class="form-check-input"
|
||||
name="slice"
|
||||
value="<%= base_url %>"
|
||||
data-action="click->analyze#refresh"
|
||||
<%= slice.slug == @presenter.slice.slug ? "checked" : "" %>
|
||||
<%= slice.slug == "all-data" ? "hidden" : "" %>>
|
||||
|
||||
<label for="<%= slice.slug %>"
|
||||
<%= slice.slug == "all-data" ? "hidden" : "" %>>
|
||||
<%= slice.to_s %></label>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%= render partial: "group_selectors" %>
|
||||
</div>
|
||||
<label for="<%= source.slug %>"><%= source.to_s %></label>
|
||||
|
||||
<% end %>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
window.source = "<%= @presenter.source.slug %>";
|
||||
window.slice = "<%= @presenter.slice.slug %>";
|
||||
window.group = "<%= @presenter.group.slug %>";
|
||||
window.graph = "<%= @presenter.graph.slug %>";
|
||||
</script>
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key == "graph"}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
|
||||
<% source.slices.each do | slice | %>
|
||||
<div class="mx-3">
|
||||
<input type="radio"
|
||||
id="<%= slice.slug %>"
|
||||
class="form-check-input"
|
||||
name="graph"
|
||||
value="<%= slice.graph.slug %>"
|
||||
<%= slice.slug == @presenter.slice.slug ? "checked" : "" %>
|
||||
<%= slice.slug == "all-data" ? "hidden" : "" %>>
|
||||
|
||||
<label for="<%= slice.slug %>"
|
||||
<%= slice.slug == "all-data" ? "hidden" : "" %>>
|
||||
<%= slice.to_s %></label>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= render partial: "group_selectors" %>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,44 @@
|
||||
<h3 class="sub-header-4">Focus Area</h3>
|
||||
<p>Select a category & subcategory to analyze measure-level results</p>
|
||||
<select id="select-category" class="mx-3 form-select" data-id="category-dropdown" data-action="analyze#refresh">
|
||||
<% categories.each do |category| %>
|
||||
<option value="<%= analyze_category_link(district: district, school: school, academic_year: academic_year, category: category) %>" <%= category.id == @presenter.category.id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
||||
|
||||
<h3 class="sub-header-4">Focus Area</h3>
|
||||
<p>Select a category & subcategory to analyze measure-level results</p>
|
||||
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key.start_with?("category") || key.start_with?("subcategory")}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
</select>
|
||||
<select id="select-subcategory" class="mx-3 form-select mt-3" data-id="subcategory-dropdown" data-action="analyze#refresh">
|
||||
<% subcategories.each do |subcategory| %>
|
||||
<option value="<%= analyze_subcategory_link(district: district, school: school, academic_year: academic_year, category: category, subcategory: subcategory) %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
||||
<%= "#{subcategory.subcategory_id}: #{subcategory.name}" %>
|
||||
</option>
|
||||
|
||||
<select id="select-category" class="mx-3 form-select" name="category" data-id="category-dropdown">
|
||||
<% categories.each do |category| %>
|
||||
<option value="<%= category.category_id %>" <%= category.category_id == @presenter.category.category_id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<% end %>
|
||||
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
<% params.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
</select>
|
||||
|
||||
<select id="select-subcategory" class="mx-3 form-select mt-3" name="subcategory" data-id="subcategory-dropdown">
|
||||
<% subcategories.each do |subcategory| %>
|
||||
<option value="<%= subcategory.subcategory_id %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
||||
<%= "#{subcategory.subcategory_id}: #{subcategory.name}" %>
|
||||
</option>
|
||||
<% end %>
|
||||
</select>
|
||||
<% end %>
|
||||
|
||||
@ -1,31 +1,60 @@
|
||||
<select id="select-group" name="group" class="mx-4 form-select" data-id="group-dropdown" data-action="analyze#refresh">
|
||||
<% @presenter.groups.each do |group| %>
|
||||
<option id="<%= group.slug %>" name="group-option" value="<%= base_url %>" <%= group.slug == @presenter.group.slug ? "Selected": "" %>><%= group.name %> </option>
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key == "graph" || key.end_with?("checkbox")}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
</select>
|
||||
|
||||
<p class="sub-header-5 mx-4 mt-3 font-size-14"> Select a group </p>
|
||||
<select id="select-group" name="graph" class="mx-4 form-select" data-id="group-dropdown">
|
||||
<% @presenter.groups.each do |group| %>
|
||||
<option id="<%= group.slug %>" value="<%= group.graph.slug %>" <%= group.graph.slug == @presenter.graph.slug ? "Selected": "" %>><%= group.name %> </option>
|
||||
<% end %>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<p class="sub-header-5 mx-4 mt-3 font-size-14"> Select a group </p>
|
||||
|
||||
<% if @presenter.graph.slug == 'students-by-race' %>
|
||||
<% @presenter.races.each_with_index do |race, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "race-#{}#{race.slug}", item: race.slug, selected_items: @presenter.selected_races.map(&:slug), name: "race", label_text: race.designation, index: index })%>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.races.each do |race| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "race-#{race.slug}", item: race, selected_items: @presenter.selected_races, name: "race", label_text: race.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-grade' %>
|
||||
<% @presenter.grades.each_with_index do |grade, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade, index: index }) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.grades.each do |grade| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-gender' %>
|
||||
<% @presenter.genders.each_with_index do |gender, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender.slug, selected_items: @presenter.selected_genders.map(&:slug), name: "gender", label_text: gender.designation, index: index }) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.genders.each do |gender| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender, selected_items: @presenter.selected_genders, name: "gender", label_text: gender.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-income' %>
|
||||
<% @presenter.incomes.each_with_index do |income, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income.slug, selected_items: @presenter.selected_incomes.map(&:slug), name: "income", label_text: income.label, index: index })%>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.incomes.each do |income| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income, selected_items: @presenter.selected_incomes, name: "income", label_text: income.label}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-ell' %>
|
||||
<% @presenter.ells.each_with_index do |ell, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell.slug, selected_items: @presenter.selected_ells.map(&:slug), name: "ell", label_text: ell.designation, index: index}) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.ells.each do |ell| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell, selected_items: @presenter.selected_ells, name: "ell", label_text: ell.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-sped' %>
|
||||
<% @presenter.speds.each_with_index do |sped, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped.slug, selected_items: @presenter.selected_speds.map(&:slug), name: "sped", label_text: sped.designation, index: index}) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.speds.each do |sped| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped, selected_items: @presenter.selected_speds, name: "sped", label_text: sped.designation}) %>
|
||||
<% end %>
|
||||
|
||||
|
Before Width: | Height: | Size: 493 B After Width: | Height: | Size: 492 B |
@ -0,0 +1,6 @@
|
||||
class AddSlugToGender < ActiveRecord::Migration[7.1]
|
||||
def change
|
||||
add_column :genders, :slug, :string
|
||||
add_index :genders, :slug, unique: true
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,6 @@
|
||||
class AddSlugToAcademicYear < ActiveRecord::Migration[7.1]
|
||||
def change
|
||||
add_column :academic_years, :slug, :string
|
||||
add_index :academic_years, :slug, unique: true
|
||||
end
|
||||
end
|
||||
Loading…
Reference in new issue