add the ability to switch order status

Author: scooterthedev

app/models/shop_order.rb

@@ -2,7 +2,7 @@ class ShopOrder < ApplicationRecord
   belongs_to :user
   belongs_to :shop_item
 
-  after_create :sync_to_airtable
+  after_save :sync_to_airtable
 
   private
 

app/views/admin/shop.html.erb

@@ -115,13 +115,11 @@
               <%= order.name %>
             </td>
             <td style="padding: 1rem;">
-              <% status_color = case order.status
-                when 'pending' then '#fff3cd'
-                when 'completed' then '#d4edda'
-                when 'cancelled' then '#f8d7da'
-                else '#e2e3e5'
-              end %>
-              <span style="background: <%= status_color %>; padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: capitalize;"><%= order.status %></span>
+              <select class="order-status" data-order-id="<%= order.id %>" style="padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; border: 1px solid #ddd;">
+                <option value="pending" <%= 'selected' if order.status == 'pending' %>>Pending</option>
+                <option value="completed" <%= 'selected' if order.status == 'completed' %>>Completed</option>
+                <option value="cancelled" <%= 'selected' if order.status == 'cancelled' %>>Cancelled</option>
+              </select>
             </td>
             <td style="padding: 1rem; color: #999; font-size: 0.9rem;">
               <%= order.created_at.strftime('%b %d, %Y') %>
@@ -135,49 +133,79 @@
     </main>
 
     <script>
-  const addItemForm = document.getElementById('add-item-form');
-  const addItemBtn = document.getElementById('add-item-btn');
+      const addItemForm = document.getElementById('add-item-form');
+      const addItemBtn = document.getElementById('add-item-btn');
 
-  addItemForm?.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    
-    addItemBtn.disabled = true;
-    addItemBtn.textContent = 'Adding...';
-
-    const data = {
-      shop_item: {
-        name: document.getElementById('item_name').value,
-        description: document.getElementById('item_description').value,
-        cost: parseFloat(document.getElementById('item_cost').value),
-        status: document.getElementById('item_status').value,
-        image_url: document.getElementById('item_image_url').value
-      }
-    };
-
-    try {
-      const response = await fetch('/api/v1/admin/shop_items', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json',
-          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
-        },
-        credentials: 'same-origin',
-        body: JSON.stringify(data)
+      addItemForm?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        addItemBtn.disabled = true;
+        addItemBtn.textContent = 'Adding...';
+
+        const data = {
+          shop_item: {
+            name: document.getElementById('item_name').value,
+            description: document.getElementById('item_description').value,
+            cost: parseFloat(document.getElementById('item_cost').value),
+            status: document.getElementById('item_status').value,
+            image_url: document.getElementById('item_image_url').value
+          }
+        };
+
+        try {
+          const response = await fetch('/api/v1/admin/shop_items', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Accept': 'application/json',
+              'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify(data)
+          });
+
+          if (response.ok) {
+            window.location.reload();
+          } else {
+            const result = await response.json();
+            alert(result.errors?.join(', ') || 'Failed to create item.');
+          }
+        } catch (error) {
+          console.error('Failed to create shop item:', error);
+          alert('Failed to create item. Please try again.');
+        } finally {
+          addItemBtn.disabled = false;
+          addItemBtn.textContent = 'Add Item';
+        }
       });
 
-      if (response.ok) {
-        window.location.reload();
-      } else {
-        const result = await response.json();
-        alert(result.errors?.join(', ') || 'Failed to create item.');
-      }
-    } catch (error) {
-      console.error('Failed to create shop item:', error);
-      alert('Failed to create item. Please try again.');
-    } finally {
-      addItemBtn.disabled = false;
-      addItemBtn.textContent = 'Add Item';
-    }
-  });
-</script>
+      document.querySelectorAll('.order-status').forEach(select => {
+        select.addEventListener('change', async (e) => {
+          const orderId = select.dataset.orderId;
+          const newStatus = select.value;
+
+          try {
+            const response = await fetch(`/api/v1/admin/shop_orders/${orderId}`, {
+              method: 'PATCH',
+              headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+              },
+              credentials: 'same-origin',
+              body: JSON.stringify({ order: { status: newStatus } })
+            });
+
+            if (!response.ok) {
+              const result = await response.json();
+              alert(result.errors?.join(', ') || 'Failed to update order.');
+              window.location.reload();
+            }
+          } catch (error) {
+            console.error('Failed to update order status:', error);
+            alert('Failed to update order. Please try again.');
+            window.location.reload();
+          }
+        });
+      });
+    </script>