fix(#18): Fix PDF preview

legalconsenthub-backend/src/main/resources/templates/application_form_template.html

@@ -70,13 +70,30 @@
             margin: 5px 0 15px;
         }
 
+        .form-subsection {
+            margin-left: 10px;
+            margin-bottom: 20px;
+        }
+
+        .form-subsection h4 {
+            font-size: 1.15em;
+            color: #555;
+            margin-bottom: 8px;
+        }
+
+        .form-subsection p.description {
+            font-style: italic;
+            color: #666;
+            margin: 5px 0 10px;
+        }
+
         .form-element {
             margin-bottom: 20px;
             margin-left: 20px;
         }
 
-        .form-element h4 {
+        .form-element h5 {
-            font-size: 1.1em;
+            font-size: 1.05em;
             margin-bottom: 5px;
         }
 
@@ -124,14 +141,52 @@
         <h3 th:text="${section.title}"></h3>
         <p class="description" th:if="${section.description}" th:text="${section.description}"></p>
         
-        <div th:each="elem : ${section.formElements}" class="form-element">
+        <div th:each="subsection : ${section.formElementSubSections}" class="form-subsection">
-            <h4 th:text="${elem.title}"></h4>
+            <h4 th:text="${subsection.title}"></h4>
-            <p class="description" th:if="${elem.description}" th:text="${elem.description}"></p>
+            <p class="description" th:if="${subsection.subtitle}" th:text="${subsection.subtitle}"></p>
+            
+            <div th:each="elem : ${subsection.formElements}" class="form-element">
+                <h5 th:text="${elem.title}"></h5>
+                <p class="description" th:if="${elem.description}" th:text="${elem.description}"></p>
 
-            <ul>
+                <div th:switch="${elem.type.name()}">
-                <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
+                    <div th:case="'TEXTFIELD'">
-            </ul>
+                        <div th:each="option : ${elem.options}">
-            <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+                            <p th:if="${!option.value.isEmpty()}" th:text="${option.value}"></p>
+                        </div>
+                        <p th:if="${elem.options.isEmpty() || elem.options.?[!value.isEmpty()].isEmpty()}">Keine Eingabe</p>
+                    </div>
+                    
+                    <div th:case="'TITLE_BODY_TEXTFIELDS'">
+                        <div th:each="option : ${elem.options}">
+                            <div th:if="${!option.value.isEmpty()}" th:with="parts=${#strings.arraySplit(option.value, '|||')}">
+                                <strong th:text="${parts.length > 0 ? parts[0] : ''}"></strong>
+                                <p th:text="${parts.length > 1 ? parts[1] : ''}"></p>
+                            </div>
+                        </div>
+                        <p th:if="${elem.options.isEmpty() || elem.options.?[!value.isEmpty()].isEmpty()}">Keine Eingabe</p>
+                    </div>
+                    
+                    <div th:case="'SELECT'">
+                        <ul>
+                            <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
+                        </ul>
+                        <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+                    </div>
+                    
+                    <div th:case="'RADIOBUTTON'">
+                        <p th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></p>
+                        <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+                    </div>
+                    
+                    <div th:case="*">
+                        <ul>
+                            <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
+                        </ul>
+                        <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>

legalconsenthub/app/composables/useApplicationFormNavigation.ts

@@ -32,7 +32,7 @@ export async function useApplicationFormNavigation(applicationFormId: string) {
     ],
     [
       {
-        label: 'PDF-Vorschau',
+        label: 'Vorschau',
         icon: 'i-lucide-file-text',
         to: `/api/application-forms/${applicationForm.value.id}/pdf`,
         target: '_blank'