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

This commit is contained in:
Yaro Kasear 2025-06-25 15:42:52 -05:00
parent d7e38cb8da
commit 5a3176cad1
3 changed files with 201 additions and 219 deletions

View file

@ -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,
endpoint='index'
datasets=datasets
)
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',
endpoint='list_inventory'
entry_route = 'inventory_item'
)
@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,
endpoint='inventory_index'
listing=listing
)
@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,
endpoint='inventory_item',
endpoint_args={'id': item.id}
types=types
)
@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',
endpoint='list_users'
entry_route = 'user'
)
@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!",
endpoint='user',
endpoint_args={'id': -1}
message=f"User with id {id} not found!"
)
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],
endpoint='user',
endpoint_args={'id': user.id}
worklog_rows=[{"id": log.id, "cells": [fn(log) for fn in filtered_worklog_headers.values()]} for log in worklog]
)
@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',
endpoint='list_worklog'
entry_route='worklog_entry'
)
@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!",
endpoint='worklog_entry',
endpoint_args={'id': -1}
message=f"The work log with ID {id} is not found!"
)
return render_template(
@ -384,9 +371,7 @@ def worklog_entry(id):
log=log,
users=users,
items=items,
form_fields=worklog_form_fields,
endpoint='worklog_entry',
endpoint_args={'id': log.id}
form_fields=worklog_form_fields
)
@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],
endpoint='settings'
rooms=[r.serialize() for r in rooms]
)
@main.route('/api/settings', methods=['POST'])
@main.route("/api/settings", methods=["POST"])
def api_settings():
try:
payload = request.get_json()
if not payload:
return {'error': 'No JSON payload'}, 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
payload = request.get_json(force=True)
except Exception as e:
return jsonify({"error": "Invalid JSON"}), 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', []))
type_map = Item.sync_from_state(payload.get('types', []))
section_map = Area.sync_from_state(payload.get('sections', []))
function_map = RoomFunction.sync_from_state(payload.get('functions', []))
Room.sync_from_state(
submitted_rooms=payload.get('rooms', []),
section_map=section_map,
function_map=function_map
)
return {'status': 'ok'}, 200
section_map = Area.sync_from_state(payload["sections"])
function_map = RoomFunction.sync_from_state(payload["functions"])
Brand.sync_from_state(payload["brands"])
Item.sync_from_state(payload["types"])
Room.sync_from_state(payload["rooms"], section_map, function_map)
except Exception as e:
traceback.print_exc()
return {'status': 'error', 'message': str(e)}, 500
db.session.rollback()
return jsonify({"errors": [str(e)]}), 500
return jsonify({"message": "Settings updated successfully."}), 200

View file

@ -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"

View file

@ -3,12 +3,13 @@
{% block title %}{{ title }}{% endblock %}
{% block content %}
{{ breadcrumbs.breadcrumb_header(
title=title,
submit_button=True
) }}
<form id="settingsForm">
{{ breadcrumbs.breadcrumb_header(
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 class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
</div>
<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);
form.submit(); // 🟢 Now it can go
fetch('/api/settings', {
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);
}
});