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

Gemfile.lock

@@ -131,7 +131,7 @@ GEM
     erubi (1.13.0)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    faker (3.4.2)
+    faker (3.5.1)
       i18n (>= 1.8.11, < 2)
     faraday (2.12.0)
       faraday-net_http (>= 2.0, < 3.4)
@@ -173,7 +173,7 @@ GEM
     method_source (1.1.0)
     mini_mime (1.1.5)
     minitest (5.25.1)
-    msgpack (1.7.2)
+    msgpack (1.7.3)
     net-http (0.4.1)
       uri
     net-imap (0.5.0)
@@ -266,13 +266,13 @@ GEM
     regexp_parser (2.9.2)
     reline (0.5.10)
       io-console (~> 0.5)
-    rexml (3.3.8)
-    rspec-core (3.13.1)
+    rexml (3.3.9)
+    rspec-core (3.13.2)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.1)
+    rspec-mocks (3.13.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-rails (7.0.1)
@@ -303,14 +303,14 @@ GEM
     rubocop-performance (1.22.1)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.26.2)
+    rubocop-rails (2.27.0)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
     rubocop-rake (0.6.0)
       rubocop (~> 1.0)
-    rubocop-rspec (3.1.0)
+    rubocop-rspec (3.2.0)
       rubocop (~> 1.61)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)

app/assets/stylesheets/application.sass.scss

@@ -9,3 +9,20 @@ dialog::backdrop {
   background-color: black;
   border-color: black;
 }
+
+#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

@@ -76,7 +76,12 @@ def set_evaluation_forms
   def evaluation_form_params
     permitted = params.require(:evaluation_form).
       permit(:title, :instructions, :phase_id, :status, :comments_required,
-             :weighted_scoring, :publication_date, :closing_date, :challenge_id)
+             :weighted_scoring, :publication_date, :closing_date, :challenge_id,
+             evaluation_criteria_attributes: [
+               :id, :title, :description, :points_or_weight, :scoring_type,
+               :option_range_start, :option_range_end, :_destroy,
+               { option_labels: {} }
+             ])
     closing_date = parse_closing_date(permitted[:closing_date])
     closing_date ? permitted.merge({ closing_date: }) : permitted
   end

app/helpers/evaluation_forms_helper.rb

@@ -14,6 +14,26 @@ def inline_error(evaluation_form, field)
     tag.span(error, class: "text-secondary font-body-2xs", id: "evaluation_form_#{field}_error")
   end
 
+  def criteria_field_id(form, attribute, is_template)
+    prefix = "evaluation_form_evaluation_criteria_attributes"
+
+    if is_template
+      "#{prefix}_NEW_CRITERIA_#{attribute}"
+    else
+      "#{prefix}_#{form.options[:child_index]}_#{attribute}"
+    end
+  end
+
+  def criteria_field_name(form, attribute, is_template)
+    prefix = "evaluation_form[evaluation_criteria_attributes]"
+
+    if is_template
+      "#{prefix}[NEW_CRITERIA][#{attribute}]"
+    else
+      "#{prefix}[#{form.options[:child_index]}][#{attribute}]"
+    end
+  end
+
   def eval_form_disabled?(evaluation_form)
     evaluation_form.valid? && evaluation_form.phase.end_date < Time.zone.today
   end

app/javascript/application.js

@@ -1 +1 @@
-import "./controllers"
+import "./controllers";

app/javascript/controllers/evaluation_criteria_controller.js

@@ -0,0 +1,221 @@
+// app/javascript/controllers/evaluation_criteria_controller.js
+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",
+  ];
+
+  connect() {
+    this.counter = this.criteriaRowTargets.length;
+  }
+
+  addCriteria() {
+    this.counter++;
+    const newCriteria = this.templateTarget.cloneNode(true);
+
+    this.replacePlaceholders(newCriteria);
+    this.enableInputs(newCriteria);
+
+    this.criteriaListTarget.appendChild(newCriteria);
+
+    this.updateCriteriaTitles();
+  }
+
+  removeCriteria(event) {
+    const row = event.target.closest(".criteria-row");
+    const destroyField = row.querySelector(".destroy-evaluation-criteria");
+
+    if (destroyField) {
+      row.style.display = "none";
+      destroyField.value = "true";
+      this.disableInputs(row);
+    } else {
+      row.remove();
+    }
+
+    if (this.visibleRows().length == 0) {
+      return this.addCriteria();
+    }
+
+    this.updateCriteriaTitles();
+  }
+
+  toggleScoringType(event) {
+    const row = event.target.closest(".criteria-row");
+    const scoringType = row.querySelector(".scoring-type-radio:checked").value;
+
+    this.updateScoringOptions(row, scoringType);
+  }
+
+  toggleOptionRange(event) {
+    const row = event.target.closest(".criteria-row");
+    const start = row.querySelector(
+      ".option-range-select.option-range-start"
+    ).value;
+    const end = row.querySelector(
+      ".option-range-select.option-range-end"
+    ).value;
+
+    this.toggleOptionLabels(row, start, end);
+  }
+
+  replacePlaceholders(newCriteria) {
+    newCriteria.setAttribute("data-evaluation-criteria-target", "criteriaRow");
+    newCriteria.style.display = "block";
+    newCriteria.removeAttribute("id");
+
+    let accordionButton = newCriteria.querySelector(".usa-accordion__button");
+    let accordionContent = newCriteria.querySelector(".usa-accordion__content");
+
+    let accordionId = accordionContent
+      .getAttribute("id")
+      .replace("NEW_CRITERIA", this.counter);
+
+    accordionButton.setAttribute("aria-controls", accordionId);
+    accordionContent.setAttribute("id", accordionId);
+
+    newCriteria.querySelectorAll("[id]").forEach((el) => {
+      el.id = el.id.replace("NEW_CRITERIA", this.counter);
+    });
+
+    newCriteria.querySelectorAll("[name]").forEach((el) => {
+      el.name = el.name.replace("NEW_CRITERIA", this.counter);
+    });
+
+    newCriteria.querySelectorAll("label").forEach((label) => {
+      label.setAttribute(
+        "for",
+        label.getAttribute("for").replace("NEW_CRITERIA", this.counter)
+      );
+    });
+  }
+
+  updateCriteriaTitles() {
+    this.visibleRows().forEach((row, index) => {
+      const numberElement = row.querySelector(".criteria-number");
+      numberElement.textContent = index + 1;
+    });
+  }
+
+  updateScoringOptions(row, scoringType) {
+    const options = {
+      scaleOptions: row.querySelector(".criteria-scale-options"),
+      binaryOptions: row.querySelector(".criteria-binary-options"),
+      ratingOptions: row.querySelector(".criteria-rating-options"),
+      scaleOptionLabels: row.querySelector(".criteria-scale-option-labels"),
+    };
+
+    console.log(options);
+
+    switch (scoringType) {
+      case "binary":
+        this.showBinaryOptions(options);
+        this.toggleOptionLabels(row, 0, 1);
+        break;
+      case "rating":
+        this.showRatingOptions(row, options);
+        break;
+      default:
+        this.hideAllOptions(options);
+        break;
+    }
+  }
+
+  showBinaryOptions(options) {
+    options.scaleOptions.style.display = "block";
+    options.binaryOptions.style.display = "block";
+    options.ratingOptions.style.display = "none";
+    this.enableInputs(options.binaryOptions);
+    this.disableInputs(options.ratingOptions);
+  }
+
+  showRatingOptions(row, options) {
+    options.scaleOptions.style.display = "block";
+    options.binaryOptions.style.display = "none";
+    options.ratingOptions.style.display = "block";
+    this.enableInputs(options.ratingOptions);
+    this.disableInputs(options.binaryOptions);
+    const start = parseInt(
+      row.querySelector(".option-range-select.option-range-start").value
+    );
+    const end = parseInt(
+      row.querySelector(".option-range-select.option-range-end").value
+    );
+    this.toggleOptionLabels(row, start, end);
+  }
+
+  hideAllOptions(options) {
+    options.scaleOptions.style.display = "none";
+    options.binaryOptions.style.display = "none";
+    options.ratingOptions.style.display = "none";
+    this.disableInputs(options.binaryOptions);
+    this.disableInputs(options.ratingOptions);
+    this.disableInputs(options.scaleOptionLabels);
+  }
+
+  toggleOptionLabels(row, start, end) {
+    row
+      .querySelectorAll(".criteria-option-label-row")
+      .forEach((labelRow, index) => {
+        labelRow.style.display =
+          index >= start && index <= end ? "flex" : "none";
+        const input = labelRow.querySelector("input");
+        input.disabled = !(index >= start && index <= end);
+      });
+  }
+
+  disableInputs(container) {
+    container.querySelectorAll("input, select, textarea").forEach((input) => {
+      if (input.type != "hidden") {
+        input.disabled = true;
+      }
+    });
+  }
+
+  enableInputs(container) {
+    container.querySelectorAll("input, select, textarea").forEach((input) => {
+      input.disabled = false;
+    });
+  }
+
+  visibleRows() {
+    return this.criteriaRowTargets.filter(
+      (row) => row.style.display !== "none"
+    );
+  }
+
+  validateInputs(event) {
+    const section = document.getElementById(
+      event.target
+        .closest(".usa-accordion__button")
+        .getAttribute("aria-controls")
+    );
+
+    if (this.checkRequiredFields(section)) {
+      return true;
+    } else {
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  }
+
+  checkRequiredFields(section) {
+    return Array.from(section.querySelectorAll("[required]")).every((field) =>
+      field.checkValidity() ? true : field.reportValidity()
+    );
+  }
+}

app/javascript/controllers/index.js

@@ -2,8 +2,9 @@
 // Run that command whenever you add a new controller or create them with
 // ./bin/rails generate stimulus controllerName
 
-import { application } from "./application"
-
-import EvaluationFormController from "./evaluation_form_controller"
-application.register("evaluation-form", EvaluationFormController)
+import { application } from "./application";
 
+import EvaluationFormController from "./evaluation_form_controller";
+import EvaluationCriteriaController from "./evaluation_criteria_controller";
+application.register("evaluation-form", EvaluationFormController);
+application.register("evaluation-criteria", EvaluationCriteriaController);

app/models/evaluation_criterion.rb

@@ -29,12 +29,12 @@ class EvaluationCriterion < ApplicationRecord
   enum :scoring_type, { numeric: 0, rating: 1, binary: 2 }
   attribute :option_range_start, :integer
   attribute :option_range_end, :integer
-  attribute :option_labels, :json, default: -> { [] }
+  attribute :option_labels, :json, default: -> { {} }
   attribute :evaluation_form_id, :integer
 
   # Validations
   validates :title, :description, :points_or_weight, presence: true
+  validates :title, length: { maximum: 150 }
+  validates :description, length: { maximum: 1000 }
   validates :points_or_weight, numericality: { only_integer: true }
-  validates :title,
-            uniqueness: { scope: :evaluation_form_id, message: I18n.t("evaluation_criterion_unique_title_in_form") }
 end