chobble-forms 0.5.4 → 0.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcb65898826074bdefd196616c2f495504a85ce9a047173f2b40deec6358d3ca
-  data.tar.gz: b5c465a3e2b51a8c10bb8136481042e4ebfa4877588453298f503111723ac41e
+  metadata.gz: 38897550927a4c901cada28fbe5f63e8447bf108e6eb3bedf5d045807e45c245
+  data.tar.gz: ede19464d42338a4834967dda6a1df1048d2bef39599ddd89e079256c796ec15
 SHA512:
-  metadata.gz: 21f5dbc63567a01e771ab246832c192ed228d786767ab599fb7f7a1709ed6161fcd69318071f0369004aac99cd2d11e9c6d7179b9a948bc7ddf8311e94777521
-  data.tar.gz: '09cbefeca3fa67b31a43cda50e40ef37d327a40040933a1ef53765c1d5c40688cffc26295a8ad807545f19716292eb60da27a877408752d74468a4df762b7112'
+  metadata.gz: c24eca1ed04bf5d7cbbe7d483451368ef3b636d3d0d42018e967a5f22ddbee88e4c7c8d2c5a7f6f104828af570610d395342bb05fad838c5366f4b84edd186db
+  data.tar.gz: b486d795a2b856e0895b4736901f52fede072e35319acb7511aaef5b007919e8af5ea644365c34ef30839f0f36301a247fe0b791a5a12c98318ebdd078c11649

data/app/assets/stylesheets/chobble_forms/form_grids.css

@@ -3,206 +3,219 @@
  */
 
 .form-grid {
-	display: grid;
-	gap: 1rem;
-	align-items: end;
-	padding-top: 1rem;
+  display: grid;
+  gap: 1rem;
+  align-items: end;
+  padding-top: 1rem;
 }
 
 legend + .form-grid {
-	border-top: none;
+  border-top: none;
 }
 
 /* Radio + Comment grid layout */
 .radio-comment {
-	grid-template-areas:
-		"label label"
-		"pass-fail comment-label"
-		"comment comment";
-	grid-template-columns: auto 1fr;
-	align-items: center;
+  grid-template-areas:
+    "label label"
+    "pass-fail comment-label"
+    "comment comment";
+  grid-template-columns: auto 1fr;
+  align-items: center;
 }
 
 @media (min-width: 768px) {
-	.radio-comment {
-		grid-template-areas:
-			"label pass-fail comment-space comment-label"
-			"comment comment comment comment";
-		grid-template-columns: max-content auto 1fr auto;
-	}
+  .radio-comment {
+    grid-template-areas:
+      "label pass-fail comment-space comment-label"
+      "comment comment comment comment";
+    grid-template-columns: max-content auto 1fr auto;
+  }
 }
 
 .radio-comment > .label {
-	grid-area: label;
+  grid-area: label;
 }
 
 .radio-comment > .label label {
-	flex-direction: column;
+  flex-direction: column;
 }
 
 .radio-comment > .pass-fail {
-	grid-area: pass-fail;
+  grid-area: pass-fail;
 }
 
 .radio-comment > .comment-checkbox {
-	grid-area: comment-label;
+  grid-area: comment-label;
 }
 
 .radio-comment > textarea {
-	grid-area: comment;
+  grid-area: comment;
 }
 
 /* Number + Pass/Fail + Comment grid layout */
 .number-radio-comment {
-	grid-template-areas:
-		"label label"
-		"number pass-fail"
-		"comment-label comment-space"
-		"comment comment";
-	grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "label label"
+    "number pass-fail"
+    "comment-label comment-space"
+    "comment comment";
+  grid-template-columns: auto 1fr;
 }
 
 @media (min-width: 768px) {
-	.number-radio-comment {
-		grid-template-areas:
-			"label label label label"
-			"number pass-fail comment-space comment-label"
-			"comment comment comment comment";
-		grid-template-columns: auto auto 1fr auto;
-	}
+  .number-radio-comment {
+    grid-template-areas:
+      "label label label label"
+      "number pass-fail comment-space comment-label"
+      "comment comment comment comment";
+    grid-template-columns: auto auto 1fr auto;
+  }
 }
 
 .number-radio-comment > .label {
-	grid-area: label;
+  grid-area: label;
 }
 
 .number-radio-comment > .label label {
-	flex-direction: column;
+  flex-direction: column;
 }
 
 .number-radio-comment > .number {
-	grid-area: number;
+  grid-area: number;
 }
 
 .number-radio-comment > .pass-fail {
-	grid-area: pass-fail;
+  grid-area: pass-fail;
 }
 
 .number-radio-comment > .comment-checkbox {
-	grid-area: comment-label;
+  grid-area: comment-label;
 }
 
 .number-radio-comment > textarea {
-	grid-area: comment;
+  grid-area: comment;
 }
 
 /* Number + Comment grid layout */
 .number-comment {
-	grid-template-areas:
-		"label label"
-		"number comment-label"
-		"comment comment";
-	grid-template-columns: min-content auto;
-	align-items: center;
+  grid-template-areas:
+    "label label"
+    "number comment-label"
+    "comment comment";
+  grid-template-columns: min-content auto;
+  align-items: center;
 }
 
 @media (min-width: 768px) {
-	.number-comment {
-		grid-template-areas:
-			"label number comment-space comment-label"
-			"comment comment comment comment";
-		grid-template-columns: max-content 6rem 1fr auto;
-	}
+  .number-comment {
+    grid-template-areas:
+      "label number comment-space comment-label"
+      "comment comment comment comment";
+    grid-template-columns: max-content 6rem 1fr auto;
+  }
 }
 
 .number-comment > .label {
-	grid-area: label;
-	width: 14rem;
+  grid-area: label;
+  width: 14rem;
 }
 
 .number-comment > .number {
-	grid-area: number;
+  grid-area: number;
 }
 
 .number-comment > .comment-checkbox {
-	grid-area: comment-label;
+  grid-area: comment-label;
 }
 
 .number-comment > textarea {
-	grid-area: comment;
+  grid-area: comment;
 }
 
 /* Checkbox + Comment grid layout */
 .checkbox-comment {
-	display: grid;
-	gap: 0.5rem;
-	align-items: center;
-	margin-bottom: 1rem;
-	grid-template-areas:
-		"label label label label"
-		"check1 label2 comment-space comment-label";
-	grid-template-columns: auto auto 1fr auto;
+  display: grid;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 1rem;
+  grid-template-areas:
+    "label label label label"
+    "check1 label2 comment-space comment-label";
+  grid-template-columns: auto auto 1fr auto;
 }
 
 @media (min-width: 768px) {
-	.checkbox-comment {
-		grid-template-areas: "label check1 label2 comment-label";
-		grid-template-columns: max-content auto auto auto;
-	}
+  .checkbox-comment {
+    grid-template-areas: "label check1 label2 comment-label";
+    grid-template-columns: max-content auto auto auto;
+  }
 }
 
 .checkbox-comment > .label {
-	grid-area: label;
+  grid-area: label;
 }
 
 .checkbox-comment > .checkbox {
-	grid-area: check1;
+  grid-area: check1;
 }
 
 .checkbox-comment > .checkbox-label {
-	grid-area: label2;
+  grid-area: label2;
 }
 
 .checkbox-comment > .comment-checkbox {
-	grid-area: comment-label;
+  grid-area: comment-label;
 }
 
 .checkbox-comment > textarea {
-	grid-column: 1 / -1;
-	margin-top: 0.5rem;
+  grid-column: 1 / -1;
+  margin-top: 0.5rem;
 }
 
 /* Simple number layout */
 .number {
-	grid-template-area: "label number";
-	grid-template-columns: auto min-content;
-	align-items: center;
+  grid-template-area: "label number";
+  grid-template-columns: auto min-content;
+  align-items: center;
 }
 
 .number-comment > .label {
-	grid-area: label;
+  grid-area: label;
 }
 
 .number-comment > .number {
-	grid-area: number;
-	width: 14rem;
+  grid-area: number;
+  width: 14rem;
 }
 
 /* User capacity flexbox layout */
 fieldset#user_capacity {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 /* Mobile: 2 columns (2 rows of 2) */
 fieldset#user_capacity > * {
-	flex: 1 1 calc(50% - 0.5rem);
+  flex: 1 1 calc(50% - 0.5rem);
 }
 
 /* Desktop: 4 columns (1 row of 4) */
 @media (min-width: 768px) {
-	fieldset#user_capacity > * {
-		flex: 1 1 calc(25% - 0.75rem);
-	}
-}
+  fieldset#user_capacity > * {
+    flex: 1 1 calc(25% - 0.75rem);
+  }
+}
+
+.simple div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: start;
+  align-items: center;
+}
+
+.simple input.number {
+  width: 6rem;
+}

data/app/javascript/comment_toggles.js

@@ -0,0 +1,76 @@
+// CommentToggles - handles comment field visibility toggling
+class CommentToggles {
+  constructor() {
+    this.processedToggles = new WeakSet();
+  }
+
+  init() {
+    this.attachListeners();
+  }
+
+  attachListeners() {
+    // Find all comment toggle checkboxes
+    const toggles = document.querySelectorAll("[data-comment-toggle]");
+    toggles.forEach((toggle) => this.setupToggle(toggle));
+  }
+
+  setupToggle(toggle) {
+    // Skip if already processed
+    if (this.processedToggles.has(toggle)) return;
+    this.processedToggles.add(toggle);
+
+    // Set initial state
+    this.updateVisibility(toggle);
+
+    // Handle changes
+    toggle.addEventListener("change", () => this.handleToggle(toggle));
+  }
+
+  handleToggle(toggle) {
+    this.updateVisibility(toggle);
+
+    const textareaId = toggle.getAttribute("data-comment-toggle");
+    const textarea = document.getElementById(textareaId);
+
+    if (!textarea) return;
+
+    if (toggle.checked) {
+      // Focus the textarea when showing
+      textarea.focus();
+    } else {
+      // Clear the textarea when hiding
+      textarea.value = "";
+    }
+  }
+
+  updateVisibility(toggle) {
+    const containerId = toggle.getAttribute("data-comment-container");
+    const container = document.getElementById(containerId);
+
+    if (!container) return;
+
+    container.style.display = toggle.checked ? "block" : "none";
+  }
+
+  cleanup() {
+    // Re-process any new toggles that appeared
+    this.attachListeners();
+  }
+}
+
+// Create singleton instance
+const commentToggles = new CommentToggles();
+
+// Initialize on first load
+document.addEventListener("DOMContentLoaded", () => commentToggles.init());
+
+// Reinitialize after Turbo navigation
+document.addEventListener("turbo:load", () => {
+  commentToggles.cleanup();
+  commentToggles.init();
+});
+
+// Handle dynamically loaded content
+document.addEventListener("turbo:frame-load", () => {
+  commentToggles.attachListeners();
+});

data/app/javascript/na_number_toggles.js

@@ -0,0 +1,64 @@
+class NaNumberToggles {
+  constructor() {
+    this.processedCheckboxes = new WeakSet();
+  }
+
+  init() {
+    this.attachListeners();
+  }
+
+  attachListeners() {
+    const naCheckboxes = document.querySelectorAll('.na-label input[type="checkbox"]');
+    naCheckboxes.forEach((checkbox) => this.setupCheckbox(checkbox));
+  }
+
+  setupCheckbox(checkbox) {
+    if (this.processedCheckboxes.has(checkbox)) return;
+    this.processedCheckboxes.add(checkbox);
+
+    this.updateNumberFieldState(checkbox);
+
+    checkbox.addEventListener("change", () => this.updateNumberFieldState(checkbox));
+  }
+
+  updateNumberFieldState(checkbox) {
+    const label = checkbox.parentElement;
+    const numberInput = label.previousElementSibling;
+    
+    if (!numberInput || !numberInput.classList.contains('number')) {
+      console.warn('Could not find number input for N/A checkbox', checkbox);
+      return;
+    }
+
+    if (checkbox.checked) {
+      if (numberInput.value !== '0' && numberInput.value !== '') {
+        checkbox.dataset.previousValue = numberInput.value;
+      }
+      numberInput.disabled = true;
+      numberInput.value = '0';
+    } else {
+      numberInput.disabled = false;
+      if (checkbox.dataset.previousValue) {
+        numberInput.value = checkbox.dataset.previousValue;
+        delete checkbox.dataset.previousValue;
+      }
+    }
+  }
+
+  cleanup() {
+    this.attachListeners();
+  }
+}
+
+const naNumberToggles = new NaNumberToggles();
+
+document.addEventListener("DOMContentLoaded", () => naNumberToggles.init());
+
+document.addEventListener("turbo:load", () => {
+  naNumberToggles.cleanup();
+  naNumberToggles.init();
+});
+
+document.addEventListener("turbo:frame-load", () => {
+  naNumberToggles.attachListeners();
+});

data/app/javascript/na_toggles.js

@@ -0,0 +1,76 @@
+// NaToggles - handles N/A radio button functionality for pass/fail fields
+class NaToggles {
+  constructor() {
+    this.processedRadios = new WeakSet();
+  }
+
+  init() {
+    this.attachListeners();
+  }
+
+  attachListeners() {
+    // Find all enum radio buttons (pass/fail/na)
+    const enumRadios = document.querySelectorAll(
+      'input[type="radio"][value="pass"], input[type="radio"][value="fail"], input[type="radio"][value="na"]',
+    );
+    enumRadios.forEach((radio) => this.setupRadio(radio));
+  }
+
+  setupRadio(radio) {
+    // Skip if already processed
+    if (this.processedRadios.has(radio)) return;
+    this.processedRadios.add(radio);
+
+    // Set initial state
+    this.updatePassFailState(radio);
+
+    // Handle changes
+    radio.addEventListener("change", () => this.updatePassFailState(radio));
+  }
+
+  updatePassFailState(changedRadio) {
+    // Find all radio buttons with the same name (same field)
+    const fieldName = changedRadio.name;
+    const allRadios = document.querySelectorAll(
+      `input[type="radio"][name="${fieldName}"]`,
+    );
+
+    // Check if N/A is selected
+    const naRadio = Array.from(allRadios).find((radio) => radio.value === "na");
+    const isNaSelected = naRadio && naRadio.checked;
+
+    allRadios.forEach((radio) => {
+      const label = radio.parentElement;
+
+      if (isNaSelected && radio.value !== "na") {
+        // N/A is selected - mute pass/fail options
+        label.classList.add("muted");
+      } else {
+        // N/A is not selected - remove muted class
+        label.classList.remove("muted");
+      }
+    });
+  }
+
+  cleanup() {
+    // Re-process any new radios that appeared
+    this.attachListeners();
+  }
+}
+
+// Create singleton instance
+const naToggles = new NaToggles();
+
+// Initialize on first load
+document.addEventListener("DOMContentLoaded", () => naToggles.init());
+
+// Reinitialize after Turbo navigation
+document.addEventListener("turbo:load", () => {
+  naToggles.cleanup();
+  naToggles.init();
+});
+
+// Handle dynamically loaded content
+document.addEventListener("turbo:frame-load", () => {
+  naToggles.attachListeners();
+});

data/lib/chobble_forms/engine.rb

@@ -28,6 +28,7 @@ module ChobbleForms
     initializer "chobble_forms.assets" do |app|
       if app.config.respond_to?(:assets) && app.config.assets
         app.config.assets.paths << root.join("app/assets/stylesheets")
+        app.config.assets.paths << root.join("app/javascript")
         app.config.assets.precompile += %w[chobble_forms.css]
       end
     end

data/lib/chobble_forms/helpers.rb

@@ -70,6 +70,7 @@ module ChobbleForms
 
     ALLOWED_LOCAL_ASSIGNS = T.let(%i[
       accept
+      add_not_applicable
       field
       max
       min

data/lib/chobble_forms/version.rb

@@ -2,5 +2,5 @@
 # frozen_string_literal: true
 
 module ChobbleForms
-  VERSION = "0.5.4"
+  VERSION = "0.5.6"
 end

data/views/chobble_forms/_field_turbo_response.html.erb

@@ -0,0 +1,22 @@
+<%
+  # Generic Turbo response partial for any form field
+  # Required parameters:
+  #   model: The model object
+  #   field: The field name
+  #   partial: The field partial to render (e.g., 'number', 'text_field', etc.)
+  #   i18n_base: The i18n base path
+  # Optional parameters:
+  #   attributes: Hash of additional attributes to pass to the field partial
+  
+  model = local_assigns[:model]
+  field = local_assigns[:field]
+  partial = local_assigns[:partial]
+  i18n_base = local_assigns[:i18n_base]
+  attributes = local_assigns[:attributes] || {}
+%>
+
+<%= fields model: model, skip_default_ids: false do |form| %>
+  <% @_current_form = form %>
+  <% @_current_i18n_base = i18n_base %>
+  <%= render "chobble_forms/#{partial}", field: field, **attributes %>
+<% end %>

data/views/chobble_forms/_form_context.html.erb

@@ -26,7 +26,8 @@
   method: method,
   local: use_local,
   html: {
-    multipart: true
+    multipart: true,
+    autocomplete: "off"
   }
 } %>
 

data/views/chobble_forms/_integer_comment.html.erb

@@ -7,13 +7,16 @@
   #   max: Maximum value
   #   required: Whether the integer field is required (defaults to true)
   #   placeholder: Placeholder text
+  #   add_not_applicable: Whether to show a "Not Applicable" checkbox (defaults to false)
   #
   # This will render:
   #   - Integer field: field (e.g., 'trough_depth')
+  #   - Not Applicable checkbox: (if add_not_applicable is true)
   #   - Comment field: field + '_comment' (e.g., 'trough_depth_comment')
 
   integer_field = field
   comment_field = "#{field}_comment".to_sym
+  show_na_checkbox = local_assigns.fetch(:add_not_applicable, false)
 
   form = @_current_form
   model = form.object
@@ -36,6 +39,14 @@
   integer_options[:data][:min] = local_assigns[:min] if local_assigns[:min]
   integer_options[:data][:max] = local_assigns[:max] if local_assigns[:max]
 
+  # Check if value is 0 to determine N/A state (not nil)
+  is_na = field_data[:value].present? && field_data[:value].to_i == 0
+
+  # Disable input if N/A
+  if is_na && show_na_checkbox
+    integer_options[:disabled] = true
+  end
+
   comment_info = comment_field_options(
     form,
     comment_field,
@@ -43,16 +54,24 @@
   )
 %>
 
-<div class="form-grid number-comment" id="<%= integer_field %>">
+<div
+  class="form-grid simple"
+  id="<%= integer_field %>">
   <%= form.label integer_field, field_data[:field_label], class: "label" %>
-  <%= form.text_field integer_field, integer_options %>
-
-  <%= render 'chobble_forms/comment_checkbox',
+  <div>
+    <%= form.text_field integer_field, integer_options %>
+    <% if show_na_checkbox %>
+      <label class="na-label">
+        <input type="checkbox"<%= is_na ? " checked" : "" %>>
+        <%= t("shared.not_applicable") %>
+      </label>
+    <% end %>
+    <%= render 'chobble_forms/comment_checkbox',
       comment_field: comment_field,
       checkbox_id: comment_info[:checkbox_id],
       textarea_id: comment_info[:options][:id],
       has_comment: comment_info[:has_comment],
       prefilled: comment_info[:prefilled] %>
-
+  </div>
   <%= form.text_area comment_field, comment_info[:options] %>
 </div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chobble-forms
 version: !ruby/object:Gem::Version
-  version: 0.5.4
+  version: 0.5.6
 platform: ruby
 authors:
 - Chobble.com
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-11 00:00:00.000000000 Z
+date: 2025-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -165,6 +165,9 @@ files:
 - app/assets/stylesheets/chobble_forms/form_fields.css
 - app/assets/stylesheets/chobble_forms/form_grids.css
 - app/assets/stylesheets/chobble_forms/radio_buttons.css
+- app/javascript/comment_toggles.js
+- app/javascript/na_number_toggles.js
+- app/javascript/na_toggles.js
 - lib/chobble-forms.rb
 - lib/chobble_forms/engine.rb
 - lib/chobble_forms/field_utils.rb
@@ -179,6 +182,7 @@ files:
 - views/chobble_forms/_decimal_comment.html.erb
 - views/chobble_forms/_display_field.html.erb
 - views/chobble_forms/_errors.html.erb
+- views/chobble_forms/_field_turbo_response.html.erb
 - views/chobble_forms/_field_with_link.html.erb
 - views/chobble_forms/_fields.html.erb
 - views/chobble_forms/_fieldset.html.erb