[162] Build UI - Eval Form Step 2 - Evaluation Criteria Add/Remove Criteria

app/assets/stylesheets/application.sass.scss

@@ -13,16 +13,3 @@ dialog::backdrop {
 #add-criteria-button.usa-button {
   background-color: #4d8055;
 }
-
-// #criteria-list .usa-accordion__button {
-//   background-color: #162e51;
-//   background-image: url(asset-path('../builds/images/usa-icons-bg/add--white.svg', image)),linear-gradient(transparent,transparent);
-// }
-
-// #criteria-list .usa-accordion__button {
-//   background-color: #162e51;
-// }
-
-// #criteria-list .usa-accordion__button[aria-expanded=true] {
-//   background-image: url(assets/images/usa-icons-bg/remove-white.svg),linear-gradient(transparent,transparent);
-// }

app/controllers/evaluation_forms_controller.rb

@@ -26,7 +26,7 @@ def create
     respond_to do |format|
       if @evaluation_form.save
         format.html do
-          redirect_to evaluation_forms_url, notice: I18n.t("evaluation_form_saved")
+          redirect_to evaluation_forms_confirmation_path, notice: I18n.t("evaluation_form_saved")
         end
         format.json { render :show, status: :created, location: @evaluation_form }
       else
@@ -41,7 +41,7 @@ def update
     respond_to do |format|
       if @evaluation_form.update(evaluation_form_params)
         format.html do
-          redirect_to evaluation_forms_url, notice: I18n.t("evaluation_form_saved")
+          redirect_to evaluation_forms_confirmation_path, notice: I18n.t("evaluation_form_saved")
         end
         format.json { render :show, status: :ok, location: @evaluation_form }
       else
@@ -61,6 +61,9 @@ def destroy
     end
   end
 
+  # GET /evaluation_forms/confirmation
+  def confirmation; end
+
   private
 
   # Use callbacks to share common setup or constraints between actions.

app/javascript/controllers/evaluation_criteria_controller.js

@@ -2,21 +2,7 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [
-    "criteriaList",
-    "template",
-    "addButton",
-    "criteriaRow",
-    "scoringRadio",
-    "binaryOptions",
-    "ratingOptions",
-    "scaleOptions",
-    "hiddenOptionRangeStart",
-    "hiddenOptionRangeEnd",
-    "selectOptionRangeStart",
-    "selectOptionRangeEnd",
-    "criteriaLabelRow",
-  ];
+  static targets = ["criteriaList", "template", "criteriaRow"];
 
   connect() {
     this.counter = this.criteriaRowTargets.length;
@@ -118,8 +104,6 @@ export default class extends Controller {
       scaleOptionLabels: row.querySelector(".criteria-scale-option-labels"),
     };
 
-    console.log(options);
-
     switch (scoringType) {
       case "binary":
         this.showBinaryOptions(options);
@@ -173,7 +157,7 @@ export default class extends Controller {
         labelRow.style.display =
           index >= start && index <= end ? "flex" : "none";
         const input = labelRow.querySelector("input");
-        input.disabled = !(index >= start && index <= end);
+        input.disabled = index < start || index > end;
       });
   }
 
@@ -215,7 +199,7 @@ export default class extends Controller {
 
   checkRequiredFields(section) {
     return Array.from(section.querySelectorAll("[required]")).every((field) =>
-      field.checkValidity() ? true : field.reportValidity()
+      field.reportValidity()
     );
   }
 }

app/views/evaluation_forms/_evaluation_criterion_fields.html.erb

@@ -110,17 +110,16 @@
     </div>
   </div>
 
-  <div class="criteria-scale-options usa-form-group" style="<%= f.object.numeric? || !f.object.persisted? || is_template ? 'display: none;' : '' %>" data-evaluation-criteria-target="scaleOptions">
+  <div class="criteria-scale-options usa-form-group" style="<%= f.object.numeric? || !f.object.persisted? || is_template ? 'display: none;' : '' %>">
     <%= f.label :rating_scale_options, "Rating Scale Options", for: criteria_field_id(f, "rating_scale_options", is_template), class: "text-bold" %>
 
-    <div class="criteria-binary-options" style="<%= f.object.binary? ? '' : 'display: none;'%>" data-evaluation-criteria-target="binaryOptions">
+    <div class="criteria-binary-options" style="<%= f.object.binary? ? '' : 'display: none;'%>">
       <%= f.hidden_field :option_range_start, 
         id: criteria_field_id(f, "option_range_start", is_template), 
         name: criteria_field_name(f, "option_range_start", is_template), 
         class: "option-range-start",
         disabled: !f.object.binary? || form_disabled,
-        value: 0,
-        data: {"evaluation-criteria-target": "hiddenOptionRangeStart"}
+        value: 0
       %>
       <%= f.hidden_field :option_range_end, 
         id: criteria_field_id(f, "option_range_end", is_template), 
@@ -132,18 +131,15 @@
       %>
     </div>
 
-    <div class="criteria-rating-options" style="<%= f.object.rating? ? '' : 'display: none;' %>" data-evaluation-criteria-target="ratingOptions">
+    <div class="criteria-rating-options" style="<%= f.object.rating? ? '' : 'display: none;' %>">
       <div class="display-flex flex-align-center margin-top-2">
         <%= f.select :option_range_start, options_for_select((0..1).to_a, f.object.option_range_start), {},
           id: criteria_field_id(f, "option_range_start", is_template), 
           name: criteria_field_name(f, "option_range_start", is_template), 
           class: "usa-select margin-0 height-auto width-auto font-sans-md text-bold option-range-select option-range-start",
           disabled: !f.object.rating? || form_disabled,
           include_blank: true,
-          data: {
-            "evaluation-criteria-target": "selectOptionRangeStart",
-            action: "change->evaluation-criteria#toggleOptionRange"
-          }
+          data: { action: "change->evaluation-criteria#toggleOptionRange" }
         %>
         <span class="margin-x-2 text-bold font-sans-md">to</span>
         <%= f.select :option_range_end, options_for_select((2..10).to_a, f.object.option_range_end), {},
@@ -152,10 +148,7 @@
           class: "usa-select margin-0 height-auto width-auto font-sans-md text-bold option-range-select option-range-end",
           disabled: !f.object.rating? || form_disabled,
           include_blank: true,
-          data: {
-            "evaluation-criteria-target": "selectOptionRangeEnd",
-            action: "change->evaluation-criteria#toggleOptionRange"
-          }
+          data: { action: "change->evaluation-criteria#toggleOptionRange" }
         %>
       </div>
     </div>

app/views/evaluation_forms/confirmation.html.erb

@@ -0,0 +1,15 @@
+<div class="usa-card__container col-md-6 margin-y-4">
+  <div class="usa-card__body">
+    <h2>
+      Evaluation Form Saved
+    </h2>
+    <p>
+      Your evaluation form is saved. 
+      You can edit it until the end date of your challenge. 
+      During evaluation period the form will be available to your evaluators 
+      and you will only be able to edit evaluation period end date if needed.
+    </p>
+    <%= link_to "Manage Evaluation Forms", evaluation_forms_path, class: "usa-button" %>
+    <div></div>
+  </div>
+</div>

config/routes.rb

@@ -11,6 +11,7 @@
   get '/dashboard', to: "dashboard#index"
 
   resources :evaluations, only: [:index]
+  get '/evaluation_forms/confirmation', to: 'evaluation_forms#confirmation'
   resources :evaluation_forms
   post '/evaluation_forms/clone', to: 'evaluation_forms#create_from_existing'
   resources :manage_submissions, only: [:index]