ui: new judge config (#533)

Co-authored-by: panda <panda_dtdyy@outlook.com>

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

@@ -0,0 +1,41 @@
+import { Tab, Tabs } from '@blueprintjs/core';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { i18n } from 'vj/utils';
+import ProblemConfigEditor from './ProblemConfigEditor';
+import ProblemConfigForm from './ProblemConfigForm';
+import { ProblemConfigTree } from './ProblemConfigTree';
+import { RootState } from './reducer';
+
+interface Props {
+  onSave: () => void
+}
+
+export default function ProblemConfig(props: Props) {
+  const [selected, setSelected] = React.useState('basic');
+  const valid = useSelector((state: RootState) => state.config.__valid);
+  const errors = useSelector((state: RootState) => state.config.__errors, (a, b) => JSON.stringify(a) === JSON.stringify(b));
+
+  function save() {
+    // eslint-disable-next-line
+    if (!valid && !confirm('Errors detected in the config. Still save?')) return;
+    props.onSave();
+  }
+
+  return (<>
+    <div className="row">
+      <div className="medium-4 columns">
+        <ProblemConfigEditor />
+      </div>
+      <div className="medium-8 columns">
+        <Tabs onChange={(t) => (t !== 'errors' && setSelected(t.toString()))} selectedTabId={valid ? selected : 'errors'}>
+          <Tab id="basic" disabled={!valid} title="Basic" panel={<ProblemConfigForm />} />
+          <Tab id="subtasks" disabled={!valid} title="Subtasks" panel={<ProblemConfigTree />} />
+          <Tab id="errors" disabled={valid} title={errors.length ? `Errors(${errors.length})` : 'No Errors'} panel={
+            <div>{errors.map((i) => (<pre key={i}>{i}</pre>))}</div>} />
+        </Tabs>
+      </div>
+    </div>
+    <button className="rounded primary button" onClick={save}>{i18n('Submit')}</button>
+  </>);
+}