From cff391ae9c764d7ea6d1c7af0d8c95769dc13d3c Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Sat, 9 Nov 2024 11:29:57 +0100
Subject: [PATCH] - implemented displaying table based submitted data related
 to criterion;

---
 src/assets/scss/components/evaluation.scss  | 12 +++++++-
 src/pages/DomandaEditPreInstructor/index.js | 34 +++++++++++++++------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/assets/scss/components/evaluation.scss b/src/assets/scss/components/evaluation.scss
index 77232b1..1498d2f 100644
--- a/src/assets/scss/components/evaluation.scss
+++ b/src/assets/scss/components/evaluation.scss
@@ -16,7 +16,7 @@
   flex-direction: column;
   gap: 7px;
   padding: 10px;
-  background-color: #efefef;
+  background-color: #f5f5f5;
   font-size: 14px;
 
   ul {
@@ -28,4 +28,14 @@
       color: var(--global-textColor);
     }
   }
+
+  table, th, td {
+    border: 1px solid var(--table-border-color);
+    border-collapse: collapse;
+    text-align: left;
+  }
+  
+  th, td {
+    padding: 3px;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/DomandaEditPreInstructor/index.js b/src/pages/DomandaEditPreInstructor/index.js
index 576f38d..3a6d384 100644
--- a/src/pages/DomandaEditPreInstructor/index.js
+++ b/src/pages/DomandaEditPreInstructor/index.js
@@ -196,15 +196,31 @@ const DomandaEditPreInstructor = () => {
     }
 
     const criteriaDataItem = (item) => {
-        const content = is(String, item.fieldValue)
-            ? item.fieldValue
-            : item.fieldValue && item.fieldValue.length
-                ? <ul>
-                    {item.fieldValue.map(o => <li key={o.id}>
-                        {o.filePath ? <a href={o.filePath}>{o.name}</a> : null}
-                    </li>)}
-                </ul>
-                : null;
+        let content = '';
+
+        if (is(String, item.fieldValue)) {
+            content = item.fieldValue;
+        } else if (item.fieldValue && item.fieldValue.length && !isNil(item.fieldValue[0].filePath)) {
+            content = <ul>
+                {item.fieldValue.map(o => <li key={o.id}>
+                    {o.filePath ? <a href={o.filePath}>{o.name}</a> : null}
+                </li>)}
+            </ul>;
+        } else if (item.fieldValue && item.fieldValue.length && isNil(item.fieldValue[0].filePath)) {
+            const th = Object.keys(item.fieldValue[0]);
+            content = <table>
+                <thead>
+                <tr>
+                    {th.map(v => <th key={v}>{v}</th>)}
+                </tr>
+                </thead>
+                <tbody>
+                {item.fieldValue.map((o, i) => <tr key={i}>
+                    {Object.values(o).map(v => <td key={v}>{v}</td>)}
+                </tr>)}
+                </tbody>
+            </table>;
+        }
 
         return <div key={item.id} className="criterionRelatedData__item">
             <strong>{item.fieldLabel}</strong>