[yagin] change style form review2

cope2n-fe/src/pages/reviews2/DocumentCompareInfo.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, Descriptions, Input } from 'antd';
+import type { DescriptionsProps } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { FEEDBACK_RESULT, PREDICTED_RESULT, REVIEWED_RESULT } from './const';
+
+const DocumentCompareInfo = ({ key, data, selectedFileDataSource, updateRevisedByFeedback, handleUpdateFileInField, shouldRevised, disabledInput }) => {
+    const items: DescriptionsProps['items'] = [
+        {
+            key: selectedFileDataSource[data]?.[FEEDBACK_RESULT] || '1',
+            label: 'Feedback',
+            children: selectedFileDataSource[data]?.[FEEDBACK_RESULT],
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+        {
+            key: selectedFileDataSource[data]?.[PREDICTED_RESULT] || '2',
+            label: 'Predicted',
+            children: selectedFileDataSource[data]?.[PREDICTED_RESULT],
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+        {
+            key: selectedFileDataSource[data]?.[REVIEWED_RESULT] || '3',
+            label: 'Revised',
+            children: <Input
+                style={{ background: shouldRevised ? 'yellow' : '' }}
+                value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
+                size='small'
+                onChange={(e) =>
+                    handleUpdateFileInField(data, e.target.value)
+                }
+                variant="borderless"
+                disabled={disabledInput === undefined || disabledInput === 0}
+            />,
+            labelStyle: { color: '#333', padding: '4px 16px' },
+            contentStyle: { padding: '4px 16px' },
+            span: 3
+        },
+    ];
+    return (
+        <div style={{ margin: '0 0 8px' }} className='file-input-group' key={key}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    margin: '0 0 4px',
+                }}
+            >
+                <p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
+                <Button
+                    shape='round'
+                    type='primary'
+                    ghost
+                    icon={<CopyOutlined />}
+                    size='small'
+                    onClick={() => updateRevisedByFeedback(data)}
+                    disabled={disabledInput === undefined || disabledInput === 0}
+                />
+            </div>
+            <Descriptions bordered items={items} layout="horizontal" size='small' contentStyle={{ height: '13px' }} />
+        </div>
+    )
+}
+
+export default DocumentCompareInfo;

cope2n-fe/src/pages/reviews2/DocumentHeadInfo.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Descriptions } from 'antd';
+import type { DescriptionsProps } from 'antd';
+
+const DocumentHeadInfo = ({ currentRequest }) => {
+    const items: DescriptionsProps['items'] = [
+        {
+            key: '1',
+            label: 'Request ID',
+            children: currentRequest?.RequestID,
+            span: 2,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '2',
+            label: 'Redemption ID',
+            children: currentRequest?.RedemptionID,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '3',
+            label: 'Raw accuracy',
+            children: currentRequest?.raw_accuracy,
+            span: 2,
+            labelStyle: { color: '#333', width: '200px' }
+        },
+        {
+            key: '4',
+            label: 'Processing time',
+            children: currentRequest?.['Server Processing Time (ms)'],
+            labelStyle: { color: '#333', width: '200px' }
+        }
+    ];
+    return (
+        <Descriptions bordered items={items} size="small" />
+    )
+}
+
+export default DocumentHeadInfo;

cope2n-fe/src/pages/reviews2/index.tsx

@@ -3,7 +3,6 @@ import {
   ArrowRightOutlined,
   CheckCircleOutlined,
   ClockCircleFilled,
-  CopyOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
 } from '@ant-design/icons';
@@ -55,6 +54,8 @@ import {
 import FileCard from './FileCard';
 import RecentRequest from './RecentRequest';
 import './style.css';
+import DocumentHeadInfo from './DocumentHeadInfo';
+import DocumentCompareInfo from './DocumentCompareInfo';
 
 const ReviewPage = () => {
   const [loading, setLoading] = useState(false);
@@ -500,42 +501,10 @@ const ReviewPage = () => {
             >
               {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
             </Button>
-            {totalRequests && (
-              <div
-                style={{
-                  flexGrow: 1,
-                  display: 'grid',
-                  gridTemplateColumns: '1fr 1fr 1fr',
-                  marginLeft: '16px',
-                }}
-              >
-                <div style={{ gridColumn: 'span 2 / span 2' }}>
-                  <b>Request ID: &nbsp;</b>
-                  {currentRequest?.RequestID}
-                </div>{' '}
-                <div>
-                  <b>Created at: &nbsp;</b>
-                  {currentRequest?.created_at}
-                </div>{' '}
-                <div>
-                  <b>Request time: &nbsp;</b>
-                  {currentRequest?.['Client Request Time (ms)']}
-                </div>{' '}
-                <div style={{ gridColumn: 'span 2 / span 2' }}>
-                  <b>Redemption ID: &nbsp;</b>
-                  {currentRequest?.RedemptionID}
-                </div>{' '}
-                <div>
-                  <b>Raw accuracy: &nbsp;</b>
-                  {currentRequest?.raw_accuracy}
-                </div>{' '}
-                <div style={{ gridColumn: 'span 2 / span 2' }}>
-                  <b>Processing time: &nbsp;</b>
-                  {currentRequest?.['Server Processing Time (ms)']}
-                </div>{' '}
-              </div>
-            )}
           </div>
+          {totalRequests && (
+            <DocumentHeadInfo currentRequest={currentRequest} />
+          )}
           {totalRequests > 0 && (
             <div
               style={{
@@ -796,47 +765,14 @@ const ReviewPage = () => {
                 }
               } catch (error) { }
               return (
-                <div style={{ margin: '0 0 8px' }} className='file-input-group' key={data}>
+                <DocumentCompareInfo key={data}
-                  <div
+                  data={data}
-                    style={{
+                  selectedFileDataSource={selectedFileDataSource}
-                      display: 'flex',
+                  updateRevisedByFeedback={updateRevisedByFeedback}
-                      justifyContent: 'space-between',
+                  handleUpdateFileInField={handleUpdateFileInField}
-                      alignItems: 'center',
+                  shouldRevised={shouldRevised}
-                      margin: '0 0 4px',
+                  disabledInput = {currentRequest?.Files?.length}
-                    }}
+                />
-                  >
-                    <p style={{ fontWeight: 'bold', margin: 0 }}>{data}</p>
-                    <Button
-                      shape='round'
-                      type='primary'
-                      ghost
-                      icon={<CopyOutlined />}
-                      size='small'
-                      onClick={() => updateRevisedByFeedback(data)}
-                    />
-                  </div>
-                  <Input
-                    addonBefore='Feedback'
-                    size='small'
-                    readOnly
-                    value={selectedFileDataSource[data]?.[FEEDBACK_RESULT]}
-                  />
-                  <Input
-                    addonBefore='Predicted'
-                    readOnly
-                    size='small'
-                    value={selectedFileDataSource[data]?.[PREDICTED_RESULT]}
-                  />
-                  <Input
-                    addonBefore='Revised'
-                    style={{ background: shouldRevised ? 'yellow' : '' }}
-                    size='small'
-                    value={selectedFileDataSource[data]?.[REVIEWED_RESULT]}
-                    onChange={(e) =>
-                      handleUpdateFileInField(data, e.target.value)
-                    }
-                  />
-                </div>
               );
             })}
             <b>{t`Bad image reason:`}</b>