Feilliste vises nå i et card

statisticsnorway · Nov 29, 2022 · 2a2a296 · 2a2a296
1 parent c29e042
commit 2a2a296
Showing 1 changed file with 31 additions and 22 deletions.
diff --git a/web/src/main/vite-project/src/components/ReportView.tsx b/web/src/main/vite-project/src/components/ReportView.tsx
@@ -123,28 +123,37 @@ export const ReportView = (props: {
         </ul>
     </div>
 
-    const renderErrorDetailsTable = () => <div className="table-responsive mt-4">
-        <table className="table table-striped table-sm">
-            <thead>
-            <tr>
-                <th scope="col">Feilkode</th>
-                <th scope="col">Journalnummer</th>
-                <th scope="col">Saksbehandler</th>
-                <th scope="col">Kontrolltype</th>
-                <th scope="col">Kontrolltekst</th>
-            </tr>
-            </thead>
-            <tbody>
-            {fileReport.feil.map((reportEntry, index) =>
-                <tr key={index}>
-                    <th scope="row">{renderErrorLevel(reportEntry.feilkode)}</th>
-                    <td>{reportEntry.journalnummer}</td>
-                    <td>{reportEntry.saksbehandler}</td>
-                    <td>{reportEntry.kontrollnummer}</td>
-                    <td>{reportEntry.kontrolltekst}</td>
-                </tr>)}
-            </tbody>
-        </table>
+    const renderErrorDetailsTable = () => <div className="card mt-3">
+        <div className="card-body">
+            <h5 className="card-title mb-0">Feilliste</h5>
+        </div>
+        <ul className="list-group list-group-flush">
+            <li className="list-group-item">
+                <div className="table-responsive">
+                    <table className="table table-striped table-sm">
+                        <thead>
+                        <tr>
+                            <th scope="col">Feilkode</th>
+                            <th scope="col">Journalnummer</th>
+                            <th scope="col">Saksbehandler</th>
+                            <th scope="col">Kontrolltype</th>
+                            <th scope="col">Kontrolltekst</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {fileReport.feil.map((reportEntry, index) =>
+                            <tr key={index}>
+                                <th scope="row">{renderErrorLevel(reportEntry.feilkode)}</th>
+                                <td>{reportEntry.journalnummer}</td>
+                                <td>{reportEntry.saksbehandler}</td>
+                                <td>{reportEntry.kontrollnummer}</td>
+                                <td>{reportEntry.kontrolltekst}</td>
+                            </tr>)}
+                        </tbody>
+                    </table>
+                </div>
+            </li>
+        </ul>
     </div>
 
     return <>