feat: add criteria status color; increase message length (#2382)

rolling-scopes · Dec 20, 2023 · fe29032 · fe29032
1 parent 2d77c56
commit fe29032
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 27 deletions.
diff --git a/.../modules/CrossCheck/components/SolutionReview/MessageSendingPanel/MessageSendingPanel.tsx b/.../modules/CrossCheck/components/SolutionReview/MessageSendingPanel/MessageSendingPanel.tsx
@@ -99,7 +99,7 @@ function MessageSendingPanel(props: MessageSendingPanelProps) {
                       ref={inputRef}
                       rows={3}
                       showCount
-                      maxLength={512}
+                      maxLength={1024}
                       placeholder="Leave a message"
                       style={{ maxWidth: 512 }}
                     />

diff --git a/client/src/modules/CrossCheck/components/criteria/CrossCheckCriteria.tsx b/client/src/modules/CrossCheck/components/criteria/CrossCheckCriteria.tsx
@@ -1,6 +1,7 @@
 import { Typography } from 'antd';
 import { TaskType } from '../CrossCheckCriteriaForm';
 import { CrossCheckCriteriaDataDto } from 'api';
+import { getCriteriaStatusColor } from 'modules/CrossCheck';
 
 const { Text, Title } = Typography;
 
@@ -18,36 +19,43 @@ export function CrossCheckCriteria({ criteria }: Props) {
     <>
       {criteria
         .filter(criteriaItem => criteriaItem.type.toLocaleLowerCase() === TaskType.Subtask)
-        .map(criteriaItem => (
-          <div key={criteriaItem.key} style={{ border: '1px solid #F5F5F5', margin: '24px 0', paddingBottom: '14px' }}>
+        .map(criteriaItem => {
+          const backgroundColor = getCriteriaStatusColor(criteriaItem.point ?? 0, criteriaItem.max);
+
+          return (
             <div
-              style={{
-                display: 'block',
-                fontSize: '14px',
-                background: '#FAFAFA',
-                borderBottom: '1px solid #F5F5F5',
-                padding: '14px 12px',
-                marginBottom: '14px',
-              }}
+              key={criteriaItem.key}
+              style={{ border: '1px solid #F5F5F5', margin: '24px 0', paddingBottom: '14px', backgroundColor }}
             >
-              <Text>{criteriaItem.text}</Text>
-            </div>
+              <div
+                style={{
+                  display: 'block',
+                  fontSize: '14px',
+                  background: '#FAFAFA',
+                  borderBottom: '1px solid #F5F5F5',
+                  padding: '14px 12px',
+                  marginBottom: '14px',
+                }}
+              >
+                <Text>{criteriaItem.text}</Text>
+              </div>
 
-            {criteriaItem.textComment && (
-              <div style={{ padding: '0 12px', fontSize: '16px' }}>
-                <Text strong={true}>Comment:</Text>
-                {criteriaItem.textComment?.split('\n').map((textLine, k) => (
-                  <p key={k} style={{ margin: '0px 0 5px 0' }}>
-                    {textLine}
-                  </p>
-                ))}
+              {criteriaItem.textComment && (
+                <div style={{ padding: '0 12px', fontSize: '16px' }}>
+                  <Text strong={true}>Comment:</Text>
+                  {criteriaItem.textComment?.split('\n').map((textLine, k) => (
+                    <p key={k} style={{ margin: '0px 0 5px 0' }}>
+                      {textLine}
+                    </p>
+                  ))}
+                </div>
+              )}
+              <div style={{ fontSize: '16px', padding: '0 12px' }}>
+                <Text strong={true}>Points for criteria: {`${criteriaItem.point ?? 0}/${criteriaItem.max}`}</Text>
               </div>
-            )}
-            <div style={{ fontSize: '16px', padding: '0 12px' }}>
-              <Text strong={true}>Points for criteria: {`${criteriaItem.point ?? 0}/${criteriaItem.max}`}</Text>
             </div>
-          </div>
-        ))}
+          );
+        })}
       {penaltyData?.length ? (
         <div style={{ marginTop: '20px' }}>
           <Title level={4}>Penalty</Title>

diff --git a/client/src/modules/CrossCheck/components/criteria/SubtaskCriteria.tsx b/client/src/modules/CrossCheck/components/criteria/SubtaskCriteria.tsx
@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import { CrossCheckCriteriaDataDto } from 'api';
+import { getCriteriaStatusColor } from 'modules/CrossCheck';
 
 const { TextArea } = Input;
 const { Text } = Typography;
@@ -16,6 +17,7 @@ export function SubtaskCriteria({ subtaskData, updateCriteriaData }: SubtaskCrit
   const maxScore = subtaskData.max;
   const comment = subtaskData.textComment;
   const criteriaScore = subtaskData.point;
+  const backgroundColor = getCriteriaStatusColor(criteriaScore ?? 0, maxScore);
 
   const updateSubtaskData = ({ textComment, point }: { textComment?: string; point?: number | null }) => {
     const updatedEntry = {
@@ -35,7 +37,7 @@ export function SubtaskCriteria({ subtaskData, updateCriteriaData }: SubtaskCrit
   }, [criteriaScore, comment, maxScore]);
 
   return (
-    <div style={{ border: '1px solid #F5F5F5', margin: '24px 0' }}>
+    <div style={{ border: '1px solid #F5F5F5', margin: '24px 0', backgroundColor }}>
       <div
         style={{
           background: '#FAFAFA',

diff --git a/client/src/modules/CrossCheck/index.tsx b/client/src/modules/CrossCheck/index.tsx
@@ -3,3 +3,4 @@ export { EditableTable } from 'modules/CrossCheck/EditableTableForCrossCheck';
 export { UploadCriteriaJSON } from 'modules/CrossCheck/UploadCriteriaJSON';
 export { AddCriteriaForCrossCheck } from 'modules/CrossCheck/AddCriteriaForCrossCheck';
 export { ExportJSONButton } from 'modules/CrossCheck/ExportJSONButton';
+export { getCriteriaStatusColor } from 'modules/CrossCheck/utils/getCriteriaStatusColor';
diff --git a/client/src/modules/CrossCheck/utils/getCriteriaStatusColor.ts b/client/src/modules/CrossCheck/utils/getCriteriaStatusColor.ts
@@ -0,0 +1,23 @@
+const colors = ['transparent', 'rgba(255, 0, 0, .05)', 'rgba(0, 255, 0, .05)', 'rgba(255, 255, 0, .05)'] as const;
+
+export function getCriteriaStatusColor(score: number, maxScore?: number) {
+  const [transparent, red, green, yellow] = colors;
+
+  if (!maxScore) {
+    return transparent;
+  }
+
+  if (score === 0) {
+    return red;
+  }
+
+  if (score < maxScore) {
+    return yellow;
+  }
+
+  if (score === maxScore) {
+    return green;
+  }
+
+  return transparent;
+}