utils&ui: move public utils & add upload

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

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import i18n from 'vj/utils/i18n';
 import { isEqual } from 'lodash';
 import { Switch, Tab, Tabs } from '@blueprintjs/core';
-import type { TestCaseConfig } from 'hydrooj/src/interface';
+import type { SubtaskConfig, TestCaseConfig } from 'hydrooj/src/interface';
 import type { RootState } from './reducer/index';
 import CustomSelectAutoComplete from '../autocomplete/components/CustomSelectAutoComplete';
 
@@ -13,7 +13,8 @@ const SelectValue = {
   task_type: ['min', 'max', 'sum'],
 };
 
-const eq = (a: TestCaseConfig[], b: TestCaseConfig[]) => isEqual(a, b);
+const eq = (a: SubtaskConfig[], b: SubtaskConfig[]) => isEqual(a, b);
+const eq1 = (a: TestCaseConfig, b: TestCaseConfig) => isEqual(a, b);
 
 function FormItem({
   columns, label, children, helpText = '', disableLabel = false, ...props
@@ -185,14 +186,90 @@ function ExtraFilesConfig() {
   );
 }
 
+function CasesSubCasesTable({ index, subindex }) {
+  const subcases = useSelector((state: RootState) => (index === -1
+    ? state.config.cases[subindex] : state.config.subtasks[index].cases[subindex]), eq1);
+  const Files = useSelector((state: RootState) => state.testdata);
+  const dispatch = useDispatch();
+  const dispatcher = (casesKey: string): React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement> => (ev) => {
+    dispatch({
+      type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE',
+      id: index,
+      key: 'cases-edit',
+      casesId: subindex,
+      casesKey,
+      value: ev.currentTarget.value,
+    });
+  };
+  const dispatcher1 = (casesKey: string): React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement> => (val) => {
+    dispatch({
+      type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE',
+      id: index,
+      key: 'cases-edit',
+      casesId: subindex,
+      casesKey,
+      value: val,
+    });
+  };
+  return (
+    <tr>
+      {
+        index === -1 && (
+          <>
+            <td>
+              <input
+                value={subcases.time || ''}
+                onChange={dispatcher('time')}
+                className="textbox"
+              />
+            </td>
+            <td>
+              <input
+                value={subcases.memory || ''}
+                onChange={dispatcher('memory')}
+                className="textbox"
+              />
+            </td>
+          </>
+        )
+      }
+      <td>
+        <CustomSelectAutoComplete
+          width="100%"
+          data={Files}
+          selectedKeys={[subcases.input]}
+          onChange={dispatcher1('input')}
+        />
+      </td>
+      <td>
+        <CustomSelectAutoComplete
+          width="100%"
+          data={Files}
+          selectedKeys={[subcases.output]}
+          onChange={dispatcher1('output')}
+        />
+      </td>
+      <td>
+        <a
+          onClick={() => dispatch({
+            type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE', id: index, key: 'cases-delete', value: subindex,
+          })}
+        ><span className="icon icon-close"></span>
+        </a>
+      </td>
+    </tr>
+  );
+}
+
 function CasesTable({ index }) {
   const [time, setTime] = useState('');
   const [memory, setMemory] = useState('');
   const [input, setInput] = useState('');
   const [output, setOutput] = useState('');
   const cases = useSelector((state: RootState) => (index === -1 ? state.config.cases : state.config.subtasks[index].cases), eq);
-  console.log(cases);
   const Files = useSelector((state: RootState) => state.testdata);
+  const inputRef = useRef(null);
+  const outputRef = useRef(null);
   const dispatch = useDispatch();
   return (
     <table className="data-table">
@@ -223,29 +300,29 @@ function CasesTable({ index }) {
           <th>
             {i18n('Input')}<br />
             <CustomSelectAutoComplete
+              ref={inputRef}
               width="100%"
               data={Files}
-              selectedKeys={[input]}
               onChange={setInput}
             />
           </th>
           <th>
             {i18n('Output')}<br />
             <CustomSelectAutoComplete
+              ref={outputRef}
               width="100%"
               data={Files}
-              selectedKeys={[output]}
               onChange={setOutput}
             />
           </th>
-          <th>
+          <th className="col--operation">
             <span className="icon icon-wrench"></span><br />
             <a
               onClick={() => {
                 setTime('');
                 setMemory('');
-                setInput('');
-                setOutput('');
+                inputRef?.current.setQuery('');
+                outputRef?.current.setQuery('');
                 dispatch({
                   type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE',
                   id: index,
@@ -255,34 +332,13 @@ function CasesTable({ index }) {
                   } : { input, output },
                 });
               }}
-            ><span className="icon icon-add">{i18n('Add')}</span>
+            ><span className="icon icon-add" />
             </a>
           </th>
         </tr>
       </thead>
       <tbody>
-        {cases && cases.map((k, v) => (
-          <tr key={JSON.stringify(k)}>
-            {
-              index === -1 && (
-                <>
-                  <td>{k.time}</td>
-                  <td>{k.memory}</td>
-                </>
-              )
-            }
-            <td>{k.input}</td>
-            <td>{k.output}</td>
-            <td>
-              <a
-                onClick={() => dispatch({
-                  type: index === -1 ? 'CONFIG_CASES_UPDATE' : 'CONFIG_SUBTASK_UPDATE', id: index, key: 'cases-delete', value: v,
-                })}
-              ><span className="icon icon-close"></span>
-              </a>
-            </td>
-          </tr>
-        ))}
+        {cases && cases.map((k, v) => <CasesSubCasesTable index={index} subindex={v} key={JSON.stringify(k)} />)}
       </tbody>
     </table>
   );
@@ -298,7 +354,7 @@ function SubtasksTable({ data, index }) {
   };
   return (
     <div key={index}>
-      <span>Subtasks #{index} </span>
+      <span>Subtasks #{index + 1} </span>
       <a onClick={() => { dispatch({ type: 'CONFIG_SUBTASK_UPDATE', id: index, key: 'add' }); }}><span className="icon icon-add"></span></a>
       <a
         style={index === 0 ? { display: 'none' } : {}}
@@ -376,7 +432,7 @@ function SubtasksTable({ data, index }) {
   );
 }
 
-function TaskConfig() {
+function TaskConfig({ onAutoLoad }) {
   const subtasks = useSelector((state: RootState) => state.config.subtasks, eq);
   const cases = useSelector((state: RootState) => state.config.cases, eq);
   const dispatch = useDispatch();
@@ -399,9 +455,8 @@ function TaskConfig() {
               ? subtasks && <ul>{subtasks.map((k, v) => <SubtasksTable data={k} index={v} key={k.id} />)}</ul>
               || cases && (<CasesTable index={-1} />)
               : (
-                <a
-                  onClick={() => dispatch({ type: 'CONFIG_AUTOCASES_UPDATE' })}
-                ><span className="icon icon-settings"> {i18n('Auto Read Tasks')}</span>
+                <a onClick={() => onAutoLoad()}>
+                  <span className="icon icon-settings"> {i18n('Auto Read Tasks')}</span>
                 </a>
               )
           }
@@ -443,11 +498,11 @@ function LangConfig() {
   );
 }
 
-export default function ProblemConfigForm() {
+export default function ProblemConfigForm({ onAutoLoad }) {
   return (
     <div className="row">
       <BasicInfo />
-      <TaskConfig />
+      <TaskConfig onAutoLoad={onAutoLoad} />
       <ExtraFilesConfig />
       <LangConfig />
     </div>

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

@@ -1,13 +1,11 @@
 import yaml from 'js-yaml';
 import type { ProblemConfigFile } from 'hydrooj/src/interface';
-
-let autocases = { subtasks: [] };
+import { cloneDeep } from 'lodash';
 
 export default function reducer(state = { type: 'default' } as ProblemConfigFile, action): ProblemConfigFile {
   switch (action.type) {
   case 'CONFIG_LOAD_FULFILLED': {
     // TODO set yaml schema
-    autocases = action.payload.autocases;
     return { ...state, ...yaml.load(action.payload.config) as object };
   }
   case 'CONFIG_FORM_UPDATE': {
@@ -30,7 +28,9 @@ export default function reducer(state = { type: 'default' } as ProblemConfigFile
   }
   case 'CONFIG_AUTOCASES_UPDATE': {
     const next = { ...state };
-    if (autocases.subtasks.length === 1) {
+    const autocases = action.value;
+    if (autocases.subtasks.length === 0) next.cases = [];
+    else if (autocases.subtasks.length === 1) {
       next.score = autocases.subtasks[0].score;
       next.cases = [];
       autocases.subtasks[0].cases.map((i) => next.cases.push({
@@ -50,21 +50,32 @@ export default function reducer(state = { type: 'default' } as ProblemConfigFile
     return next;
   }
   case 'CONFIG_CASES_UPDATE': {
-    const next = { ...state };
-    if (action.key === 'cases-add') next.cases.push(action.value);
-    else if (action.key === 'cases-delete') {
-      next.cases = next.cases.filter((k, v) => v !== action.value);
+    if (action.key === 'cases-add') return { ...state, cases: [...state.cases, action.value] };
+    if (action.key === 'cases-edit') {
+      const cases = cloneDeep(state.cases);
+      cases[action.casesId][action.casesKey] = action.value;
+      return { ...state, cases };
+    } if (action.key === 'cases-delete') {
+      return { ...state, cases: state.cases.filter((k, v) => v !== action.value) };
     }
-    return next;
+    return state;
   }
   case 'CONFIG_SUBTASK_UPDATE': {
+    if (action.key.split('-')[0] === 'cases') {
+      const subtasks = cloneDeep(state.subtasks);
+      const subsubtasks = cloneDeep(state.subtasks[action.id]);
+      if (action.key === 'cases-add') subsubtasks.cases.push(action.value);
+      else if (action.key === 'cases-edit') subsubtasks.cases[action.casesId][action.casesKey] = action.value;
+      else if (action.key === 'cases-delete') {
+        subsubtasks.cases = subsubtasks[action.id].cases.filter((k, v) => v !== action.value);
+      }
+      subtasks[action.id] = subsubtasks;
+      return { ...state, subtasks };
+    }
     const next = { ...state };
     if (action.key === 'add') next.subtasks.splice(action.id, 0, { id: 0 });
     else if (action.key === 'delete') delete next.subtasks[action.key];
-    else if (action.key === 'cases-add') next.subtasks[action.id].cases.push(action.value);
-    else if (action.key === 'cases-delete') {
-      next.subtasks[action.id].cases = next.subtasks[action.id].cases.filter((k, v) => v !== action.value);
-    } else next.subtasks[action.id][action.key] = action.value;
+    else next.subtasks[action.id][action.key] = action.value;
     return next;
   }
   default:

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

@@ -4,11 +4,11 @@ export default function reducer(state = [], action) {
     return state.concat(action.payload.testdata);
   }
   case 'CONFIG_DELETE_TESTDATA': {
-    return state.filter((i) => i.name !== action.payload.name);
+    const next = state.filter((i) => i.name !== action.value[0]);
+    return next;
   }
   case 'CONFIG_ADD_TESTDATA': {
-    state.push(action.payload);
-    return state;
+    return state.concat([action.value]);
   }
   default:
     return state;