Merge pull request #4082 from consul/disable_phase

Disable phase date fields when a phase is disabled

app/assets/javascripts/legislation_admin.js

@@ -2,21 +2,21 @@
   "use strict";
   App.LegislationAdmin = {
     initialize: function() {
-      $("input[type='checkbox'][data-disable-date]").on({
+      $(".legislation-process-form").find("[name$='enabled]'],[name$='[published]']").on({
         change: function() {
-          var checkbox, date_selector, parent;
+          var checkbox;
           checkbox = $(this);
-          parent = $(this).parents(".row:eq(0)");
-          date_selector = $(this).data("disable-date");
-          parent.find("input[type='text'][id^='" + date_selector + "']").each(function() {
+
+          checkbox.closest("fieldset").find("input[type='text']").each(function() {
             if (checkbox.is(":checked")) {
               $(this).removeAttr("disabled");
             } else {
-              $(this).val("");
+              $(this).prop("disabled", true);
             }
           });
         }
-      });
+      }).trigger("change");
+
       $("#nested_question_options").on("cocoon:after-insert", function() {
         App.Globalize.refresh_visible_translations();
       });

app/assets/stylesheets/application.scss

@@ -13,6 +13,7 @@
 @import "dashboard";
 @import "legislation";
 @import "legislation_process";
+@import "legislation_process_form";
 @import "community";
 @import "stats";
 @import "custom";

app/assets/stylesheets/layout.scss

@@ -1074,6 +1074,10 @@ form {
     &.error {
       margin-bottom: rem-calc(1);
     }
+
+    &:disabled {
+      background-color: $input-background-disabled;
+    }
   }
 
   [type="checkbox"] + label,

app/assets/stylesheets/legislation_process_form.scss

@@ -0,0 +1,35 @@
+.legislation-process-form {
+  fieldset {
+    margin: $fieldset-padding 0;
+    padding-bottom: $fieldset-padding;
+    position: relative;
+
+    &::after {
+      border-bottom: $fieldset-border;
+      bottom: 0;
+      content: "";
+      display: block;
+      margin-left: rem-calc(16);
+      position: absolute;
+      width: calc(100% - #{2 * rem-calc(16)});
+
+      @include breakpoint(small only) {
+        margin-left: rem-calc(10);
+        width: calc(100% - #{2 * rem-calc(10)});
+      }
+    }
+
+    > :last-child {
+      float: left !important;
+    }
+
+    legend {
+      margin-bottom: 0;
+
+      > * {
+        display: block;
+        font-weight: normal;
+      }
+    }
+  }
+}

app/views/admin/legislation/processes/_form.html.erb

@@ -1,14 +1,14 @@
 <%= render "shared/globalize_locales", resource: @process %>
 
-<%= translatable_form_for [:admin, @process] do |f| %>
+<%= translatable_form_for [:admin, @process], html: { class: "legislation-process-form" } do |f| %>
 
   <%= render "shared/errors", resource: @process %>
 
-  <div class="row">
-    <div class="small-12 medium-4 column">
-      <label><%= t("admin.legislation.processes.form.draft_phase") %></label>
-      <p class="help-text"><%= t("admin.legislation.processes.form.draft_phase_description") %></p>
-    </div>
+  <fieldset>
+    <legend class="small-12 medium-4 column">
+      <%= t("admin.legislation.processes.form.draft_phase") %>
+      <span class="help-text"><%= t("admin.legislation.processes.form.draft_phase_description") %></span>
+    </legend>
 
     <div class="small-12 medium-3 column">
       <%= f.text_field :draft_start_date,
@@ -26,14 +26,12 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
-    <div class="small-12 medium-4 column">
-      <label><%= t("admin.legislation.processes.form.process") %></label>
-    </div>
+  <fieldset>
+    <legend class="small-12 medium-4 column">
+      <%= t("admin.legislation.processes.form.process") %>
+    </legend>
 
     <div class="small-12 medium-3 column">
       <%= f.text_field :start_date,
@@ -51,14 +49,12 @@
     <div class="small-12 medium-2 column margin-top">
       <%= f.check_box :published, checked: @process.published?, label: t("admin.legislation.processes.form.enabled") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
-    <div class="small-12 medium-4 column">
-      <label><%= t("admin.legislation.processes.form.debate_phase") %></label>
-    </div>
+  <fieldset>
+    <legend class="small-12 medium-4 column">
+      <%= t("admin.legislation.processes.form.debate_phase") %>
+    </legend>
 
     <div class="small-12 medium-3 column">
       <%= f.text_field :debate_start_date,
@@ -76,14 +72,12 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
-    <div class="small-12 medium-4 column">
-      <label><%= t("admin.legislation.processes.form.proposals_phase") %></label>
-    </div>
+  <fieldset>
+    <legend class="small-12 medium-4 column">
+      <%= t("admin.legislation.processes.form.proposals_phase") %>
+    </legend>
 
     <div class="small-12 medium-3 column">
       <%= f.text_field :proposals_phase_start_date,
@@ -101,14 +95,12 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
-    <div class="small-12 medium-4 column">
-      <label><%= t("admin.legislation.processes.form.allegations_phase") %></label>
-    </div>
+  <fieldset>
+    <legend class="small-12 medium-4 column">
+      <%= t("admin.legislation.processes.form.allegations_phase") %>
+    </legend>
 
     <div class="small-12 medium-3 column">
       <%= f.text_field :allegations_start_date,
@@ -126,11 +118,9 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
+  <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),
@@ -140,11 +130,9 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
+  <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),
@@ -154,11 +142,9 @@
     <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") %>
     </div>
+  </fieldset>
 
-    <div class="small-12 column">
-      <hr>
-    </div>
-
+  <div class="row">
     <div class="documents small-12 column">
       <%= render "documents/nested_documents", documentable: @process, f: f %>
     </div>

spec/system/admin/legislation/processes_spec.rb

@@ -240,6 +240,44 @@ describe "Admin collaborative legislation" do
       expect(page).not_to have_content "Draft publication"
     end
 
+    scenario "Enabling/disabling a phase enables/disables its date fields", :js do
+      process.update!(published: false)
+
+      visit edit_admin_legislation_process_path(process)
+
+      expect(page).to have_field "start_date", disabled: true
+      expect(page).to have_field "end_date", disabled: true
+
+      check "legislation_process[published]"
+      fill_in "start_date", with: "07/07/2007"
+      fill_in "end_date", with: "08/08/2008"
+      uncheck "legislation_process[published]"
+
+      expect(page).to have_field "start_date", disabled: true
+      expect(page).to have_field "end_date", disabled: true
+
+      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"
+    end
+
+    scenario "Enabling/disabling a phase does not enable/disable another phase date fields", :js do
+      process.update!(draft_phase_enabled: false, draft_publication_enabled: false)
+
+      visit edit_admin_legislation_process_path(process)
+
+      expect(page).to have_field "draft_start_date", disabled: true
+      expect(page).to have_field "draft_end_date", disabled: true
+      expect(page).to have_field "draft_publication_date", disabled: true
+
+      check "legislation_process[draft_phase_enabled]"
+
+      expect(page).to have_field "draft_start_date", disabled: false
+      expect(page).to have_field "draft_end_date", disabled: false
+      expect(page).to have_field "draft_publication_date", disabled: true
+    end
+
     scenario "Change proposal categories" do
       visit edit_admin_legislation_process_path(process)
       within(".admin-content") { click_link "Proposals" }