Merge pull request #109 from SDSRV-IDP/fe/reviews-solution

submit solution

cope2n-fe/src/pages/reviews/consts.ts

@@ -0,0 +1,10 @@
+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',
+};

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

@@ -36,6 +36,7 @@ import '@react-pdf-viewer/core/lib/styles/index.css';
 
 import { badQualityReasonSubmit } from 'request';
 import { normalizeData } from 'utils/field-value-process';
+import { counter_measure_map } from './consts';
 
 const { Sider, Content } = Layout;
 const siderStyle: React.CSSProperties = {
@@ -301,6 +302,15 @@ const ReviewPage = () => {
   const [pageIndexToGoto, setPageIndexToGoto] = useState(1);
 
   const [reason, setReason] = useState('');
+  const [otherReason, setOtherReason] = useState('');
+  const [solution, setSolution] = useState('');
+  const [otherSolution, setOtherSolution] = useState('');
+
+  useEffect(() => {
+    if (reason) {
+      setSolution(counter_measure_map[reason]);
+    }
+  }, [reason]);
 
   const setAndLoadSelectedFile = async (requestData, index) => {
     setSelectedFileId(index);
@@ -1117,14 +1127,43 @@ const ReviewPage = () => {
         width={700}
         onOk={async () => {
           // call submit api
-          if (!reason) {
-            notification.warning({ message: 'Please select a reason' });
+          if (!reason || !solution) {
+            notification.warning({
+              message: 'Please select a reason or a solution',
+            });
           } else {
             const params = {
               request_id: currentRequest?.RequestID,
               request_image_id: selectedFileName.replace(/\.[^/.]+$/, ''),
             };
-            const res = await badQualityReasonSubmit(params, reason);
+
+            let submitReason = reason;
+            let submitSolution = solution;
+
+            if (reason === 'other') {
+              if (!otherReason) {
+                notification.warning({
+                  message: 'Please input other reason',
+                });
+                return;
+              }
+              submitReason = otherReason;
+            }
+            if (solution === 'other') {
+              if (!otherSolution) {
+                notification.warning({
+                  message: 'Please input other solution',
+                });
+                return;
+              }
+              submitSolution = otherSolution;
+            }
+
+            const res = await badQualityReasonSubmit(
+              params,
+              submitReason,
+              submitSolution,
+            );
 
             if (res.message) {
               notification.success({ message: 'Update reason success' });
@@ -1136,33 +1175,92 @@ const ReviewPage = () => {
           setIsReasonModalOpen(false);
         }}
       >
-        <Form
-          style={{
-            marginTop: 30,
-          }}
-        >
-          <Form.Item
-            name='reason'
-            label={t`Reason for bad quality:`}
+        <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+          <Form
             style={{
-              marginBottom: 10,
+              marginTop: 30,
             }}
           >
-            <Select
-              placeholder='Select a reason'
-              style={{ width: 200 }}
-              options={[
-                { 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: 'recheck', label: t`Recheck` },
-              ]}
-              onChange={setReason}
+            <Form.Item name='reason' label={t`Reason for bad quality:`}>
+              <Select
+                placeholder='Select a reason'
+                style={{ width: 200 }}
+                options={[
+                  { 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` },
+                ]}
+                onChange={setReason}
+                value={reason}
+              />
+            </Form.Item>
+          </Form>
+          {reason === 'other' && (
+            <Input
+              placeholder='Other reason'
+              value={otherReason}
+              onChange={(e) => {
+                setOtherReason(e.target.value);
+              }}
+              style={{
+                width: 200,
+                marginTop: 30,
+                marginBottom: 24,
+                marginLeft: 10,
+              }}
             />
-          </Form.Item>
-        </Form>
+          )}
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+          <Form>
+            <Form.Item name='reason' label={t`Solution:`}>
+              <span style={{ display: 'none' }}>
+                {counter_measure_map[reason]}
+              </span>
+              <Select
+                placeholder='Select a solution'
+                style={{ width: 200 }}
+                options={[
+                  {
+                    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` },
+                ]}
+                onChange={setSolution}
+                value={solution}
+                // defaultValue={solution}
+              />
+            </Form.Item>
+          </Form>
+          {solution === 'other' && (
+            <Input
+              placeholder='Other solution'
+              value={otherSolution}
+              onChange={(e) => {
+                setOtherSolution(e.target.value);
+              }}
+              style={{
+                width: 200,
+                marginBottom: 24,
+                marginLeft: 10,
+              }}
+            />
+          )}
+        </div>
       </Modal>
       {totalRequests > 0 && (
         <div

cope2n-fe/src/request/reviews.ts

@@ -9,8 +9,9 @@ type badQualityReasonSubmitParams = {
 export async function badQualityReasonSubmit(
   params: badQualityReasonSubmitParams,
   reason: string,
+  solution: string,
 ) {
-  const data = { reason };
+  const data = { reason, solution };
 
   try {
     const response = await API.post<{ message: string }>(