consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move milestones progress bars partial to a component

Browse Source
This commit is contained in:
Javi Martín
2025-02-25 18:28:14 +01:00
parent 5ac791435c
commit ee03712df0
10 changed files with 122 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/application.scss
View File

@@ -27,6 +27,7 @@
@import "layout/**/*";
@import "machine_learning/**/*";
@import "management/**/*";
@import "milestones/**/*";
@import "moderation/**/*";
@import "polls/**/*";
@import "proposals/**/*";

37
app/assets/stylesheets/milestones.scss
View File

@@ -1,40 +1,3 @@
$progress-bar-background: #fef0e2;
$progress-bar-color: #fea230;
.tab-milestones {
.progress-bars {
margin-bottom: $line-height * 2;
margin-top: $line-height;
h5 {
font-size: rem-calc(24);
}
.progress {
background: $progress-bar-background;
border-radius: rem-calc(6);
position: relative;
}
.progress-meter {
background: $progress-bar-color;
border-radius: rem-calc(6);
}
.progress-meter-text {
color: color-pick-contrast($progress-bar-background);
right: 12px;
text-align: right;
transform: translate(0%, -50%);
}
.milestone-progress .row {
margin-bottom: calc($line-height / 2);
}
}
}
.tab-milestones .timeline li {
margin: 0 auto;
position: relative;

36
app/assets/stylesheets/milestones/progress_bars.scss Normal file
View File

@@ -0,0 +1,36 @@
$progress-bar-background: #fef0e2;
$progress-bar-color: #fea230;
.tab-milestones {
.progress-bars {
margin-bottom: $line-height * 2;
margin-top: $line-height;
h5 {
font-size: rem-calc(24);
}
.progress {
background: $progress-bar-background;
border-radius: rem-calc(6);
position: relative;
}
.progress-meter {
background: $progress-bar-color;
border-radius: rem-calc(6);
}
.progress-meter-text {
color: color-pick-contrast($progress-bar-background);
right: 12px;
text-align: right;
transform: translate(0%, -50%);
}
.milestone-progress .row {
margin-bottom: calc($line-height / 2);
}
}
}

22
app/components/milestones/progress_bars_component.html.erb Normal file
View File

@@ -0,0 +1,22 @@
<section class="progress-bars">
<h5><%= t("milestones.index.progress") %></h5>
<div class="margin">
<%= progress_tag_for(milestoneable.primary_progress_bar) %>
</div>
<% if milestoneable.secondary_progress_bars.any? %>
<div class="milestone-progress">
<% milestoneable.secondary_progress_bars.each do |progress_bar| %>
<div class="row margin-bottom">
<div class="small-12 medium-6 large-4 column">
<%= progress_bar.title %>
</div>
<div class="small-12 medium-6 large-8 column end">
<%= progress_tag_for(progress_bar) %>
</div>
</div>
<% end %>
</div>
<% end %>
</section>

28
app/components/milestones/progress_bars_component.rb Normal file
View File

@@ -0,0 +1,28 @@
class Milestones::ProgressBarsComponent < ApplicationComponent
attr_reader :milestoneable
def initialize(milestoneable)
@milestoneable = milestoneable
end
def render?
milestoneable.primary_progress_bar
end
private
def progress_tag_for(progress_bar)
text = number_to_percentage(progress_bar.percentage, precision: 0)
tag.div class: "progress",
role: "progressbar",
"aria-valuenow": progress_bar.percentage,
"aria-valuetext": "#{progress_bar.percentage}%",
"aria-valuemax": ProgressBar::RANGE.max,
"aria-valuemin": "0",
tabindex: "0" do
tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
tag.p(text, class: "progress-meter-text")
end
end
end

16
app/helpers/milestones_helper.rb
View File

@@ -1,16 +0,0 @@
module MilestonesHelper
def progress_tag_for(progress_bar)
text = number_to_percentage(progress_bar.percentage, precision: 0)
tag.div class: "progress",
role: "progressbar",
"aria-valuenow": progress_bar.percentage,
"aria-valuetext": "#{progress_bar.percentage}%",
"aria-valuemax": ProgressBar::RANGE.max,
"aria-valuemin": "0",
tabindex: "0" do
tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
tag.p(text, class: "progress-meter-text")
end
end
end

2
app/views/milestones/_milestones_content.html.erb
View File

@@ -1,6 +1,6 @@
<div class="row">
<div class="small-12 column">
<%= render "milestones/progress_bars", milestoneable: milestoneable %>
<%= render Milestones::ProgressBarsComponent.new(milestoneable) %>
<% if milestoneable.milestones.blank? %>
<div class="callout primary text-center margin-top">

24
app/views/milestones/_progress_bars.html.erb
View File

@@ -1,24 +0,0 @@
<% if milestoneable.primary_progress_bar %>
<section class="progress-bars">
<h5><%= t("milestones.index.progress") %></h5>
<div class="margin">
<%= progress_tag_for(milestoneable.primary_progress_bar) %>
</div>
<% if milestoneable.secondary_progress_bars.any? %>
<div class="milestone-progress">
<% milestoneable.secondary_progress_bars.each do |progress_bar| %>
<div class="row margin-bottom">
<div class="small-12 medium-6 large-4 column">
<%= progress_bar.title %>
</div>
<div class="small-12 medium-6 large-8 column end">
<%= progress_tag_for(progress_bar) %>
</div>
</div>
<% end %>
</div>
<% end %>
</section>
<% end %>

33
spec/components/milestones/progress_bars_component_spec.rb Normal file
View File

@@ -0,0 +1,33 @@
require "rails_helper"
describe Milestones::ProgressBarsComponent do
let(:milestoneable) { create(:legislation_process) }
it "is not rendered without a main progress bar" do
create(:progress_bar, :secondary, progressable: milestoneable, title: "Defeat Evil Lords")
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
expect(page).not_to be_rendered
end
it "renders a main progress bar" do
create(:progress_bar, progressable: milestoneable)
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
expect(page).to have_content "Progress"
expect(page).to have_css "[role=progressbar]", count: 1
end
it "renders both main and secondary progress bars" do
create(:progress_bar, progressable: milestoneable)
create(:progress_bar, :secondary, progressable: milestoneable, title: "Build laboratory")
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
expect(page).to have_content "Progress"
expect(page).to have_content "Build laboratory"
expect(page).to have_css "[role=progressbar]", count: 2
end
end

23
spec/system/legislation/processes_spec.rb
View File

@@ -430,17 +430,7 @@ describe "Legislation" do
end
end
scenario "With main progress bar" do
create(:progress_bar, progressable: process)
visit milestones_legislation_process_path(process)
within(".tab-milestones") do
expect(page).to have_content "Progress"
end
end
scenario "With main and secondary progress bar" do
scenario "With progress bars" do
create(:progress_bar, progressable: process)
create(:progress_bar, :secondary, progressable: process, title: "Build laboratory")
@@ -451,17 +441,6 @@ describe "Legislation" do
expect(page).to have_content "Build laboratory"
end
end
scenario "No main progress bar" do
create(:progress_bar, :secondary, progressable: process, title: "Defeat Evil Lords")
visit milestones_legislation_process_path(process)
within(".tab-milestones") do
expect(page).not_to have_content "Progress"
expect(page).not_to have_content "Defeat Evil Lords"
end
end
end
end
end