Wire Custom Fields into ticket creation and viewing (#47)

CustomFieldModel::setValue()/setValues()/getValuesForTicket() were
never called anywhere outside api/custom_fields.php's own admin CRUD
for field *definitions* — CreateTicketView.php never rendered custom
fields, TicketController::create() never collected or saved them, and
TicketView.php never displayed them. The whole feature (admin defines
fields at /admin/custom-fields, including marking them Required) was
config-only with zero consumer; is_required was enforced nowhere.

Added:
- api/ticket_custom_fields.php: new endpoint (bootstrap.php-based, so
  any ticket editor can use it, not just admins) that saves values for
  a ticket. Only considers fields applicable to the ticket's current
  category (or category-less fields); enforces is_required, validates
  select values against the field's configured options, and validates
  number fields are numeric. Values for fields that don't apply are
  silently ignored rather than persisted, so a value typed before a
  category change can't linger as orphaned data.
- CreateTicketView.php: renders every active field definition (all
  categories, since the ticket doesn't exist yet), grouped with a
  data-custom-field-category attribute and toggled client-side as the
  Category select changes, matching the existing visibility-groups
  toggle pattern. Submitted as part of the same form.
- TicketController::create(): validates is_required server-side against
  the fields applicable to the *submitted* category (not just whatever
  was visible client-side) before creating the ticket, then persists
  via CustomFieldModel::setValues() after a successful create.
- TicketView.php: new "Custom Fields" tab (only shown when the ticket's
  category has applicable fields) rendering current values with a
  single Save button, calling the new endpoint — a panel-plus-save
  interaction rather than per-field inline auto-save, to keep scope
  contained across 6 field types.

Verified against real MariaDB and a real running server: a required
field left blank is correctly rejected (both at ticket-creation time
and when editing an existing ticket) with no partial write; a valid
submission persists exactly the fields applicable to that ticket's
category; an invalid select value is rejected without touching
previously-saved values; and each rejection correctly returns a
rotated recovery csrf_token (initially missed on the validation-error
paths, since they used a plain echo/exit instead of the bootstrap.php
apiRespond() helper every other endpoint's error paths use for this).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lhz7pGMaoTfL5sdYS5XiKv

views/CreateTicketView.php

@@ -124,7 +124,7 @@ include __DIR__ . '/layout_header.php';
 
         <div class="lt-form-group">
           <label class="lt-label" for="category">Category</label>
-          <select id="category" name="category" class="lt-select">
+          <select id="category" name="category" class="lt-select" data-action="toggle-custom-fields">
             <option value="Hardware">Hardware</option>
             <option value="Software">Software</option>
             <option value="Network">Network</option>
@@ -211,6 +211,55 @@ include __DIR__ . '/layout_header.php';
     </div>
   </div>
 
+  <?php if (!empty($allCustomFieldDefs)) : ?>
+  <!-- ── SECTION 5b: Custom Fields ─────────────────────────── -->
+  <div class="lt-frame lt-mb-md">
+    <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
+    <div class="lt-section-header">Additional Fields</div>
+    <div class="lt-section-body">
+        <?php foreach ($allCustomFieldDefs as $cfDef) : ?>
+        <div class="lt-form-group custom-field-group"
+             data-custom-field-category="<?= htmlspecialchars($cfDef['category'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
+            <?php
+            $cfName = 'custom_fields[' . (int)$cfDef['field_id'] . ']';
+            $cfId   = 'custom_field_' . (int)$cfDef['field_id'];
+            ?>
+          <label class="lt-label" for="<?= $cfId ?>">
+            <?= htmlspecialchars($cfDef['field_label'], ENT_QUOTES, 'UTF-8') ?><?= $cfDef['is_required'] ? ' *' : '' ?>
+          </label>
+            <?php if ($cfDef['field_type'] === 'textarea') : ?>
+            <textarea id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input lt-textarea" rows="3"
+                      <?= $cfDef['is_required'] ? 'data-custom-field-required="1"' : '' ?>></textarea>
+            <?php elseif ($cfDef['field_type'] === 'select') : ?>
+            <select id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-select"
+                    <?= $cfDef['is_required'] ? 'data-custom-field-required="1"' : '' ?>>
+              <option value="">— Select —</option>
+                <?php foreach (($cfDef['field_options']['options'] ?? []) as $opt) : ?>
+                <option value="<?= htmlspecialchars($opt, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($opt, ENT_QUOTES, 'UTF-8') ?></option>
+                <?php endforeach ?>
+            </select>
+            <?php elseif ($cfDef['field_type'] === 'checkbox') : ?>
+            <label class="lt-filter-option">
+              <input type="checkbox" class="lt-checkbox" id="<?= $cfId ?>" name="<?= $cfName ?>" value="1">
+                <?= htmlspecialchars($cfDef['field_label'], ENT_QUOTES, 'UTF-8') ?>
+            </label>
+            <?php elseif ($cfDef['field_type'] === 'date') : ?>
+            <input type="date" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   <?= $cfDef['is_required'] ? 'data-custom-field-required="1"' : '' ?>>
+            <?php elseif ($cfDef['field_type'] === 'number') : ?>
+            <input type="number" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   <?= $cfDef['is_required'] ? 'data-custom-field-required="1"' : '' ?>>
+            <?php else : ?>
+            <input type="text" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   <?= $cfDef['is_required'] ? 'data-custom-field-required="1"' : '' ?>>
+            <?php endif ?>
+        </div>
+        <?php endforeach ?>
+      <p class="lt-form-hint">Fields shown depend on the selected Category.</p>
+    </div>
+  </div>
+  <?php endif ?>
+
   <!-- ── SECTION 6: Description ───────────────────────────── -->
   <div class="lt-frame lt-mb-md">
     <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
@@ -316,6 +365,15 @@ include __DIR__ . '/layout_header.php';
             .catch(function () { /* silent — duplicate check is non-critical */ });
     }
 
+    // ── Custom fields: show only the selected category's fields ──
+    function toggleCustomFields() {
+        var category = document.getElementById('category').value;
+        document.querySelectorAll('.custom-field-group').forEach(function (group) {
+            var fieldCategory = group.getAttribute('data-custom-field-category');
+            group.classList.toggle('is-hidden', fieldCategory !== '' && fieldCategory !== category);
+        });
+    }
+
     // ── Visibility groups toggle ──────────────────────────────
     var visibilityHints = {
         'public':       'Everyone who is logged in can view this ticket.',
@@ -387,9 +445,11 @@ include __DIR__ . '/layout_header.php';
         switch (target.getAttribute('data-action')) {
             case 'load-template':             loadTemplate();             break;
             case 'toggle-visibility-groups':  toggleVisibilityGroups();   break;
+            case 'toggle-custom-fields':      toggleCustomFields();       break;
         }
     });
 
+    toggleCustomFields();
     if (window.lt) lt.keys.initDefaults();
 }());
 </script>

views/TicketView.php

@@ -397,6 +397,12 @@ document.addEventListener('DOMContentLoaded', function() {
           role="tab" data-tab="dependencies-panel" aria-selected="false" aria-controls="dependencies-panel">
     Dependencies
   </button>
+  <?php if (!empty($customFieldDefs)) : ?>
+  <button type="button" class="lt-tab" id="custom-fields-tab-btn"
+          role="tab" data-tab="custom-fields-panel" aria-selected="false" aria-controls="custom-fields-panel">
+    Custom Fields
+  </button>
+  <?php endif ?>
   <button type="button" class="lt-tab" id="activity-tab-btn"
           role="tab" data-tab="activity-panel" aria-selected="false" aria-controls="activity-panel">
     Activity
@@ -682,6 +688,60 @@ document.addEventListener('DOMContentLoaded', function() {
   </div>
 </div>
 
+<?php if (!empty($customFieldDefs)) : ?>
+<!-- ═══════════════════════════════════════════════════════════
+     TAB PANEL: CUSTOM FIELDS
+     ═══════════════════════════════════════════════════════════ -->
+<div id="custom-fields-panel" class="lt-tab-panel" role="tabpanel" aria-labelledby="custom-fields-tab-btn">
+  <div class="lt-frame">
+    <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
+    <div class="lt-section-header">Custom Fields</div>
+    <div class="lt-section-body">
+      <div id="customFieldsMsg" class="lt-msg is-hidden lt-mb-md" role="alert" aria-live="polite"></div>
+      <?php foreach ($customFieldDefs as $cfDef) :
+            $cfValue = $customFieldValues[$cfDef['field_name']]['field_value'] ?? '';
+            $cfName  = 'custom_fields[' . (int)$cfDef['field_id'] . ']';
+            $cfId    = 'ticket_custom_field_' . (int)$cfDef['field_id'];
+            ?>
+        <div class="lt-form-group">
+          <label class="lt-label" for="<?= $cfId ?>">
+            <?= htmlspecialchars($cfDef['field_label'], ENT_QUOTES, 'UTF-8') ?><?= $cfDef['is_required'] ? ' *' : '' ?>
+          </label>
+            <?php if ($cfDef['field_type'] === 'textarea') : ?>
+            <textarea id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input lt-textarea" rows="3"
+                      ><?= htmlspecialchars($cfValue, ENT_QUOTES, 'UTF-8') ?></textarea>
+            <?php elseif ($cfDef['field_type'] === 'select') : ?>
+            <select id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-select">
+              <option value="">— Select —</option>
+                <?php foreach (($cfDef['field_options']['options'] ?? []) as $opt) : ?>
+                <option value="<?= htmlspecialchars($opt, ENT_QUOTES, 'UTF-8') ?>"
+                        <?= $opt === $cfValue ? 'selected' : '' ?>><?= htmlspecialchars($opt, ENT_QUOTES, 'UTF-8') ?></option>
+                <?php endforeach ?>
+            </select>
+            <?php elseif ($cfDef['field_type'] === 'checkbox') : ?>
+            <label class="lt-filter-option">
+              <input type="checkbox" class="lt-checkbox" id="<?= $cfId ?>" name="<?= $cfName ?>" value="1"
+                     <?= $cfValue === '1' ? 'checked' : '' ?>>
+                <?= htmlspecialchars($cfDef['field_label'], ENT_QUOTES, 'UTF-8') ?>
+            </label>
+            <?php elseif ($cfDef['field_type'] === 'date') : ?>
+            <input type="date" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   value="<?= htmlspecialchars($cfValue, ENT_QUOTES, 'UTF-8') ?>">
+            <?php elseif ($cfDef['field_type'] === 'number') : ?>
+            <input type="number" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   value="<?= htmlspecialchars($cfValue, ENT_QUOTES, 'UTF-8') ?>">
+            <?php else : ?>
+            <input type="text" id="<?= $cfId ?>" name="<?= $cfName ?>" class="lt-input"
+                   value="<?= htmlspecialchars($cfValue, ENT_QUOTES, 'UTF-8') ?>">
+            <?php endif ?>
+        </div>
+      <?php endforeach ?>
+      <button type="button" id="saveCustomFieldsBtn" class="lt-btn lt-btn-primary lt-btn-sm">SAVE CUSTOM FIELDS</button>
+    </div>
+  </div>
+</div>
+<?php endif ?>
+
 <!-- ═══════════════════════════════════════════════════════════
      TAB PANEL: ACTIVITY
      ═══════════════════════════════════════════════════════════ -->
@@ -1013,6 +1073,46 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     }
 
+    // Save custom fields button
+    var saveCustomFieldsBtn = document.getElementById('saveCustomFieldsBtn');
+    if (saveCustomFieldsBtn) {
+        saveCustomFieldsBtn.addEventListener('click', function () {
+            var panel = document.getElementById('custom-fields-panel');
+            var msg = document.getElementById('customFieldsMsg');
+            var values = {};
+            panel.querySelectorAll('[name^="custom_fields["]').forEach(function (el) {
+                var m = el.name.match(/custom_fields\[(\d+)\]/);
+                if (!m) return;
+                var fieldId = m[1];
+                if (el.type === 'checkbox') {
+                    values[fieldId] = el.checked ? '1' : '0';
+                } else {
+                    values[fieldId] = el.value;
+                }
+            });
+
+            saveCustomFieldsBtn.disabled = true;
+            msg.classList.add('is-hidden');
+
+            lt.api.post('/api/ticket_custom_fields.php', {
+                ticket_id: window.ticketData.id,
+                values: values
+            }).then(function (data) {
+                saveCustomFieldsBtn.disabled = false;
+                if (data.success) {
+                    lt.toast.success('Custom fields saved', 3000);
+                } else {
+                    msg.textContent = data.error || 'Failed to save custom fields';
+                    msg.className = 'lt-msg lt-msg-danger lt-mb-md';
+                }
+            }).catch(function (error) {
+                saveCustomFieldsBtn.disabled = false;
+                msg.textContent = 'Failed to save custom fields: ' + error.message;
+                msg.className = 'lt-msg lt-msg-danger lt-mb-md';
+            });
+        });
+    }
+
     // Settings save/cancel
     // Load user preference toggles on settings modal open
     (function() {