Add dynamic table display for claims

wwWallet · Jun 28, 2024 · 06273f1 · 06273f1
1 parent 042103a
commit 06273f1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/views/verifier/detailed-presentation.pug b/views/verifier/detailed-presentation.pug
@@ -15,10 +15,20 @@ block layout-content
 
 				h3 Requested claims extracted from credentials
 
-				// Text area to display claims
-				textarea#json-textarea.wide
-					//- Display the 'credentialPayloads' JSON object
-					| #{JSON.stringify(presentationClaims, null, 2)}
+				.claims-tables
+					each claimType in Object.keys(presentationClaims)
+						h4= claimType
+						.table-container(style="overflow-x: auto;")
+							table
+								thead
+									tr
+										th Name
+										th Value
+								tbody
+									each claim in presentationClaims[claimType]
+										tr
+											td= claim.name
+											td= claim.value
 
 				h3 Credentials
 

diff --git a/views/verifier/presentations.pug b/views/verifier/presentations.pug
@@ -10,8 +10,20 @@ block layout-content
 					p
 						.card-text Date: #{vp.date}
 						.card-text Claims:
-						textarea#json-textarea.wide
-							| #{JSON.stringify(vp.claims, null, 2)}
+
+						.claims-tables(style="align-items: start;")
+							each claimType in Object.keys(vp.claims)
+								.table-container(style="overflow-x: auto;")
+									table
+										thead
+											tr
+												th Name
+												th Value
+										tbody
+											each claim in vp.claims[claimType]
+												tr
+													td= claim.name
+													td= claim.value
 						.card-text Holder Info: #{vp.holderInfo}
 					.card-buttons
 						button.btn.btn-primary(onclick=`window.location.href = "/verifier-panel/presentation/${vp.id}"`) Inspect details