From e51994958ee9f180678bbb6a7f9bfae5d87fba3e Mon Sep 17 00:00:00 2001 From: yagin <nd.hien1@samsung.com> Date: Thu, 5 Dec 2024 10:30:37 +0700 Subject: [PATCH] [yagin] add bad reason filter and fix response --- cope2n-fe/src/pages/reviews2/api.ts | 9 +- cope2n-fe/src/pages/reviews2/index.tsx | 148 ++++++++++++++++++------- 2 files changed, 118 insertions(+), 39 deletions(-) diff --git a/cope2n-fe/src/pages/reviews2/api.ts b/cope2n-fe/src/pages/reviews2/api.ts index 229ac6c..4f32ff9 100644 --- a/cope2n-fe/src/pages/reviews2/api.ts +++ b/cope2n-fe/src/pages/reviews2/api.ts @@ -10,6 +10,8 @@ export const fetchAllRequests = async ( filterFeedbackResult: string, filterPredictResult: string, filterReviewedResult: string, + filterBadReason: string, + filterOtherReason: string, page = 1, page_size = 20, max_accuracy = 100, @@ -42,6 +44,11 @@ export const fetchAllRequests = async ( if (filterReviewedResult) { filterStr += `reviewed_result=${filterReviewedResult}&`; } + if (filterBadReason === 'other' && filterOtherReason.trim()) { + filterStr += `bad_reason=${filterOtherReason}&`; + } else if(filterBadReason !== 'other') { + filterStr += `bad_reason=${filterBadReason}&`; + } // if (startDate && endDate) { filterStr += `start_date=${startDate}&end_date=${endDate}&`; @@ -105,7 +112,7 @@ export const fetchRequest = async (id: string) => { }); return await ( await response.json() - ).subscription_requests?.[0] || null; + ).subscription_requests?.[0]; }; export const addRecentRequest = ( diff --git a/cope2n-fe/src/pages/reviews2/index.tsx b/cope2n-fe/src/pages/reviews2/index.tsx index d66c5ef..94197a3 100644 --- a/cope2n-fe/src/pages/reviews2/index.tsx +++ b/cope2n-fe/src/pages/reviews2/index.tsx @@ -76,6 +76,9 @@ const ReviewPage = () => { const [filterFeedbackResult, setFilterFeedbackResult] = useState(''); const [filterPredictResult, setFilterPredictResult] = useState(''); const [filterReviewedResult, setFilterReviewedResult] = useState(''); + const [filterBadReason, setFilterBadReason] = useState('other'); + const [filterOtherReason, setFilterOtherReason] = useState(''); + // const [requests, setRequests] = useState([]); const [currentRequest, setCurrentRequest] = useState(null); const [currentRequestIndex, setCurrentRequestIndex] = useState(1); @@ -118,6 +121,8 @@ const ReviewPage = () => { filterFeedbackResult, filterPredictResult, filterReviewedResult, + filterBadReason, + filterOtherReason, 1, 1, filterAccuracy, @@ -125,7 +130,7 @@ const ReviewPage = () => { setTotalPages(data?.page?.total_requests); setHasNextRequest(1 < data?.page?.total_requests); const firstRequest = fetchRequest( - data?.subscription_requests[0].RequestID, + data?.subscription_requests?.[0]?.RequestID, ); firstRequest.then(async (data) => { if (data) setCurrentRequest(data); @@ -231,6 +236,8 @@ const ReviewPage = () => { filterFeedbackResult, filterPredictResult, filterReviewedResult, + filterBadReason, + filterOtherReason, requestIndex, 1, filterAccuracy, @@ -290,6 +297,8 @@ const ReviewPage = () => { filterFeedbackResult, filterPredictResult, filterReviewedResult, + filterBadReason, + filterOtherReason, 1, 1, filterAccuracy, @@ -919,31 +928,75 @@ const ReviewPage = () => { style={{ marginTop: 30, }} + layout="vertical" > - <Form.Item - name='dateRange' - label={t`Date (GMT+8)`} - rules={[ - { - required: true, - message: 'Please select a date range', - }, - ]} - style={{ - marginBottom: 24, - }} - > - <DatePicker.RangePicker - onChange={(date, dateString) => { - setFilterDateRange(dateString); - }} - style={{ width: 200 }} - /> - </Form.Item> - <div style={{ - marginTop: 10, + + display: 'flex', + justifyContent: 'space-between', + marginLeft: 0, + padding: 0, + }} + > + <Form.Item + name='dateRange' + label={t`Date (GMT+8)`} + rules={[ + { + required: true, + message: 'Please select a date range', + }, + ]} + style={{ + flex: 1, + }} + > + <DatePicker.RangePicker + onChange={(date, dateString) => { + setFilterDateRange(dateString); + }} + style={{ width: 300 }} + /> + </Form.Item> + <div style={{ + flex: 1, + }}> + <Form.Item + name='bad_reason' + label={t`Bad image reason`} + > + <Select + placeholder='Select a reason' + style={{ width: 300 }} + options={REASON_BAD_QUALITY} + value={filterBadReason} + defaultValue={filterBadReason} + onChange={setFilterBadReason} + /> + </Form.Item> + {filterBadReason === 'other' && ( + <Form.Item + name='other_reason' + style={{ + flex: 1, + }} + > + <Input + placeholder='Other reason' + value={filterOtherReason} + style={{ width: 300 }} + onChange={(e) => { + setFilterOtherReason(e.target.value); + }} + /> + </Form.Item> + )} + </div> + </div> + <div + style={{ + display: 'flex', justifyContent: 'space-between', marginLeft: 0, @@ -959,10 +1012,13 @@ const ReviewPage = () => { message: 'Please select a subsidiary', }, ]} + style={{ + flex: 1, + }} > <Select placeholder='Select a subsidiary' - style={{ width: 200 }} + style={{ width: 300 }} options={SUBSIDIARIES} value={filterSubsidiaries} defaultValue={filterSubsidiaries} @@ -978,8 +1034,12 @@ const ReviewPage = () => { message: 'Please select max accuracy', }, ]} + style={{ + flex: 1, + }} > <InputNumber + style={{ width: 300 }} min={1} max={100} defaultValue={filterAccuracy} @@ -989,7 +1049,7 @@ const ReviewPage = () => { </div> <div style={{ - marginTop: 10, + display: 'flex', justifyContent: 'space-between', marginLeft: 0, @@ -1005,9 +1065,12 @@ const ReviewPage = () => { message: 'Please select review status', }, ]} + style={{ + flex: 1, + }} > <Select - style={{ width: 200 }} + style={{ width: 300 }} options={[ { label: 'All', value: 'all' }, { label: 'Reviewed', value: 'reviewed' }, @@ -1027,10 +1090,10 @@ const ReviewPage = () => { message: 'Please select test status', }, ]} - style={{ marginLeft: 16 }} + style={{ flex: 1 }} > <Select - style={{ width: 200 }} + style={{ width: 300 }} options={[ { label: 'Include tests', value: 'true' }, { label: 'Exclude tests', value: 'false' }, @@ -1044,7 +1107,7 @@ const ReviewPage = () => { {/* add 4 more filter fields */} <div style={{ - marginTop: 10, + display: 'flex', justifyContent: 'space-between', marginLeft: 0, @@ -1054,16 +1117,13 @@ const ReviewPage = () => { <Form.Item name='doc_type' label={t`Only type`} - rules={[ - { - required: true, - message: 'Please select a document type', - }, - ]} + style={{ + flex: 1, + }} > <Select placeholder='Select a document type' - style={{ width: 200 }} + style={{ width: 300 }} options={DOCTYPE} value={filterDoctype} defaultValue={filterDoctype} @@ -1073,8 +1133,12 @@ const ReviewPage = () => { <Form.Item name='feedback_result' label={t`Feedback includes`} + style={{ + flex: 1, + }} > <Input + style={{ width: 300 }} defaultValue={filterFeedbackResult} onChange={(e) => setFilterFeedbackResult(e.target.value)} /> @@ -1082,7 +1146,7 @@ const ReviewPage = () => { </div> <div style={{ - marginTop: 10, + display: 'flex', justifyContent: 'space-between', marginLeft: 0, @@ -1092,17 +1156,25 @@ const ReviewPage = () => { <Form.Item name='predict_result' label={t`Predict includes`} + style={{ + flex: 1, + }} > <Input + style={{ width: 300 }} defaultValue={filterPredictResult} onChange={(e) => setFilterPredictResult(e.target.value)} /> </Form.Item> <Form.Item name='reviewed_result' - label={t`Review inculdes`} + label={t`Review includes`} + style={{ + flex: 1, + }} > <Input + style={{ width: 300 }} defaultValue={filterReviewedResult} onChange={(e) => setFilterReviewedResult(e.target.value)} />