From 123efb75240a61bd2eb8cf730ad0a5bd08178621 Mon Sep 17 00:00:00 2001
From: Viet Anh Nguyen <nv.anh5@samsung.com>
Date: Tue, 12 Mar 2024 16:32:04 +0700
Subject: [PATCH] Fix displaying for list items

---
 cope2n-fe/src/pages/inference/index.tsx | 71 +++++++++++++++++---
 cope2n-fe/src/pages/reviews/index.tsx   | 87 +++++++++++++++++++++++--
 2 files changed, 144 insertions(+), 14 deletions(-)

diff --git a/cope2n-fe/src/pages/inference/index.tsx b/cope2n-fe/src/pages/inference/index.tsx
index 45c5fcd..0cd53cb 100644
--- a/cope2n-fe/src/pages/inference/index.tsx
+++ b/cope2n-fe/src/pages/inference/index.tsx
@@ -117,12 +117,6 @@ const EditableCell: React.FC<EditableCellProps> = ({
       <Form.Item
         style={{ margin: 0 }}
         name={dataIndex}
-        rules={[
-          {
-            required: true,
-            message: `${title} is required.`,
-          },
-        ]}
       >
         <Input ref={inputRef} onPressEnter={save} onBlur={save} />
       </Form.Item>
@@ -333,7 +327,7 @@ const InferencePage = () => {
   };
 
   const updateRevisedData = async (newRevisedData: any) => {
-    const requestID = newRevisedData.request_id;
+    const requestID = currentRequest.RequestID;
     const token = localStorage.getItem('sbt-token') || '';
     await fetch(`${baseURL}/ctel/request/${requestID}/`, {
       method: 'POST',
@@ -376,9 +370,32 @@ const InferencePage = () => {
     const newData = [...dataSource];
     const newRevisedData = {};
     for (let i = 0; i < newData.length; i++) {
+      if (newData[i].revised === "<empty>") {
+        newData[i].revised = null;
+      }
+      if (typeof(newData[i].revised) === "string") {
+        newData[i].revised = newData[i].revised.trim();
+      }
+      if (newData[i].revised === "" || newData[i].revised === null || newData[i].revised === undefined) {
+        newData[i].revised = null;
+      }
+      if ((newData[i].key === "imei_number" || newData[i].key === "purchase_date") && typeof(newData[i].revised) === "string") {
+        // Convert to list
+        newData[i].revised = new Array(newData[i].revised.split(","));
+      }
+      if (Array.isArray(newData[i].revised)) {
+        // Trim all empty strings
+        for (let j = 0; j < newData[i].revised.length; j++) {
+          if (typeof(newData[i].revised[j]) === "string") {
+            newData[i].revised[j] = newData[i].revised[j].trim();
+          }
+          if (newData[i].revised[j] === "<empty>") {
+            newData[i].revised[j] = null;
+          }
+        }
+      }
       newRevisedData[newData[i].key] = newData[i].revised;
     }
-    console.log(currentRequest)
     updateRevisedData(newRevisedData).then(() => {
       // "[Is Reviewed]" => true
       setCurrentRequest({
@@ -400,6 +417,25 @@ const InferencePage = () => {
       title: 'Predicted',
       dataIndex: 'predicted',
       key: 'predicted',
+      render: (text) => {
+        if (!text) return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+        const displayedContent = text;
+        if (typeof(displayedContent) === "string") {
+          return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+        } else if (typeof(displayedContent) === "object") {
+          if (displayedContent.length === 0) {
+            return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+          }
+          // Set all empty values to "<empty>"
+          for (const key in displayedContent) {
+            if (!displayedContent[key]) {
+              displayedContent[key] = "<empty>";
+            }
+          }
+          return <span style={{ color: '#000000' }}>{displayedContent.join(", ")}</span>;
+        }
+        return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+      },
     },
     {
       title: (<div style={{
@@ -426,6 +462,25 @@ const InferencePage = () => {
       dataIndex: 'revised',
       key: 'revised',
       editable: ENABLE_REVIEW,
+      render: (text) => {
+        if (!text) return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+        const displayedContent = text;
+        if (typeof(displayedContent) === "string") {
+          return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+        } else if (typeof(displayedContent) === "object") {
+          if (displayedContent.length === 0) {
+            return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+          }
+          // Set all empty values to "<empty>"
+          for (const key in displayedContent) {
+            if (!displayedContent[key]) {
+              displayedContent[key] = "<empty>";
+            }
+          }
+          return <span style={{ color: '#000000' }}>{displayedContent.join(", ")}</span>;
+        }
+        return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+      },
     },
   ];
 
diff --git a/cope2n-fe/src/pages/reviews/index.tsx b/cope2n-fe/src/pages/reviews/index.tsx
index d158104..6f71652 100644
--- a/cope2n-fe/src/pages/reviews/index.tsx
+++ b/cope2n-fe/src/pages/reviews/index.tsx
@@ -430,9 +430,32 @@ const ReviewPage = () => {
     const newData = [...dataSource];
     const newRevisedData = {};
     for (let i = 0; i < newData.length; i++) {
+      if (newData[i].revised === "<empty>") {
+        newData[i].revised = null;
+      }
+      if (typeof(newData[i].revised) === "string") {
+        newData[i].revised = newData[i].revised.trim();
+      }
+      if (newData[i].revised === "" || newData[i].revised === null || newData[i].revised === undefined) {
+        newData[i].revised = null;
+      }
+      if ((newData[i].key === "imei_number" || newData[i].key === "purchase_date") && typeof(newData[i].revised) === "string") {
+        // Convert to list
+        newData[i].revised = new Array(newData[i].revised.split(","));
+      }
+      if (Array.isArray(newData[i].revised)) {
+        // Trim all empty strings
+        for (let j = 0; j < newData[i].revised.length; j++) {
+          if (typeof(newData[i].revised[j]) === "string") {
+            newData[i].revised[j] = newData[i].revised[j].trim();
+          }
+          if (newData[i].revised[j] === "<empty>") {
+            newData[i].revised[j] = null;
+          }
+        }
+      }
       newRevisedData[newData[i].key] = newData[i].revised;
     }
-    console.log(currentRequest)
     updateRevisedData(newRevisedData).then(() => {
       // "[Is Reviewed]" => true
       setCurrentRequest({
@@ -443,6 +466,7 @@ const ReviewPage = () => {
   };
 
 
+
   const defaultColumns = [
     {
       title: 'Key',
@@ -454,11 +478,49 @@ const ReviewPage = () => {
       title: 'Predicted',
       dataIndex: 'predicted',
       key: 'predicted',
+      render: (text) => {
+        if (!text) return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+        const displayedContent = text;
+        if (typeof(displayedContent) === "string") {
+          return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+        } else if (typeof(displayedContent) === "object") {
+          if (displayedContent.length === 0) {
+            return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+          }
+          // Set all empty values to "<empty>"
+          for (const key in displayedContent) {
+            if (!displayedContent[key]) {
+              displayedContent[key] = "<empty>";
+            }
+          }
+          return <span style={{ color: '#000000' }}>{displayedContent.join(", ")}</span>;
+        }
+        return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+      },
     },
     {
       title: 'Submitted',
       dataIndex: 'submitted',
       key: 'submitted',
+      render: (text) => {
+        if (!text) return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+        const displayedContent = text;
+        if (typeof(displayedContent) === "string") {
+          return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+        } else if (typeof(displayedContent) === "object") {
+          if (displayedContent.length === 0) {
+            return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+          }
+          // Set all empty values to "<empty>"
+          for (const key in displayedContent) {
+            if (!displayedContent[key]) {
+              displayedContent[key] = "<empty>";
+            }
+          }
+          return <span style={{ color: '#000000' }}>{displayedContent.join(", ")}</span>;
+        }
+        return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+      },
     },
     {
       title: (<div style={{
@@ -499,11 +561,24 @@ const ReviewPage = () => {
       dataIndex: 'revised',
       key: 'revised',
       editable: true,
-      render: (text, record) => {
-        return <div style={{
-          color: '#000',
-          fontWeight: 'bold',
-        }}>{text}</div>;
+      render: (text) => {
+        if (!text) return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+        const displayedContent = text;
+        if (typeof(displayedContent) === "string") {
+          return <span style={{ color: '#000000' }}>{displayedContent}</span>;
+        } else if (typeof(displayedContent) === "object") {
+          if (displayedContent.length === 0) {
+            return <span style={{ color: '#888' }}>{"<empty>"}</span>;
+          }
+          // Set all empty values to "<empty>"
+          for (const key in displayedContent) {
+            if (!displayedContent[key]) {
+              displayedContent[key] = "<empty>";
+            }
+          }
+          return <span style={{ color: '#000000' }}>{displayedContent.join(", ")}</span>;
+        }
+        return <span style={{ color: '#000000' }}>{displayedContent}</span>;
       },
     },
   ];