ui: judge_config: fix extra_files config (#355)

packages/ui-default/components/problemconfig/ProblemConfigForm.tsx

@@ -36,9 +36,17 @@ function FileIOConfig() {
 
 function ExtraFilesConfig() {
   const Files = useSelector((state: RootState) => state.testdata);
-  const userExtraFiles = useSelector((state: RootState) => state.config.user_extra_files);
-  const judgeExtraFiles = useSelector((state: RootState) => state.config.judge_extra_files);
+  const userExtraFiles = useSelector((state: RootState) => state.config.user_extra_files) || [];
+  const judgeExtraFiles = useSelector((state: RootState) => state.config.judge_extra_files) || [];
   const dispatch = useDispatch();
+  const userRef = React.useRef<any>();
+  const judgeRef = React.useRef<any>();
+  React.useEffect(() => {
+    userRef.current.setSelectedKeys(userExtraFiles);
+  }, [JSON.stringify(userExtraFiles)]);
+  React.useEffect(() => {
+    judgeRef.current.setSelectedKeys(judgeExtraFiles);
+  }, [JSON.stringify(judgeExtraFiles)]);
   return (
     <FormItem columns={12} label="ExtraFilesTabs" disableLabel>
       <Tabs id="ExtraFilesTabs">
@@ -47,8 +55,9 @@ function ExtraFilesConfig() {
           title={i18n('user_extra_files')}
           panel={(
             <FileSelectAutoComplete
+              ref={userRef}
               data={Files}
-              selectedKeys={userExtraFiles || []}
+              selectedKeys={userExtraFiles}
               onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'user_extra_files', value: val.split(',') })}
               multi
             />
@@ -59,8 +68,9 @@ function ExtraFilesConfig() {
           title={i18n('judge_extra_files')}
           panel={(
             <FileSelectAutoComplete
+              ref={judgeRef}
               data={Files}
-              selectedKeys={judgeExtraFiles || []}
+              selectedKeys={judgeExtraFiles}
               onChange={(val) => dispatch({ type: 'CONFIG_FORM_UPDATE', key: 'judge_extra_files', value: val.split(',') })}
               multi
             />

packages/ui-default/components/problemconfig/SubtaskTable.tsx

@@ -163,12 +163,22 @@ function GlobalTaskConfig() {
 
 export function TaskConfig() {
   const len = useSelector((state: RootState) => state.config.subtasks?.length);
+  const dispatch = useDispatch();
   return (
     <FormItem columns={12} label="Task Settings">
       <div className="row">
         <GlobalTaskConfig />
         <FormItem columns={12} label="TestCases" disableLabel>
-          {len && [...Array(len).keys()].map((i) => <SubtasksTable index={i} key={i} />)}
+          {len > 0
+            ? [...Array(len).keys()].map((i) => <SubtasksTable index={i} key={i} />)
+            : (
+              <>
+                <span>Subtasks # </span>
+                <a onClick={() => dispatch({ type: 'CONFIG_SUBTASK_UPDATE', id: 0, key: 'add' })}>
+                  <span className="icon icon-add"></span>
+                </a>
+              </>
+            )}
         </FormItem>
       </div>
     </FormItem>

packages/ui-default/components/problemconfig/TestCasesTable.tsx

@@ -121,7 +121,7 @@ export function CasesTable({ index }) {
             </a>
           </td>
         </tr>
-        {len && [...Array(len).keys()].map((i) => <TestCaseEntry index={index} subindex={i} key={i} />)}
+        {len > 0 && [...Array(len).keys()].map((i) => <TestCaseEntry index={index} subindex={i} key={i} />)}
       </tbody>
     </table>
   );

packages/ui-default/components/problemconfig/reducer/config.ts

@@ -53,8 +53,9 @@ export default function reducer(state = { type: 'default', __loaded: false } as
         } else if (action.key === 'cases-delete') {
           subsubtasks.cases = subsubtasks.cases.filter((k, v) => v !== action.value);
         }
-      } else if (action.key === 'add') subtasks.push({ cases: [] });
-      else if (action.key === 'delete') return { ...state, subtasks: subtasks.filter((k, v) => v !== action.id) };
+      } else if (action.key === 'add') {
+        return { ...state, subtasks: [...subtasks, { time: state.time || '1s', memory: state.memory || '256m', cases: [] }] };
+      } else if (action.key === 'delete') return { ...state, subtasks: subtasks.filter((k, v) => v !== action.id) };
       else {
         if (action.value === '' || (action.key === 'if' && action.value.join('') === '')) delete subsubtasks[action.key];
         else subsubtasks[action.key] = action.value;