Skip to content

Restructure report form and replace police field with description field #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AntonAhlqvist merged 1 commit into from
Apr 28, 2026
Merged

Restructure report form and replace police field with description field #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/main/resources/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,10 @@ textarea {
gap: 8px;
}

.form-field.compact {
margin-bottom: 1.25rem;
}

.form-field label {
font-size: 0.98rem;
font-weight: 700;
Expand Down
53 changes: 28 additions & 25 deletions src/main/resources/templates/reports.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,35 +94,38 @@

<div class="report-column">
<section class="card">

<div class="card-header">
<div>
<span class="card-kicker">Ärende</span>
<h2>K-nummer & Polis</h2>
<h2>Rapportera händelse</h2>
</div>
</div>

<div class="field-grid">
<div class="form-field">
<label for="caseNumber">K-nummer</label>
<input id="caseNumber"
type="text"
value="Genereras automatiskt"
readonly>
</div>
<div class="form-field">
<label for="policeOfficer">Polis</label>
<input id="policeOfficer"
th:field="*{name}"
type="text"
placeholder="Ange polis"
th:classappend="${#fields.hasErrors('name')} ? 'input-error'">
<div class="form-field compact">
<label for="caseNumber" class="subtle-label">K-nummer</label>
<input id="caseNumber"
type="text"
value="Genereras automatiskt"
readonly
class="input-muted">
</div>

<div th:if="${#fields.hasErrors('name')}"
th:errors="*{name}"
class="error-text">
</div>
<div class="form-field">
<label for="name">Beskriv ärende</label>
<textarea id="name"
th:field="*{name}"
rows="6"
placeholder="Beskriv ärendet i fritext..."
th:classappend="${#fields.hasErrors('name')} ? 'input-error'">
</textarea>

<div th:if="${#fields.hasErrors('name')}"
th:errors="*{name}"
class="error-text">
Comment on lines +115 to +125

@coderabbitai coderabbitai Bot Apr 28, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Validation error text is now semantically mismatched for the description field.

This field is presented as “Beskriv ärende”, but th:errors="*{name}" will currently render the backend message “Polis måste anges” from CreateReport.name, which is confusing for users.

💡 Suggested follow-up change (backend DTO message) 
--- a/src/main/java/org/example/crimearchive/dto/CreateReport.java
+++ b/src/main/java/org/example/crimearchive/dto/CreateReport.java
@@
-    `@NotBlank`(message = "Polis måste anges")
+    `@NotBlank`(message = "Ärendebeskrivning måste anges")
     String name,
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/main/resources/templates/reports.html` around lines 115 - 125, The
template renders validation errors for the wrong property: the textarea labeled
"Beskriv ärende" is bound to th:field="*{name}" but the error message shown via
th:errors="*{name}" comes from CreateReport.name ("Polis måste anges"), which is
semantically incorrect; update the template to bind and show errors for the
description field instead (change th:field and th:errors to the correct property
such as description or align the field name to the DTO), or alternatively adjust
the backend DTO/CreateReport property and its message so the "name" field
semantics match the label — ensure the textarea id/label, th:field and th:errors
all reference the same property (e.g., description) and that
CreateReport.description contains the proper validation message.

</div>
</div>

</section>

<section class="card">
Expand Down Expand Up @@ -201,11 +204,11 @@ <h2>Brottsplats</h2>
</div>

<div class="form-field">
<label for="crimeScene">Brottsplats</label>
<label for="crimeScene">Adress eller plats</label>
<input id="crimeScene"
th:field="*{event}"
type="text"
placeholder="Ange brottsplats"
placeholder="Ange adress, område eller plats"
th:classappend="${#fields.hasErrors('event')} ? 'input-error'">

<div th:if="${#fields.hasErrors('event')}"
Expand Down Expand Up @@ -249,9 +252,9 @@ <h2>Brottsplats</h2>
evidenceList.innerHTML = "";

[
{ filesArray: selectedFiles, label: "Fil", type: "file" },
{ filesArray: selectedImages, label: "Bild", type: "image" }
].forEach(({ filesArray, label, type }) => {
{filesArray: selectedFiles, label: "Fil", type: "file"},
{filesArray: selectedImages, label: "Bild", type: "image"}
].forEach(({filesArray, label, type}) => {
filesArray.forEach((file, index) => {
const row = document.createElement("div");
row.className = "evidence-row";
Expand Down