diff --git a/cope2n-fe/src/pages/reviews2/const.ts b/cope2n-fe/src/pages/reviews2/const.ts new file mode 100644 index 0000000..e4b1f1d --- /dev/null +++ b/cope2n-fe/src/pages/reviews2/const.ts @@ -0,0 +1,49 @@ +import { t } from "@lingui/macro"; + +export const counter_measure_map = { + invalid_image: 'Remove this image from the evaluation report', + missing_information: 'Remove this image from the evaluation report', + too_blurry_text: 'Remove this image from the evaluation report', + too_small_text: 'Remove this image from the evaluation report', + ocr_cannot_extract: 'Improve OCR', + wrong_feedback: 'Update revised result and re-calculate accuracy', + handwritten: 'Remove this image from the evaluation report', + other: 'other', +}; + +export const REASON_BAD_QUALITY = [ + { value: 'invalid_image', label: t`Invalid image` }, + { + value: 'missing_information', + label: t`Missing information`, + }, + { value: 'too_blurry_text', label: t`Too blurry text` }, + { value: 'too_small_text', label: t`Too small text` }, + { value: 'handwritten', label: t`Handwritten` }, + { value: 'wrong_feedback', label: t`Wrong Feedback` }, + { value: 'ocr_cannot_extract', label: t`Ocr cannot extract` }, + { value: 'other', label: t`Other` }, +] + +export const SOLUTION_BAD_QUALITY =[ + { + value: 'Remove this image from the evaluation report', + label: t`Remove this image from the evaluation report`, + }, + { value: 'Improve OCR', label: t`Improve OCR` }, + { + value: 'Update revised result and re-calculate accuracy', + label: t`Update revised result and re-calculate accuracy`, + }, + { value: 'other', label: t`Other` }, +] + +export const SUBSIDIARIES = [ + { value: 'SEAO', label: 'SEAO' }, + { value: 'SEAU', label: 'SEAU' }, + { value: 'SESP', label: 'SESP' }, + { value: 'SME', label: 'SME' }, + { value: 'SEPCO', label: 'SEPCO' }, + { value: 'TSE', label: 'TSE' }, + { value: 'SEIN', label: 'SEIN' }, +] \ No newline at end of file diff --git a/cope2n-fe/src/pages/reviews2/consts.ts b/cope2n-fe/src/pages/reviews2/consts.ts deleted file mode 100644 index 6f5ddcf..0000000 --- a/cope2n-fe/src/pages/reviews2/consts.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const counter_measure_map = { - invalid_image: 'Remove this image from the evaluation report', - missing_information: 'Remove this image from the evaluation report', - too_blurry_text: 'Remove this image from the evaluation report', - too_small_text: 'Remove this image from the evaluation report', - ocr_cannot_extract: 'Improve OCR', - wrong_feedback: 'Update revised result and re-calculate accuracy', - handwritten: 'Remove this image from the evaluation report', - other: 'other', -}; diff --git a/cope2n-fe/src/pages/reviews2/index.tsx b/cope2n-fe/src/pages/reviews2/index.tsx index 6204de3..07394d1 100644 --- a/cope2n-fe/src/pages/reviews2/index.tsx +++ b/cope2n-fe/src/pages/reviews2/index.tsx @@ -3,12 +3,12 @@ import { ArrowRightOutlined, CheckCircleOutlined, ClockCircleFilled, + CopyOutlined, FullscreenExitOutlined, FullscreenOutlined, } from '@ant-design/icons'; import { t } from '@lingui/macro'; import { Viewer } from '@react-pdf-viewer/core'; -import type { GetRef } from 'antd'; import { Button, DatePicker, @@ -20,22 +20,25 @@ import { notification, Select, Spin, - Table, Tag, } from 'antd'; -import React, { useContext, useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Lightbox from 'react-awesome-lightbox'; import 'react-awesome-lightbox/build/style.css'; import { useHotkeys } from 'react-hotkeys-hook'; import { baseURL } from 'request/api'; -import styled from 'styled-components'; // Import the styles import '@react-pdf-viewer/core/lib/styles/index.css'; import { badQualityReasonSubmit } from 'request'; import { normalizeData } from 'utils/field-value-process'; import { fetchAllRequests, fetchRequest } from './api'; -import { counter_measure_map } from './consts'; +import { + counter_measure_map, + REASON_BAD_QUALITY, + SOLUTION_BAD_QUALITY, + SUBSIDIARIES, +} from './const'; import FileCard from './FileCard'; const siderStyle: React.CSSProperties = { @@ -44,106 +47,6 @@ const siderStyle: React.CSSProperties = { flexBasis: 400, flexShrink: 0, }; - -const StyledTable = styled(Table)` - & .sbt-table-cell { - padding: 4px !important; - } -`; - -type InputRef = GetRef; -type FormInstance = GetRef>; - -const EditableContext = React.createContext | null>(null); - -interface Item { - key: string; - accuracy: number; - submitted: string; - revised: string; - action: string; -} - -interface EditableRowProps { - index: number; -} - -const EditableRow: React.FC = ({ index, ...props }) => { - const [form] = Form.useForm(); - return ( -
- - - -
- ); -}; - -interface EditableCellProps { - title: React.ReactNode; - editable: boolean; - children: React.ReactNode; - dataIndex: keyof Item; - record: Item; - handleSave: (record: Item) => void; -} - -const EditableCell: React.FC = ({ - title, - editable, - children, - dataIndex, - record, - handleSave, - ...restProps -}) => { - const [editing, setEditing] = useState(false); - const inputRef = useRef(null); - const form = useContext(EditableContext)!; - - useEffect(() => { - if (editing) { - inputRef.current!.focus(); - } - }, [editing]); - - const toggleEdit = () => { - setEditing(!editing); - form.setFieldsValue({ [dataIndex]: record[dataIndex] }); - }; - - const save = async () => { - try { - const values = await form.validateFields(); - - toggleEdit(); - handleSave({ ...record, ...values }); - } catch (errInfo) { - console.log('Save failed:', errInfo); - } - }; - - let childNode = children; - - if (editable) { - childNode = editing ? ( - - - - ) : ( -
- {children} -
- ); - } - - return {childNode}; -}; - // type EditableTableProps = Parameters[0]; const ReviewPage = () => { @@ -324,13 +227,6 @@ const ReviewPage = () => { }); }, []); - const components = { - body: { - row: EditableRow, - cell: EditableCell, - }, - }; - // "Key", "Accuracy", "Submitted", "Revised" interface DataType { key: string; @@ -407,159 +303,6 @@ const ReviewPage = () => { }); }; - const defaultColumns = [ - { - title: 'Key', - dataIndex: 'key', - key: 'key', - width: 200, - }, - { - title: 'Predicted', - dataIndex: 'predicted', - key: 'predicted', - render: (text) => { - if (!text) return {''}; - const displayedContent = text; - if (typeof displayedContent === 'string') { - return {displayedContent}; - } else if (typeof displayedContent === 'object') { - if (displayedContent.length === 0) { - return {''}; - } - // Set all empty values to "" - for (const key in displayedContent) { - if (!displayedContent[key]) { - displayedContent[key] = ''; - } - } - return ( - - {displayedContent.join(', ')} - - ); - } - return {displayedContent}; - }, - }, - { - title: 'Submitted', - dataIndex: 'submitted', - key: 'submitted', - render: (text) => { - if (!text) return {''}; - const displayedContent = text; - if (typeof displayedContent === 'string') { - return {displayedContent}; - } else if (typeof displayedContent === 'object') { - if (displayedContent.length === 0) { - return {''}; - } - // Set all empty values to "" - for (const key in displayedContent) { - if (!displayedContent[key]) { - displayedContent[key] = ''; - } - } - return ( - - {displayedContent.join(', ')} - - ); - } - return {displayedContent}; - }, - }, - { - title: ( -
- Revised   - - -
- ), - dataIndex: 'revised', - key: 'revised', - editable: true, - render: (text) => { - if (!text) return {''}; - const displayedContent = text; - if (typeof displayedContent === 'string') { - return {displayedContent}; - } else if (typeof displayedContent === 'object') { - if (displayedContent.length === 0) { - return {''}; - } - // Set all empty values to "" - for (const key in displayedContent) { - if (!displayedContent[key]) { - displayedContent[key] = ''; - } - } - return ( - - {displayedContent.join(', ')} - - ); - } - return {displayedContent}; - }, - }, - ]; - - const columns = defaultColumns.map((col) => { - if (!col.editable) { - return col; - } - return { - ...col, - onCell: (record: DataType) => ({ - record, - editable: col.key != 'request_id' && col.editable, - dataIndex: col.dataIndex, - title: col.title, - handleSave, - }), - }; - }); - // use left/right keys to navigate useHotkeys('left', gotoPreviousRequest); useHotkeys('right', gotoNextRequest); @@ -642,6 +385,7 @@ const ReviewPage = () => {
{ />
- {/* - - - */} - {/*
-

- {totalRequests - ? 'Request: ' + currentRequestIndex + '/' + totalRequests - : 'No Request. Adjust your search criteria to see more results.'} -

- {currentRequest && - (currentRequest['Is Reviewed'] ? ( - } - color='success' - style={{ padding: '4px 16px' }} - > - Reviewed - - ) : ( - } - color='warning' - style={{ padding: '4px 16px' }} - > - Not Reviewed - - ))} -
-
-
- - - { - if (pageIndexToGoto > totalRequests) { - message.error('RequestID is out of range.'); - return; - } - if (pageIndexToGoto < 1) { - message.error('RequestID is out of range.'); - return; - } - setCurrentRequestIndex(pageIndexToGoto); - loadCurrentRequest(pageIndexToGoto); - }} - > - Go to - - } - value={pageIndexToGoto} - onChange={(e) => { - setPageIndexToGoto(parseInt(e.target.value)); - }} - /> -
-
*/}
{dataSource?.map((data) => { return (
-

- {' '} - {data.key} -

+
+

+ {data.key} +

+
{ @@ -1337,18 +962,7 @@ const ReviewPage = () => {