chobble-forms 0.5.3 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 291fbe89074db623fd71edea3063c4aa13584aed19e40e0f6b0d7a27cc28750e
-  data.tar.gz: 1f9dfdc73890607e8484362d121fddb89be6e128462d99aa847813f175678ef4
+  metadata.gz: b92fb8d1150671025f0475b802e6484f337b554b072c1cd8464eb721e83df397
+  data.tar.gz: 1fa3020e94941bb44a3abb8fed8117939e236dfa3da8eb118bf86fcf4f37b718
 SHA512:
-  metadata.gz: 29cf3ec6da77e2bd6552cde85f95cfb46769f8e05dad35c851755109b603798aabb82a341c0495625afd34bfc021d9123c11cf9b7cb0ffe85b6a5584151416f9
-  data.tar.gz: c61849b91a1beba8ee445311e809071828cecb3c876acca9bbf5b9686e4c7f197106fc23e6187e38138237c7eba2fc7deae251f5c6697933d459763c68433958
+  metadata.gz: d198ecfde80af5079d2b137d3977e3d53691e79c97ba118d17e6474291092e7e38788c376a10c750b60a72b6494720513430568cce0803d0087ae24221cc1519
+  data.tar.gz: ac1658d4113f8970f5859837231567affeb0c790de34cc7afb98cf1cbbc7c9eea0de83cb0634d65b05e22c31f3cf716a0b3eca27242703081cc294d2f0e41cf3

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.3"
+  VERSION = "0.5.5"
 end

data/views/chobble_forms/_auto_submit_select.html.erb

@@ -2,7 +2,7 @@
   # Auto-submit select field options
   field = local_assigns[:field] or raise ArgumentError, "field is required for auto submit select"
   options = local_assigns[:options] or raise ArgumentError, "options is required for auto submit select"
-  
+
   # Check if we're in a form context with form object or need standalone
   if local_assigns[:form]
     form_object = local_assigns[:form]
@@ -12,7 +12,7 @@
     url = local_assigns[:url] or raise ArgumentError, "url is required for standalone auto submit select"
     selected_value = params[field]
   end
-  
+
   # Optional parameters
   label = local_assigns[:label]
   include_blank = local_assigns[:include_blank]
@@ -25,31 +25,31 @@
   <% if label %>
     <%= form_object.label field, label %>
   <% end %>
-  
+
   <%= form_object.select field,
       options_for_select(options, selected_value),
       include_blank ? { include_blank: blank_text } : {},
       { onchange: "this.form.submit();" } %>
-      
+
 <% else %>
   <!-- Standalone auto-submit select form -->
   <%= form_with url: url, method: :get, data: (turbo_disabled ? { turbo: false } : {}) do |form| %>
-    
+
     <!-- Preserve other parameters -->
     <% preserve_params.each do |param| %>
       <% if params[param].present? %>
         <%= form.hidden_field param, value: params[param] %>
       <% end %>
     <% end %>
-    
+
     <% if label %>
       <%= form.label field, label %>
     <% end %>
-    
+
     <%= form.select field,
         options_for_select(options, selected_value),
         include_blank ? { include_blank: blank_text } : {},
         { onchange: "this.form.submit();" } %>
-        
+
   <% end %>
-<% end %>
+<% end %>

data/views/chobble_forms/_comment.html.erb

@@ -22,19 +22,16 @@
     <input type="checkbox" id="<%= checkbox_id %>"
       <%= 'checked' if has_content %>
       data-comment-toggle="<%= textarea_id %>"
-      data-comment-container="<%= textarea_id %>_container"
-    >
+      data-comment-container="<%= textarea_id %>_container">
     <%= t("shared.comment") %>
   </label>
 
   <div id="<%= textarea_id %>_container"
-    style="display: <%= has_content ? 'block' : 'none' %>"
-  >
+    style="display: <%= has_content ? 'block' : 'none' %>">
     <%= form.text_field field,
         maxlength: maxlength,
         placeholder: placeholder,
         id: textarea_id,
-        title: "Max #{maxlength} characters"
-    %>
+        title: "Max #{maxlength} characters" %>
   </div>
 </div>

data/views/chobble_forms/_comment_checkbox.html.erb

@@ -12,7 +12,6 @@
     id="<%= checkbox_id %>"
     <%= 'checked' if has_comment %>
     data-comment-toggle="<%= textarea_id %>"
-    data-comment-container="<%= textarea_id %>"
-  >
+    data-comment-container="<%= textarea_id %>">
   <%= t('shared.comment') %>
 </label>

data/views/chobble_forms/_errors.html.erb

@@ -2,15 +2,15 @@
   # Form errors component - displays validation errors for any model object
   model_object = local_assigns[:model] || local_assigns[:object]
   raise ArgumentError, "model object is required for form errors" if model_object.nil?
-  
+
   # Use inherited i18n_base from form context
   i18n_base = @_current_i18n_base
   raise ArgumentError, "i18n_base is required for form errors" if i18n_base.nil?
-  
+
   # Custom header text or use i18n lookup - no fallbacks
-  header_text = local_assigns[:header] || 
-                t("#{i18n_base}.errors.header", 
-                  count: model_object.errors.count, 
+  header_text = local_assigns[:header] ||
+                t("#{i18n_base}.errors.header",
+                  count: model_object.errors.count,
                   raise: true)
 %>
 
@@ -23,4 +23,4 @@
       <% end %>
     </ul>
   </aside>
-<% end %>
+<% end %>

data/views/chobble_forms/_field_with_link.html.erb

@@ -8,14 +8,14 @@
   #   - link_url: URL for the link
   #   - link_text: Text for the link
   #   - options: options for autocomplete_field
-  
+
   field_type = local_assigns[:field_type] || :text_field
   field = local_assigns[:field]
   required = local_assigns[:required] || false
   link_url = local_assigns[:link_url]
   link_text = local_assigns[:link_text]
   options = local_assigns[:options] || []
-  
+
   has_link = link_url.present? && link_text.present?
   css_classes = has_link ? "field field-with-link" : "field"
 %>
@@ -26,8 +26,8 @@
   <% else %>
     <%= render 'chobble_forms/text_field', field: field, required: required %>
   <% end %>
-  
+
   <% if has_link %>
     <%= link_to link_text, link_url %>
   <% end %>
-</div>
+</div>

data/views/chobble_forms/_fields.html.erb

@@ -6,4 +6,4 @@
       <%= render "chobble_forms/#{field_config[:partial]}", render_options %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/views/chobble_forms/_fieldset.html.erb

@@ -5,7 +5,7 @@
   raise ArgumentError, "i18n_base is required for form fieldsets" if i18n_base.nil?
   raise ArgumentError, "legend_key is required for form fieldsets" if local_assigns[:legend_key].nil?
   @_current_i18n_base = i18n_base
-  
+
   sections_base = i18n_base.sub(/\.fields$/, '')
   legend_i18n_key = "#{sections_base}.sections.#{local_assigns[:legend_key]}"
   legend_text = t(legend_i18n_key)

data/views/chobble_forms/_file_field_turbo_response.html.erb

@@ -7,7 +7,7 @@
   #   i18n_base: The i18n base path
   # Optional parameters:
   #   accept: File accept types (defaults to "image/*")
-  
+
   model = local_assigns[:model]
   field = local_assigns[:field]
   turbo_frame_id = local_assigns[:turbo_frame_id]
@@ -21,4 +21,4 @@
     <% @_current_i18n_base = i18n_base %>
     <%= render 'chobble_forms/file_field', field: field, accept: accept %>
   <% end %>
-<% end %>
+<% end %>

data/views/chobble_forms/_form_context.html.erb

@@ -16,7 +16,7 @@
     # Non-model forms need explicit URL and default to POST
     method ||= :post
   end
-  
+
   # Check if local form submission is requested
   use_local = local_assigns[:local] || false
 %>
@@ -25,8 +25,9 @@
   url: url,
   method: method,
   local: use_local,
-  html: { 
-    multipart: true
+  html: {
+    multipart: true,
+    autocomplete: "off"
   }
 } %>
 
@@ -46,8 +47,7 @@ end %>
 
 <%= form_with(**form_options) do |form| %>
   <%= render "chobble_forms/header",
-    title: I18n.t("#{i18n_base}.header")
-  %>
+    title: I18n.t("#{i18n_base}.header") %>
 
   <% @_current_form = form %>
   <% @_current_i18n_base = i18n_base %>
@@ -59,14 +59,12 @@ end %>
   <% end %>
 
   <fieldset>
-    <% if local_assigns[:secondary_link_url].present? && local_assigns[:secondary_link_text].present? %>
-      <div class="form-actions">
-        <%= render 'chobble_forms/submit_button' %>
+    <div class="form-actions">
+      <%= render 'chobble_forms/submit_button', submit_key: local_assigns[:submit_key] %>
+      <% if local_assigns[:secondary_link_url].present? && local_assigns[:secondary_link_text].present? %>
         <%= link_to secondary_link_text, secondary_link_url, role: "button", class: "secondary" %>
-      </div>
-    <% else %>
-      <%= render 'chobble_forms/submit_button' %>
-    <% end %>
+      <% end %>
+    </div>
   </fieldset>
 
   <%# Save message display for Turbo Streams %>

data/views/chobble_forms/_header.html.erb

@@ -1,3 +1,3 @@
 <header>
   <h1><%= title %></h1>
-</header>
+</header>

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>
+</div>

data/views/chobble_forms/_number.html.erb

@@ -29,6 +29,5 @@
     required: number_options[:required],
     placeholder: field_data[:field_placeholder],
     value: number_options[:value],
-    class: "number"
-  %>
+    class: "number" %>
 </div>

data/views/chobble_forms/_number_pass_fail_comment.html.erb

@@ -51,14 +51,12 @@
     required: number_options[:required],
     placeholder: field_data[:field_placeholder],
     value: number_options[:value],
-    class: "number"
-  %>
+    class: "number" %>
 
   <%= render 'chobble_forms/radio_pass_fail',
     field: pass_fail_field,
     prefilled: pass_fail_prefilled,
-    checked_value: pass_fail_checked
-  %>
+    checked_value: pass_fail_checked %>
 
   <%= render 'chobble_forms/comment_checkbox',
       comment_field: comment_field,
@@ -68,6 +66,5 @@
       prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field,
-    comment_info[:options]
-  %>
+    comment_info[:options] %>
 </div>

data/views/chobble_forms/_number_pass_fail_na_comment.html.erb

@@ -30,7 +30,7 @@
     form,
     pass_fail_field
   )
-  
+
   # Debug: Check if the model value is being read correctly
   model_value = model.send(pass_fail_field) if model.respond_to?(pass_fail_field)
   actual_value = pass_fail_prefilled ? pass_fail_value : model_value
@@ -42,7 +42,6 @@
     comment_field,
     field_data[:field_label]
   )
-
 %>
 
 <div class="form-grid number-radio-comment" id="<%= number_field %>">
@@ -58,15 +57,12 @@
     required: number_options[:required],
     placeholder: field_data[:field_placeholder],
     value: number_options[:value],
-    class: "number"
-  %>
+    class: "number" %>
 
   <%= render 'chobble_forms/radio_pass_fail',
     field: pass_fail_field,
     prefilled: pass_fail_prefilled && !na_checked,
-    checked_value: pass_fail_checked
-  %>
-
+    checked_value: pass_fail_checked %>
 
   <%= render 'chobble_forms/comment_checkbox',
       comment_field: comment_field,
@@ -76,6 +72,5 @@
       prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field,
-    comment_info[:options]
-  %>
-</div>
+    comment_info[:options] %>
+</div>

data/views/chobble_forms/_pass_fail.html.erb

@@ -8,6 +8,5 @@
   <%= render 'chobble_forms/radio_pass_fail',
     field: field,
     prefilled: field_data[:prefilled],
-    checked_value: checked_value
-  %>
+    checked_value: checked_value %>
 </div>

data/views/chobble_forms/_pass_fail_comment.html.erb

@@ -32,16 +32,14 @@
   <%= render 'chobble_forms/radio_pass_fail',
     field: field,
     prefilled: field_data[:prefilled],
-    checked_value: checked_value
-  %>
+    checked_value: checked_value %>
 
   <%= 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]
-  %>
+    prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field, comment_info[:options] %>
 </div>

data/views/chobble_forms/_pass_fail_na_comment.html.erb

@@ -33,16 +33,14 @@
   <%= render 'chobble_forms/radio_pass_fail',
     field: field,
     prefilled: field_data[:prefilled],
-    checked_value: checked_value
-  %>
+    checked_value: checked_value %>
 
   <%= 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]
-  %>
+    prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field, comment_info[:options] %>
-</div>
+</div>

data/views/chobble_forms/_radio_comment.html.erb

@@ -32,16 +32,14 @@
   <%= render 'chobble_forms/radio_pass_fail',
     field: radio_field,
     prefilled: field_data[:prefilled],
-    checked_value: checked_value
-  %>
+    checked_value: checked_value %>
 
   <%= 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]
-  %>
+    prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field, comment_info[:options] %>
 </div>

data/views/chobble_forms/_radio_pass_fail.html.erb

@@ -1,11 +1,11 @@
 <%
   form = @_current_form
   yes_no ||= false
-  
+
   # Check if this field is an enum by looking at the model
   model = form.object
   is_enum = model.class.respond_to?(:defined_enums) && model.class.defined_enums.key?(field.to_s)
-  
+
   if is_enum
     pass_value = "pass"
     fail_value = "fail"
@@ -21,22 +21,19 @@
     <%= t("shared.#{yes_no ? "yes" : "pass"}") %>
     <%= form.radio_button field,
       pass_value,
-      radio_button_options(prefilled, checked_value, pass_value)
-    %>
+      radio_button_options(prefilled, checked_value, pass_value) %>
   </label>
   <label>
     <%= form.radio_button field,
       fail_value,
-      radio_button_options(prefilled, checked_value, fail_value)
-    %>
+      radio_button_options(prefilled, checked_value, fail_value) %>
     <%= t("shared.#{yes_no ? "no" : "fail"}") %>
   </label>
   <% if is_enum %>
     <label>
       <%= form.radio_button field,
         na_value,
-        radio_button_options(prefilled, checked_value, na_value)
-      %>
+        radio_button_options(prefilled, checked_value, na_value) %>
       <%= t("shared.not_applicable") %>
     </label>
   <% end %>

data/views/chobble_forms/_search_field.html.erb

@@ -12,4 +12,4 @@
     <%= form.text_field field_name, placeholder: placeholder, value: params[field_name] %>
     <%= form.submit submit_text %>
   <% end %>
-</div>
+</div>

data/views/chobble_forms/_submit_button.html.erb

@@ -1 +1,5 @@
-<%= @_current_form.submit t("#{@_current_i18n_base}.submit", raise: true) %>
+<%
+  submit_key = local_assigns[:submit_key] || "submit"
+  submit_text = t("#{@_current_i18n_base}.#{submit_key}", raise: true)
+%>
+<%= @_current_form.submit submit_text %>

data/views/chobble_forms/_yes_no_radio.html.erb

@@ -10,6 +10,5 @@
     field: field,
     prefilled: field_data[:prefilled],
     checked_value: checked_value,
-    yes_no: true
-  %>
+    yes_no: true %>
 </div>

data/views/chobble_forms/_yes_no_radio_comment.html.erb

@@ -33,16 +33,14 @@
     field: radio_field,
     prefilled: field_data[:prefilled],
     checked_value: checked_value,
-    yes_no: true
-  %>
+    yes_no: true %>
 
   <%= 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]
-  %>
+    prefilled: comment_info[:prefilled] %>
 
   <%= form.text_area comment_field, comment_info[:options] %>
-</div>
+</div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chobble-forms
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.5
 platform: ruby
 authors:
 - Chobble.com
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-07 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