Inlining editing of items to avoid jumping to the top of the page for each edit

admin/activities.php

@@ -53,55 +53,36 @@ $activities = $pdo->query("
     ORDER BY ag.sortOrder, a.sortOrder, a.activityID
 ")->fetchAll();
 
-$editing = null;
-if (isset($_GET['edit'])) {
-    $stmt = $pdo->prepare("SELECT * FROM activities WHERE activityID=?");
-    $stmt->execute([(int)$_GET['edit']]);
-    $editing = $stmt->fetch();
-}
-
 admin_head('Activities', 'activities.php');
 show_alerts();
 ?>
 <h1>Activities</h1>
 
 <div class="card">
-  <h2><?= $editing ? 'Edit Activity' : 'Add New Activity' ?></h2>
+  <h2>Add New Activity</h2>
   <form method="POST">
-    <input type="hidden" name="action" value="<?= $editing ? 'edit' : 'add' ?>">
-    <?php if ($editing): ?>
-    <input type="hidden" name="activityID" value="<?= $editing['activityID'] ?>">
-    <?php endif; ?>
+    <input type="hidden" name="action" value="add">
     <div class="form-row">
       <div>
         <label>Activity Name</label>
-        <input type="text" name="activityName"
-               value="<?= htmlspecialchars($editing['activityName'] ?? '') ?>"
-               placeholder="e.g. Kayaking" required>
+        <input type="text" name="activityName" placeholder="e.g. Kayaking" required>
       </div>
       <div>
         <label>Group</label>
         <select name="groupID" required>
           <option value="">– select –</option>
           <?php foreach ($groups as $g): ?>
-          <option value="<?= $g['groupID'] ?>"
-            <?= ($editing && $editing['groupID'] == $g['groupID']) ? 'selected' : '' ?>>
-            <?= htmlspecialchars($g['groupName']) ?>
-          </option>
+          <option value="<?= $g['groupID'] ?>"><?= htmlspecialchars($g['groupName']) ?></option>
           <?php endforeach; ?>
         </select>
       </div>
     </div>
     <div>
       <label>Sort Order</label>
-      <input type="number" name="sortOrder"
-             value="<?= (int)($editing['sortOrder'] ?? 0) ?>" min="0" style="max-width:120px;">
+      <input type="number" name="sortOrder" value="0" min="0" style="max-width:120px;">
     </div>
     <div style="display:flex;gap:.5rem;margin-top:.25rem;">
-      <button type="submit" class="btn btn-primary"><?= $editing ? '💾 Save' : '➕ Add' ?></button>
-      <?php if ($editing): ?>
-      <a href="activities.php" class="btn btn-secondary">Cancel</a>
-      <?php endif; ?>
+      <button type="submit" class="btn btn-primary">➕ Add</button>
     </div>
   </form>
 </div>
@@ -109,22 +90,67 @@ show_alerts();
 <table class="tbl">
   <thead><tr><th>#</th><th>Name</th><th>Group</th><th>Sort</th><th></th></tr></thead>
   <tbody>
-  <?php foreach ($activities as $a): ?>
-  <tr>
-    <td style="color:var(--muted)"><?= $a['activityID'] ?></td>
+  <?php foreach ($activities as $a):
+    $id = $a['activityID'];
+  ?>
+  <tr id="view-<?= $id ?>">
+    <td style="color:var(--muted)"><?= $id ?></td>
     <td><?= htmlspecialchars($a['activityName']) ?></td>
     <td><span class="badge badge-group"><?= htmlspecialchars($a['groupName']) ?></span></td>
     <td><?= $a['sortOrder'] ?></td>
     <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <a href="?edit=<?= $a['activityID'] ?>" class="btn btn-sm btn-teal">Edit</a>
+      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
       <form method="POST" onsubmit="return confirm('Delete this activity?')">
         <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="activityID" value="<?= $a['activityID'] ?>">
+        <input type="hidden" name="activityID" value="<?= $id ?>">
         <button class="btn btn-sm btn-danger">Delete</button>
       </form>
     </td>
   </tr>
+  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
+    <td colspan="5">
+      <form method="POST" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;padding:.25rem 0;">
+        <input type="hidden" name="action" value="edit">
+        <input type="hidden" name="activityID" value="<?= $id ?>">
+        <div>
+          <label>Activity Name</label>
+          <input type="text" name="activityName" value="<?= htmlspecialchars($a['activityName']) ?>" required style="margin-bottom:0;min-width:180px;">
+        </div>
+        <div>
+          <label>Group</label>
+          <select name="groupID" required style="margin-bottom:0;min-width:140px;">
+            <?php foreach ($groups as $g): ?>
+            <option value="<?= $g['groupID'] ?>" <?= $a['groupID'] == $g['groupID'] ? 'selected' : '' ?>>
+              <?= htmlspecialchars($g['groupName']) ?>
+            </option>
+            <?php endforeach; ?>
+          </select>
+        </div>
+        <div>
+          <label>Sort Order</label>
+          <input type="number" name="sortOrder" value="<?= (int)$a['sortOrder'] ?>" min="0" style="margin-bottom:0;max-width:90px;">
+        </div>
+        <div style="display:flex;gap:.4rem;padding-bottom:1px;">
+          <button type="submit" class="btn btn-sm btn-primary">💾 Save</button>
+          <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+        </div>
+      </form>
+    </td>
+  </tr>
   <?php endforeach; ?>
   </tbody>
 </table>
+
+<script>
+function startEdit(id) {
+  document.getElementById('view-' + id).style.display = 'none';
+  document.getElementById('edit-' + id).style.display = '';
+  document.querySelector('#edit-' + id + ' input[name="activityName"]').focus();
+}
+function cancelEdit(id) {
+  document.getElementById('edit-' + id).style.display = 'none';
+  document.getElementById('view-' + id).style.display = '';
+}
+</script>
+
 <?php admin_foot(); ?>

admin/activity_groups.php

@@ -5,7 +5,6 @@ require_admin();
 
 $pdo = get_pdo();
 
-// Handle POST actions
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $action = $_POST['action'] ?? '';
 
@@ -46,44 +45,27 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 $groups = $pdo->query("SELECT * FROM activity_groups ORDER BY sortOrder, groupID")->fetchAll();
 
-// Edit mode?
-$editing = null;
-if (isset($_GET['edit'])) {
-    $stmt = $pdo->prepare("SELECT * FROM activity_groups WHERE groupID=?");
-    $stmt->execute([(int)$_GET['edit']]);
-    $editing = $stmt->fetch();
-}
-
 admin_head('Activity Groups', 'activity_groups.php');
 show_alerts();
 ?>
 <h1>Activity Groups</h1>
 
 <div class="card">
-  <h2><?= $editing ? 'Edit Group' : 'Add New Group' ?></h2>
+  <h2>Add New Group</h2>
   <form method="POST">
-    <input type="hidden" name="action" value="<?= $editing ? 'edit' : 'add' ?>">
-    <?php if ($editing): ?>
-    <input type="hidden" name="groupID" value="<?= $editing['groupID'] ?>">
-    <?php endif; ?>
+    <input type="hidden" name="action" value="add">
     <div class="form-row">
       <div>
         <label>Group Name</label>
-        <input type="text" name="groupName"
-               value="<?= htmlspecialchars($editing['groupName'] ?? '') ?>"
-               placeholder="e.g. Overnight" required>
+        <input type="text" name="groupName" placeholder="e.g. Overnight" required>
       </div>
       <div>
         <label>Sort Order</label>
-        <input type="number" name="sortOrder"
-               value="<?= (int)($editing['sortOrder'] ?? 0) ?>" min="0">
+        <input type="number" name="sortOrder" value="0" min="0">
       </div>
     </div>
     <div style="display:flex;gap:.5rem;">
-      <button type="submit" class="btn btn-primary"><?= $editing ? '💾 Save' : '➕ Add Group' ?></button>
-      <?php if ($editing): ?>
-      <a href="activity_groups.php" class="btn btn-secondary">Cancel</a>
-      <?php endif; ?>
+      <button type="submit" class="btn btn-primary">➕ Add Group</button>
     </div>
   </form>
 </div>
@@ -95,23 +77,56 @@ show_alerts();
     $cnt = $pdo->prepare("SELECT COUNT(*) FROM activities WHERE groupID=?");
     $cnt->execute([$g['groupID']]);
     $actCount = $cnt->fetchColumn();
+    $id = $g['groupID'];
   ?>
-  <tr>
-    <td style="color:var(--muted)"><?= $g['groupID'] ?></td>
+  <tr id="view-<?= $id ?>">
+    <td style="color:var(--muted)"><?= $id ?></td>
     <td><?= htmlspecialchars($g['groupName']) ?></td>
     <td><?= $g['sortOrder'] ?></td>
     <td><span class="badge badge-group"><?= $actCount ?></span></td>
     <td style="text-align:right;display:flex;gap:.4rem;justify-content:flex-end;">
-      <a href="?edit=<?= $g['groupID'] ?>" class="btn btn-sm btn-teal">Edit</a>
+      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
       <form method="POST" onsubmit="return confirm('Delete this group and ALL its activities?')">
         <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="groupID" value="<?= $g['groupID'] ?>">
+        <input type="hidden" name="groupID" value="<?= $id ?>">
         <button type="submit" class="btn btn-sm btn-danger">Delete</button>
       </form>
     </td>
   </tr>
+  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
+    <td colspan="5">
+      <form method="POST" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;padding:.25rem 0;">
+        <input type="hidden" name="action" value="edit">
+        <input type="hidden" name="groupID" value="<?= $id ?>">
+        <div>
+          <label>Group Name</label>
+          <input type="text" name="groupName" value="<?= htmlspecialchars($g['groupName']) ?>" required style="margin-bottom:0;min-width:180px;">
+        </div>
+        <div>
+          <label>Sort Order</label>
+          <input type="number" name="sortOrder" value="<?= (int)$g['sortOrder'] ?>" min="0" style="margin-bottom:0;max-width:100px;">
+        </div>
+        <div style="display:flex;gap:.4rem;padding-bottom:1px;">
+          <button type="submit" class="btn btn-sm btn-primary">💾 Save</button>
+          <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+        </div>
+      </form>
+    </td>
+  </tr>
   <?php endforeach; ?>
   </tbody>
 </table>
 
+<script>
+function startEdit(id) {
+  document.getElementById('view-' + id).style.display = 'none';
+  document.getElementById('edit-' + id).style.display = '';
+  document.querySelector('#edit-' + id + ' input[name="groupName"]').focus();
+}
+function cancelEdit(id) {
+  document.getElementById('edit-' + id).style.display = 'none';
+  document.getElementById('view-' + id).style.display = '';
+}
+</script>
+
 <?php admin_foot(); ?>

admin/item_groups.php

@@ -16,7 +16,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         } else { flash('error', 'Name required.'); }
     }
     if ($action === 'edit') {
-        $id = (int)$_POST['groupID'];
+        $id    = (int)$_POST['groupID'];
         $name  = trim($_POST['groupName'] ?? '');
         $order = (int)($_POST['sortOrder'] ?? 0);
         if ($name !== '') {
@@ -34,40 +34,27 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
 $groups = $pdo->query("SELECT * FROM item_groups ORDER BY sortOrder, groupID")->fetchAll();
 
-$editing = null;
-if (isset($_GET['edit'])) {
-    $stmt = $pdo->prepare("SELECT * FROM item_groups WHERE groupID=?");
-    $stmt->execute([(int)$_GET['edit']]);
-    $editing = $stmt->fetch();
-}
-
 admin_head('Item Groups', 'item_groups.php');
 show_alerts();
 ?>
 <h1>Item Groups</h1>
+
 <div class="card">
-  <h2><?= $editing ? 'Edit Group' : 'Add New Group' ?></h2>
+  <h2>Add New Group</h2>
   <form method="POST">
-    <input type="hidden" name="action" value="<?= $editing ? 'edit' : 'add' ?>">
-    <?php if ($editing): ?>
-    <input type="hidden" name="groupID" value="<?= $editing['groupID'] ?>">
-    <?php endif; ?>
+    <input type="hidden" name="action" value="add">
     <div class="form-row">
       <div>
         <label>Group Name</label>
-        <input type="text" name="groupName"
-               value="<?= htmlspecialchars($editing['groupName'] ?? '') ?>"
-               placeholder="e.g. Clothing" required>
+        <input type="text" name="groupName" placeholder="e.g. Clothing" required>
       </div>
       <div>
         <label>Sort Order</label>
-        <input type="number" name="sortOrder"
-               value="<?= (int)($editing['sortOrder'] ?? 0) ?>" min="0">
+        <input type="number" name="sortOrder" value="0" min="0">
       </div>
     </div>
     <div style="display:flex;gap:.5rem;">
-      <button type="submit" class="btn btn-primary"><?= $editing ? '💾 Save' : '➕ Add Group' ?></button>
-      <?php if ($editing): ?><a href="item_groups.php" class="btn btn-secondary">Cancel</a><?php endif; ?>
+      <button type="submit" class="btn btn-primary">➕ Add Group</button>
     </div>
   </form>
 </div>
@@ -79,22 +66,56 @@ show_alerts();
     $stmt = $pdo->prepare("SELECT COUNT(*) FROM items WHERE groupID=?");
     $stmt->execute([$g['groupID']]);
     $cnt = $stmt->fetchColumn();
+    $id = $g['groupID'];
   ?>
-  <tr>
-    <td style="color:var(--muted)"><?= $g['groupID'] ?></td>
+  <tr id="view-<?= $id ?>">
+    <td style="color:var(--muted)"><?= $id ?></td>
     <td><?= htmlspecialchars($g['groupName']) ?></td>
     <td><?= $g['sortOrder'] ?></td>
     <td><span class="badge badge-group"><?= $cnt ?></span></td>
     <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <a href="?edit=<?= $g['groupID'] ?>" class="btn btn-sm btn-teal">Edit</a>
+      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
       <form method="POST" onsubmit="return confirm('Delete group and ALL its items?')">
         <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="groupID" value="<?= $g['groupID'] ?>">
+        <input type="hidden" name="groupID" value="<?= $id ?>">
         <button class="btn btn-sm btn-danger">Delete</button>
       </form>
     </td>
   </tr>
+  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
+    <td colspan="5">
+      <form method="POST" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;padding:.25rem 0;">
+        <input type="hidden" name="action" value="edit">
+        <input type="hidden" name="groupID" value="<?= $id ?>">
+        <div>
+          <label>Group Name</label>
+          <input type="text" name="groupName" value="<?= htmlspecialchars($g['groupName']) ?>" required style="margin-bottom:0;min-width:180px;">
+        </div>
+        <div>
+          <label>Sort Order</label>
+          <input type="number" name="sortOrder" value="<?= (int)$g['sortOrder'] ?>" min="0" style="margin-bottom:0;max-width:100px;">
+        </div>
+        <div style="display:flex;gap:.4rem;padding-bottom:1px;">
+          <button type="submit" class="btn btn-sm btn-primary">💾 Save</button>
+          <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+        </div>
+      </form>
+    </td>
+  </tr>
   <?php endforeach; ?>
   </tbody>
 </table>
+
+<script>
+function startEdit(id) {
+  document.getElementById('view-' + id).style.display = 'none';
+  document.getElementById('edit-' + id).style.display = '';
+  document.querySelector('#edit-' + id + ' input[name="groupName"]').focus();
+}
+function cancelEdit(id) {
+  document.getElementById('edit-' + id).style.display = 'none';
+  document.getElementById('view-' + id).style.display = '';
+}
+</script>
+
 <?php admin_foot(); ?>

admin/items.php

@@ -42,51 +42,36 @@ $items   = $pdo->query("
     ORDER BY ig.sortOrder, i.sortOrder, i.itemID
 ")->fetchAll();
 
-$editing = null;
-if (isset($_GET['edit'])) {
-    $stmt = $pdo->prepare("SELECT * FROM items WHERE itemID=?");
-    $stmt->execute([(int)$_GET['edit']]);
-    $editing = $stmt->fetch();
-}
-
 admin_head('Items', 'items.php');
 show_alerts();
 ?>
 <h1>Items</h1>
+
 <div class="card">
-  <h2><?= $editing ? 'Edit Item' : 'Add New Item' ?></h2>
+  <h2>Add New Item</h2>
   <form method="POST">
-    <input type="hidden" name="action" value="<?= $editing ? 'edit' : 'add' ?>">
-    <?php if ($editing): ?>
-    <input type="hidden" name="itemID" value="<?= $editing['itemID'] ?>">
-    <?php endif; ?>
+    <input type="hidden" name="action" value="add">
     <div class="form-row">
       <div>
         <label>Item Name</label>
-        <input type="text" name="itemName"
-               value="<?= htmlspecialchars($editing['itemName'] ?? '') ?>"
-               placeholder="e.g. Rain jacket" required>
+        <input type="text" name="itemName" placeholder="e.g. Rain jacket" required>
       </div>
       <div>
         <label>Group</label>
         <select name="groupID" required>
           <option value="">– select –</option>
           <?php foreach ($igroups as $g): ?>
-          <option value="<?= $g['groupID'] ?>"
-            <?= ($editing && $editing['groupID'] == $g['groupID']) ? 'selected' : '' ?>>
-            <?= htmlspecialchars($g['groupName']) ?>
-          </option>
+          <option value="<?= $g['groupID'] ?>"><?= htmlspecialchars($g['groupName']) ?></option>
           <?php endforeach; ?>
         </select>
       </div>
     </div>
     <div>
       <label>Sort Order</label>
-      <input type="number" name="sortOrder" value="<?= (int)($editing['sortOrder'] ?? 0) ?>" min="0" style="max-width:120px;">
+      <input type="number" name="sortOrder" value="0" min="0" style="max-width:120px;">
     </div>
     <div style="display:flex;gap:.5rem;margin-top:.25rem;">
-      <button type="submit" class="btn btn-primary"><?= $editing ? '💾 Save' : '➕ Add' ?></button>
-      <?php if ($editing): ?><a href="items.php" class="btn btn-secondary">Cancel</a><?php endif; ?>
+      <button type="submit" class="btn btn-primary">➕ Add</button>
     </div>
   </form>
 </div>
@@ -94,22 +79,67 @@ show_alerts();
 <table class="tbl">
   <thead><tr><th>#</th><th>Name</th><th>Group</th><th>Sort</th><th></th></tr></thead>
   <tbody>
-  <?php foreach ($items as $item): ?>
-  <tr>
-    <td style="color:var(--muted)"><?= $item['itemID'] ?></td>
+  <?php foreach ($items as $item):
+    $id = $item['itemID'];
+  ?>
+  <tr id="view-<?= $id ?>">
+    <td style="color:var(--muted)"><?= $id ?></td>
     <td><?= htmlspecialchars($item['itemName']) ?></td>
     <td><span class="badge badge-group"><?= htmlspecialchars($item['groupName']) ?></span></td>
     <td><?= $item['sortOrder'] ?></td>
     <td style="display:flex;gap:.4rem;justify-content:flex-end;">
-      <a href="?edit=<?= $item['itemID'] ?>" class="btn btn-sm btn-teal">Edit</a>
+      <button type="button" onclick="startEdit(<?= $id ?>)" class="btn btn-sm btn-teal">Edit</button>
       <form method="POST" onsubmit="return confirm('Delete this item?')">
         <input type="hidden" name="action" value="delete">
-        <input type="hidden" name="itemID" value="<?= $item['itemID'] ?>">
+        <input type="hidden" name="itemID" value="<?= $id ?>">
         <button class="btn btn-sm btn-danger">Delete</button>
       </form>
     </td>
   </tr>
+  <tr id="edit-<?= $id ?>" style="display:none;background:rgba(79,209,197,.04);">
+    <td colspan="5">
+      <form method="POST" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;padding:.25rem 0;">
+        <input type="hidden" name="action" value="edit">
+        <input type="hidden" name="itemID" value="<?= $id ?>">
+        <div>
+          <label>Item Name</label>
+          <input type="text" name="itemName" value="<?= htmlspecialchars($item['itemName']) ?>" required style="margin-bottom:0;min-width:180px;">
+        </div>
+        <div>
+          <label>Group</label>
+          <select name="groupID" required style="margin-bottom:0;min-width:140px;">
+            <?php foreach ($igroups as $g): ?>
+            <option value="<?= $g['groupID'] ?>" <?= $item['groupID'] == $g['groupID'] ? 'selected' : '' ?>>
+              <?= htmlspecialchars($g['groupName']) ?>
+            </option>
+            <?php endforeach; ?>
+          </select>
+        </div>
+        <div>
+          <label>Sort Order</label>
+          <input type="number" name="sortOrder" value="<?= (int)$item['sortOrder'] ?>" min="0" style="margin-bottom:0;max-width:90px;">
+        </div>
+        <div style="display:flex;gap:.4rem;padding-bottom:1px;">
+          <button type="submit" class="btn btn-sm btn-primary">💾 Save</button>
+          <button type="button" onclick="cancelEdit(<?= $id ?>)" class="btn btn-sm btn-secondary">Cancel</button>
+        </div>
+      </form>
+    </td>
+  </tr>
   <?php endforeach; ?>
   </tbody>
 </table>
+
+<script>
+function startEdit(id) {
+  document.getElementById('view-' + id).style.display = 'none';
+  document.getElementById('edit-' + id).style.display = '';
+  document.querySelector('#edit-' + id + ' input[name="itemName"]').focus();
+}
+function cancelEdit(id) {
+  document.getElementById('edit-' + id).style.display = 'none';
+  document.getElementById('view-' + id).style.display = '';
+}
+</script>
+
 <?php admin_foot(); ?>