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

Merge pull request #4111 from consul/remove_admin_datepicker

Browse Source 
Use native HTML5 date fields in the admin section
This commit is contained in:
Javier Martín
2020-08-28 14:34:53 +02:00
committed by GitHub
parent 7ee2f15a2e 871b58a4a0
commit 8e38838040
14 changed files with 88 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/advanced_search.js
View File

@@ -17,18 +17,7 @@
$(".js-calendar").datepicker("option", "disabled", true);
}
},
init_calendar: function() {
var locale;
locale = $("#js-locale").data("current-locale");
$(".js-calendar").datepicker({
maxDate: "+0d"
});
$(".js-calendar-full").datepicker();
$.datepicker.setDefaults($.datepicker.regional[locale]);
$.datepicker.setDefaults({ dateFormat: "dd/mm/yy" });
},
initialize: function() {
App.AdvancedSearch.init_calendar();
if (App.AdvancedSearch.advanced_search_terms()) {
$("#js-advanced-search").show();
App.AdvancedSearch.toggle_date_options();

1
app/assets/javascripts/application.js
View File

@@ -163,6 +163,7 @@ var initialize_modules = function() {
App.ColumnsSelector.initialize();
}
App.BudgetEditAssociations.initialize();
App.Datepicker.initialize();
};
var destroy_non_idempotent_modules = function() {

22
app/assets/javascripts/datepicker.js
View File

@@ -15,6 +15,21 @@
(function() {
"use strict";
App.Datepicker = {
initialize: function() {
var locale;
locale = $("#js-locale").data("current-locale");
$(".js-calendar").datepicker({
maxDate: "+0d"
});
$(".js-calendar-full").datepicker();
if (!App.Datepicker.browser_supports_date_field()) {
$("input[type='date']").datepicker();
}
$.datepicker.setDefaults($.datepicker.regional[locale]);
$.datepicker.setDefaults({ dateFormat: "dd/mm/yy" });
},
destroy: function() {
$.datepicker.dpDiv.remove();
@@ -22,6 +37,13 @@
$(input).datepicker("hide");
$(input).datepicker("destroy");
});
},
browser_supports_date_field: function() {
var datefield;
datefield = document.createElement("input");
datefield.setAttribute("type", "date");
return datefield.type === "date";
}
};

2
app/assets/javascripts/legislation_admin.js
View File

@@ -7,7 +7,7 @@
var checkbox;
checkbox = $(this);
checkbox.closest("fieldset").find("input[type='text']").each(function() {
checkbox.closest("fieldset").find("input[type='date']").each(function() {
if (checkbox.is(":checked")) {
$(this).removeAttr("disabled");
} else {

4
app/helpers/legislation_helper.rb
View File

@@ -3,10 +3,6 @@ module LegislationHelper
l(date, format: "%d %b %Y") if date
end
def format_date_for_calendar_form(date)
l(date, format: "%d/%m/%Y") if date
end
def new_legislation_proposal_link_text(process)
t("proposals.index.start_proposal")
end

6
app/views/admin/banners/_form.html.erb
View File

@@ -7,16 +7,14 @@
<div class="row">
<% date_started_at = @banner.post_started_at.present? ? I18n.localize(@banner.post_started_at) : "" %>
<div class="small-12 medium-3 column">
<%= f.text_field :post_started_at,
<%= f.date_field :post_started_at,
value: date_started_at,
class: "js-calendar-full",
id: "post_started_at" %>
</div>
<% date_ended_at = @banner.post_ended_at.present? ? I18n.localize(@banner.post_ended_at) : "" %>
<div class="small-12 medium-3 column end">
<%= f.text_field :post_ended_at,
<%= f.date_field :post_ended_at,
value: date_ended_at,
class: "js-calendar-full",
id: "post_ended_at" %>
</div>
</div>

10
app/views/admin/budget_phases/_form.html.erb
View File

@@ -6,16 +6,10 @@
<div class="row">
<div class="small-12 medium-6 column">
<%= f.text_field :starts_at,
value: format_date_for_calendar_form(@phase.starts_at),
class: "js-calendar-full",
id: "start_date" %>
<%= f.date_field :starts_at, id: "start_date" %>
</div>
<div class="small-12 medium-6 column">
<%= f.text_field :ends_at,
value: format_date_for_calendar_form(@phase.ends_at),
class: "js-calendar-full",
id: "end_date" %>
<%= f.date_field :ends_at, id: "end_date" %>
</div>
</div>

60
app/views/admin/legislation/processes/_form.html.erb
View File

@@ -11,17 +11,11 @@
</legend>
<div class="small-12 medium-3 column">
<%= f.text_field :draft_start_date,
value: format_date_for_calendar_form(@process.draft_start_date),
class: "js-calendar-full",
id: "draft_start_date" %>
<%= f.date_field :draft_start_date, id: "draft_start_date" %>
</div>
<div class="small-12 medium-3 column">
<%= f.text_field :draft_end_date,
value: format_date_for_calendar_form(@process.draft_end_date),
class: "js-calendar-full",
id: "draft_end_date" %>
<%= f.date_field :draft_end_date, id: "draft_end_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :draft_phase_enabled, checked: @process.draft_phase.enabled?, label: t("admin.legislation.processes.form.enabled") %>
@@ -34,17 +28,11 @@
</legend>
<div class="small-12 medium-3 column">
<%= f.text_field :start_date,
value: format_date_for_calendar_form(@process.start_date),
class: "js-calendar-full",
id: "start_date" %>
<%= f.date_field :start_date, id: "start_date" %>
</div>
<div class="small-12 medium-3 column">
<%= f.text_field :end_date,
value: format_date_for_calendar_form(@process.end_date),
class: "js-calendar-full",
id: "end_date" %>
<%= f.date_field :end_date, id: "end_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :published, checked: @process.published?, label: t("admin.legislation.processes.form.enabled") %>
@@ -57,17 +45,11 @@
</legend>
<div class="small-12 medium-3 column">
<%= f.text_field :debate_start_date,
value: format_date_for_calendar_form(@process.debate_start_date),
class: "js-calendar-full",
id: "debate_start_date" %>
<%= f.date_field :debate_start_date, id: "debate_start_date" %>
</div>
<div class="small-12 medium-3 column">
<%= f.text_field :debate_end_date,
value: format_date_for_calendar_form(@process.debate_end_date),
class: "js-calendar-full",
id: "debate_end_date" %>
<%= f.date_field :debate_end_date, id: "debate_end_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :debate_phase_enabled, checked: @process.debate_phase.enabled?, label: t("admin.legislation.processes.form.enabled") %>
@@ -80,17 +62,11 @@
</legend>
<div class="small-12 medium-3 column">
<%= f.text_field :proposals_phase_start_date,
value: format_date_for_calendar_form(@process.proposals_phase_start_date),
class: "js-calendar-full",
id: "proposals_phase_start_date" %>
<%= f.date_field :proposals_phase_start_date, id: "proposals_phase_start_date" %>
</div>
<div class="small-12 medium-3 column">
<%= f.text_field :proposals_phase_end_date,
value: format_date_for_calendar_form(@process.proposals_phase_end_date),
class: "js-calendar-full",
id: "proposals_phase_end_date" %>
<%= f.date_field :proposals_phase_end_date, id: "proposals_phase_end_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :proposals_phase_enabled, checked: @process.proposals_phase.enabled?, label: t("admin.legislation.processes.form.enabled") %>
@@ -103,17 +79,11 @@
</legend>
<div class="small-12 medium-3 column">
<%= f.text_field :allegations_start_date,
value: format_date_for_calendar_form(@process.allegations_start_date),
class: "js-calendar-full",
id: "allegations_start_date" %>
<%= f.date_field :allegations_start_date, id: "allegations_start_date" %>
</div>
<div class="small-12 medium-3 column">
<%= f.text_field :allegations_end_date,
value: format_date_for_calendar_form(@process.allegations_end_date),
class: "js-calendar-full",
id: "allegations_end_date" %>
<%= f.date_field :allegations_end_date, id: "allegations_end_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :allegations_phase_enabled, checked: @process.allegations_phase.enabled?, label: t("admin.legislation.processes.form.enabled") %>
@@ -122,10 +92,7 @@
<fieldset>
<div class="small-12 medium-3 column end">
<%= f.text_field :draft_publication_date,
value: format_date_for_calendar_form(@process.draft_publication_date),
class: "js-calendar-full",
id: "draft_publication_date" %>
<%= f.date_field :draft_publication_date, id: "draft_publication_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :draft_publication_enabled, checked: @process.draft_publication.enabled?, label: t("admin.legislation.processes.form.enabled") %>
@@ -134,10 +101,7 @@
<fieldset>
<div class="small-12 medium-3 column end">
<%= f.text_field :result_publication_date,
value: format_date_for_calendar_form(@process.result_publication_date),
class: "js-calendar-full",
id: "result_publication_date" %>
<%= f.date_field :result_publication_date, id: "result_publication_date" %>
</div>
<div class="small-12 medium-2 column margin-top">
<%= f.check_box :result_publication_enabled, checked: @process.result_publication.enabled?, label: t("admin.legislation.processes.form.enabled") %>

4
app/views/admin/milestones/_form.html.erb
View File

@@ -25,9 +25,7 @@
<div class="row">
<div class="column">
<%= f.text_field :publication_date,
value: @milestone.publication_date.present? ? l(@milestone.publication_date.to_date) : nil,
class: "js-calendar-full" %>
<%= f.date_field :publication_date %>
<%= render "images/admin_image", imageable: @milestone, f: f %>

8
app/views/admin/poll/polls/_form.html.erb
View File

@@ -6,15 +6,11 @@
<div class="row">
<div class="clear">
<div class="small-12 medium-6 column">
<%= f.text_field :starts_at,
value: @poll.starts_at.present? ? l(@poll.starts_at.to_date) : nil,
class: "js-calendar-full" %>
<%= f.date_field :starts_at %>
</div>
<div class="small-12 medium-6 column">
<%= f.text_field :ends_at,
value: @poll.ends_at.present? ? l(@poll.ends_at.to_date) : nil,
class: "js-calendar-full" %>
<%= f.date_field :ends_at %>
</div>
</div>
</div>

2
lib/consul_form_builder.rb
View File

@@ -9,7 +9,7 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
select attribute, choices, options, html_options
end
%i[text_field text_area number_field password_field email_field].each do |field|
%i[text_field text_area date_field number_field password_field email_field].each do |field|
define_method field do |attribute, options = {}|
label_with_hint(attribute, options.merge(label_options: label_options_for(options))) +
super(attribute, options.merge(

48
spec/system/admin/banners_spec.rb
View File

@@ -114,14 +114,9 @@ describe "Admin banners magement" do
fill_in "Title", with: "En Français"
fill_in "Description", with: "Link en Français"
fill_in "Link", with: "https://www.url.com"
last_week = Time.current - 1.week
next_week = Time.current + 1.week
fill_in "Post started at", with: last_week.strftime("%d/%m/%Y")
fill_in "Post ended at", with: next_week.strftime("%d/%m/%Y")
fill_in "Post started at", with: Time.current - 1.week
fill_in "Post ended at", with: Time.current + 1.week
click_button "Save changes"
click_link "Edit banner"
@@ -179,45 +174,6 @@ describe "Admin banners magement" do
expect(page).not_to have_content "Wrong text"
end
scenario "when change date field on edit banner page display expected format", :js do
banner = create(:banner)
visit edit_admin_banner_path(banner)
fill_in "Post started at", with: "20/02/2002"
find_field("Post started at").click
within(".ui-datepicker") { click_link "22" }
expect(page).to have_field "Post started at", with: "22/02/2002"
end
scenario "when date picker is opened and click on browser history back datepicker is closed", :js do
banner = create(:banner)
visit admin_banners_path(banner)
click_link "Edit banner"
find_field("Post started at").click
expect(page).to have_css "#ui-datepicker-div"
go_back
expect(page).to have_content("Banners")
expect(page).not_to have_css "#ui-datepicker-div"
end
scenario "date picker works after using the browser back button", :js do
banner = create(:banner)
visit edit_admin_banner_path(banner)
click_link "Manage banners"
expect(page).to have_link "Edit banner"
go_back
find_field("Post started at").click
expect(page).to have_css "#ui-datepicker-div"
end
scenario "Delete a banner" do
create(:banner, title: "Ugly banner",
description: "Bad text",

8
spec/system/admin/legislation/processes_spec.rb
View File

@@ -162,8 +162,8 @@ describe "Admin collaborative legislation" do
fill_in "Summary", with: "Summary of the process"
base_date = Date.current
fill_in "legislation_process[start_date]", with: base_date.strftime("%d/%m/%Y")
fill_in "legislation_process[end_date]", with: (base_date + 5.days).strftime("%d/%m/%Y")
fill_in "legislation_process[start_date]", with: base_date
fill_in "legislation_process[end_date]", with: base_date + 5.days
imageable_attach_new_file(create(:image), Rails.root.join("spec/fixtures/files/clippy.jpg"))
click_button "Create process"
@@ -258,8 +258,8 @@ describe "Admin collaborative legislation" do
check "legislation_process[published]"
expect(page).to have_field "start_date", disabled: false, with: "07/07/2007"
expect(page).to have_field "end_date", disabled: false, with: "08/08/2008"
expect(page).to have_field "start_date", disabled: false, with: "2007-07-07"
expect(page).to have_field "end_date", disabled: false, with: "2008-08-08"
end
scenario "Enabling/disabling a phase does not enable/disable another phase date fields", :js do

38
spec/system/dashboard/polls_spec.rb
View File

@@ -41,6 +41,44 @@ describe "Polls" do
expect(page).to have_content I18n.l(start_date.to_date)
end
describe "Datepicker", :js do
scenario "displays the expected format when changing the date field" do
visit new_proposal_dashboard_poll_path(proposal)
fill_in "Start Date", with: "20/02/2002"
find_field("Start Date").click
within(".ui-datepicker") { click_link "22" }
expect(page).to have_field "Start Date", with: "22/02/2002"
end
scenario "is closed after using the browser back button" do
visit proposal_dashboard_polls_path(proposal)
click_link "Create poll"
find_field("Start Date").click
expect(page).to have_css "#ui-datepicker-div"
go_back
expect(page).to have_link "Create poll"
expect(page).not_to have_css "#ui-datepicker-div"
end
scenario "works after using the browser back button" do
visit new_proposal_dashboard_poll_path(proposal)
click_link "Polls"
expect(page).to have_link "Create poll"
go_back
find_field("Start Date").click
expect(page).to have_css "#ui-datepicker-div"
end
end
scenario "Create a poll redirects back to form when invalid data", js: true do
click_link "Polls"
click_link "Create poll"