From efd2da3a8282c69dded89227624a3011ffb785d6 Mon Sep 17 00:00:00 2001
From: Viet Anh Nguyen <nv.anh5@samsung.com>
Date: Wed, 21 Feb 2024 19:01:19 +0700
Subject: [PATCH] Show data fields

---
 cope2n-fe/src/pages/reviews/index.tsx | 131 +++++++++++++-------------
 1 file changed, 63 insertions(+), 68 deletions(-)

diff --git a/cope2n-fe/src/pages/reviews/index.tsx b/cope2n-fe/src/pages/reviews/index.tsx
index 491d5a3..74d1315 100644
--- a/cope2n-fe/src/pages/reviews/index.tsx
+++ b/cope2n-fe/src/pages/reviews/index.tsx
@@ -40,49 +40,6 @@ const StyledEditOutlined = styled(EditOutlined)`
   }
 `;
 
-const dataSource = [
-  {
-    key: 'retailer_name',
-    value: 'Mike',
-  },
-  {
-    key: '2',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-  {
-    key: '3',
-    value: 'Mike',
-  },
-];
-
 const columns = [
   {
     title: 'Key',
@@ -101,18 +58,18 @@ const columns = [
   },
   {
     title: 'Predicted',
-    dataIndex: 'value',
-    key: 'value',
+    dataIndex: 'predicted',
+    key: 'predicted',
   },
   {
     title: 'Submitted',
-    dataIndex: 'value',
-    key: 'value',
+    dataIndex: 'submitted',
+    key: 'submitted',
   },
   {
     title: 'Revised',
-    dataIndex: 'value',
-    key: 'value',
+    dataIndex: 'revised',
+    key: 'revised',
     render: (text, record) => {
       return (
         <div style={{
@@ -120,11 +77,16 @@ const columns = [
           lineHeight: '2',
         }}>
           {text}
-          <StyledEditOutlined />
         </div>
       )
     },
-
+  },
+  {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    render: () => <a><StyledEditOutlined /></a>,
   },
 ];
 
@@ -161,7 +123,7 @@ const FileCard = ({ file, isSelected, onClick }) => {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}>
-          {fileName? fileName.substring(0, 10) : fileName }
+          {fileName ? fileName.substring(0, 25).replace("temp_", "") : fileName}
         </span>
       </div>
       <div style={{
@@ -177,6 +139,9 @@ const FileCard = ({ file, isSelected, onClick }) => {
         </Button>
         <Button style={{
           margin: '4px 2px',
+        }} onClick={() => {
+          const downloadUrl = file["File URL"];
+          window.open(downloadUrl, '_blank');
         }}>
           <DownloadOutlined />
         </Button>
@@ -186,9 +151,9 @@ const FileCard = ({ file, isSelected, onClick }) => {
 
 };
 
-const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page=1, page_size=20) => {
-  const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0].format('YYYY-MM-DD'): '';
-  const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1].format('YYYY-MM-DD'): '';
+const fetchAllRequests = async (filterDateRange, filterSubsidiaries, filterReviewState, filterIncludeTests, page = 1, page_size = 20) => {
+  const startDate = (filterDateRange && filterDateRange[0]) ? filterDateRange[0].format('YYYY-MM-DD') : '';
+  const endDate = (filterDateRange && filterDateRange[1]) ? filterDateRange[1].format('YYYY-MM-DD') : '';
   let filterStr = "";
   filterStr += `page=${page}&page_size=${page_size}&`;
   if (filterSubsidiaries) {
@@ -238,7 +203,7 @@ const ReviewPage = () => {
 
   // Default date range: 1 month ago to today
   const [filterDateRange, setFilterDateRange] = useState([
-    moment().subtract(1,'month'),
+    moment().subtract(1, 'month'),
     moment(),
   ]);
 
@@ -251,6 +216,31 @@ const ReviewPage = () => {
   const [hasNextRequest, setHasNextRequest] = useState(true);
   const [totalPages, setTotalPages] = useState(0);
 
+  // purchase_date: "2024-01-20",
+  // retailername: "Test Retailer",
+  // sold_to_party: "Test Party",
+  const dataSource = [
+    // {
+    //   key: "imei_number",
+    //   predicted: "352271450941944",
+    //   submitted: "352271450941944",
+    //   revised: "352271450941944",
+    // },
+  ];
+
+  const predicted = (currentRequest && currentRequest["Reviewed Result"]) ? currentRequest["Reviewed Result"] : {};
+  const submitted = (currentRequest && currentRequest["Feedback Result"]) ? currentRequest["Feedback Result"] : {};
+  const revised = (currentRequest && currentRequest["Reviewed Result"]) ? currentRequest["Reviewed Result"] : {};
+  const keys = Object.keys(predicted);
+  for (let i = 0; i < keys.length; i++) {
+    let instance = {};
+    instance["key"] = keys[i];
+    instance["predicted"] = predicted[keys[i]];
+    instance["submitted"] = submitted[keys[i]];
+    instance["revised"] = revised[keys[i]];
+    dataSource.push(instance);
+  }
+
   const gotoNextRequest = () => {
     const nextRequestIndex = currentRequestIndex + 1;
     setCurrentRequestIndex(nextRequestIndex);
@@ -328,12 +318,15 @@ const ReviewPage = () => {
     } : {
       height: '100%',
     }}>
-      <Button onClick={() => {
-        setFullscreen(!fullscreen);
-      }}>
-        {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-        {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
-      </Button>
+      <div>
+        <Button onClick={() => {
+          setFullscreen(!fullscreen);
+        }}>
+          {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+        </Button>
+        &nbsp;&nbsp;&nbsp;<b>Request ID:</b> {currentRequest?.RequestID}
+      </div>
       <Layout style={{
         overflow: 'auto',
         width: '100%',
@@ -409,7 +402,7 @@ const ReviewPage = () => {
           </Space.Compact>
           <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
             <div>
-              <Button type="default"
+              <Button type="default" style={{height: 38}}
                 disabled={currentRequestIndex === 1}
                 onClick={() => {
                   gotoPreviousRequest();
@@ -418,7 +411,7 @@ const ReviewPage = () => {
                 <ArrowLeftOutlined />
                 Previous
               </Button>
-              <Button type="default"
+              <Button type="default" style={{height: 38}}
                 disabled={!hasNextRequest}
                 onClick={() => {
                   if (!hasNextRequest) {
@@ -430,14 +423,16 @@ const ReviewPage = () => {
                 Next
                 <ArrowRightOutlined />
               </Button>
-              <Button type="default">
-                Go to
-              </Button>
+              <Input size='middle' addonBefore="To" style={{ marginBottom: "4px", marginLeft: "4px", width: 180 }} defaultValue={currentRequestIndex} addonAfter={
+                <Button type="default">
+                  Go to
+                </Button>
+              } />
             </div>
           </div>
           <h2 style={{ margin: "20px 0 10px 0" }}>{totalPages ? ("Request: " + currentRequestIndex + "/" + totalPages) : "No Request. Adjust your search criteria to see more results."}</h2>
           <Input size='small' addonBefore="Request ID" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.RequestID : ""} />
-          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : "<Unknown>"} />
+          <Input size='small' addonBefore="Redemption" style={{ marginBottom: "4px" }} readOnly value={currentRequest?.RedemptionID ? currentRequest.RedemptionID : ""} />
           <Input size='small' addonBefore="Uploaded date" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest.created_at : ""} />
           <Input size='small' addonBefore="Request time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Client Request Time (ms)"] : ""} />
           <Input size='small' addonBefore="Processing time" style={{ marginBottom: "4px" }} readOnly value={currentRequest ? currentRequest["Server Processing Time (ms)"] : ""} />