Refactor settings form and layout; enhance form submission with JSON handling and improve modal functionality for room management

routes.py

@@ -1,4 +1,4 @@
-from flask import Blueprint, render_template, url_for, request, redirect, flash
+from flask import Blueprint, render_template, url_for, request, redirect, flash, jsonify
 from flask import current_app as app
 from .models import Brand, Item, Inventory, RoomFunction, User, WorkLog, Room, Area
 from sqlalchemy import or_, delete
@@ -152,8 +152,7 @@ def index():
         active_worklog_headers=active_worklog_headers,
         active_worklog_rows=active_worklog_rows,
         labels=labels,
-        datasets=datasets,
+        datasets=datasets
-        endpoint='index'
     )
 
 def link(text, endpoint, **values):
@@ -205,8 +204,7 @@ def list_inventory():
         breadcrumb=[{'label': 'Inventory', 'url': url_for('main.inventory_index')}],
         header=inventory_headers,
         rows=[{"id": item.id, "cells": [row_fn(item) for row_fn in inventory_headers.values()]} for item in inventory],
-        entry_route = 'inventory_item',
+        entry_route = 'inventory_item'
-        endpoint='list_inventory'
     )
 
 @main.route("/inventory/index")
@@ -235,8 +233,7 @@ def inventory_index():
         'inventory_index.html', 
         title=f"Inventory ({category.capitalize()} Index)" if category else "Inventory", 
         category=category, 
-        listing=listing,
+        listing=listing
-        endpoint='inventory_index'
     )
 
 @main.route("/inventory_item/<id>", methods=['GET', 'POST'])
@@ -271,9 +268,7 @@ def inventory_item(id):
                            worklog=worklog,
                            worklog_headers=filtered_worklog_headers,
                            worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog],
-                           types=types,
+                           types=types
-                           endpoint='inventory_item',
-                           endpoint_args={'id': item.id}
                         )
 
 @main.route("/users")
@@ -285,8 +280,7 @@ def list_users():
         header = user_headers,
         rows = [{"id": user.id, "cells": [fn(user) for fn in user_headers.values()]} for user in users],
         title = "Users",
-        entry_route = 'user',
+        entry_route = 'user'
-        endpoint='list_users'
     )
 
 @main.route("/user/<id>")
@@ -322,9 +316,7 @@ def user(id):
         return render_template(
             'error.html',
             title=title,
-            message=f"User with id {id} not found!",
+            message=f"User with id {id} not found!"
-            endpoint='user',
-            endpoint_args={'id': -1} 
         )
 
     return render_template(
@@ -335,9 +327,7 @@ def user(id):
         inventory_rows=[{"id": item.id, "cells": [fn(item) for fn in filtered_inventory_headers.values()]} for item in inventory],
         worklog=worklog,
         worklog_headers=filtered_worklog_headers,
-        worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog],
+        worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog]
-        endpoint='user',
-        endpoint_args={'id': user.id}
     )
 
 @main.route("/worklog")
@@ -349,8 +339,7 @@ def list_worklog(page=1):
         header=worklog_headers,
         rows=[{"id": log.id, "cells": [fn(log) for fn in worklog_headers.values()]} for log in query.all()],
         title="Work Log",
-        entry_route='worklog_entry',
+        entry_route='worklog_entry'
-        endpoint='list_worklog'
     )
 
 @main.route("/worklog/<id>")
@@ -373,9 +362,7 @@ def worklog_entry(id):
         return render_template(
             'error.html',
             title=title,
-            message=f"The work log with ID {id} is not found!",
+            message=f"The work log with ID {id} is not found!"
-            endpoint='worklog_entry',
-            endpoint_args={'id': -1}
         )
 
     return render_template(
@@ -384,9 +371,7 @@ def worklog_entry(id):
         log=log, 
         users=users, 
         items=items, 
-        form_fields=worklog_form_fields,
+        form_fields=worklog_form_fields
-        endpoint='worklog_entry',
-        endpoint_args={'id': log.id}
     )
 
 @main.route("/search")
@@ -446,7 +431,7 @@ def search():
         }
     }
 
-    return render_template('search.html', title=f"Database Search ({query})" if query else "Database Search", results=results, query=query, endpoint='search')
+    return render_template('search.html', title=f"Database Search ({query})" if query else "Database Search", results=results, query=query)
 
 @main.route('/settings', methods=['GET', 'POST'])
 def settings():
@@ -518,29 +503,15 @@ def settings():
         types=[{"id": t.id, "name": t.description} for t in types],
         sections=[s.serialize() for s in sections],
         functions=[f.serialize() for f in functions],
-        rooms=[r.serialize() for r in rooms],
+        rooms=[r.serialize() for r in rooms]
-        endpoint='settings'
     )
 
-@main.route('/api/settings', methods=['POST'])
+@main.route("/api/settings", methods=["POST"])
 def api_settings():
     try:
-        payload = request.get_json()
+        payload = request.get_json(force=True)
-        if not payload:
+    except Exception as e:
-            return {'error': 'No JSON payload'}, 400
+        return jsonify({"error": "Invalid JSON"}), 400
-        
-        for label, entries in [
-            ('brands', payload.get('brands', [])),
-            ('types', payload.get('types', [])),
-            ('sections', payload.get('sections', [])),
-            ('functions', payload.get('functions', [])),
-            ('rooms', payload.get('rooms', [])),
-        ]:
-            if not isinstance(entries, list):
-                return {'error': f"{label} must be a list"}, 400
-            for entry in entries:
-                if not isinstance(entry, dict):
-                    return {'error': f'Each {label} entry must be a dict'}, 400
 
     errors = []
     errors += Brand.validate_state(payload.get("brands", []))
@@ -550,22 +521,17 @@ def api_settings():
     errors += Room.validate_state(payload.get("rooms", []))
 
     if errors:
-            return {'status': 'error', 'errors': errors}, 400
+        return jsonify({"errors": errors}), 400
 
+    try:
         with db.session.begin():
-            brand_map = Brand.sync_from_state(payload.get('brands', []))
+            section_map = Area.sync_from_state(payload["sections"])
-            type_map = Item.sync_from_state(payload.get('types', []))
+            function_map = RoomFunction.sync_from_state(payload["functions"])
-            section_map = Area.sync_from_state(payload.get('sections', []))
+            Brand.sync_from_state(payload["brands"])
-            function_map = RoomFunction.sync_from_state(payload.get('functions', []))
+            Item.sync_from_state(payload["types"])
-
+            Room.sync_from_state(payload["rooms"], section_map, function_map)
-            Room.sync_from_state(
-                submitted_rooms=payload.get('rooms', []),
-                section_map=section_map,
-                function_map=function_map
-            )
-
-        return {'status': 'ok'}, 200
-    
     except Exception as e:
-        traceback.print_exc()
+        db.session.rollback()
-        return {'status': 'error', 'message': str(e)}, 500
+        return jsonify({"errors": [str(e)]}), 500
+
+    return jsonify({"message": "Settings updated successfully."}), 200

templates/layout.html

@@ -53,10 +53,7 @@
         </div>
     </nav>
     <main class="container-flex m-5">
-        <form method="POST" id="settingsForm" action="{{ url_for('main.' + endpoint, **(endpoint_args or {})) }}">
             {% block content %}{% endblock %}
-            <input type="hidden" name="formState" id="formStateField">
-        </form>
     </main>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"

templates/settings.html

@@ -3,12 +3,13 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-{{ breadcrumbs.breadcrumb_header(
+<form id="settingsForm">
-title=title,
+    {{ breadcrumbs.breadcrumb_header(
-submit_button=True
+        title=title,
-) }}
+        submit_button=True
+    ) }}
 
-<div class="container">
+    <div class="container">
         <div class="card mb-3">
             <div class="card-body">
                 <h5 class="card-title">
@@ -91,8 +92,8 @@ submit_button=True
                 </div>
             </div>
         </div>
-</div>
+    </div>
-<div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
+    <div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
@@ -134,7 +135,8 @@ submit_button=True
                 </div>
             </div>
         </div>
-</div>
+    </div>
+</form>
 {% endblock %}
 
 {% block script %}
@@ -219,15 +221,32 @@ submit_button=True
             });
         });
 
-        // Replace the whole submission logic with just JSON
         form.addEventListener('submit', (event) => {
-            event.preventDefault(); // 🚨 Stop form from leaving the building
+            event.preventDefault(); 
             try {
                 const state = buildFormState();
-                document.getElementById('formStateField').value = JSON.stringify(state);
+                fetch('/api/settings', {
-                form.submit(); // 🟢 Now it can go
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(state)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(data => {
+                            throw new Error(data.errors?.join("\n") || "Unknown error");
+                        });
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log("Sync result:", data);
+                })
+                .catch(err => {
+                    console.error("Submission error:", err);
+                });
             } catch (err) {
-                alert("Form submission failed: " + err.message);
                 console.error("Failed to build form state:", err);
             }
         });